Merge branch 'main' into merx-1336-order-metadata-filtering

.changeset/mean-chicken-turn.md

@@ -0,0 +1,6 @@
+---
+"saleor-dashboard": patch
+---
+
+Product data is now properly displayed in webhook dry run modal.
+Add warning alert in webhook dry run modal for webhooks that don't have a valid object ids.

.changeset/orange-pugs-tie.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Batch of sentry errors has been fixed 

package.json

@@ -21,7 +21,7 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
-    "@editorjs/editorjs": "^2.24.3",
+    "@editorjs/editorjs": "^2.30.7",
     "@editorjs/header": "^2.6.2",
     "@editorjs/list": "^1.7.0",
     "@editorjs/paragraph": "^2.8.0",

src/auth/hooks/useAuthProvider.ts

@@ -173,9 +173,19 @@ export function useAuthProvider({ intl, notify, apolloClient }: UseAuthProviderO
     }
   };
   const handleRequestExternalLogin = async (pluginId: string, input: RequestExternalLoginInput) => {
+    let stringifyInput: string;
+
+    try {
+      stringifyInput = JSON.stringify(input);
+    } catch (error) {
+      setErrors(["externalLoginError"]);
+
+      return;
+    }
+
     const result = await getExternalAuthUrl({
       pluginId,
-      input: JSON.stringify(input),
+      input: stringifyInput,
     });
 
     return result?.data?.externalAuthenticationUrl;

src/components/AddressEdit/useAddressValidation.test.ts

@@ -1,12 +1,13 @@
-import { useAddressValidationRulesQuery } from "@dashboard/graphql";
+import { AddressValidationRulesQuery, useAddressValidationRulesQuery } from "@dashboard/graphql";
 import { renderHook } from "@testing-library/react-hooks";
 
-import { useAddressValidation } from "./useAddressValidation";
+import { selectRules, useAddressValidation } from "./useAddressValidation";
 
 jest.mock("@dashboard/graphql", () => ({
   CountryCode: jest.requireActual("@dashboard/graphql").CountryCode,
   useAddressValidationRulesQuery: jest.fn(),
 }));
+
 describe("useAddressValidation", () => {
   it("skips loading validation rules when country is not provided", () => {
     // Arrange
@@ -139,3 +140,54 @@ describe("useAddressValidation", () => {
     expect(displayValue).toEqual("");
   });
 });
+
+describe("selectRules", () => {
+  it("should return select rules when available", () => {
+    // Arrange
+    const data = {
+      addressValidationRules: {
+        countryAreaChoices: [
+          { raw: "AL", verbose: "Alabama" },
+          { raw: "AN", verbose: "Ancona" },
+        ],
+        allowedFields: ["country"],
+      },
+    } as AddressValidationRulesQuery;
+
+    // Act
+    const rules = selectRules(data);
+
+    // Assert
+    expect(rules).toEqual({
+      countryAreaChoices: [
+        { raw: "AL", verbose: "Alabama" },
+        { raw: "AN", verbose: "Ancona" },
+      ],
+      allowedFields: ["country"],
+    });
+  });
+
+  it("should return empty array when addressValidationRules is not provided", () => {
+    // Arrange
+    const data = {
+      addressValidationRules: null,
+    } as AddressValidationRulesQuery;
+
+    // Act
+    const rules = selectRules(data);
+
+    // Assert
+    expect(rules).toEqual({ countryAreaChoices: [], allowedFields: [] });
+  });
+
+  it("should return empty array when data is not provided", () => {
+    // Arrange
+    const data = undefined;
+
+    // Act
+    const rules = selectRules(data);
+
+    // Assert
+    expect(rules).toEqual({ countryAreaChoices: [], allowedFields: [] });
+  });
+});

src/components/AddressEdit/useAddressValidation.ts

@@ -18,8 +18,15 @@ const prepareChoices = (values: ChoiceValue[]): AreaChoices[] =>
     value: v.verbose,
     raw: v.raw,
   }));
