Product list bulk delete (#3562)

* Datagrid column checkboxes with delete action

* Handle product bulk delete

* Fix border line between columns

* Clear selection after product delete mutation

* Handle row selection

* Improve handleRowDelete, use clearRowSelection

* Fix restart row selection

* Cleanup

* Fix for delete modal

* Fix showing delete modal

* Add delete button next to switcher

* Extract messages

* Fix checking rows in product list datagrid

* Check console

* Check on row click

* Fix fire click when selection checkbox

* Simplifie vertiacal border condition

* Clear selected product when pagination

* Fix issue with columns and row selections

* Fix hiding tooltip when modal close

* Update storybook props fix accordion use

* Fix row selection

* Fix clear selection after pagination change

* Apply cr changes

locale/defaultMessages.json

@@ -6483,6 +6483,9 @@
     "context": "VariantDetailsChannelsAvailabilityCard no items available",
     "string": "This variant is not available at any of the channels"
   },
+  "jrBxCQ": {
+    "string": "Bulk product delete"
+  },
   "jswILH": {
     "context": "add attribute as column in product list table",
     "string": "Add to Column Options"

package-lock.json

@@ -27,7 +27,7 @@
         "@material-ui/lab": "^4.0.0-alpha.61",
         "@material-ui/styles": "^4.11.4",
         "@reach/auto-id": "^0.16.0",
-        "@saleor/macaw-ui": "0.8.0-pre.73",
+        "@saleor/macaw-ui": "0.8.0-pre.81",
         "@saleor/sdk": "^0.5.0",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -7976,9 +7976,9 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.73",
+      "version": "0.8.0-pre.81",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.73.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.81.tgz",
-      "integrity": "sha512-7+bFDATTV8ZjX3dpU20z5QMUMSZHoNgidLWEzUBkHWk6EgiDf+V5Mn2t8Eexd34uLOIKCQ0j4f/mVG+slRsj/w==",
+      "integrity": "sha512-6s15zUyn82492DwMDNm0yI6uAzik8t/OlI+LrH23L3EgzcyzprbA7DYzwcV4C7vlCEiMxywLnfS/0b1RYnhM1w==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
@@ -43372,9 +43372,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.73",
+      "version": "0.8.0-pre.81",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.73.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.81.tgz",
-      "integrity": "sha512-7+bFDATTV8ZjX3dpU20z5QMUMSZHoNgidLWEzUBkHWk6EgiDf+V5Mn2t8Eexd34uLOIKCQ0j4f/mVG+slRsj/w==",
+      "integrity": "sha512-6s15zUyn82492DwMDNm0yI6uAzik8t/OlI+LrH23L3EgzcyzprbA7DYzwcV4C7vlCEiMxywLnfS/0b1RYnhM1w==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",

package.json

@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.73",
+    "@saleor/macaw-ui": "0.8.0-pre.81",
     "@saleor/sdk": "^0.5.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

src/components/Attributes/Attributes.tsx

@@ -79,7 +79,7 @@ export const Attributes: React.FC<AttributesProps> = ({
         <Box display="flex" flexDirection="column" gap={5}>
           <Accordion defaultValue="attributes-accordion">
             <Accordion.Item value="attributes-accordion">
-              <Accordion.Item.Trigger buttonDataTestId="attributes-expand">
+              <Accordion.Trigger buttonDataTestId="attributes-expand">
                 <Text variant="caption" color="textNeutralSubdued">
                   <FormattedMessage
                     {...messages.attributesNumber}
@@ -88,8 +88,8 @@ export const Attributes: React.FC<AttributesProps> = ({
                     }}
                   />
                 </Text>
-              </Accordion.Item.Trigger>
+              </Accordion.Trigger>
-              <Accordion.Item.Content>
+              <Accordion.Content>
                 {attributes.length > 0 && (
                   <ul>
                     <Divider />
@@ -108,7 +108,7 @@ export const Attributes: React.FC<AttributesProps> = ({
                     ))}
                   </ul>
                 )}
-              </Accordion.Item.Content>
+              </Accordion.Content>
             </Accordion.Item>
           </Accordion>
         </Box>

src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx

@@ -16,13 +16,11 @@ export const ChannelAvailabilityItemWrapper: React.FC<
 > = ({ data: { name }, messages, children }) => (
   <Accordion data-test-id="channel-availability-item">
     <Accordion.Item value="channel-availability-item" gap={12}>
-      <Accordion.Item.Trigger buttonDataTestId="expand-icon">
+      <Accordion.Trigger buttonDataTestId="expand-icon">
         <Text variant={"bodyEmp"}>{name}</Text>
         <Label text={messages.availableDateText} />
-      </Accordion.Item.Trigger>
+      </Accordion.Trigger>
-      <Accordion.Item.Content paddingLeft={6}>
+      <Accordion.Content paddingLeft={6}>{children}</Accordion.Content>
-        {children}
-      </Accordion.Item.Content>
     </Accordion.Item>
   </Accordion>
 );

src/components/Datagrid/Datagrid.tsx

@@ -25,6 +25,7 @@ import React, {
   ReactElement,
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -54,7 +55,10 @@ import useStyles, {
   useFullScreenStyles,
 } from "./styles";
 import { AvailableColumn } from "./types";
-import { getDefultColumnPickerProps } from "./utils";
+import {
+  getDefultColumnPickerProps,
+  preventRowClickOnSelectionCheckbox,
+} from "./utils";
 
 export interface GetCellContentOpts {
   changes: MutableRefObject<DatagridChange[]>;
@@ -91,6 +95,7 @@ export interface DatagridProps {
   onRowClick?: (item: Item) => void;
   onColumnMoved?: (startIndex: number, endIndex: number) => void;
   onColumnResize?: (column: GridColumn, newSize: number) => void;
+  onRowSelectionChange?: (rowsId: number[], clearSelection: () => void) => void;
   readonly?: boolean;
   hasRowHover?: boolean;
   rowMarkers?: DataEditorProps["rowMarkers"];
@@ -126,6 +131,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
   loading,
   rowAnchor,
   hasRowHover = false,
+  onRowSelectionChange,
   ...datagridProps
 }): ReactElement => {
   const classes = useStyles();
@@ -151,6 +157,16 @@ export const Datagrid: React.FC<DatagridProps> = ({
   const [selection, setSelection] = useState<GridSelection>();
   const [hoverRow, setHoverRow] = useState<number | undefined>(undefined);
 
+  // Allow to listen to which row is selected and notfiy parent component
+  useEffect(() => {
+    if (onRowSelectionChange && selection) {
+      // Second parameter is callback to clear selection from parent component
+      onRowSelectionChange(Array.from(selection.rows), () => {
+        setSelection(undefined);
+      });
+    }
+  }, [onRowSelectionChange, selection]);
+
   usePortalClasses({ className: classes.portal });
   usePreventHistoryBack(scroller);
 
@@ -242,6 +258,10 @@ export const Datagrid: React.FC<DatagridProps> = ({
         return;
       }
 
+      if (preventRowClickOnSelectionCheckbox(rowMarkers, args.location[0])) {
+        return;
+      }
+
       hackARef.current.style.left = `${window.scrollX + args.bounds.x}px`;
       hackARef.current.style.width = `${args.bounds.width}px`;
       hackARef.current.style.top = `${window.scrollY + args.bounds.y}px`;
@@ -250,20 +270,26 @@ export const Datagrid: React.FC<DatagridProps> = ({
         getAppMountUri() + (href.startsWith("/") ? href.slice(1) : href);
       hackARef.current.dataset.reactRouterPath = href;
     },
-    [hasRowHover, rowAnchor],
+    [hasRowHover, rowAnchor, rowMarkers],
   );
 
   const handleCellClick = useCallback(
     (item: Item, args: CellClickedEventArgs) => {
-      if (onRowClick && item[0] !== -1) {
+      if (preventRowClickOnSelectionCheckbox(rowMarkers, item[0])) {
+        return;
+      }
+
+      if (onRowClick) {
         onRowClick(item);
       }
+
       handleRowHover(args);
+
       if (hackARef.current) {
         hackARef.current.click();
       }
     },
-    [onRowClick, handleRowHover],
+    [rowMarkers, onRowClick, handleRowHover],
   );
 
   const handleGridSelectionChange = (gridSelection: GridSelection) => {

src/components/Datagrid/utils.ts

@@ -1,3 +1,5 @@
+import { DataEditorProps } from "@glideapps/glide-data-grid";
+
 import { ColumnPickerProps } from "../ColumnPicker";
 
 export const getDefultColumnPickerProps = (
@@ -9,3 +11,8 @@ export const getDefultColumnPickerProps = (
     hoverOutline: false,
   },
 });
+
+export const preventRowClickOnSelectionCheckbox = (
+  rowMarkers: DataEditorProps["rowMarkers"],
+  location: number,
+) => !["number", "none"].includes(rowMarkers) && location === -1;

src/components/TablePagination/TablePaginationWithContext.tsx

@@ -15,12 +15,8 @@ export type TablePaginationWithContextProps = Omit<
 export const TablePaginationWithContext = (
   props: TablePaginationWithContextProps,
 ) => {
-  const {
+  const { hasNextPage, hasPreviousPage, paginatorType, ...paginationProps } =
-    hasNextPage,
+    usePaginatorContext();
-    hasPreviousPage,
-    paginatorType,
-    ...paginationProps
-  } = usePaginatorContext();
 
   if (paginatorType === "click") {
     const { loadNextPage, loadPreviousPage } = paginationProps;

src/products/components/ProductListDatagrid/ProductListDatagrid.tsx

@@ -56,6 +56,7 @@ interface ProductListDatagridProps
     SearchAvailableInGridAttributesQuery["availableInGrid"]
   >;
   onColumnQueryChange: (query: string) => void;
+  onSelectProductIds: (rowsIndex: number[], clearSelection: () => void) => void;
   isAttributeLoading?: boolean;
   hasRowHover?: boolean;
 }
@@ -80,6 +81,7 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
   onColumnQueryChange,
   activeAttributeSortId,
   filterDependency,
+  onSelectProductIds,
   hasRowHover,
   rowAnchor,
 }) => {
@@ -103,22 +105,6 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
 
   const handleColumnMoved = useCallback(
     (startIndex: number, endIndex: number): void => {
-      // Keep empty column always at beginning
-      if (startIndex === 0) {
-        return setColumns(prevColumns => [...prevColumns]);
-      }
-
-      // Keep empty column always at beginning
-      if (endIndex === 0) {
-        return setColumns(old =>
-          addAtIndex(
-            old[startIndex],
-            removeAtIndex(old, startIndex),
-            endIndex + 1,
-          ),
-        );
-      }
-
       setColumns(old =>
         addAtIndex(old[startIndex], removeAtIndex(old, startIndex), endIndex),
       );
@@ -243,13 +229,12 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
         <Datagrid
           readonly
           loading={loading}
-          rowMarkers="none"
+          rowMarkers="checkbox"
           columnSelect="single"
-          freezeColumns={2}
           hasRowHover={hasRowHover}
           onColumnMoved={handleColumnMoved}
           onColumnResize={handleColumnResize}
-          verticalBorder={col => (col > 1 ? true : false)}
+          verticalBorder={col => col > 0}
           getColumnTooltipContent={handleGetColumnTooltipContent}
           availableColumns={columns}
           onHeaderClicked={handleHeaderClicked}
@@ -258,6 +243,7 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
           getCellError={() => false}
           menuItems={() => []}
           rows={productsLength}
+          onRowSelectionChange={onSelectProductIds}
           selectionActions={() => null}
           fullScreenTitle={intl.formatMessage(messages.products)}
           onRowClick={handleRowClick}

src/products/components/ProductListDatagrid/hooks/useDatagridColumns.ts

@@ -1,4 +1,3 @@
-import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
 import { AvailableColumn } from "@dashboard/components/Datagrid/types";
 import { ProductListColumns } from "@dashboard/config";
 import { GridAttributesQuery } from "@dashboard/graphql";
@@ -26,7 +25,6 @@ export const useDatagridColumns = ({
   settings,
 }: UseDatagridColumnsProps) => {
   const intl = useIntl();
-  const emptyColumn = useEmptyColumn();
 
   const initialColumns = useRef(
     getColumns({
@@ -35,13 +33,11 @@ export const useDatagridColumns = ({
       gridAttributes,
       gridAttributesFromSettings,
       activeAttributeSortId,
-      emptyColumn,
     }),
   );
 
   const [columns, setColumns] = useState<AvailableColumn[]>([
     initialColumns.current[0],
-    initialColumns.current[1],
     ...initialColumns.current.filter(col =>
       settings.columns.includes(col.id as ProductListColumns),
     ),
@@ -86,7 +82,7 @@ function byColumnsInSettingsOrStaticColumns(
 ) {
   return (column: AvailableColumn) =>
     settings.columns.includes(column.id as ProductListColumns) ||
-    ["empty", "name"].includes(column.id);
+    ["name"].includes(column.id);
 }
 
 function toCurrentColumnData(

src/products/components/ProductListDatagrid/utils.ts

@@ -17,7 +17,7 @@ import { getMoneyRange } from "@dashboard/components/MoneyRange";
 import { ProductListColumns } from "@dashboard/config";
 import { GridAttributesQuery, ProductListQuery } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
-import { getDatagridRowDataIndex, isFirstColumn } from "@dashboard/misc";
+import { getDatagridRowDataIndex } from "@dashboard/misc";
 import { ProductListUrlSortField } from "@dashboard/products/urls";
 import { RelayToFlat, Sort } from "@dashboard/types";
 import { getColumnSortDirectionIcon } from "@dashboard/utils/columns/getColumnSortDirectionIcon";
@@ -34,7 +34,6 @@ interface GetColumnsProps {
   gridAttributes: RelayToFlat<GridAttributesQuery["grid"]>;
   gridAttributesFromSettings: ProductListColumns[];
   activeAttributeSortId: string;
-  emptyColumn: AvailableColumn;
 }
 
 export function getColumns({
@@ -43,10 +42,8 @@ export function getColumns({
   gridAttributes,
   gridAttributesFromSettings,
   activeAttributeSortId,
-  emptyColumn,
 }: GetColumnsProps): AvailableColumn[] {
   return [
-    emptyColumn,
     {
       id: "name",
       title: intl.formatMessage(commonMessages.product),
@@ -149,10 +146,6 @@ export function createGetCellContent({
     [column, row]: Item,
     { changes, getChangeIndex, added, removed }: GetCellContentOpts,
   ) => {
-    if (isFirstColumn(column)) {
-      return readonlyTextCell("");
-    }
-
     const columnId = columns[column]?.id;
 
     if (!columnId) {

src/products/components/ProductListDeleteButton/ProductListDeleteButton.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import { ProductListDeleteButton } from "./ProductListDeleteButton";
+
+jest.mock("react-intl", () => ({
+  FormattedMessage: ({ defaultMessage }) => <>{defaultMessage}</>,
+}));
+
+describe("ProductListDeleteButton", () => {
+  it("should return null when show is equal false", () => {
+    // Arrange & Act
+    const { container } = render(
+      <ProductListDeleteButton show={false} onClick={jest.fn()} />,
+    );
+
+    // Assert
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("should render button", async () => {
+    // Arrange & Act
+    render(<ProductListDeleteButton show onClick={jest.fn()} />);
+
+    // Assert
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should fire callback on click", async () => {
+    // Arrange
+    const onClick = jest.fn();
+
+    // Act
+    render(<ProductListDeleteButton show onClick={onClick} />);
+    await userEvent.click(screen.getByRole("button"));
+
+    // Assert
+    expect(onClick).toHaveBeenCalled();
+  });
+});

src/products/components/ProductListDeleteButton/ProductListDeleteButton.tsx

@@ -0,0 +1,34 @@
+import { Button, Tooltip, TrashBinIcon } from "@saleor/macaw-ui/next";
+import React, { forwardRef } from "react";
+import { FormattedMessage } from "react-intl";
+
+interface ProductListDeleteButtonProps {
+  onClick: () => void;
+  show?: boolean;
+}
+
+export const ProductListDeleteButton = forwardRef<
+  HTMLButtonElement,
+  ProductListDeleteButtonProps
+>(({ onClick, show = false }, ref) => {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Button
+          ref={ref}
+          onClick={onClick}
+          icon={<TrashBinIcon />}
+          variant="secondary"
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom">
+        <Tooltip.Arrow />
+        <FormattedMessage defaultMessage="Bulk product delete" id="jrBxCQ" />
+      </Tooltip.Content>
+    </Tooltip>
+  );
+});

src/products/components/ProductListDeleteButton/index.ts

@@ -0,0 +1 @@
+export * from "./ProductListDeleteButton";

src/products/components/ProductListPage/ProductListPage.stories.tsx

@@ -34,6 +34,8 @@ const props: ProductListPageProps = {
       ...sortPageProps.sort,
       sort: ProductListUrlSortField.name,
     },
+    onProductsDelete: () => undefined,
+    onSelectProductIds: () => undefined,
     channels: [],
     columnQuery: "",
     currentTab: 0,
@@ -53,6 +55,8 @@ const props: ProductListPageProps = {
   products,
   selectedChannelId: "123",
   selectedProductIds: ["123"],
+  setBulkDeleteButtonRef: () => undefined,
+  clearRowSelection: () => undefined,
   settings: {
     ...pageListProps.default.settings,
     columns: ["availability", "productType", "price"],

src/products/components/ProductListPage/ProductListPage.tsx

@@ -25,7 +25,6 @@ import {
   ChannelProps,
   FetchMoreProps,
   FilterPageProps,
-  ListActions,
   PageListProps,
   RelayToFlat,
   SortPage,
@@ -38,6 +37,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { ProductListUrlSortField, productUrl } from "../../urls";
 import { ProductListDatagrid } from "../ProductListDatagrid";
+import { ProductListDeleteButton } from "../ProductListDeleteButton";
 import { ProductListTiles } from "../ProductListTiles/ProductListTiles";
 import { ProductListViewSwitch } from "../ProductListViewSwitch";
 import {
@@ -48,7 +48,6 @@ import {
 
 export interface ProductListPageProps
   extends PageListProps<ProductListColumns>,
-    ListActions,
     Omit<
       FilterPageProps<ProductFilterKeys, ProductListFilterOpts>,
       "onTabDelete"
@@ -72,6 +71,10 @@ export interface ProductListPageProps
   onColumnQueryChange: (query: string) => void;
   onTabUpdate: (tabName: string) => void;
   onTabDelete: (tabIndex: number) => void;
+  onProductsDelete: () => void;
+  onSelectProductIds: (ids: number[], clearSelection: () => void) => void;
+  clearRowSelection: () => void;
+  setBulkDeleteButtonRef: (ref: HTMLButtonElement) => void;
 }
 
 export type ProductListViewType = "datagrid" | "tile";
@@ -99,7 +102,6 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
     onSearchChange,
     onUpdateListSettings,
     selectedChannelId,
-    selectedProductIds,
     activeAttributeSortId,
     onTabChange,
     onTabDelete,
@@ -109,6 +111,10 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
     tabs,
     onTabUpdate,
     hasPresetsChanged,
+    selectedProductIds,
+    onProductsDelete,
+    clearRowSelection,
+    setBulkDeleteButtonRef,
     ...listProps
   } = props;
   const intl = useIntl();
@@ -133,6 +139,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
       "productListViewType",
       DEFAULT_PRODUCT_LIST_VIEW_TYPE,
     );
+
   const isDatagridView = storedProductListViewType === "datagrid";
 
   return (
@@ -260,10 +267,20 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
               defaultMessage: "Search Products...",
             })}
             actions={
+              <Box display="flex" gap={7}>
+                <ProductListDeleteButton
+                  ref={setBulkDeleteButtonRef}
+                  onClick={onProductsDelete}
+                  show={selectedProductIds.length > 0}
+                />
                 <ProductListViewSwitch
                   defaultValue={storedProductListViewType}
-                setProductListViewType={setProductListViewType}
+                  setProductListViewType={props => {
+                    setProductListViewType(props);
+                    clearRowSelection();
+                  }}
                 />
+              </Box>
             }
           />
         </Box>

src/products/views/ProductList/ProductList.tsx

@@ -27,7 +27,6 @@ import {
   useWarehouseListQuery,
 } from "@dashboard/graphql";
 import useBackgroundTask from "@dashboard/hooks/useBackgroundTask";
-import useBulkActions from "@dashboard/hooks/useBulkActions";
 import useListSettings from "@dashboard/hooks/useListSettings";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
@@ -64,9 +63,9 @@ import createFilterHandlers from "@dashboard/utils/handlers/filterHandlers";
 import { mapEdgesToItems, mapNodeToChoice } from "@dashboard/utils/maps";
 import { getSortUrlVariables } from "@dashboard/utils/sort";
 import { DialogContentText } from "@material-ui/core";
-import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
+import isEqual from "lodash/isEqual";
 import { stringify } from "qs";
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { useSortRedirects } from "../../../hooks/useSortRedirects";
@@ -98,14 +97,34 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
   const { queue } = useBackgroundTask();
 
   const [tabIndexToDelete, setTabIndexToDelete] = useState<number | null>(null);
-  const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
+  const [selectedProductIds, setSelectedProductIds] = useState<string[]>([]);
-    [],
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
-  );
 
   const { updateListSettings, settings } = useListSettings<ProductListColumns>(
     ListViews.PRODUCT_LIST,
   );
 
+  // Keep reference to clear datagrid selection function
+  const clearRowSelectionCallback = React.useRef<() => void | null>(null);
+  const clearRowSelection = () => {
+    setSelectedProductIds([]);
+    if (clearRowSelectionCallback.current) {
+      clearRowSelectionCallback.current();
+    }
+  };
+
+  // Whenever pagination change we need to clear datagrid selection
+  useEffect(() => {
+    clearRowSelection();
+  }, [params.after, params.before]);
+
+  // Remove focus from delete button after delete action
+  useEffect(() => {
+    if (!params.action && deleteButtonRef.current) {
+      deleteButtonRef.current.blur();
+    }
+  }, [params.action]);
+
   usePaginationReset(productListUrl, params, settings.rowNumber);
 
   const intl = useIntl();
@@ -223,14 +242,30 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
           id: data.exportProducts.exportFile.id,
         });
         closeModal();
-        reset();
+        clearRowSelection();
+      }
+    },
+  });
+
+  const [productBulkDelete, productBulkDeleteOpts] =
+    useProductBulkDeleteMutation({
+      onCompleted: data => {
+        if (data.productBulkDelete.errors.length === 0) {
+          closeModal();
+          notify({
+            status: "success",
+            text: intl.formatMessage(commonMessages.savedChanges),
+          });
+          refetch();
+          limitOpts.refetch();
+          clearRowSelection();
         }
       },
     });
 
   const [changeFilters, resetFilters, handleSearchChange] =
     createFilterHandlers({
-      cleanupFn: reset,
+      cleanupFn: clearRowSelection,
       createUrl: productListUrl,
       getFilterQueryParam,
       navigate,
@@ -239,7 +274,8 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     });
 
   const handleTabChange = (tab: number) => {
-    reset();
+    clearRowSelection();
+
     const qs = new URLSearchParams(getFilterTabs()[tab - 1]?.data ?? "");
     qs.append("activeTab", tab.toString());
 
@@ -248,7 +284,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
 
   const handleFilterTabDelete = () => {
     deleteFilterTab(tabIndexToDelete);
-    reset();
+    clearRowSelection();
 
     // When deleting the current tab, navigate to the All products
     if (tabIndexToDelete === currentTab) {
@@ -298,6 +334,14 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
       }),
     );
 
+  const handleSubmitBulkDelete = () => {
+    productBulkDelete({
+      variables: { ids: selectedProductIds },
+    });
+    deleteButtonRef.current.blur();
+    clearRowSelection();
+  };
+
   const kindOpts = getProductKindOpts(availableProductKinds, intl);
   const paginationState = createPaginationState(settings.rowNumber, params);
   const channelOpts = availableChannels
@@ -330,6 +374,26 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     },
   });
 
+  const products = mapEdgesToItems(data?.products);
+
+  const handleSetSelectedProductIds = useCallback(
+    (rows: number[], clearSelection: () => void) => {
+      if (!products) {
+        return;
+      }
+
+      const rowsIds = rows.map(row => products[row].id);
+      const haveSaveValues = isEqual(rowsIds, selectedProductIds);
+
+      if (!haveSaveValues) {
+        setSelectedProductIds(rowsIds);
+      }
+
+      clearRowSelectionCallback.current = clearSelection;
+    },
+    [products, selectedProductIds],
+  );
+
   const availableInGridAttributesOpts = useAvailableInGridAttributesSearch({
     variables: {
       ...DEFAULT_INITIAL_SEARCH_DATA,
@@ -341,22 +405,6 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     skip: filteredColumnIds.length === 0,
   });
 
-  const [productBulkDelete, productBulkDeleteOpts] =
-    useProductBulkDeleteMutation({
-      onCompleted: data => {
-        if (data.productBulkDelete.errors.length === 0) {
-          closeModal();
-          notify({
-            status: "success",
-            text: intl.formatMessage(commonMessages.savedChanges),
-          });
-          reset();
-          refetch();
-          limitOpts.refetch();
-        }
-      },
-    });
-
   const {
     loadMore: loadMoreDialogProductTypes,
     search: searchDialogProductTypes,
@@ -441,26 +489,15 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         )}
         disabled={loading}
         limits={limitOpts.data?.shop.limits}
-        products={mapEdgesToItems(data?.products)}
+        products={products}
-        selectedProductIds={listElements}
         onColumnQueryChange={availableInGridAttributesOpts.search}
         onFetchMore={availableInGridAttributesOpts.loadMore}
-        onUpdateListSettings={updateListSettings}
+        onUpdateListSettings={(...props) => {
+          clearRowSelection();
+          updateListSettings(...props);
+        }}
         onAdd={() => openModal("create-product")}
         onAll={resetFilters}
-        toolbar={
-          <IconButton
-            variant="secondary"
-            color="primary"
-            onClick={() => openModal("delete")}
-          >
-            <DeleteIcon />
-          </IconButton>
-        }
-        isChecked={isSelected}
-        selected={listElements.length}
-        toggle={toggle}
-        toggleAll={toggleAll}
         onSearchChange={handleSearchChange}
         onFilterChange={changeFilters}
         onFilterAttributeFocus={setFocusedAttribute}
@@ -470,23 +507,26 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
           setTabIndexToDelete(tabIndex);
           openModal("delete-search");
         }}
+        onProductsDelete={() => openModal("delete")}
         onTabChange={handleTabChange}
         hasPresetsChanged={hasPresetsChanged()}
         initialSearch={params.query || ""}
         tabs={tabs.map(tab => tab.name)}
         onExport={() => openModal("export")}
         selectedChannelId={selectedChannel?.id}
+        selectedProductIds={selectedProductIds}
+        onSelectProductIds={handleSetSelectedProductIds}
         columnQuery={availableInGridAttributesOpts.query}
+        clearRowSelection={clearRowSelection}
+        setBulkDeleteButtonRef={(ref: HTMLButtonElement) => {
+          deleteButtonRef.current = ref;
+        }}
       />
       <ActionDialog
         open={params.action === "delete"}
         confirmButtonState={productBulkDeleteOpts.status}
         onClose={closeModal}
-        onConfirm={() => {
+        onConfirm={handleSubmitBulkDelete}
-          productBulkDelete({
-            variables: { ids: listElements },
-          });
-        }}
         title={intl.formatMessage({
           id: "F4WdSO",
           defaultMessage: "Delete Products",
@@ -500,8 +540,8 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
             defaultMessage="{counter,plural,one{Are you sure you want to delete this product?} other{Are you sure you want to delete {displayQuantity} products?}}"
             description="dialog content"
             values={{
-              counter: params?.ids?.length,
+              counter: selectedProductIds.length,
-              displayQuantity: <strong>{params?.ids?.length}</strong>,
+              displayQuantity: <strong>{selectedProductIds.length}</strong>,
             }}
           />
         </DialogContentText>
@@ -525,7 +565,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
           all: countAllProducts.data?.products?.totalCount,
           filter: data?.products?.totalCount,
         }}
-        selectedProducts={listElements.length}
+        selectedProducts={selectedProductIds.length}
         warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
         channels={availableChannels}
         onClose={closeModal}
@@ -535,7 +575,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
               input: {
                 ...data,
                 filter,
-                ids: listElements,
+                ids: selectedProductIds,
               },
             },
           })