From 96d8aa101cea7f22d5b4fa634919c70c0eb1e8fd Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 26 Oct 2020 11:29:41 +0100
Subject: [PATCH 1/7] Add infinite scroll to product selection

---
 src/collections/views/CollectionDetails.tsx   |   9 +-
 .../AssignProductDialog.tsx                   | 103 +++++++++++-------
 src/discounts/views/SaleDetails.tsx           |   8 ++
 src/discounts/views/VoucherDetails.tsx        |   6 +
 4 files changed, 85 insertions(+), 41 deletions(-)

diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx
index 9ca6d0798..1ff2e1862 100644
--- a/src/collections/views/CollectionDetails.tsx
+++ b/src/collections/views/CollectionDetails.tsx
@@ -60,8 +60,11 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   );
   const paginate = usePaginator();
   const intl = useIntl();
-  const { search, result } = useProductSearch({
-    variables: DEFAULT_INITIAL_SEARCH_DATA
+  const { search, loadMore, result } = useProductSearch({
+    variables: {
+      ...DEFAULT_INITIAL_SEARCH_DATA,
+      first: 100
+    }
   });
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
@@ -296,8 +299,10 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
             />
             <AssignProductDialog
               confirmButtonState={assignProductOpts.status}
+              hasMore={result.data?.search?.pageInfo.hasNextPage}
               open={params.action === "assign"}
               onFetch={search}
+              onFetchMore={loadMore}
               loading={result.loading}
               onClose={closeModal}
               onSubmit={products =>
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 92a2a9a0c..0f0409c25 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -19,7 +19,9 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
+import { FetchMoreProps } from "@saleor/types";
 import React from "react";
+import InfiniteScroll from "react-infinite-scroller";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "../Checkbox";
@@ -30,7 +32,7 @@ export interface FormData {
 }
 
 const useStyles = makeStyles(
-  {
+  theme => ({
     avatar: {
       "&&:first-child": {
         paddingLeft: 0
@@ -44,17 +46,25 @@ const useStyles = makeStyles(
     colName: {
       paddingLeft: 0
     },
+    loadMoreLoaderContainer: {
+      alignItems: "center",
+      display: "flex",
+      height: theme.spacing(3),
+      justifyContent: "center",
+      marginTop: theme.spacing(3)
+    },
     overflow: {
       overflowY: "visible"
     },
     scrollArea: {
+      height: 500,
       overflowY: "scroll"
     }
-  },
+  }),
   { name: "AssignProductDialog" }
 );
 
-export interface AssignProductDialogProps {
+export interface AssignProductDialogProps extends FetchMoreProps {
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
   products: SearchProducts_search_edges_node[];
@@ -84,11 +94,13 @@ function handleProductAssign(
 const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
   const {
     confirmButtonState,
+    hasMore,
     open,
     loading,
     products,
     onClose,
     onFetch,
+    onFetchMore,
     onSubmit
   } = props;
   const classes = useStyles(props);
@@ -135,44 +147,57 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
         />
         <FormSpacer />
         <div className={classes.scrollArea}>
-          <ResponsiveTable>
-            <TableBody>
-              {products &&
-                products.map(product => {
-                  const isSelected = selectedProducts.some(
-                    selectedProduct => selectedProduct.id === product.id
-                  );
+          <InfiniteScroll
+            pageStart={0}
+            loadMore={onFetchMore}
+            hasMore={hasMore}
+            useWindow={false}
+            loader={
+              <div className={classes.loadMoreLoaderContainer}>
+                <CircularProgress size={16} />
+              </div>
+            }
+            threshold={10}
+          >
+            <ResponsiveTable key="table">
+              <TableBody>
+                {products &&
+                  products.map(product => {
+                    const isSelected = selectedProducts.some(
+                      selectedProduct => selectedProduct.id === product.id
+                    );
 
-                  return (
-                    <TableRow key={product.id}>
-                      <TableCellAvatar
-                        className={classes.avatar}
-                        thumbnail={maybe(() => product.thumbnail.url)}
-                      />
-                      <TableCell className={classes.colName}>
-                        {product.name}
-                      </TableCell>
-                      <TableCell
-                        padding="checkbox"
-                        className={classes.checkboxCell}
-                      >
-                        <Checkbox
-                          checked={isSelected}
-                          onChange={() =>
-                            handleProductAssign(
-                              product,
-                              isSelected,
-                              selectedProducts,
-                              setSelectedProducts
-                            )
-                          }
+                    return (
+                      <TableRow key={product.id}>
+                        <TableCellAvatar
+                          className={classes.avatar}
+                          thumbnail={maybe(() => product.thumbnail.url)}
                         />
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-            </TableBody>
-          </ResponsiveTable>
+                        <TableCell className={classes.colName}>
+                          {product.name}
+                        </TableCell>
+                        <TableCell
+                          padding="checkbox"
+                          className={classes.checkboxCell}
+                        >
+                          <Checkbox
+                            checked={isSelected}
+                            onChange={() =>
+                              handleProductAssign(
+                                product,
+                                isSelected,
+                                selectedProducts,
+                                setSelectedProducts
+                              )
+                            }
+                          />
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+              </TableBody>
+            </ResponsiveTable>
+          </InfiniteScroll>
         </div>
       </DialogContent>
       <DialogActions>
diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx
index b7b5bbde6..a63c33418 100644
--- a/src/discounts/views/SaleDetails.tsx
+++ b/src/discounts/views/SaleDetails.tsx
@@ -68,18 +68,21 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   );
   const intl = useIntl();
   const {
+    // loadMore: loadMoreCategories,
     search: searchCategories,
     result: searchCategoriesOpts
   } = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
   const {
+    // loadMore: loadMoreCollections,
     search: searchCollections,
     result: searchCollectionsOpts
   } = useCollectionSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
   const {
+    loadMore: loadMoreProducts,
     search: searchProducts,
     result: searchProductsOpts
   } = useProductSearch({
@@ -325,8 +328,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                             />
                             <AssignProductDialog
                               confirmButtonState={saleCataloguesAddOpts.status}
+                              hasMore={
+                                searchProductsOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-product"}
                               onFetch={searchProducts}
+                              onFetchMore={loadMoreProducts}
                               loading={searchProductsOpts.loading}
                               onClose={closeModal}
                               onSubmit={products =>
diff --git a/src/discounts/views/VoucherDetails.tsx b/src/discounts/views/VoucherDetails.tsx
index 866073fde..4c714b29b 100644
--- a/src/discounts/views/VoucherDetails.tsx
+++ b/src/discounts/views/VoucherDetails.tsx
@@ -82,6 +82,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
   const {
+    loadMore: loadMoreProducts,
     search: searchProducts,
     result: searchProductsOpts
   } = useProductSearch({
@@ -484,8 +485,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                               confirmButtonState={
                                 voucherCataloguesAddOpts.status
                               }
+                              hasMore={
+                                searchProductsOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-product"}
                               onFetch={searchProducts}
+                              onFetchMore={loadMoreProducts}
                               loading={searchProductsOpts.loading}
                               onClose={closeModal}
                               onSubmit={products =>

From fb0a503b9189c368c7d3ef75d8339badb2a88325 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 26 Oct 2020 12:20:52 +0100
Subject: [PATCH 2/7] Add load more to category and collection selection

---
 .../AssignCategoryDialog.tsx                  | 106 +++++++++++-------
 .../AssignCollectionDialog.tsx                | 103 ++++++++++-------
 src/discounts/views/SaleDetails.tsx           |  14 ++-
 src/discounts/views/VoucherDetails.tsx        |  12 ++
 src/styles/useScrollableDialogStyle.ts        |  28 +++++
 5 files changed, 183 insertions(+), 80 deletions(-)
 create mode 100644 src/styles/useScrollableDialogStyle.ts

diff --git a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
index 7b3bc1ed5..4008e4472 100644
--- a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
+++ b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
@@ -17,7 +17,10 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
+import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
+import { FetchMoreProps } from "@saleor/types";
 import React from "react";
+import InfiniteScroll from "react-infinite-scroller";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "../Checkbox";
@@ -37,9 +40,6 @@ const useStyles = makeStyles(
     checkboxCell: {
       paddingLeft: 0
     },
-    overflow: {
-      overflowY: "visible"
-    },
     wideCell: {
       width: "100%"
     }
@@ -47,7 +47,7 @@ const useStyles = makeStyles(
   { name: "AssignCategoryDialog" }
 );
 
-interface AssignCategoriesDialogProps {
+interface AssignCategoriesDialogProps extends FetchMoreProps {
   categories: SearchCategories_search_edges_node[];
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
@@ -80,25 +80,31 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
     open,
     loading,
     categories: categories,
+    hasMore,
     onClose,
     onFetch,
+    onFetchMore,
     onSubmit
   } = props;
   const classes = useStyles(props);
+  const scrollableDialogClasses = useScrollableDialogStyle({});
 
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedCategories, setSelectedCategories] = React.useState<
     SearchCategories_search_edges_node[]
   >([]);
+  const container = React.useRef<HTMLDivElement>();
 
   const handleSubmit = () => onSubmit(selectedCategories);
 
+  const containerHeight = container.current?.scrollHeight - 130;
+
   return (
     <Dialog
+      classes={{ paper: scrollableDialogClasses.dialog }}
       open={open}
       onClose={onClose}
-      classes={{ paper: classes.overflow }}
       fullWidth
       maxWidth="sm"
     >
@@ -108,7 +114,10 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent className={classes.overflow}>
+      <DialogContent
+        className={scrollableDialogClasses.content}
+        ref={container}
+      >
         <TextField
           name="query"
           value={query}
@@ -126,40 +135,59 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <ResponsiveTable>
-          <TableBody>
-            {categories &&
-              categories.map(category => {
-                const isSelected = !!selectedCategories.find(
-                  selectedCategories => selectedCategories.id === category.id
-                );
+        <div
+          className={scrollableDialogClasses.scrollArea}
+          style={{ height: containerHeight }}
+        >
+          <InfiniteScroll
+            pageStart={0}
+            loadMore={onFetchMore}
+            hasMore={hasMore}
+            useWindow={false}
+            loader={
+              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+                <CircularProgress size={16} />
+              </div>
+            }
+            threshold={10}
+          >
+            <ResponsiveTable key="table">
+              <TableBody>
+                {categories &&
+                  categories.map(category => {
+                    const isSelected = !!selectedCategories.find(
+                      selectedCategories =>
+                        selectedCategories.id === category.id
+                    );
 
-                return (
-                  <TableRow key={category.id}>
-                    <TableCell
-                      padding="checkbox"
-                      className={classes.checkboxCell}
-                    >
-                      <Checkbox
-                        checked={isSelected}
-                        onChange={() =>
-                          handleCategoryAssign(
-                            category,
-                            isSelected,
-                            selectedCategories,
-                            setSelectedCategories
-                          )
-                        }
-                      />
-                    </TableCell>
-                    <TableCell className={classes.wideCell}>
-                      {category.name}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-          </TableBody>
-        </ResponsiveTable>
+                    return (
+                      <TableRow key={category.id}>
+                        <TableCell
+                          padding="checkbox"
+                          className={classes.checkboxCell}
+                        >
+                          <Checkbox
+                            checked={isSelected}
+                            onChange={() =>
+                              handleCategoryAssign(
+                                category,
+                                isSelected,
+                                selectedCategories,
+                                setSelectedCategories
+                              )
+                            }
+                          />
+                        </TableCell>
+                        <TableCell className={classes.wideCell}>
+                          {category.name}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+              </TableBody>
+            </ResponsiveTable>
+          </InfiniteScroll>
+        </div>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>
diff --git a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
index bf46d3de3..b0e99dae5 100644
--- a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
+++ b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
@@ -13,7 +13,10 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
+import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
+import { FetchMoreProps } from "@saleor/types";
 import React from "react";
+import InfiniteScroll from "react-infinite-scroller";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "../Checkbox";
@@ -37,9 +40,6 @@ const useStyles = makeStyles(
     checkboxCell: {
       paddingLeft: 0
     },
-    overflow: {
-      overflowY: "visible"
-    },
     wideCell: {
       width: "100%"
     }
@@ -47,7 +47,7 @@ const useStyles = makeStyles(
   { name: "AssignCollectionDialog" }
 );
 
-interface AssignCollectionDialogProps {
+interface AssignCollectionDialogProps extends FetchMoreProps {
   collections: SearchCollections_search_edges_node[];
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
@@ -77,28 +77,34 @@ function handleCollectionAssign(
 const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
   const {
     confirmButtonState,
+    hasMore,
     open,
     loading,
     collections,
     onClose,
     onFetch,
+    onFetchMore,
     onSubmit
   } = props;
   const classes = useStyles(props);
+  const scrollableDialogClasses = useScrollableDialogStyle({});
 
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedCollections, setSelectedCollections] = React.useState<
     SearchCollections_search_edges_node[]
   >([]);
+  const container = React.useRef<HTMLDivElement>();
 
   const handleSubmit = () => onSubmit(selectedCollections);
 
+  const containerHeight = container.current?.scrollHeight - 130;
+
   return (
     <Dialog
       onClose={onClose}
       open={open}
-      classes={{ paper: classes.overflow }}
+      classes={{ paper: scrollableDialogClasses.dialog }}
       fullWidth
       maxWidth="sm"
     >
@@ -108,7 +114,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent className={classes.overflow}>
+      <DialogContent className={scrollableDialogClasses.content}>
         <TextField
           name="query"
           value={query}
@@ -126,40 +132,59 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <ResponsiveTable>
-          <TableBody>
-            {collections &&
-              collections.map(collection => {
-                const isSelected = !!selectedCollections.find(
-                  selectedCollection => selectedCollection.id === collection.id
-                );
+        <div
+          className={scrollableDialogClasses.scrollArea}
+          style={{ height: containerHeight }}
+        >
+          <InfiniteScroll
+            pageStart={0}
+            loadMore={onFetchMore}
+            hasMore={hasMore}
+            useWindow={false}
+            loader={
+              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+                <CircularProgress size={16} />
+              </div>
+            }
+            threshold={10}
+          >
+            <ResponsiveTable>
+              <TableBody>
+                {collections &&
+                  collections.map(collection => {
+                    const isSelected = !!selectedCollections.find(
+                      selectedCollection =>
+                        selectedCollection.id === collection.id
+                    );
 
-                return (
-                  <TableRow key={collection.id}>
-                    <TableCell
-                      padding="checkbox"
-                      className={classes.checkboxCell}
-                    >
-                      <Checkbox
-                        checked={isSelected}
-                        onChange={() =>
-                          handleCollectionAssign(
-                            collection,
-                            isSelected,
-                            selectedCollections,
-                            setSelectedCollections
-                          )
-                        }
-                      />
-                    </TableCell>
-                    <TableCell className={classes.wideCell}>
-                      {collection.name}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-          </TableBody>
-        </ResponsiveTable>
+                    return (
+                      <TableRow key={collection.id}>
+                        <TableCell
+                          padding="checkbox"
+                          className={classes.checkboxCell}
+                        >
+                          <Checkbox
+                            checked={isSelected}
+                            onChange={() =>
+                              handleCollectionAssign(
+                                collection,
+                                isSelected,
+                                selectedCollections,
+                                setSelectedCollections
+                              )
+                            }
+                          />
+                        </TableCell>
+                        <TableCell className={classes.wideCell}>
+                          {collection.name}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+              </TableBody>
+            </ResponsiveTable>
+          </InfiniteScroll>
+        </div>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>
diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx
index a63c33418..e24a32de0 100644
--- a/src/discounts/views/SaleDetails.tsx
+++ b/src/discounts/views/SaleDetails.tsx
@@ -68,14 +68,14 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   );
   const intl = useIntl();
   const {
-    // loadMore: loadMoreCategories,
+    loadMore: loadMoreCategories,
     search: searchCategories,
     result: searchCategoriesOpts
   } = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
   const {
-    // loadMore: loadMoreCollections,
+    loadMore: loadMoreCollections,
     search: searchCollections,
     result: searchCollectionsOpts
   } = useCollectionSearch({
@@ -367,8 +367,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                   )
                               )}
                               confirmButtonState={saleCataloguesAddOpts.status}
+                              hasMore={
+                                searchCategoriesOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-category"}
                               onFetch={searchCategories}
+                              onFetchMore={loadMoreCategories}
                               loading={searchCategoriesOpts.loading}
                               onClose={closeModal}
                               onSubmit={categories =>
@@ -394,8 +399,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                   )
                               )}
                               confirmButtonState={saleCataloguesAddOpts.status}
+                              hasMore={
+                                searchCollectionsOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-collection"}
                               onFetch={searchCollections}
+                              onFetchMore={loadMoreCollections}
                               loading={searchCollectionsOpts.loading}
                               onClose={closeModal}
                               onSubmit={collections =>
diff --git a/src/discounts/views/VoucherDetails.tsx b/src/discounts/views/VoucherDetails.tsx
index 4c714b29b..d86aa1844 100644
--- a/src/discounts/views/VoucherDetails.tsx
+++ b/src/discounts/views/VoucherDetails.tsx
@@ -70,12 +70,14 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   );
   const intl = useIntl();
   const {
+    loadMore: loadMoreCategories,
     search: searchCategories,
     result: searchCategoriesOpts
   } = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
   const {
+    loadMore: loadMoreCollections,
     search: searchCollections,
     result: searchCollectionsOpts
   } = useCollectionSearch({
@@ -411,8 +413,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                               confirmButtonState={
                                 voucherCataloguesAddOpts.status
                               }
+                              hasMore={
+                                searchCategoriesOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-category"}
                               onFetch={searchCategories}
+                              onFetchMore={loadMoreCategories}
                               loading={searchCategoriesOpts.loading}
                               onClose={closeModal}
                               onSubmit={categories =>
@@ -440,8 +447,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                               confirmButtonState={
                                 voucherCataloguesAddOpts.status
                               }
+                              hasMore={
+                                searchCollectionsOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-collection"}
                               onFetch={searchCollections}
+                              onFetchMore={loadMoreCollections}
                               loading={searchCollectionsOpts.loading}
                               onClose={closeModal}
                               onSubmit={collections =>
diff --git a/src/styles/useScrollableDialogStyle.ts b/src/styles/useScrollableDialogStyle.ts
new file mode 100644
index 000000000..7b9a65a9a
--- /dev/null
+++ b/src/styles/useScrollableDialogStyle.ts
@@ -0,0 +1,28 @@
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+const useScrollableDialogStyle = makeStyles(
+  theme => ({
+    content: {
+      overflowY: "hidden"
+    },
+    dialog: {
+      height: "calc(100% - 64px)",
+      maxHeight: 700
+    },
+    loadMoreLoaderContainer: {
+      alignItems: "center",
+      display: "flex",
+      height: theme.spacing(3),
+      justifyContent: "center",
+      marginTop: theme.spacing(3)
+    },
+    scrollArea: {
+      overflowY: "scroll"
+    }
+  }),
+  {
+    name: "ScrollableDialog"
+  }
+);
+
+export default useScrollableDialogStyle;

From 3df64beb59e124d7ecc44c13c9c5a5adf7175f05 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 26 Oct 2020 14:04:04 +0100
Subject: [PATCH 3/7] Fix product assign styling

---
 .../AssignCollectionDialog.tsx                |  5 ++-
 .../AssignProductDialog.tsx                   | 37 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
index b0e99dae5..99266f934 100644
--- a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
+++ b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
@@ -114,7 +114,10 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent className={scrollableDialogClasses.content}>
+      <DialogContent
+        className={scrollableDialogClasses.content}
+        ref={container}
+      >
         <TextField
           name="query"
           value={query}
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 0f0409c25..10f1431de 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -19,6 +19,7 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
+import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { FetchMoreProps } from "@saleor/types";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroller";
@@ -32,7 +33,7 @@ export interface FormData {
 }
 
 const useStyles = makeStyles(
-  theme => ({
+  {
     avatar: {
       "&&:first-child": {
         paddingLeft: 0
@@ -45,22 +46,8 @@ const useStyles = makeStyles(
     },
     colName: {
       paddingLeft: 0
-    },
-    loadMoreLoaderContainer: {
-      alignItems: "center",
-      display: "flex",
-      height: theme.spacing(3),
-      justifyContent: "center",
-      marginTop: theme.spacing(3)
-    },
-    overflow: {
-      overflowY: "visible"
-    },
-    scrollArea: {
-      height: 500,
-      overflowY: "scroll"
     }
-  }),
+  },
   { name: "AssignProductDialog" }
 );
 
@@ -104,20 +91,24 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
     onSubmit
   } = props;
   const classes = useStyles(props);
+  const scrollableDialogClasses = useScrollableDialogStyle({});
 
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedProducts, setSelectedProducts] = React.useState<
     SearchProducts_search_edges_node[]
   >([]);
+  const container = React.useRef<HTMLDivElement>();
 
   const handleSubmit = () => onSubmit(selectedProducts);
 
+  const containerHeight = container.current?.scrollHeight - 130;
+
   return (
     <Dialog
       onClose={onClose}
       open={open}
-      classes={{ paper: classes.overflow }}
+      classes={{ paper: scrollableDialogClasses.dialog }}
       fullWidth
       maxWidth="sm"
     >
@@ -127,7 +118,10 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent>
+      <DialogContent
+        className={scrollableDialogClasses.content}
+        ref={container}
+      >
         <TextField
           name="query"
           value={query}
@@ -146,14 +140,17 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <div className={classes.scrollArea}>
+        <div
+          className={scrollableDialogClasses.scrollArea}
+          style={{ height: containerHeight }}
+        >
           <InfiniteScroll
             pageStart={0}
             loadMore={onFetchMore}
             hasMore={hasMore}
             useWindow={false}
             loader={
-              <div className={classes.loadMoreLoaderContainer}>
+              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
                 <CircularProgress size={16} />
               </div>
             }

From bc6a832af76b068dc7cf6a1b81d188e992f3e812 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 26 Oct 2020 14:07:51 +0100
Subject: [PATCH 4/7] Fix story

---
 src/storybook/stories/components/AssignProductDialog.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/storybook/stories/components/AssignProductDialog.tsx b/src/storybook/stories/components/AssignProductDialog.tsx
index 8898dcf56..27ce8df54 100644
--- a/src/storybook/stories/components/AssignProductDialog.tsx
+++ b/src/storybook/stories/components/AssignProductDialog.tsx
@@ -2,6 +2,7 @@ import placeholderImage from "@assets/images/placeholder60x60.png";
 import AssignProductDialog, {
   AssignProductDialogProps
 } from "@saleor/components/AssignProductDialog";
+import { fetchMoreProps } from "@saleor/fixtures";
 import { products } from "@saleor/products/fixtures";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -9,6 +10,7 @@ import React from "react";
 import Decorator from "../../Decorator";
 
 const props: AssignProductDialogProps = {
+  ...fetchMoreProps,
   confirmButtonState: "default",
   loading: false,
   onClose: () => undefined,

From 1f92b380c5bfcb2781c333f54cf4212e728360fb Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 26 Oct 2020 14:17:24 +0100
Subject: [PATCH 5/7] Remove developer code

---
 src/collections/views/CollectionDetails.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx
index 1ff2e1862..e1e5a0af5 100644
--- a/src/collections/views/CollectionDetails.tsx
+++ b/src/collections/views/CollectionDetails.tsx
@@ -61,10 +61,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   const paginate = usePaginator();
   const intl = useIntl();
   const { search, loadMore, result } = useProductSearch({
-    variables: {
-      ...DEFAULT_INITIAL_SEARCH_DATA,
-      first: 100
-    }
+    variables: DEFAULT_INITIAL_SEARCH_DATA
   });
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});

From 573cda058faba6f51e079bdbc466bbd865c7e3a8 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Fri, 30 Oct 2020 15:00:43 +0100
Subject: [PATCH 6/7] Make category and collection assign dialog common

---
 locale/defaultMessages.json                   |  20 +-
 .../AssignCategoryDialog.tsx                  | 230 +++---------------
 .../AssignCollectionDialog.tsx                | 226 ++---------------
 .../AssignContainerDialog.tsx                 | 204 ++++++++++++++++
 src/components/AssignContainerDialog/index.ts |   2 +
 src/discounts/views/SaleDetails.tsx           |   8 +-
 src/discounts/views/VoucherDetails.tsx        |   8 +-
 7 files changed, 274 insertions(+), 424 deletions(-)
 create mode 100644 src/components/AssignContainerDialog/AssignContainerDialog.tsx
 create mode 100644 src/components/AssignContainerDialog/index.ts

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 13fb9f884..ce8015f6f 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -1400,23 +1400,15 @@
     "context": "section header",
     "string": "App Status"
   },
-  "src_dot_components_dot_AssignCategoryDialog_dot_1305061437": {
-    "string": "Search Categories"
-  },
-  "src_dot_components_dot_AssignCategoryDialog_dot_190977792": {
+  "src_dot_components_dot_AssignCategoryDialog_dot_3125506097": {
     "context": "dialog header",
-    "string": "Assign Categories"
+    "string": "Assign Category"
   },
   "src_dot_components_dot_AssignCategoryDialog_dot_3690273268": {
     "string": "Search by category name, etc..."
   },
-  "src_dot_components_dot_AssignCategoryDialog_dot_3973677075": {
-    "context": "button",
-    "string": "Assign categories"
-  },
-  "src_dot_components_dot_AssignCollectionDialog_dot_1035511604": {
-    "context": "button",
-    "string": "Assign collections"
+  "src_dot_components_dot_AssignCategoryDialog_dot_3841025483": {
+    "string": "Search Category"
   },
   "src_dot_components_dot_AssignCollectionDialog_dot_2605414502": {
     "string": "Search by collection name, etc..."
@@ -1428,6 +1420,10 @@
   "src_dot_components_dot_AssignCollectionDialog_dot_4057224233": {
     "string": "Search Collection"
   },
+  "src_dot_components_dot_AssignContainerDialog_dot_1731102929": {
+    "context": "button",
+    "string": "Assign"
+  },
   "src_dot_components_dot_AssignProductDialog_dot_2100305525": {
     "context": "button",
     "string": "Assign products"
diff --git a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
index 4008e4472..f0077a198 100644
--- a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
+++ b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
@@ -1,213 +1,41 @@
-import Button from "@material-ui/core/Button";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import { makeStyles } from "@material-ui/core/styles";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
-import ConfirmButton, {
-  ConfirmButtonTransitionState
-} from "@saleor/components/ConfirmButton";
-import FormSpacer from "@saleor/components/FormSpacer";
-import ResponsiveTable from "@saleor/components/ResponsiveTable";
-import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
-import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
-import { FetchMoreProps } from "@saleor/types";
 import React from "react";
-import InfiniteScroll from "react-infinite-scroller";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
-import Checkbox from "../Checkbox";
+import AssignContainerDialog, {
+  AssignContainerDialogProps
+} from "../AssignContainerDialog";
 
-export interface FormData {
+interface AssignCategoryDialogProps
+  extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
   categories: SearchCategories_search_edges_node[];
-  query: string;
 }
 
-const useStyles = makeStyles(
-  {
-    avatar: {
-      "&:first-child": {
-        paddingLeft: 0
-      }
-    },
-    checkboxCell: {
-      paddingLeft: 0
-    },
-    wideCell: {
-      width: "100%"
-    }
-  },
-  { name: "AssignCategoryDialog" }
-);
-
-interface AssignCategoriesDialogProps extends FetchMoreProps {
-  categories: SearchCategories_search_edges_node[];
-  confirmButtonState: ConfirmButtonTransitionState;
-  open: boolean;
-  loading: boolean;
-  onClose: () => void;
-  onFetch: (value: string) => void;
-  onSubmit: (data: SearchCategories_search_edges_node[]) => void;
-}
-
-function handleCategoryAssign(
-  product: SearchCategories_search_edges_node,
-  isSelected: boolean,
-  selectedCategories: SearchCategories_search_edges_node[],
-  setSelectedCategories: (data: SearchCategories_search_edges_node[]) => void
-) {
-  if (isSelected) {
-    setSelectedCategories(
-      selectedCategories.filter(
-        selectedProduct => selectedProduct.id !== product.id
-      )
-    );
-  } else {
-    setSelectedCategories([...selectedCategories, product]);
-  }
-}
-
-const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
-  const {
-    confirmButtonState,
-    open,
-    loading,
-    categories: categories,
-    hasMore,
-    onClose,
-    onFetch,
-    onFetchMore,
-    onSubmit
-  } = props;
-  const classes = useStyles(props);
-  const scrollableDialogClasses = useScrollableDialogStyle({});
-
+const AssignCategoryDialog: React.FC<AssignCategoryDialogProps> = ({
+  categories,
+  ...rest
+}) => {
   const intl = useIntl();
-  const [query, onQueryChange] = useSearchQuery(onFetch);
-  const [selectedCategories, setSelectedCategories] = React.useState<
-    SearchCategories_search_edges_node[]
-  >([]);
-  const container = React.useRef<HTMLDivElement>();
-
-  const handleSubmit = () => onSubmit(selectedCategories);
-
-  const containerHeight = container.current?.scrollHeight - 130;
 
   return (
-    <Dialog
-      classes={{ paper: scrollableDialogClasses.dialog }}
-      open={open}
-      onClose={onClose}
-      fullWidth
-      maxWidth="sm"
-    >
-      <DialogTitle>
-        <FormattedMessage
-          defaultMessage="Assign Categories"
-          description="dialog header"
-        />
-      </DialogTitle>
-      <DialogContent
-        className={scrollableDialogClasses.content}
-        ref={container}
-      >
-        <TextField
-          name="query"
-          value={query}
-          onChange={onQueryChange}
-          label={intl.formatMessage({
-            defaultMessage: "Search Categories"
-          })}
-          placeholder={intl.formatMessage({
-            defaultMessage: "Search by category name, etc..."
-          })}
-          fullWidth
-          InputProps={{
-            autoComplete: "off",
-            endAdornment: loading && <CircularProgress size={16} />
-          }}
-        />
-        <FormSpacer />
-        <div
-          className={scrollableDialogClasses.scrollArea}
-          style={{ height: containerHeight }}
-        >
-          <InfiniteScroll
-            pageStart={0}
-            loadMore={onFetchMore}
-            hasMore={hasMore}
-            useWindow={false}
-            loader={
-              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
-                <CircularProgress size={16} />
-              </div>
-            }
-            threshold={10}
-          >
-            <ResponsiveTable key="table">
-              <TableBody>
-                {categories &&
-                  categories.map(category => {
-                    const isSelected = !!selectedCategories.find(
-                      selectedCategories =>
-                        selectedCategories.id === category.id
-                    );
-
-                    return (
-                      <TableRow key={category.id}>
-                        <TableCell
-                          padding="checkbox"
-                          className={classes.checkboxCell}
-                        >
-                          <Checkbox
-                            checked={isSelected}
-                            onChange={() =>
-                              handleCategoryAssign(
-                                category,
-                                isSelected,
-                                selectedCategories,
-                                setSelectedCategories
-                              )
-                            }
-                          />
-                        </TableCell>
-                        <TableCell className={classes.wideCell}>
-                          {category.name}
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-              </TableBody>
-            </ResponsiveTable>
-          </InfiniteScroll>
-        </div>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
-        <ConfirmButton
-          transitionState={confirmButtonState}
-          color="primary"
-          variant="contained"
-          type="submit"
-          onClick={handleSubmit}
-        >
-          <FormattedMessage
-            defaultMessage="Assign categories"
-            description="button"
-          />
-        </ConfirmButton>
-      </DialogActions>
-    </Dialog>
+    <AssignContainerDialog
+      containers={categories}
+      search={{
+        label: intl.formatMessage({
+          defaultMessage: "Search Category"
+        }),
+        placeholder: intl.formatMessage({
+          defaultMessage: "Search by category name, etc..."
+        })
+      }}
+      title={intl.formatMessage({
+        defaultMessage: "Assign Category",
+        description: "dialog header"
+      })}
+      {...rest}
+    />
   );
 };
-AssignCategoriesDialog.displayName = "AssignCategoriesDialog";
-export default AssignCategoriesDialog;
+
+AssignCategoryDialog.displayName = "AssignCategoryDialog";
+export default AssignCategoryDialog;
diff --git a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
index 99266f934..0ee4d7146 100644
--- a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
+++ b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
@@ -1,213 +1,41 @@
-import Button from "@material-ui/core/Button";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import { makeStyles } from "@material-ui/core/styles";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
-import ResponsiveTable from "@saleor/components/ResponsiveTable";
-import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
 import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
-import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
-import { FetchMoreProps } from "@saleor/types";
 import React from "react";
-import InfiniteScroll from "react-infinite-scroller";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
-import Checkbox from "../Checkbox";
-import ConfirmButton, {
-  ConfirmButtonTransitionState
-} from "../ConfirmButton/ConfirmButton";
-import FormSpacer from "../FormSpacer";
+import AssignContainerDialog, {
+  AssignContainerDialogProps
+} from "../AssignContainerDialog";
 
-export interface FormData {
+interface AssignCollectionDialogProps
+  extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
   collections: SearchCollections_search_edges_node[];
-  query: string;
 }
 
-const useStyles = makeStyles(
-  {
-    avatar: {
-      "&:first-child": {
-        paddingLeft: 0
-      }
-    },
-    checkboxCell: {
-      paddingLeft: 0
-    },
-    wideCell: {
-      width: "100%"
-    }
-  },
-  { name: "AssignCollectionDialog" }
-);
-
-interface AssignCollectionDialogProps extends FetchMoreProps {
-  collections: SearchCollections_search_edges_node[];
-  confirmButtonState: ConfirmButtonTransitionState;
-  open: boolean;
-  loading: boolean;
-  onClose: () => void;
-  onFetch: (value: string) => void;
-  onSubmit: (data: SearchCollections_search_edges_node[]) => void;
-}
-
-function handleCollectionAssign(
-  product: SearchCollections_search_edges_node,
-  isSelected: boolean,
-  selectedCollections: SearchCollections_search_edges_node[],
-  setSelectedCollections: (data: SearchCollections_search_edges_node[]) => void
-) {
-  if (isSelected) {
-    setSelectedCollections(
-      selectedCollections.filter(
-        selectedProduct => selectedProduct.id !== product.id
-      )
-    );
-  } else {
-    setSelectedCollections([...selectedCollections, product]);
-  }
-}
-
-const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
-  const {
-    confirmButtonState,
-    hasMore,
-    open,
-    loading,
-    collections,
-    onClose,
-    onFetch,
-    onFetchMore,
-    onSubmit
-  } = props;
-  const classes = useStyles(props);
-  const scrollableDialogClasses = useScrollableDialogStyle({});
-
+const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = ({
+  collections,
+  ...rest
+}) => {
   const intl = useIntl();
-  const [query, onQueryChange] = useSearchQuery(onFetch);
-  const [selectedCollections, setSelectedCollections] = React.useState<
-    SearchCollections_search_edges_node[]
-  >([]);
-  const container = React.useRef<HTMLDivElement>();
-
-  const handleSubmit = () => onSubmit(selectedCollections);
-
-  const containerHeight = container.current?.scrollHeight - 130;
 
   return (
-    <Dialog
-      onClose={onClose}
-      open={open}
-      classes={{ paper: scrollableDialogClasses.dialog }}
-      fullWidth
-      maxWidth="sm"
-    >
-      <DialogTitle>
-        <FormattedMessage
-          defaultMessage="Assign Collection"
-          description="dialog header"
-        />
-      </DialogTitle>
-      <DialogContent
-        className={scrollableDialogClasses.content}
-        ref={container}
-      >
-        <TextField
-          name="query"
-          value={query}
-          onChange={onQueryChange}
-          label={intl.formatMessage({
-            defaultMessage: "Search Collection"
-          })}
-          placeholder={intl.formatMessage({
-            defaultMessage: "Search by collection name, etc..."
-          })}
-          fullWidth
-          InputProps={{
-            autoComplete: "off",
-            endAdornment: loading && <CircularProgress size={16} />
-          }}
-        />
-        <FormSpacer />
-        <div
-          className={scrollableDialogClasses.scrollArea}
-          style={{ height: containerHeight }}
-        >
-          <InfiniteScroll
-            pageStart={0}
-            loadMore={onFetchMore}
-            hasMore={hasMore}
-            useWindow={false}
-            loader={
-              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
-                <CircularProgress size={16} />
-              </div>
-            }
-            threshold={10}
-          >
-            <ResponsiveTable>
-              <TableBody>
-                {collections &&
-                  collections.map(collection => {
-                    const isSelected = !!selectedCollections.find(
-                      selectedCollection =>
-                        selectedCollection.id === collection.id
-                    );
-
-                    return (
-                      <TableRow key={collection.id}>
-                        <TableCell
-                          padding="checkbox"
-                          className={classes.checkboxCell}
-                        >
-                          <Checkbox
-                            checked={isSelected}
-                            onChange={() =>
-                              handleCollectionAssign(
-                                collection,
-                                isSelected,
-                                selectedCollections,
-                                setSelectedCollections
-                              )
-                            }
-                          />
-                        </TableCell>
-                        <TableCell className={classes.wideCell}>
-                          {collection.name}
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-              </TableBody>
-            </ResponsiveTable>
-          </InfiniteScroll>
-        </div>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
-        <ConfirmButton
-          transitionState={confirmButtonState}
-          color="primary"
-          variant="contained"
-          type="submit"
-          onClick={handleSubmit}
-        >
-          <FormattedMessage
-            defaultMessage="Assign collections"
-            description="button"
-          />
-        </ConfirmButton>
-      </DialogActions>
-    </Dialog>
+    <AssignContainerDialog
+      containers={collections}
+      search={{
+        label: intl.formatMessage({
+          defaultMessage: "Search Collection"
+        }),
+        placeholder: intl.formatMessage({
+          defaultMessage: "Search by collection name, etc..."
+        })
+      }}
+      title={intl.formatMessage({
+        defaultMessage: "Assign Collection",
+        description: "dialog header"
+      })}
+      {...rest}
+    />
   );
 };
+
 AssignCollectionDialog.displayName = "AssignCollectionDialog";
 export default AssignCollectionDialog;
diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
new file mode 100644
index 000000000..23b3e29b4
--- /dev/null
+++ b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
@@ -0,0 +1,204 @@
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import { makeStyles } from "@material-ui/core/styles";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import TextField from "@material-ui/core/TextField";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
+import useSearchQuery from "@saleor/hooks/useSearchQuery";
+import { buttonMessages } from "@saleor/intl";
+import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
+import { FetchMoreProps, Node } from "@saleor/types";
+import React from "react";
+import InfiniteScroll from "react-infinite-scroller";
+import { FormattedMessage } from "react-intl";
+
+import Checkbox from "../Checkbox";
+import ConfirmButton, {
+  ConfirmButtonTransitionState
+} from "../ConfirmButton/ConfirmButton";
+import FormSpacer from "../FormSpacer";
+
+export interface FormData {
+  containers: string[];
+  query: string;
+}
+
+const useStyles = makeStyles(
+  {
+    avatar: {
+      "&:first-child": {
+        paddingLeft: 0
+      }
+    },
+    checkboxCell: {
+      paddingLeft: 0
+    },
+    wideCell: {
+      width: "100%"
+    }
+  },
+  { name: "AssignContainerDialog" }
+);
+
+interface Container extends Node {
+  name: string;
+}
+export interface AssignContainerDialogProps extends FetchMoreProps {
+  confirmButtonState: ConfirmButtonTransitionState;
+  containers: Container[];
+  loading: boolean;
+  open: boolean;
+  search: Record<"label" | "placeholder", string>;
+  title: string;
+  onClose: () => void;
+  onFetch: (value: string) => void;
+  onSubmit: (data: string[]) => void;
+}
+
+function handleContainerAssign(
+  containerId: string,
+  isSelected: boolean,
+  selectedContainers: string[],
+  setSelectedContainers: (data: string[]) => void
+) {
+  if (isSelected) {
+    setSelectedContainers(
+      selectedContainers.filter(
+        selectedContainer => selectedContainer !== containerId
+      )
+    );
+  } else {
+    setSelectedContainers([...selectedContainers, containerId]);
+  }
+}
+
+const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
+  const {
+    confirmButtonState,
+    containers,
+    hasMore,
+    loading,
+    open,
+    search,
+    title,
+    onClose,
+    onFetch,
+    onFetchMore,
+    onSubmit
+  } = props;
+  const classes = useStyles(props);
+  const scrollableDialogClasses = useScrollableDialogStyle({});
+
+  const [query, onQueryChange] = useSearchQuery(onFetch);
+  const [selectedContainers, setSelectedContainers] = React.useState<string[]>(
+    []
+  );
+  const container = React.useRef<HTMLDivElement>();
+
+  const handleSubmit = () => onSubmit(selectedContainers);
+
+  const containerHeight = container.current?.scrollHeight - 130;
+
+  return (
+    <Dialog
+      onClose={onClose}
+      open={open}
+      classes={{ paper: scrollableDialogClasses.dialog }}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent
+        className={scrollableDialogClasses.content}
+        ref={container}
+      >
+        <TextField
+          name="query"
+          value={query}
+          onChange={onQueryChange}
+          label={search.label}
+          placeholder={search.placeholder}
+          fullWidth
+          InputProps={{
+            autoComplete: "off",
+            endAdornment: loading && <CircularProgress size={16} />
+          }}
+        />
+        <FormSpacer />
+        <div
+          className={scrollableDialogClasses.scrollArea}
+          style={{ height: containerHeight }}
+        >
+          <InfiniteScroll
+            pageStart={0}
+            loadMore={onFetchMore}
+            hasMore={hasMore}
+            useWindow={false}
+            loader={
+              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+                <CircularProgress size={16} />
+              </div>
+            }
+            threshold={10}
+          >
+            <ResponsiveTable>
+              <TableBody>
+                {containers?.map(container => {
+                  const isSelected = !!selectedContainers.find(
+                    selectedContainer => selectedContainer === container.id
+                  );
+
+                  return (
+                    <TableRow key={container.id}>
+                      <TableCell
+                        padding="checkbox"
+                        className={classes.checkboxCell}
+                      >
+                        <Checkbox
+                          checked={isSelected}
+                          onChange={() =>
+                            handleContainerAssign(
+                              container.id,
+                              isSelected,
+                              selectedContainers,
+                              setSelectedContainers
+                            )
+                          }
+                        />
+                      </TableCell>
+                      <TableCell className={classes.wideCell}>
+                        {container.name}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </ResponsiveTable>
+          </InfiniteScroll>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>
+          <FormattedMessage {...buttonMessages.back} />
+        </Button>
+        <ConfirmButton
+          transitionState={confirmButtonState}
+          color="primary"
+          variant="contained"
+          type="submit"
+          onClick={handleSubmit}
+        >
+          <FormattedMessage defaultMessage="Assign" description="button" />
+        </ConfirmButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+AssignContainerDialog.displayName = "AssignContainerDialog";
+export default AssignContainerDialog;
diff --git a/src/components/AssignContainerDialog/index.ts b/src/components/AssignContainerDialog/index.ts
new file mode 100644
index 000000000..523a573e8
--- /dev/null
+++ b/src/components/AssignContainerDialog/index.ts
@@ -0,0 +1,2 @@
+export * from "./AssignContainerDialog";
+export { default } from "./AssignContainerDialog";
diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx
index e24a32de0..8660a2878 100644
--- a/src/discounts/views/SaleDetails.tsx
+++ b/src/discounts/views/SaleDetails.tsx
@@ -382,9 +382,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                     ...paginationState,
                                     id,
                                     input: {
-                                      categories: categories.map(
-                                        product => product.id
-                                      )
+                                      categories
                                     }
                                   }
                                 })
@@ -414,9 +412,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                     ...paginationState,
                                     id,
                                     input: {
-                                      collections: collections.map(
-                                        product => product.id
-                                      )
+                                      collections
                                     }
                                   }
                                 })
diff --git a/src/discounts/views/VoucherDetails.tsx b/src/discounts/views/VoucherDetails.tsx
index d86aa1844..e286ddd83 100644
--- a/src/discounts/views/VoucherDetails.tsx
+++ b/src/discounts/views/VoucherDetails.tsx
@@ -428,9 +428,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                     ...paginationState,
                                     id,
                                     input: {
-                                      categories: categories.map(
-                                        product => product.id
-                                      )
+                                      categories
                                     }
                                   }
                                 })
@@ -462,9 +460,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                     ...paginationState,
                                     id,
                                     input: {
-                                      collections: collections.map(
-                                        product => product.id
-                                      )
+                                      collections
                                     }
                                   }
                                 })

From ec25e521df4f09a728fe4636bec06acf461b4a6b Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Fri, 30 Oct 2020 15:01:29 +0100
Subject: [PATCH 7/7] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e5f49767..36dc8e6fb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,6 +54,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix order draft back button redirect - #753 by @orzechdev
 - Add manage product types and attributes permission - #768 by @orzechdev
 - Fix isPublished and isAvailable behaviour for products, collections and pages - #780 by @mmarkusik
+- Add missing infinite scroll to searches - #793 by @dominik-zeglen
 
 ## 2.10.1