strict-typed Scalars: JSON and JSONString. (#6490)

Author: lkostrowski

.changeset/some-wolves-wish.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Set strict-typed Scalars: JSON and JSONString. Previously Codegen generated `any` types, making them insecure in the codebase. Now they are `unknown` and `string`. Now it's explicit that JSON must be narrowed (e.g. with Zod schema) and JSONString must be first parsed.

codegen-main.ts

@@ -39,8 +39,8 @@ const config: CodegenConfig = {
           // Decimal: "number",
           // Minute: "number",
           // GenericScalar: "JSONValue",
-          // JSON: "JSONValue",
-          // JSONString: "string",
+          JSON: "unknown",
+          JSONString: "string",
           // Metadata: "Record<string, string>",
           // PositiveDecimal: "number",
           // Upload: "unknown",

src/discounts/models/transformRule.ts

@@ -1,3 +1,4 @@
+import { type CataloguePredicateAPI, type OrderPredicateAPI } from "@dashboard/discounts/types";
 import {
   type PromotionRuleDetailsFragment,
   type PromotionRuleInput,
@@ -35,27 +36,39 @@ export const mapAPIRuleToForm = (
   }
 
   if (type === PromotionTypeEnum.CATALOGUE) {
+    /**
+     * TODO: Saleor stores predicate as JSON, which for Dashboard is "unknown".
+     * We need to create a Zod schema that will parse it to known shape. If parsing fails, Sentry should be triggered.
+     * Currently code implicitly casts, which should be ok, but is not entirely safe
+     */
+    const predicate = rule.cataloguePredicate as CataloguePredicateAPI;
+
     const catalogueConditions = prepareCatalogueRuleConditions(
-      rule.cataloguePredicate,
+      predicate,
       labelMaps.conditionsValues,
     );
 
     return {
       ...baseRuleData,
       conditions: catalogueConditions,
-      hasPredicateNestedConditions: hasPredicateNestedConditions(rule.cataloguePredicate),
+      hasPredicateNestedConditions: hasPredicateNestedConditions(predicate),
     };
   }
 
   if (type === PromotionTypeEnum.ORDER) {
-    const orderconditions = prepareOrderConditions(
-      rule.orderPredicate?.discountedObjectPredicate ?? {},
-    );
+    /**
+     * TODO: Saleor stores predicate as JSON, which for Dashboard is "unknown".
+     * We need to create a Zod schema that will parse it to known shape. If parsing fails, Sentry should be triggered.
+     * Currently code implicitly casts, which should be ok, but is not entirely safe
+     */
+    const predicate = rule.orderPredicate as OrderPredicateAPI;
+
+    const orderconditions = prepareOrderConditions(predicate?.discountedObjectPredicate ?? {});
 
     return {
       ...baseRuleData,
       conditions: orderconditions,
-      hasPredicateNestedConditions: hasPredicateNestedConditions(rule.orderPredicate),
+      hasPredicateNestedConditions: hasPredicateNestedConditions(predicate),
     };
   }
 

src/discounts/views/DiscountDetails/hooks/useFetchConditionsOptionsDetails.ts

@@ -52,7 +52,14 @@ export function getAllConditionsOptionsIdsToFetch(
   }
 
   const allConditionsIds = data.promotion.rules.reduce((acc, rule) => {
-    reduceConditionsLabels(rule.cataloguePredicate, acc);
+    /**
+     * TODO: Saleor stores predicate as JSON, which for Dashboard is "unknown".
+     * We need to create a Zod schema that will parse it to known shape. If parsing fails, Sentry should be triggered.
+     * Currently code implicitly casts, which should be ok, but is not entirely safe
+     */
+    const predicate = rule.cataloguePredicate as CataloguePredicateAPI;
+
+    reduceConditionsLabels(predicate, acc);
 
     return acc;
   }, initAllConditionsIds);

src/graphql/types.generated.ts

@@ -320,7 +320,8 @@ const ProductUpdatePage = ({
       const newProductDescription = productDescriptionField.value;
 
       // cache may be empty if editor was not used before sending event to app
-      const productDescriptionWithFallback = descriptionCache.current ?? product.description;
+      const productDescriptionWithFallback =
+        descriptionCache.current ?? (JSON.parse(product.description) as OutputData);
 
       try {
         const parsedEditorJs = JSON.parse(newProductDescription) as OutputData;

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -16,14 +16,14 @@ describe("Product handlers", () => {
           id: "1",
           url: "",
           type: ProductMediaType.IMAGE,
-          oembedData: null,
+          oembedData: "",
           __typename: "ProductMedia",
         },
         {
           id: "2",
           url: "",
           type: ProductMediaType.IMAGE,
-          oembedData: null,
+          oembedData: "",
           __typename: "ProductMedia",
         },
       ],
@@ -47,7 +47,7 @@ describe("Product handlers", () => {
           id: "3",
           url: "",
           type: ProductMediaType.IMAGE,
-          oembedData: null,
+          oembedData: "",
           __typename: "ProductMedia",
         },
       ],
@@ -79,21 +79,21 @@ describe("Product handlers", () => {
           id: "1",
           url: "",
           type: ProductMediaType.IMAGE,
-          oembedData: null,
+          oembedData: "",
           __typename: "ProductMedia",
         },
         {
           id: "2",
           url: "",
           type: ProductMediaType.IMAGE,
-          oembedData: null,
+          oembedData: "",
           __typename: "ProductMedia",
         },
         {
           id: "3",
           url: "",
           type: ProductMediaType.IMAGE,
-          oembedData: null,
+          oembedData: "",
           __typename: "ProductMedia",
         },
       ],
@@ -125,14 +125,14 @@ describe("Product handlers", () => {
           id: "1",
           url: "",
           type: ProductMediaType.IMAGE,
-          oembedData: null,
+          oembedData: "",
           __typename: "ProductMedia",
         },
         {
           id: "2",
           url: "",
           type: ProductMediaType.IMAGE,
-          oembedData: null,
+          oembedData: "",
           __typename: "ProductMedia",
         },
       ],

src/products/utils/handlers.test.ts

@@ -31,7 +31,7 @@ export interface TranslationField<T extends string = string> {
   id?: string;
   displayName: string;
   name: T;
-  translation: string;
+  translation: string | null;
   type: TranslationFieldType;
   value: string;
 }

src/translations/types.ts

@@ -75,7 +75,7 @@ export const mapAttributeValuesToTranslationFields = (
     name: attrVal.name,
     translation: attrVal.translation?.richText || attrVal.translation?.plainText || null,
     type: attrVal.richText ? "rich" : "short",
-    value: attrVal.richText || attrVal.plainText,
+    value: attrVal.richText || attrVal.plainText || "",
   })) || [];
 
 export const getAttributeValueTranslationsInputData = (