-const selectRules = (data: AddressValidationRulesQuery) =>
-  data ? data.addressValidationRules : { countryAreaChoices: [], allowedFields: [] };
+
+export const selectRules = (data: AddressValidationRulesQuery | null | undefined) => {
+  if (!data || !data.addressValidationRules) {
+    return { countryAreaChoices: [], allowedFields: [] };
+  }
+
+  return data.addressValidationRules;
+};
+
 const useValidationRules = (country?: string) => {
   const countryCode = CountryCode[country];
   const { data, loading } = useAddressValidationRulesQuery({
@@ -30,7 +37,7 @@ const useValidationRules = (country?: string) => {
   return { data, loading };
 };
 const useAreas = (data: AddressValidationRulesQuery) => {
-  const rawChoices = selectRules(data).countryAreaChoices;
+  const rawChoices = selectRules(data)?.countryAreaChoices ?? [];
   const choices = prepareChoices(rawChoices);
 
   return choices;

src/components/Datagrid/customCells/PillCell.tsx

@@ -81,12 +81,15 @@ export const pillCellRenderer = (): CustomRenderer<PillCell> => ({
     const tileHeight = textHeight * 1.2;
 
     // Draw the tile
-    ctx.fillStyle = base;
-    ctx.strokeStyle = border;
-    ctx.beginPath();
-    ctx.roundRect(x + 10, y + height / 2 - tileHeight / 2, tileWidth, tileHeight, 5);
-    ctx.stroke();
-    ctx.fill();
+    if ("roundRect" in ctx) {
+      ctx.fillStyle = base;
+      ctx.strokeStyle = border;
+      ctx.beginPath();
+      ctx.roundRect(x + 10, y + height / 2 - tileHeight / 2, tileWidth, tileHeight, 5);
+      ctx.stroke();
+      ctx.fill();
+    }
+
     // Draw the text
     ctx.fillStyle = text;
     ctx.fillText(label, x + 15, y + height / 2 + getMiddleCenterBias(ctx, theme));

src/components/DryRun/utils.ts

@@ -3,7 +3,7 @@ import { getWebhookTypes } from "@dashboard/custom-apps/components/WebhookEvents
 import { WebhookEventTypeAsyncEnum } from "@dashboard/graphql";
 import { InlineFragmentNode, ObjectFieldNode, parse, visit } from "graphql";
 
-import { DocumentMap, ExcludedDocumentMap } from "../DryRunItemsList/utils";
+import { DocumentMap, ExcludedDocumentKeys } from "../DryRunItemsList/utils";
 
 const getEventsFromQuery = (query: string) => {
   if (query.length === 0) {
@@ -56,7 +56,7 @@ const checkEventPresence = (event: string) => {
     object => !availableObjects.includes(object),
   );
 
-  Object.keys(ExcludedDocumentMap).forEach(
+  ExcludedDocumentKeys.forEach(
     object => !excludedObjects.includes(object) && excludedObjects.push(object),
   );
 

src/components/DryRunItemsList/utils.ts

@@ -8,14 +8,12 @@ import {
   AttributeListQueryVariables,
   CategoryDetailsQuery,
   CategoryDetailsQueryVariables,
-  ChannelListDocument,
   CheckoutListDocument,
   CheckoutListQuery,
   CheckoutListQueryVariables,
   CollectionListDocument,
   CollectionListQuery,
   CollectionListQueryVariables,
-  CustomerAddressesDocument,
   CustomerAddressesQuery,
   CustomerAddressesQueryVariables,
   CustomerDetailsQuery,
@@ -29,7 +27,6 @@ import {
   MenuListDocument,
   MenuListQuery,
   MenuListQueryVariables,
-  OrderFulfillDataDocument,
   OrderFulfillDataQuery,
   OrderFulfillDataQueryVariables,
   OrderListDocument,
@@ -41,7 +38,6 @@ import {
   ProductListDocument,
   ProductListQuery,
   ProductListQueryVariables,
-  ProductVariantListDocument,
   ProductVariantListQuery,
   ProductVariantListQueryVariables,
   RootCategoriesDocument,
@@ -162,13 +158,6 @@ export const DocumentMap: Record<string, Document> = {
     displayedAttribute: "email",
     // TODO inverted name
   },
-
-  INVOICE: {
-    document: OrderListDocument,
-    variables: DefaultVariables,
-    collection: "orders",
-    displayedAttribute: "number",
-  },
   MENU: {
     document: MenuListDocument,
     variables: DefaultVariables,
@@ -189,6 +178,8 @@ export const DocumentMap: Record<string, Document> = {
     variables: {
       first: 100,
       hasChannel: true,
+      includeCategories: false,
+      includeCollections: false,
     },
     displayedAttribute: "name",
   },
@@ -228,35 +219,29 @@ export const DocumentMap: Record<string, Document> = {
 
 // Documents which require parent object or can't be handled ATM
 //
-export const ExcludedDocumentMap: Record<string, Document> = {
-  ADDRESS: {
-    document: CustomerAddressesDocument,
-    variables: {
-      // USER ID REQUIRED
-      first: 100,
-    },
-  },
+export const ExcludedDocumentKeys = [
+  // USER ID REQUIRED
+  "ADDRESS",
   // it's not a countable collection
-  CHANNEL: {
-    document: ChannelListDocument,
-    variables: {},
-  },
-  FULFILLMENT: {
-    document: OrderFulfillDataDocument,
-    variables: {
-      // ORDER ID REQUIRED
-      first: 100,
-    },
-  },
-  PRODUCT_VARIANT: {
-    document: ProductVariantListDocument,
-    variables: {
-      // PRODUCT ID REQUIRED
-      first: 100,
-    },
-  },
-  TRANSLATION: {
-    document: null,
-    variables: {},
-  },
-};
+  "CHANNEL",
+  // ORDER ID REQUIRED
+  "FULFILLMENT",
+  // PRODUCT ID REQUIRED
+  "PRODUCT_VARIANT",
+  "PRODUCT_EXPORT_COMPLETED",
+  "PRODUCT_MEDIA_CREATED",
+  "PRODUCT_MEDIA_DELETED",
+  "PRODUCT_MEDIA_UPDATED",
+  "PRODUCT_VARIANT_BACK_IN_STOCK",
+  "PRODUCT_VARIANT_CREATED",
+  "PRODUCT_VARIANT_DELETED",
+  "PRODUCT_VARIANT_METADATA_UPDATED",
+  "PRODUCT_VARIANT_OUT_OF_STOCK",
+  "PRODUCT_VARIANT_STOCK_UPDATED",
+  "PRODUCT_VARIANT_UPDATED",
+  "VOUCHER_CODES_CREATED",
+  "VOUCHER_CODES_DELETED",
+  "VOUCHER_CODE_EXPORT_COMPLETED",
+  "ORDER_BULK_CREATED",
+  "TRANSLATION",
+];

src/components/SortableTree/hooks/useAnnouncement.ts

@@ -58,7 +58,7 @@ export const useAnnouncement = <T extends DataTypePlaceholder>({
 
       if (!previousItem && nextItem) {
         announcement = `${activeId} was ${movedVerb} before ${nextItem.id}.`;
-      } else if (projected.depth > previousItem.depth) {
+      } else if (projected?.depth > previousItem?.depth) {
         announcement = `${activeId} was ${nestedVerb} under ${previousItem.id}.`;
       } else {
         const previousSibling = findPreviousSibling(projected, previousItem, sortedItems);