Reordering products in collection (#5327)

* Reordering products in collection

* Fix collectionId

* Fix quering

* Tests, translations

* Tests, translations

* Tests, translations

* Fix pagination state, use collectionId

* Fix pagination state, use collectionId

* D&d

* Update tests

* Update tests

* Update tests

* Update translations

* Update tests

* Fix initial load

* Cr

* Empty image

* Lint

* Display pagination when there are no elements

* Add mutation workaround

* Test fix

* Test fix

.changeset/four-lions-happen.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Now you can re-order products within the collection.

locale/defaultMessages.json

@@ -5488,6 +5488,9 @@
     "context": "card update success alert title",
     "string": "Successfully updated card balance"
   },
+  "XAvER/": {
+    "string": "Product reordered"
+  },
   "XB2Jj9": {
     "context": "create app button",
     "string": "Create App"
@@ -7897,6 +7900,9 @@
     "context": "label",
     "string": "External app"
   },
+  "nABmvC": {
+    "string": "No. of rows"
+  },
   "nBzIBG": {
     "string": "Delete permission group"
   },

package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.17",
-    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@editorjs/editorjs": "^2.30.7",

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -1,8 +1,7 @@
 // @ts-strict-ignore
 import { ChannelCollectionData } from "@dashboard/channels/utils";
-import { collectionListPath } from "@dashboard/collections/urls";
+import { collectionListPath, CollectionUrlQueryParams } from "@dashboard/collections/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
-import { CardSpacer } from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
@@ -21,14 +20,13 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { ChannelProps, ListActions, PageListProps } from "../../../types";
+import { ChannelProps, PageListProps } from "../../../types";
 import CollectionDetails from "../CollectionDetails/CollectionDetails";
 import { CollectionImage } from "../CollectionImage/CollectionImage";
 import CollectionProducts from "../CollectionProducts/CollectionProducts";
 import CollectionUpdateForm, { CollectionUpdateData } from "./form";
 
-export interface CollectionDetailsPageProps extends PageListProps, ListActions, ChannelProps {
-  onAdd: () => void;
+export interface CollectionDetailsPageProps extends PageListProps, ChannelProps {
   channelsCount: number;
   channelsErrors: CollectionChannelListingErrorFragment[];
   collection: CollectionDetailsQuery["collection"];
@@ -38,10 +36,10 @@ export interface CollectionDetailsPageProps extends PageListProps, ListActions,
   onCollectionRemove: () => void;
   onImageDelete: () => void;
   onImageUpload: (file: File) => void;
-  onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
   onSubmit: (data: CollectionUpdateData) => SubmitPromise;
   onChannelsChange: (data: ChannelCollectionData[]) => void;
   openChannelsModal: () => void;
+  params: CollectionUrlQueryParams;
 }
 
 const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
@@ -80,23 +78,20 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
           <TopNav href={collectionListBackLink} title={collection?.name} />
           <DetailPageLayout.Content>
             <CollectionDetails data={data} disabled={disabled} errors={errors} onChange={change} />
-            <CardSpacer />
             <CollectionImage
               data={data}
               image={collection?.backgroundImage}
               onImageDelete={onImageDelete}
               onImageUpload={onImageUpload}
               onChange={change}
             />
-            <CardSpacer />
             <Metadata data={data} onChange={handlers.changeMetadata} />
-            <CardSpacer />
             <CollectionProducts
               disabled={disabled}
               collection={collection}
+              currentChannels={currentChannels}
               {...collectionProductsProps}
             />
-            <CardSpacer />
             <SeoForm
               description={data.seoDescription}
               disabled={disabled}