Fix errors caused by can not read property of undefined (#5174)

* Fix errors from sentry

* Add changeset

.changeset/quiet-roses-compete.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix a group of errors caused by reading property of undefined

src/components/ConditionalFilter/FilterElement/ConditionValue.test.ts

@@ -0,0 +1,33 @@
+import { slugFromConditionValue } from "./ConditionValue";
+
+describe("slugFromConditionValue", () => {
+  it("should return string when input is string", () => {
+    const result = slugFromConditionValue("test");
+
+    expect(result).toBe("test");
+  });
+
+  it("should return slug when input is ItemOption", () => {
+    const result = slugFromConditionValue({ label: "test", value: "test", slug: "test" });
+
+    expect(result).toBe("test");
+  });
+
+  it("should return slug when input is ItemOption array", () => {
+    const result = slugFromConditionValue([{ label: "test", value: "test", slug: "test" }]);
+
+    expect(result).toEqual(["test"]);
+  });
+
+  it("should return slug when input is tuple", () => {
+    const result = slugFromConditionValue(["test", "test"]);
+
+    expect(result).toEqual(["test", "test"]);
+  });
+
+  it("should return empty string when input is undefined", () => {
+    const result = slugFromConditionValue(undefined);
+
+    expect(result).toBe("");
+  });
+});

src/components/ConditionalFilter/FilterElement/ConditionValue.ts

@@ -17,7 +17,7 @@ export const isItemOptionArray = (x: ConditionValue): x is ItemOption[] =>
 export const isTuple = (x: ConditionValue): x is [string, string] =>
   Array.isArray(x) && x.length === 2 && (x as string[]).every(y => typeof y === "string");
 
-export const slugFromConditionValue = (rawEntry: ConditionValue): string | string[] => {
+export const slugFromConditionValue = (rawEntry?: ConditionValue): string | string[] => {
   if (typeof rawEntry === "string") {
     return rawEntry;
   }
@@ -26,5 +26,5 @@ export const slugFromConditionValue = (rawEntry: ConditionValue): string | strin
     return rawEntry.map(el => (typeof el === "string" ? el : el.slug));
   }
 
-  return rawEntry.slug;
+  return rawEntry?.slug ?? "";
 };

src/components/SortableTree/hooks/useAnnouncement.ts

@@ -50,14 +50,13 @@ export const useAnnouncement = <T extends DataTypePlaceholder>({
       const activeIndex = clonedItems.findIndex(({ id }) => id === activeId);
       const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
       const previousItem = sortedItems[overIndex - 1];
+      const nextItem = sortedItems[overIndex + 1];
 
       let announcement;
       const movedVerb = eventName === "onDragEnd" ? "dropped" : "moved";
       const nestedVerb = eventName === "onDragEnd" ? "dropped" : "nested";
 
-      if (!previousItem) {
-        const nextItem = sortedItems[overIndex + 1];
-
+      if (!previousItem && nextItem) {
         announcement = `${activeId} was ${movedVerb} before ${nextItem.id}.`;
       } else if (projected.depth > previousItem.depth) {
         announcement = `${activeId} was ${nestedVerb} under ${previousItem.id}.`;

src/orders/components/OrderListDatagrid/datagrid.test.ts

@@ -55,6 +55,14 @@ describe("getCustomerCellContent", () => {
     // Act
     const result = getCustomerCellContent(data);
 
+    // Assert
+    expect(result.data).toEqual("-");
+    expect(result.displayData).toEqual("-");
+  });
+  it("should return - when no data", () => {
+    // Arrange & Act
+    const result = getCustomerCellContent(undefined);
+
     // Assert
     expect(result.data).toEqual("-");
     expect(result.displayData).toEqual("-");

src/orders/components/OrderListDatagrid/datagrid.ts

@@ -116,7 +116,7 @@ export function getCustomerCellContent(
     );
   }
 
-  if (rowData.userEmail) {
+  if (rowData?.userEmail) {
     return readonlyTextCell(rowData.userEmail);
   }
 

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -43,6 +43,7 @@ import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { maybe } from "@dashboard/misc";
 import ProductExternalMediaDialog from "@dashboard/products/components/ProductExternalMediaDialog";
 import { ProductOrganization } from "@dashboard/products/components/ProductOrganization/ProductOrganization";
+import { mapByChannel } from "@dashboard/products/components/ProductUpdatePage/utils";
 import { defaultGraphiQLQuery } from "@dashboard/products/queries";
 import { productImageUrl, productListUrl } from "@dashboard/products/urls";
 import { ChoiceWithAncestors, getChoicesWithAncestors } from "@dashboard/products/utils/utils";
@@ -268,16 +269,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
           onChange: handlers.changeChannels,
           openModal: () => setChannelPickerOpen(true),
         };
-        const listings = data.channels.updateChannels?.map<ChannelData>(listing => {
-          const channel = channels?.find(ac => ac.id === listing.channelId);
 
-          return {
-            ...channel,
-            ...listing,
-            id: listing.channelId,
-            currency: channel.currencyCode,
-          };
-        });
+        const byChannel = mapByChannel(channels);
+        const listings = data.channels.updateChannels?.map<ChannelData>(byChannel);
+
         const entityType = getReferenceAttributeEntityTypeFromAttribute(
           assignReferencesAttributeId,
           data.attributes,

src/products/components/ProductUpdatePage/utils.test.ts

@@ -1,6 +1,7 @@
 import { Locale } from "@dashboard/components/Locale";
+import { ChannelFragment, ProductChannelListingAddInput } from "@dashboard/graphql";
 
-import { parseCurrency } from "./utils";
+import { mapByChannel, parseCurrency } from "./utils";
 
 describe("parseCurrency", () => {
   it("rounds down to 3 decimals in 3 digit currency - EN locale (dot)", () => {
@@ -70,3 +71,47 @@ describe("parseCurrency", () => {
     expect(parsed).toBe(2123);
   });
 });
+
+describe("mapByChannel", () => {
+  it("should map listing to channel data", () => {
+    // Arrange
+    const channels = [
+      { id: "1", currencyCode: "USD" },
+      { id: "2", currencyCode: "EUR" },
+    ] as ChannelFragment[];
+    const listing: ProductChannelListingAddInput = { channelId: "2" };
+    const mapFunction = mapByChannel(channels);
+
+    // Act
+    const result = mapFunction(listing);
+
+    // Assert
+    expect(result).toEqual({ id: "2", currency: "EUR", currencyCode: "EUR", channelId: "2" });
+  });
+
+  it("should map listing to channel data when no channels", () => {
+    // Arrange
+    const channels = [] as ChannelFragment[];
+    const listing: ProductChannelListingAddInput = { channelId: "3" };
+    const mapFunction = mapByChannel(channels);
+
+    // Act
+    const result = mapFunction(listing);
+
+    // Assert
+    expect(result).toEqual({ channelId: "3", currency: undefined, id: "3" });
+  });
+
+  it("should map listing to channel data when channels undefined", () => {
+    // Arrange
+    const channels = undefined;
+    const listing: ProductChannelListingAddInput = { channelId: "3" };
+    const mapFunction = mapByChannel(channels);
+
+    // Act
+    const result = mapFunction(listing);
+
+    // Assert
+    expect(result).toEqual({ channelId: "3", currency: undefined, id: "3" });
+  });
+});

src/products/components/ProductUpdatePage/utils.ts

@@ -1,10 +1,15 @@
 // @ts-strict-ignore
+import { ChannelData } from "@dashboard/channels/utils";
 import {
   DatagridChange,
   DatagridChangeOpts,
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
 import { Locale } from "@dashboard/components/Locale";
-import { ProductFragment } from "@dashboard/graphql";
+import {
+  ChannelFragment,
+  ProductChannelListingAddInput,
+  ProductFragment,
+} from "@dashboard/graphql";
 
 const getFractionDigits = (locale: Locale, currency: string) => {
   try {
@@ -74,3 +79,16 @@ function getChannelCurrencyCodeById(
 
   return "";
 }
+
+export function mapByChannel(channels?: ChannelFragment[]) {
+  return (listing: ProductChannelListingAddInput): ChannelData => {
+    const channel = channels?.find(ac => ac.id === listing.channelId);
+
+    return {
+      ...channel,
+      ...listing,
+      id: listing.channelId,
+      currency: channel?.currencyCode,
+    };
+  };
+}

src/products/utils/validation.test.ts

@@ -90,7 +90,6 @@ describe("validateProductCreateData", () => {
     // Assert
     expect(errors).toEqual([]);
   });
-
   it("returns 'required' errors on product variant form if price is not provided", () => {
     const intl = useIntl();
 
@@ -132,4 +131,13 @@ describe("validateProductCreateData", () => {
       message: "This field cannot be blank",
     });
   });
+  it("returns empty errors when data is undefined", () => {
+    // Arrange
+    const data = undefined;
+    // Act
+    const errors = validateProductCreateData(data);
+
+    // Assert
+    expect(errors).toEqual([]);
+  });
 });

src/products/utils/validation.ts

@@ -22,9 +22,13 @@ const createRequiredError = (
   attributes: [],
 });
 
-export const validateProductCreateData = (data: ProductCreateData) => {
+export const validateProductCreateData = (data?: ProductCreateData) => {
   let errors: ProductErrorWithAttributesFragment[] = [];
 
+  if (!data) {
+    return errors;
+  }
+
   if (!data.productType) {
     errors = [...errors, createRequiredError("productType")];
   }

src/utils/handlers/metadataUpdateHelpers.test.ts

@@ -0,0 +1,24 @@
+import { areMetadataArraysEqual } from "./metadataUpdateHelpers";
+
+describe("metadataUpdateHelpers", () => {
+  describe("areMetadataArraysEqual", () => {
+    it("should return false if before or after is undefined", () => {
+      expect(areMetadataArraysEqual(undefined, [])).toBe(false);
+      expect(areMetadataArraysEqual([], undefined)).toBe(false);
+    });
+
+    it("should return true if arrays are equal", () => {
+      const before = [{ key: "key1", value: "value1" }];
+      const after = [{ key: "key1", value: "value1" }];
+
+      expect(areMetadataArraysEqual(before, after)).toBe(true);
+    });
+
+    it("should return false if arrays are not equal", () => {
+      const before = [{ key: "key1", value: "value1" }];
+      const after = [{ key: "key2", value: "value2" }];
+
+      expect(areMetadataArraysEqual(before, after)).toBe(false);
+    });
+  });
+});

src/utils/handlers/metadataUpdateHelpers.ts

@@ -10,5 +10,13 @@ const removeTypename = ({ __typename, ...input }: GenericMetadataInput) => ({
   ...input,
 });
 
-export const areMetadataArraysEqual = (before: GenericMetadataInput[], after: MetadataInput[]) =>
-  isEqual(sortBy(before.map(removeTypename)), sortBy(after));
+export const areMetadataArraysEqual = (
+  before?: GenericMetadataInput[],
+  after?: MetadataInput[],
+) => {
+  if (!before || !after) {
+    return false;
+  }
+
+  return isEqual(sortBy(before.map(removeTypename)), sortBy(after));
+};