From 909e08f2afc1776b5b39378d88f9c79cc7c29299 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Thu, 1 Jul 2021 10:21:41 +0200
Subject: [PATCH] Fix duplicated labels in column picker (#1197)

* Fix duplicated labels in column picker

* Update changelog

* Refactor column picker scroll fetch

* Migrate react-infinite-scroller to react-infinite-scroll-component

* Remove unneeded keys

* Align dialog items to top
---
 CHANGELOG.md                                  |   1 +
 package-lock.json                             |  13 +-
 package.json                                  |   2 +-
 .../AssignAttributeDialog.tsx                 |  19 ++-
 .../AssignContainerDialog.tsx                 | 112 ++++++++--------
 .../AssignProductDialog.tsx                   | 124 +++++++++---------
 src/components/ColumnPicker/ColumnPicker.tsx  |   2 -
 .../ColumnPicker/ColumnPickerContent.tsx      |  62 ++++-----
 .../OrderProductAddDialog.tsx                 |  14 +-
 .../AssignMembersDialog.tsx                   |  44 ++++---
 .../ProductListPage/ProductListPage.tsx       |   9 +-
 src/products/queries.ts                       |  18 ++-
 .../types/AvailableInGridAttributes.ts        |  43 ++++++
 src/products/types/GridAttributes.ts          |  29 ----
 .../views/ProductList/ProductList.tsx         |  25 ++--
 .../ShippingMethodProductsAddDialog.tsx       |  14 +-
 .../stories/components/ColumnPicker.tsx       |   7 +-
 src/styles/useScrollableDialogStyle.ts        |  10 +-
 18 files changed, 280 insertions(+), 268 deletions(-)
 create mode 100644 src/products/types/AvailableInGridAttributes.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3f20e18b..71ee9ce99 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix breaking select popups in filters - #1193 by @orzechdev
 - Create channel filters in product, sales and voucher lists - #1187 by @jwm0
 - Add generic filter validation - #1187 by @jwm0
+- Fix duplicated labels in column picker - #1197 by @orzechdev
 
 # 2.11.1
 
diff --git a/package-lock.json b/package-lock.json
index 11c2c973e..faec34c16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22656,12 +22656,12 @@
         "prop-types": "^15.6.1"
       }
     },
-    "react-infinite-scroller": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz",
-      "integrity": "sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==",
+    "react-infinite-scroll-component": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
+      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
       "requires": {
-        "prop-types": "^15.5.8"
+        "throttle-debounce": "^2.1.0"
       }
     },
     "react-inlinesvg": {
@@ -26702,8 +26702,7 @@
     "throttle-debounce": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
-      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
-      "dev": true
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
     },
     "throttleit": {
       "version": "1.0.0",
diff --git a/package.json b/package.json
index 297fc3dd9..f7d53abec 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "react-error-boundary": "^1.2.5",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
-    "react-infinite-scroller": "^1.2.4",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-inlinesvg": "^2.1.1",
     "react-intl": "^5.10.2",
     "react-jss": "^10.0.0",
diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
index be592339b..ecfd0e662 100644
--- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
+++ b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -30,7 +30,7 @@ import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
 import React from "react";
-import InfiniteScroll from "react-infinite-scroller";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
 const useStyles = makeStyles(
@@ -73,6 +73,8 @@ export interface AssignAttributeDialogProps extends FetchMoreProps {
   onToggle: (id: string) => void;
 }
 
+const scrollableTargetId = "assignAttributeScrollableDialog";
+
 const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
   attributes,
   confirmButtonState,
@@ -126,19 +128,22 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
           }}
         />
       </DialogContent>
-      <DialogContent className={classes.scrollArea} ref={anchor}>
+      <DialogContent
+        className={classes.scrollArea}
+        ref={anchor}
+        id={scrollableTargetId}
+      >
         <InfiniteScroll
-          pageStart={0}
-          loadMore={onFetchMore}
+          dataLength={attributes?.length}
+          next={onFetchMore}
           hasMore={hasMore}
-          useWindow={false}
+          scrollThreshold="100px"
           loader={
             <div className={classes.loadMoreLoaderContainer}>
               <CircularProgress size={16} />
             </div>
           }
