Fix: Dashboard crashing when entering variants (#4719)

* Fix undefined channel listing array

* Add changeset

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>

.changeset/strange-ladybugs-judge.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Add check if channel listing array is undefined before call filter on it to prevent Dashboard crash

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx

@@ -8,31 +8,31 @@ import React from "react";
 
 import { ProductChannelListing } from "./../types";
 import { ChannelsListItem } from "./ChannelsListItem";
+import { useFilteredChannelListing } from "./useFilteredChannelListing";
 import CardContainer from "./VariantDetailsChannelsAvailabilityCardContainer";
 
 interface AvailabilityCardProps {
   allAvailableListings: FormsetData<
     ChannelPriceAndPreorderData,
     IChannelPriceAndPreorderArgs
   >;
-  productChannelListings: ProductChannelListing;
+  productChannelListings: ProductChannelListing | undefined;
 }
 
 export const AvailabilityCard: React.FC<AvailabilityCardProps> = ({
   allAvailableListings,
   productChannelListings,
   children,
 }) => {
+  const filteredListings = useFilteredChannelListing({
+    allAvailableListings,
+    channelListing: productChannelListings,
+  });
+
   if (allAvailableListings.length === 0) {
-    return <CardContainer cardTitle={children}>{}</CardContainer>;
+    return <CardContainer cardTitle={children}>{null}</CardContainer>;
   }
 
-  const listingIds = allAvailableListings.map(lst => lst.id);
-  const filteredListings: ProductChannelListing =
-    productChannelListings?.filter((channel: ProductChannelListing[0]) =>
-      listingIds.includes(channel.channel.id),
-    );
-
   return (
     <CardContainer cardTitle={children}>
       {filteredListings.map((listing: ProductChannelListing[0]) => (

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/useFilteredChannelListing.test.ts

@@ -0,0 +1,40 @@
+import { useFilteredChannelListing } from "./useFilteredChannelListing";
+
+describe("useFilteredChannelListing", () => {
+  it("should return empty array if channelListing is null or undefined", () => {
+    // Arrange
+    const allAvailableListings = [{ id: "1" }, { id: "2" }];
+    const channelListing = null;
+
+    // Act
+    const result = useFilteredChannelListing({
+      allAvailableListings,
+      channelListing,
+    });
+
+    // Assert
+    expect(result).toEqual([]);
+  });
+
+  it("should return array with filtered channel listings", () => {
+    // Arrange
+    const allAvailableListings = [{ id: "1" }, { id: "2" }, { id: "3" }];
+    const channelListing = [
+      { channel: { id: "1" } },
+      { channel: { id: "3" } },
+      { channel: { id: "4" } },
+    ];
+
+    // Act
+    const result = useFilteredChannelListing({
+      allAvailableListings,
+      channelListing,
+    });
+
+    // Assert
+    expect(result).toEqual([
+      { channel: { id: "1" } },
+      { channel: { id: "3" } },
+    ]);
+  });
+});

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/useFilteredChannelListing.ts

@@ -0,0 +1,23 @@
+interface ChannelListing {
+  channel: {
+    id: string;
+  };
+}
+
+export const useFilteredChannelListing = ({
+  channelListing,
+  allAvailableListings,
+}: {
+  allAvailableListings: Array<{ id: string }>;
+  channelListing: ChannelListing[] | null | undefined;
+}) => {
+  if (!channelListing) {
+    return [];
+  }
+
+  const listingIds = allAvailableListings.map(lst => lst.id);
+
+  return channelListing.filter(channel =>
+    listingIds.includes(channel.channel.id),
+  );
+};