Add local frontend validation of app manifest fields

.changeset/dry-berries-leave.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Added local-frontend validation of a subset of App Manifest fields during installation. Installing apps will be now more liberal, some errors initially thrown on the API level will be now warnings that don't block app installation.

jest.config.js

@@ -22,7 +22,7 @@ const config = {
   roots: ["<rootDir>/src/"],
   testRegex: ".*\\.test\\.tsx?$",
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
-  transformIgnorePatterns: ["/node_modules/(?!chroma-js/.*)"],
+  transformIgnorePatterns: ["/node_modules/(?!(chroma-js|zod)/.*)"],
   moduleNameMapper: {
     "\\.(css)$": "identity-obj-proxy",
     "^react-intl$": "<rootDir>/__mocks__/react-intl.ts",

locale/defaultMessages.json

@@ -5566,6 +5566,9 @@
     "context": "helper text",
     "string": "All items refunded"
   },
+  "Wj5TbN": {
+    "string": "Issues"
+  },
   "Wk00wL": {
     "string": "Join the open source community"
   },
@@ -9942,6 +9945,9 @@
     "context": "draft orders section name",
     "string": "Drafts"
   },
+  "yyJcyW": {
+    "string": "App manifest contains issues. You can still install it, but it may not work properly. See technical details below:"
+  },
   "yzYXW/": {
     "context": "header, dialog",
     "string": "Create New Warehouse"

package.json

@@ -133,7 +133,8 @@
     "url-join": "^4.0.1",
     "use-react-router": "^1.0.7",
     "uuid": "^9.0.1",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zod-validation-error": "3.5.3"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.1",
@@ -150,7 +151,7 @@
     "@graphql-codegen/typescript-react-apollo": "^3.2.5",
     "@graphql-eslint/eslint-plugin": "^4.4.0",
     "@playwright/test": "^1.47.0",
-    "@saleor/app-sdk": "1.1.0",
+    "@saleor/app-sdk": "1.3.1",
     "@sentry/cli": "^2.33.0",
     "@storybook/react-vite": "9.0.18",
     "@swc/jest": "^0.2.26",

src/extensions/domain/app-extension-manifest-available-mounts.ts

@@ -0,0 +1,59 @@
+import { z } from "zod";
+
+const PRODUCT_MOUNTS = [
+  "PRODUCT_OVERVIEW_CREATE",
+  "PRODUCT_OVERVIEW_MORE_ACTIONS",
+  "PRODUCT_DETAILS_MORE_ACTIONS",
+  "PRODUCT_DETAILS_WIDGETS",
+] as const;
+
+const NAVIGATION_MOUNTS = [
+  "NAVIGATION_CATALOG",
+  "NAVIGATION_ORDERS",
+  "NAVIGATION_CUSTOMERS",
+  "NAVIGATION_DISCOUNTS",
+  "NAVIGATION_TRANSLATIONS",
+  "NAVIGATION_PAGES",
+] as const;
+
+const ORDER_MOUNTS = [
+  "ORDER_DETAILS_MORE_ACTIONS",
+  "ORDER_OVERVIEW_CREATE",
+  "ORDER_DETAILS_WIDGETS",
+  "DRAFT_ORDER_DETAILS_WIDGETS",
+  "ORDER_OVERVIEW_MORE_ACTIONS",
+] as const;
+
+const CUSTOMER_MOUNTS = [
+  "CUSTOMER_OVERVIEW_CREATE",
+  "CUSTOMER_OVERVIEW_MORE_ACTIONS",
+  "CUSTOMER_DETAILS_MORE_ACTIONS",
+  "CUSTOMER_DETAILS_WIDGETS",
+] as const;
+
+const COLLECTION_MOUNTS = ["COLLECTION_DETAILS_WIDGETS"] as const;
+
+const GIFT_CARD_MOUNTS = ["GIFT_CARD_DETAILS_WIDGETS"] as const;
+
+const VOUCHER_MOUNTS = ["VOUCHER_DETAILS_WIDGETS"] as const;
+
+export const ALL_APP_EXTENSION_MOUNTS = z.enum([
+  ...PRODUCT_MOUNTS,
+  ...NAVIGATION_MOUNTS,
+  ...ORDER_MOUNTS,
+  ...COLLECTION_MOUNTS,
+  ...GIFT_CARD_MOUNTS,
+  ...VOUCHER_MOUNTS,
+  ...CUSTOMER_MOUNTS,
+] as const);
+
+// Subset of mounts available for WIDGET target
+export const WIDGET_AVAILABLE_MOUNTS = [
+  "ORDER_DETAILS_WIDGETS",
+  "PRODUCT_DETAILS_WIDGETS",
+  "VOUCHER_DETAILS_WIDGETS",
+  "DRAFT_ORDER_DETAILS_WIDGETS",
+  "GIFT_CARD_DETAILS_WIDGETS",
+  "CUSTOMER_DETAILS_WIDGETS",
+  "COLLECTION_DETAILS_WIDGETS",
+] as const;