-          threshold={100}
-          key="infinite-scroll"
+          scrollableTarget={scrollableTargetId}
         >
           <ResponsiveTable key="table">
             <TableBody>
diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
index bb8646635..b0a94b451 100644
--- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx
+++ b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
@@ -17,14 +17,13 @@ import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps, Node } from "@saleor/types";
 import React from "react";
-import InfiniteScroll from "react-infinite-scroller";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage } from "react-intl";
 
 import Checkbox from "../Checkbox";
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "../ConfirmButton/ConfirmButton";
-import FormSpacer from "../FormSpacer";
 
 export interface FormData {
   containers: string[];
@@ -80,6 +79,8 @@ function handleContainerAssign(
   }
 }
 
+const scrollableTargetId = "assignContainerScrollableDialog";
+
 const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
   const {
     confirmButtonState,
@@ -101,12 +102,9 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
   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}
@@ -116,10 +114,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
       maxWidth="sm"
     >
       <DialogTitle>{title}</DialogTitle>
-      <DialogContent
-        className={scrollableDialogClasses.content}
-        ref={container}
-      >
+      <DialogContent className={scrollableDialogClasses.topArea}>
         <TextField
           name="query"
           value={query}
@@ -132,58 +127,57 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
             endAdornment: loading && <CircularProgress size={16} />
           }}
         />
-        <FormSpacer />
-        <div
-          className={scrollableDialogClasses.scrollArea}
-          style={{ height: containerHeight }}
+      </DialogContent>
+      <DialogContent
+        className={scrollableDialogClasses.scrollArea}
+        id={scrollableTargetId}
+      >
+        <InfiniteScroll
+          dataLength={containers?.length}
+          next={onFetchMore}
+          hasMore={hasMore}
+          scrollThreshold="100px"
+          loader={
+            <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+              <CircularProgress size={16} />
+            </div>
+          }
+          scrollableTarget={scrollableTargetId}
         >
-          <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
-                  );
+          <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>
+                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>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 05f77db41..444d1ad4f 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -13,7 +13,6 @@ import {
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
-import FormSpacer from "@saleor/components/FormSpacer";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
@@ -24,7 +23,7 @@ import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import React from "react";
-import InfiniteScroll from "react-infinite-scroller";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "../Checkbox";
@@ -80,6 +79,8 @@ function handleProductAssign(
   }
 }
 
+const scrollableTargetId = "assignProductScrollableDialog";
+
 const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
   const {
     confirmButtonState,
@@ -100,12 +101,9 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
   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}
@@ -120,10 +118,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent
-        className={scrollableDialogClasses.content}
-        ref={container}
-      >
+      <DialogContent className={scrollableDialogClasses.topArea}>
         <TextField
           name="query"
           value={query}
@@ -141,66 +136,65 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
             endAdornment: loading && <CircularProgress size={16} />
           }}
         />
-        <FormSpacer />
-        <div
-          className={scrollableDialogClasses.scrollArea}
-          style={{ height: containerHeight }}
+      </DialogContent>
+      <DialogContent
+        className={scrollableDialogClasses.scrollArea}
+        id={scrollableTargetId}
+      >
+        <InfiniteScroll
+          dataLength={products?.length}
+          next={onFetchMore}
+          hasMore={hasMore}
+          scrollThreshold="100px"
+          loader={
+            <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+              <CircularProgress size={16} />
+            </div>
+          }
+          scrollableTarget={scrollableTargetId}
         >
