Fix page level selection selecting all items

Shopify · Oct 11, 2024 · 4631d71 · 4631d71
1 parent 8c7ef4e
commit 4631d71
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 68 deletions.
diff --git a/polaris-react/locales/en.json b/polaris-react/locales/en.json
@@ -239,7 +239,7 @@
       "selectAllLabel": "Select all {resourceNamePlural}",
       "selected": "{selectedItemsCount} selected",
       "undo": "Undo",
-      "selectAllItems": "Select all {itemsLength}+ {resourceNamePlural}",
+      "selectAllItems": "Select all {itemCount} in store",
       "selectItem": "Select {resourceName}",
       "selectButtonText": "Select",
       "sortAccessibilityLabel": "sort {direction} by"
@@ -294,8 +294,8 @@
         "selectAllMenu": {
           "activator": "{selectedItemsCount} selected",
           "items": {
-            "selectAllOnPage": "Select all 50 on page",
-            "selectAllInStore": "Select all {itemCount} in store",
+            "selectAllOnPage": "Select all {pageCount} on page",
+            "unselectAllOnPage": "Unselect all {pageCount} on page",
             "unselectAll": "Unselect all"
           }
         },

diff --git a/polaris-react/playground/OrdersPage.tsx b/polaris-react/playground/OrdersPage.tsx
@@ -304,7 +304,7 @@ function Table({orders}: {orders: Order[]}) {
     ? pagedOrdersStartIndex + PAGE_LIMIT
     : totalOrderCount;
   const pagedOrders = orders.slice(pagedOrdersStartIndex, pagedOrdersEndIndex);
-
+  const pageRange = [pagedOrdersStartIndex, pagedOrdersEndIndex - 1];
   const handlePagination = (direction: 'prev' | 'next') => () => {
     setCurrentPage((current) =>
       direction === 'prev' ? current - 1 : current + 1,
@@ -342,8 +342,6 @@ function Table({orders}: {orders: Order[]}) {
     onPrevious: handlePagination('prev'),
   };
 
-  console.log(pageCount);
-
   const promotedBulkActions = [
     {
       content: 'Create shipping labels',
@@ -367,12 +365,6 @@ function Table({orders}: {orders: Order[]}) {
       content: 'Remove tags',
       onAction: () => console.log('Todo: implement bulk remove tags'),
     },
-    {
-      icon: DeleteIcon,
-      destructive: true,
-      content: 'Delete customers',
-      onAction: () => console.log('Todo: implement bulk delete'),
-    },
   ];
 
   const rowMarkup = pagedOrders.map(
@@ -445,14 +437,16 @@ function Table({orders}: {orders: Order[]}) {
     <IndexTable
       resourceName={resourceName}
       itemCount={orders.length}
+      pageCount={pagedOrders.length}
+      pageSelectionRange={pageRange}
       selectedItemsCount={
         allResourcesSelected ? 'All' : selectedResources.length
       }
       onSelectionChange={handleSelectionChange}
       pagination={pagination}
       bulkActions={bulkActions}
       promotedBulkActions={promotedBulkActions}
-      hasMoreItems={false}
+      hasMoreItems
       headings={[
         {title: 'Order'},
         {title: 'Date'},
@@ -1013,12 +1007,6 @@ function OrdersIndexTableWithFilters(
       });
     });
 
-  console.log(
-    appliedFilterKeys,
-    appliedFilters,
-    savedViewFilters[selectedView],
-  );
-
   const appliedFilterMatchesSavedFilter = (
     appliedFilter: AppliedFilterInterface,
   ) => {

diff --git a/polaris-react/src/components/BulkActions/BulkActions.tsx b/polaris-react/src/components/BulkActions/BulkActions.tsx
@@ -15,7 +15,6 @@ import type {
   MenuGroupDescriptor,
   Action,
 } from '../../types';
-import {Button} from '../Button';
 import {ActionList} from '../ActionList';
 import {Popover} from '../Popover';
 import {InlineStack} from '../InlineStack';
@@ -46,8 +45,6 @@ type AriaLive = 'off' | 'polite' | undefined;
 export interface BulkActionsProps {
   /** Visually hidden text for screen readers */
   accessibilityLabel?: string;
-  /** State of the bulk actions checkbox */
-  selected?: boolean | 'indeterminate';
   /** Text to select all across pages */
   paginatedSelectAllText?: string;
   /** Action for selecting all across pages */
@@ -70,10 +67,12 @@ export interface BulkActionsProps {
   selectMode?: boolean;
   /** The number of rows selected in the table */
   selectedItemsCount?: number | 'All';
-  /** The total number of rows in the table */
+  /** The total number of items in the store */
   itemCount: number;
+  /** The total number of items on the current page */
+  pageCount: number;
   /** Callback when the select all checkbox is clicked */
-  onSelect?(selectionType: 'page' | 'all' | 'none'): void;
+  onSelect?(selectionType: 'page' | 'all' | 'none', isSelecting: boolean): void;
   /** @deprecated Used for forwarding the ref. Use `ref` prop instead */
   innerRef?: React.Ref<any>;
   /** @deprecated Callback when selectable state of list is changed. Unused callback */
@@ -100,13 +99,13 @@ export const BulkActions = ({
   buttonSize = 'medium',
   paginatedSelectAllAction,
   paginatedSelectAllText,
-  selected,
   onSelect,
   onMoreActionPopoverToggle,
   width,
   selectMode,
   selectedItemsCount = 0,
   itemCount,
+  pageCount,
 }: BulkActionsProps) => {
   const i18n = useI18n();
   const [popoverActive, setPopoverActive] = useState(false);
@@ -117,8 +116,8 @@ export const BulkActions = ({
   };
 
   const handleBulkSelection =
-    (selectionType: 'page' | 'all' | 'none') => () => {
-      onSelect?.(selectionType);
+    (selectionType: 'page' | 'all' | 'none', isSelecting: boolean) => () => {
+      onSelect?.(selectionType, isSelecting);
     };
 
   const [state, setState] = useReducer(
@@ -180,24 +179,37 @@ export const BulkActions = ({
 
   const ariaLive: AriaLive = hasTextAndAction ? 'polite' : undefined;
 
+  // No idea why this translation borks...
+  // ? i18n.translate(
+  //     'Polaris.ResourceList.BulkActions.selectAllMenu.items.unselectAllOnPage',
+  //     {pageCount},
+  //   )
+  const selectAllOnPageContent =
+    selectedItemsCount === pageCount ||
+    selectedItemsCount === 'All' ||
+    selectedItemsCount === itemCount
+      ? `Unselect all ${pageCount} on page`
+      : i18n.translate(
+          'Polaris.ResourceList.BulkActions.selectAllMenu.items.selectAllOnPage',
+          {pageCount},
+        );
+
   const selectAllOnPageItem = {
-    content: i18n.translate(
-      'Polaris.ResourceList.BulkActions.selectAllMenu.items.selectAllOnPage',
+    content: selectAllOnPageContent,
+    onAction: handleBulkSelection(
+      'page',
+      !(
+        selectedItemsCount === pageCount ||
+        selectedItemsCount === 'All' ||
+        selectedItemsCount === itemCount
+      ),
     ),
-    disabled: selected === true,
-    onAction: handleBulkSelection('page'),
   };
 
   const selectAllInStoreItem = paginatedSelectAllAction
     ? {
         ...paginatedSelectAllAction,
         disabled: selectedItemsCount === 'All',
-        content: paginatedSelectAllText
-          ? paginatedSelectAllText
-          : i18n.translate(
-              'Polaris.ResourceList.BulkActions.selectAllMenu.items.selectAllInStore',
-              {itemCount},
-            ),
       }
     : null;
 
@@ -206,7 +218,7 @@ export const BulkActions = ({
       'Polaris.ResourceList.BulkActions.selectAllMenu.items.unselectAll',
     ),
     disabled: selectedItemsCount === 0,
-    onAction: handleBulkSelection('none'),
+    onAction: handleBulkSelection('all', false),
   };
 
   const selectAllActionsMarkup = selectMode ? (
@@ -375,7 +387,7 @@ export const BulkActions = ({
       <Popover
         active={popoverActive}
         activator={activator}
-        preferredAlignment="right"
+        preferredAlignment="left"
         onClose={togglePopover}
       >
         <ActionList

diff --git a/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx b/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx
@@ -42,6 +42,7 @@ interface Props {
   selected: boolean;
   selectMode: boolean;
   itemCount: number;
+  pageCount: number;
   selectedItemsCount: number | 'All';
 }
 
@@ -61,6 +62,7 @@ const bulkActionProps: Props = {
   disabled: false,
   selectMode: true,
   itemCount: 2,
+  pageCount: 2,
   selectedItemsCount: 0,
 };
 
@@ -345,6 +347,7 @@ describe('<BulkActions />', () => {
           ],
           disabled: false,
           itemCount: 2,
+          pageCount: 2,
           selectedItemsCount: 0,
         };
         const bulkActions = mountWithApp(<BulkActions {...bulkActionProps} />);
@@ -384,6 +387,7 @@ describe('<BulkActions />', () => {
           ],
           disabled: false,
           itemCount: 2,
+          pageCount: 2,
           selectedItemsCount: 0,
         };
         const bulkActions = mountWithApp(<BulkActions {...bulkActionProps} />);
@@ -430,6 +434,7 @@ describe('<BulkActions />', () => {
           ],
           disabled: false,
           itemCount: 2,
+          pageCount: 2,
           selectedItemsCount: 0,
         };
         const bulkActions = mountWithApp(<BulkActions {...bulkActionProps} />);
@@ -468,6 +473,7 @@ describe('<BulkActions />', () => {
           ],
           disabled: false,
           itemCount: 2,
+          pageCount: 2,
           selectedItemsCount: 0,
         };
         const bulkActions = mountWithApp(<BulkActions {...bulkActionProps} />);
@@ -517,6 +523,7 @@ describe('<BulkActions />', () => {
           ],
           disabled: false,
           itemCount: 2,
+          pageCount: 2,
           selectedItemsCount: 0,
         };
         const bulkActions = mountWithApp(<BulkActions {...bulkActionProps} />);

diff --git a/polaris-react/src/components/IndexProvider/IndexProvider.tsx b/polaris-react/src/components/IndexProvider/IndexProvider.tsx
@@ -16,6 +16,8 @@ export function IndexProvider({
   onSelectionChange,
   selectedItemsCount = 0,
   itemCount,
+  pageCount,
+  pageSelectionRange,
   hasMoreItems,
   condensed,
   selectable: isSelectableIndex = true,
@@ -40,6 +42,8 @@ export function IndexProvider({
   const contextValue = useMemo(
     () => ({
       itemCount,
+      pageCount,
+      pageSelectionRange,
       selectMode: selectMode && isSelectableIndex,
       selectable: isSelectableIndex,
       resourceName,
@@ -54,6 +58,8 @@ export function IndexProvider({
     }),
     [
       itemCount,
+      pageCount,
+      pageSelectionRange,
       selectMode,
       isSelectableIndex,
       resourceName,

diff --git a/polaris-react/src/components/IndexProvider/tests/IndexProvider.test.tsx b/polaris-react/src/components/IndexProvider/tests/IndexProvider.test.tsx
@@ -7,6 +7,7 @@ import {IndexRowContext} from '../../../utilities/index-provider';
 describe('<IndexProvider />', () => {
   const defaultProps = {
     itemCount: 0,
+    pageCount: 0,
     selectedItemsCount: 0,
     onSelectionChange: () => {},
   };