Fix handle assigning product to collection when no products (#5302)

* Fix assign product to collection

* Add changeset

.changeset/violet-tigers-sneeze.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Assigning product to collection no more cause error

src/collections/utils.test.ts

@@ -0,0 +1,38 @@
+import { SearchProductsQuery } from "@dashboard/graphql";
+
+import { getProductsFromSearchResults } from "./utils";
+
+describe("getProductsFromSearchResults", () => {
+  it("should return empty array when searchResults is undefined", () => {
+    // Arrange
+    const searchResults = undefined;
+
+    // Act
+    const result = getProductsFromSearchResults(searchResults);
+
+    // Assert
+    expect(result).toEqual([]);
+  });
+
+  it("should return products from search results", () => {
+    // Arrange
+    const searchResults = {
+      search: {
+        edges: [
+          {
+            node: { id: 1 },
+          },
+          {
+            node: { id: 2 },
+          },
+        ],
+      },
+    } as unknown as SearchProductsQuery;
+
+    // Act
+    const result = getProductsFromSearchResults(searchResults);
+
+    // Assert
+    expect(result).toEqual([{ id: 1 }, { id: 2 }]);
+  });
+});

src/collections/utils.ts

@@ -1,5 +1,6 @@
 import { ChannelCollectionData } from "@dashboard/channels/utils";
 import { CollectionDetailsQuery, SearchProductsQuery } from "@dashboard/graphql";
+import { mapEdgesToItems } from "@dashboard/utils/maps";
 
 export const createChannelsChangeHandler =
   (
@@ -36,3 +37,11 @@ export const getAssignedProductIdsToCollection = (
     .map(e => ({ [e.node.id]: true }))
     .reduce((p, c) => ({ ...p, ...c }), {});
 };
+
+export const getProductsFromSearchResults = (searchResults: SearchProductsQuery | undefined) => {
+  if (!searchResults?.search) {
+    return [];
+  }
+
+  return mapEdgesToItems(searchResults.search)?.filter(suggestedProduct => suggestedProduct.id);
+};

src/collections/views/CollectionDetails.tsx

@@ -33,7 +33,6 @@ import useProductSearch from "@dashboard/searches/useProductSearch";
 import { arrayDiff } from "@dashboard/utils/arrays";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@dashboard/utils/handlers/metadataUpdateHandler";
-import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { getParsedDataForJsonStringField } from "@dashboard/utils/richText/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -47,7 +46,7 @@ import {
   CollectionUrlDialog,
   CollectionUrlQueryParams,
 } from "../urls";
-import { getAssignedProductIdsToCollection } from "../utils";
+import { getAssignedProductIdsToCollection, getProductsFromSearchResults } from "../utils";
 import { COLLECTION_DETAILS_FORM_ID } from "./consts";
 
 interface CollectionDetailsProps {
@@ -342,9 +341,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params
         loading={result.loading}
         onClose={closeModal}
         onSubmit={handleAssignationChange}
-        products={mapEdgesToItems(result?.data?.search)?.filter(
-          suggestedProduct => suggestedProduct.id,
-        )}
+        products={getProductsFromSearchResults(result?.data)}
       />
 
       <ActionDialog