-          <InfiniteScroll
-            pageStart={0}
-            loadMore={onFetchMore}
-            hasMore={hasMore}
-            useWindow={false}
-            loader={
-              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
-                <CircularProgress size={16} />
-              </div>
-            }
-            threshold={10}
-          >
-            <ResponsiveTable key="table">
-              <TableBody>
-                {products &&
-                  products.map(product => {
-                    const isSelected = selectedProducts.some(
-                      selectedProduct => selectedProduct.id === product.id
-                    );
+          <ResponsiveTable key="table">
+            <TableBody>
+              {products &&
+                products.map(product => {
+                  const isSelected = selectedProducts.some(
+                    selectedProduct => selectedProduct.id === product.id
+                  );
 
-                    return (
-                      <TableRow
-                        key={product.id}
-                        data-test-id="assign-product-table-row"
+                  return (
+                    <TableRow
+                      key={product.id}
+                      data-test-id="assign-product-table-row"
+                    >
+                      <TableCellAvatar
+                        className={classes.avatar}
+                        thumbnail={maybe(() => product.thumbnail.url)}
+                      />
+                      <TableCell className={classes.colName}>
+                        {product.name}
+                      </TableCell>
+                      <TableCell
+                        padding="checkbox"
+                        className={classes.checkboxCell}
                       >
-                        <TableCellAvatar
-                          className={classes.avatar}
-                          thumbnail={maybe(() => product.thumbnail.url)}
+                        <Checkbox
+                          checked={isSelected}
+                          onChange={() =>
+                            handleProductAssign(
+                              product,
+                              isSelected,
+                              selectedProducts,
+                              setSelectedProducts
+                            )
+                          }
                         />
-                        <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>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+            </TableBody>
+          </ResponsiveTable>
+        </InfiniteScroll>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>
diff --git a/src/components/ColumnPicker/ColumnPicker.tsx b/src/components/ColumnPicker/ColumnPicker.tsx
index b1da45dc6..0db816ef2 100644
--- a/src/components/ColumnPicker/ColumnPicker.tsx
+++ b/src/components/ColumnPicker/ColumnPicker.tsx
@@ -43,7 +43,6 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
     hasMore,
     initialColumns,
     initialOpen = false,
-    loading,
     total,
     onFetchMore,
     onSave
@@ -100,7 +99,6 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
               <ColumnPickerContent
                 columns={columns}
                 hasMore={hasMore}
-                loading={loading}
                 selectedColumns={selectedColumns}
                 total={total}
                 onCancel={handleCancel}
diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx
index d0e35d805..84260a12e 100644
--- a/src/components/ColumnPicker/ColumnPickerContent.tsx
+++ b/src/components/ColumnPicker/ColumnPickerContent.tsx
@@ -12,7 +12,7 @@ import { FetchMoreProps } from "@saleor/types";
 import { isSelected } from "@saleor/utils/lists";
 import classNames from "classnames";
 import React from "react";
-import InfiniteScroll from "react-infinite-scroller";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage } from "react-intl";
 
 import ControlledCheckbox from "../ControlledCheckbox";
@@ -52,12 +52,12 @@ const useStyles = makeStyles(
       display: "grid",
       gridColumnGap: theme.spacing(3),
       gridTemplateColumns: "repeat(3, 1fr)",
-      maxHeight: 256,
-      overflowX: "visible",
-      overflowY: "scroll",
       padding: theme.spacing(2, 3)
     },
     contentContainer: {
+      maxHeight: 256,
+      overflowX: "visible",
+      overflowY: "scroll",
       padding: 0
     },
     dropShadow: {
@@ -80,11 +80,12 @@ const useStyles = makeStyles(
   { name: "ColumnPickerContent" }
 );
 
+const scrollableTargetId = "columnPickerScrollableDiv";
+
 const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
   const {
     columns,
     hasMore,
-    loading,
     selectedColumns,
     total,
     onCancel,
@@ -118,41 +119,24 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
         </Typography>
       </CardContent>
       <Hr />
-      {hasMore && onFetchMore ? (
+      <CardContent
+        className={classes.contentContainer}
+        ref={anchor}
+        id={scrollableTargetId}
+      >
         <InfiniteScroll
-          pageStart={0}
-          loadMore={onFetchMore}
+          dataLength={columns.length}
+          next={onFetchMore}
           hasMore={hasMore}
-          useWindow={false}
-          threshold={100}
-          key="infinite-scroll"
-        >
-          <CardContent className={classes.contentContainer}>
-            <div className={classes.content} ref={anchor}>
-              {columns.map(column => (
-                <ControlledCheckbox
-                  checked={isSelected(
-                    column.value,
-                    selectedColumns,
-                    (a, b) => a === b
-                  )}
-                  name={column.value}
-                  label={column.label}
-                  onChange={() => onColumnToggle(column.value)}
-                  key={column.value}
-                />
-              ))}
-              {loading && (
-                <div className={classes.loadMoreLoaderContainer}>
-                  <CircularProgress size={16} />
-                </div>
-              )}
+          scrollThreshold="100px"
+          loader={
+            <div className={classes.loadMoreLoaderContainer}>
+              <CircularProgress size={16} />
             </div>
-          </CardContent>
-        </InfiniteScroll>
-      ) : (
-        <CardContent className={classes.contentContainer}>
-          <div className={classes.content} ref={anchor}>
+          }
+          scrollableTarget={scrollableTargetId}
+        >
+          <div className={classes.content}>
             {columns.map(column => (
               <ControlledCheckbox
                 checked={isSelected(
@@ -167,8 +151,8 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
               />
             ))}
           </div>
-        </CardContent>
-      )}
+        </InfiniteScroll>
+      </CardContent>
       <Hr />
       <CardContent
         className={classNames(classes.actionBarContainer, {
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index d9c5e3dab..770e91f79 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -29,7 +29,7 @@ import { makeStyles } from "@saleor/theme";
 import { ChannelProps, FetchMoreProps } from "@saleor/types";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import React from "react";
-import InfiniteScroll from "react-infinite-scroller";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import {
@@ -164,6 +164,8 @@ const onVariantAdd = (
       )
     : setVariants([...variants, variant]);
 
+const scrollableTargetId = "orderProductAddScrollableDialog";
+
 const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
   const {
     confirmButtonState,
@@ -267,18 +269,18 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
           }}
         />
       </DialogContent>
-      <DialogContent className={classes.content}>
+      <DialogContent className={classes.content} id={scrollableTargetId}>
         <InfiniteScroll
-          pageStart={0}
-          loadMore={onFetchMore}
+          dataLength={productChoicesWithValidVariants?.length}
+          next={onFetchMore}
           hasMore={hasMore}
-          useWindow={false}
+          scrollThreshold="100px"
           loader={
             <div className={classes.loadMoreLoaderContainer}>
               <CircularProgress size={16} />
             </div>
           }
-          threshold={10}
+          scrollableTarget={scrollableTargetId}
         >
           <ResponsiveTable key="table">
             <TableBody>
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index 09d38fd48..d120f8825 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -27,7 +27,7 @@ import { makeStyles } from "@saleor/theme";
 import { DialogProps, FetchMoreProps, SearchPageProps } from "@saleor/types";
 import classNames from "classnames";
 import React from "react";
-import InfiniteScroll from "react-infinite-scroller";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
 const useStyles = makeStyles(
@@ -47,9 +47,10 @@ const useStyles = makeStyles(
       width: 32
     },
     avatarDefault: {
-      "& p": {
+      "& div": {
         color: "#fff",
-        lineHeight: "47px"
+        lineHeight: 2.8,
+        fontSize: "0.75rem"
       },
       background: theme.palette.primary.main,
       height: 32,
@@ -93,7 +94,11 @@ const useStyles = makeStyles(
     scrollArea: {
       maxHeight: 400,
       overflowY: "scroll",
-      paddingTop: 0
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    table: {
+      marginBottom: theme.spacing(3)
     },
     statusText: {
       color: "#9E9D9D"
@@ -132,6 +137,8 @@ function handleStaffMemberAssign(
   }
 }
 
+const scrollableTargetId = "assignMembersScrollableDialog";
+
 const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
   confirmButtonState,
   disabled,
@@ -187,16 +194,23 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
           disabled={disabled}
         />
       </DialogContent>
-      <DialogContent className={classes.scrollArea}>
+      <DialogContent className={classes.scrollArea} id={scrollableTargetId}>
         <InfiniteScroll
-          pageStart={0}
-          loadMore={onFetchMore}
+          dataLength={staffMembers?.length}
+          next={onFetchMore}
           hasMore={hasMore}
-          useWindow={false}
-          threshold={100}
-          key="infinite-scroll"
+          scrollThreshold="100px"
+          loader={
+            <>
+              {staffMembers?.length > 0 && <CardSpacer />}
+              <div className={classes.loadMoreLoaderContainer}>
+                <CircularProgress size={24} />
+              </div>
+            </>
+          }
+          scrollableTarget={scrollableTargetId}
         >
-          <ResponsiveTable>
+          <ResponsiveTable className={classes.table}>
             <TableBody>
               {staffMembers &&
                 staffMembers.map(member => {
@@ -267,14 +281,6 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
                 })}
             </TableBody>
           </ResponsiveTable>
-          {loading && (
-            <>
-              {staffMembers?.length > 0 && <CardSpacer />}
-              <div className={classes.loadMoreLoaderContainer}>
-                <CircularProgress size={24} />
-              </div>
-            </>
-          )}
         </InfiniteScroll>
       </DialogContent>
       <DialogActions
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index e10ac1c13..0e6e66c75 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -10,10 +10,8 @@ import PageHeader from "@saleor/components/PageHeader";
 import { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits";
 import { ProductListColumns } from "@saleor/config";
 import { sectionNames } from "@saleor/intl";
-import {
-  GridAttributes_availableInGrid_edges_node,
-  GridAttributes_grid_edges_node
-} from "@saleor/products/types/GridAttributes";
+import { AvailableInGridAttributes_availableInGrid_edges_node } from "@saleor/products/types/AvailableInGridAttributes";
+import { GridAttributes_grid_edges_node } from "@saleor/products/types/GridAttributes";
 import { ProductList_products_edges_node } from "@saleor/products/types/ProductList";
 import { makeStyles } from "@saleor/theme";
 import {
@@ -44,7 +42,7 @@ export interface ProductListPageProps
     SortPage<ProductListUrlSortField>,
     ChannelProps {
   activeAttributeSortId: string;
-  availableInGridAttributes: GridAttributes_availableInGrid_edges_node[];
+  availableInGridAttributes: AvailableInGridAttributes_availableInGrid_edges_node[];
   channelsCount: number;
   currencySymbol: string;
   gridAttributes: GridAttributes_grid_edges_node[];
@@ -163,7 +161,6 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           columns={columns}
           defaultColumns={defaultSettings.columns}
           hasMore={hasMore}
-          loading={loading}
           initialColumns={settings.columns}
           total={
             columns.length -
diff --git a/src/products/queries.ts b/src/products/queries.ts
index bf0401de0..831075250 100644
--- a/src/products/queries.ts
+++ b/src/products/queries.ts
@@ -19,6 +19,10 @@ import {
 } from "@saleor/products/types/ProductMediaById";
 import gql from "graphql-tag";
 
+import {
+  AvailableInGridAttributes,
+  AvailableInGridAttributesVariables
+} from "./types/AvailableInGridAttributes";
 import {
   CreateMultipleVariantsData,
   CreateMultipleVariantsDataVariables
@@ -362,7 +366,7 @@ export const useProductMediaQuery = makeQuery<
 
 const availableInGridAttributes = gql`
   ${pageInfoFragment}
-  query GridAttributes($first: Int!, $after: String, $ids: [ID!]!) {
+  query AvailableInGridAttributes($first: Int!, $after: String) {
     availableInGrid: attributes(
       first: $first
       after: $after
@@ -383,7 +387,15 @@ const availableInGridAttributes = gql`
       }
       totalCount
     }
+  }
+`;
+export const useAvailableInGridAttributesQuery = makeQuery<
+  AvailableInGridAttributes,
+  AvailableInGridAttributesVariables
+>(availableInGridAttributes);
 
+const gridAttributes = gql`
+  query GridAttributes($ids: [ID!]!) {
     grid: attributes(first: 25, filter: { ids: $ids }) {
       edges {
         node {
@@ -394,10 +406,10 @@ const availableInGridAttributes = gql`
     }
   }
 `;
-export const useAvailableInGridAttributesQuery = makeQuery<
+export const useGridAttributesQuery = makeQuery<
   GridAttributes,
   GridAttributesVariables
->(availableInGridAttributes);
+>(gridAttributes);
 
 const createMultipleVariantsData = gql`
   ${productVariantAttributesFragment}
diff --git a/src/products/types/AvailableInGridAttributes.ts b/src/products/types/AvailableInGridAttributes.ts
new file mode 100644
index 000000000..36678ec47
--- /dev/null
+++ b/src/products/types/AvailableInGridAttributes.ts
@@ -0,0 +1,43 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL query operation: AvailableInGridAttributes
+// ====================================================
+
+export interface AvailableInGridAttributes_availableInGrid_edges_node {
+  __typename: "Attribute";
+  id: string;
+  name: string | null;
+}
+
+export interface AvailableInGridAttributes_availableInGrid_edges {
+  __typename: "AttributeCountableEdge";
+  node: AvailableInGridAttributes_availableInGrid_edges_node;
+}
+
+export interface AvailableInGridAttributes_availableInGrid_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface AvailableInGridAttributes_availableInGrid {
+  __typename: "AttributeCountableConnection";
+  edges: AvailableInGridAttributes_availableInGrid_edges[];
+  pageInfo: AvailableInGridAttributes_availableInGrid_pageInfo;
+  totalCount: number | null;
+}
+
+export interface AvailableInGridAttributes {
+  availableInGrid: AvailableInGridAttributes_availableInGrid | null;
+}
+
+export interface AvailableInGridAttributesVariables {
+  first: number;
+  after?: string | null;
+}
diff --git a/src/products/types/GridAttributes.ts b/src/products/types/GridAttributes.ts
index 5a25921c0..b864b5001 100644
--- a/src/products/types/GridAttributes.ts
+++ b/src/products/types/GridAttributes.ts
@@ -7,32 +7,6 @@
 // GraphQL query operation: GridAttributes
 // ====================================================
 
-export interface GridAttributes_availableInGrid_edges_node {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-}
-
-export interface GridAttributes_availableInGrid_edges {
-  __typename: "AttributeCountableEdge";
-  node: GridAttributes_availableInGrid_edges_node;
-}
-
-export interface GridAttributes_availableInGrid_pageInfo {
-  __typename: "PageInfo";
-  endCursor: string | null;
-  hasNextPage: boolean;
-  hasPreviousPage: boolean;
-  startCursor: string | null;
-}
-
-export interface GridAttributes_availableInGrid {
-  __typename: "AttributeCountableConnection";
-  edges: GridAttributes_availableInGrid_edges[];
-  pageInfo: GridAttributes_availableInGrid_pageInfo;
-  totalCount: number | null;
-}
-
 export interface GridAttributes_grid_edges_node {
   __typename: "Attribute";
   id: string;
@@ -50,12 +24,9 @@ export interface GridAttributes_grid {
 }
 
 export interface GridAttributes {
-  availableInGrid: GridAttributes_availableInGrid | null;
   grid: GridAttributes_grid | null;
 }
 
 export interface GridAttributesVariables {
-  first: number;
-  after?: string | null;
   ids: string[];
 }
diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx
index 578de111d..b70a96bdf 100644
--- a/src/products/views/ProductList/ProductList.tsx
+++ b/src/products/views/ProductList/ProductList.tsx
@@ -31,6 +31,7 @@ import {
 } from "@saleor/products/components/ProductListPage/utils";
 import {
   useAvailableInGridAttributesQuery,
+  useGridAttributesQuery,
   useInitialProductFilterAttributesQuery,
   useInitialProductFilterCategoriesQuery,
   useInitialProductFilterCollectionsQuery,
@@ -319,8 +320,11 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
       .filter(isAttributeColumnValue)
       .map(getAttributeIdFromColumnValue);
   }
-  const attributes = useAvailableInGridAttributesQuery({
-    variables: { first: 6, ids: filterColumnIds(settings.columns) }
+  const availableInGridAttributes = useAvailableInGridAttributesQuery({
+    variables: { first: 24 }
+  });
+  const gridAttributes = useGridAttributesQuery({
+    variables: { ids: filterColumnIds(settings.columns) }
   });
 
   const [
@@ -376,21 +380,22 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         }}
         onSort={handleSort}
         availableInGridAttributes={mapEdgesToItems(
-          attributes?.data?.availableInGrid
+          availableInGridAttributes?.data?.availableInGrid
         )}
         currencySymbol={selectedChannel?.currencyCode || ""}
         currentTab={currentTab}
         defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]}
         filterOpts={filterOpts}
-        gridAttributes={mapEdgesToItems(attributes?.data?.grid)}
+        gridAttributes={mapEdgesToItems(gridAttributes?.data?.grid)}
         totalGridAttributes={maybe(
-          () => attributes.data.availableInGrid.totalCount,
+          () => availableInGridAttributes.data.availableInGrid.totalCount,
           0
         )}
         settings={settings}
-        loading={attributes.loading}
+        loading={availableInGridAttributes.loading || gridAttributes.loading}
         hasMore={maybe(
-          () => attributes.data.availableInGrid.pageInfo.hasNextPage,
+          () =>
+            availableInGridAttributes.data.availableInGrid.pageInfo.hasNextPage,
           false
         )}
         onAdd={() => navigate(productAddUrl())}
@@ -398,7 +403,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         limits={limitOpts.data?.shop.limits}
         products={mapEdgesToItems(data?.products)}
         onFetchMore={() =>
-          attributes.loadMore(
+          availableInGridAttributes.loadMore(
             (prev, next) => {
               if (
                 prev.availableInGrid.pageInfo.endCursor ===
@@ -419,7 +424,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
               };
             },
             {
-              after: attributes.data.availableInGrid.pageInfo.endCursor
+              after:
+                availableInGridAttributes.data.availableInGrid.pageInfo
+                  .endCursor
             }
           )
         }
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
index a8584431b..8fcb63b0a 100644
--- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
@@ -26,7 +26,7 @@ import { makeStyles } from "@saleor/theme";
 import { FetchMoreProps } from "@saleor/types";
 import React from "react";
 import { MutationFetchResult } from "react-apollo";
-import InfiniteScroll from "react-infinite-scroller";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
 const useStyles = makeStyles(
@@ -89,6 +89,8 @@ const handleProductAssign = (
   }
 };
 
+const scrollableTargetId = "shippingMethodProductsAddScrollableDialog";
+
 const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogProps> = props => {
   const {
     confirmButtonState,
@@ -154,18 +156,18 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
           }}
         />
       </DialogContent>
-      <DialogContent className={classes.content}>
+      <DialogContent className={classes.content} id={scrollableTargetId}>
         <InfiniteScroll
-          pageStart={0}
-          loadMore={onFetchMore}
+          dataLength={products?.length}
+          next={onFetchMore}
           hasMore={hasMore}
-          useWindow={false}
+          scrollThreshold="100px"
           loader={
             <div key="loader" className={classes.loadMoreLoaderContainer}>
               <CircularProgress size={16} />
             </div>
           }
-          threshold={10}
+          scrollableTarget={scrollableTargetId}
         >
           <ResponsiveTable key="table">
             <TableBody>
diff --git a/src/storybook/stories/components/ColumnPicker.tsx b/src/storybook/stories/components/ColumnPicker.tsx
index ef1123958..35681252f 100644
--- a/src/storybook/stories/components/ColumnPicker.tsx
+++ b/src/storybook/stories/components/ColumnPicker.tsx
@@ -42,10 +42,5 @@ storiesOf("Generics / Column picker", module)
   .addDecorator(Decorator)
   .add("default", () => <ColumnPicker {...props} />)
   .add("loading", () => (
-    <ColumnPicker
-      {...props}
-      loading={true}
-      hasMore={true}
-      onFetchMore={() => undefined}
-    />
+    <ColumnPicker {...props} hasMore={true} onFetchMore={() => undefined} />
   ));
diff --git a/src/styles/useScrollableDialogStyle.ts b/src/styles/useScrollableDialogStyle.ts
index c052e4216..5febad35d 100644
--- a/src/styles/useScrollableDialogStyle.ts
+++ b/src/styles/useScrollableDialogStyle.ts
@@ -2,9 +2,6 @@ import { makeStyles } from "@saleor/theme";
 
 const useScrollableDialogStyle = makeStyles(
   theme => ({
-    content: {
-      overflowY: "hidden"
-    },
     dialog: {
       height: "calc(100% - 64px)",
       maxHeight: 700
@@ -16,8 +13,13 @@ const useScrollableDialogStyle = makeStyles(
       justifyContent: "center",
       marginTop: theme.spacing(3)
     },
+    topArea: {
+      overflowY: "visible"
+    },
     scrollArea: {
-      overflowY: "scroll"
+      overflowY: "scroll",
+      paddingTop: 0,
+      height: "inherit"
     }
   }),
   {