Merge pull request #1222 from securityscorecard/next

Merge next release 2.13.0 NOTICKET

Author: ajkl2533

.storybook/image-snapshots/expected/Iconography_List_List.png

@@ -231,6 +231,7 @@ export interface ParsedDatatableOptions<D>
   rowActions?: DatatableOptions<D>['rowActions'];
   rowCount?: DatatableOptions<D>['rowCount'];
   rowsPerPageOptions?: DatatableOptions<D>['rowsPerPageOptions'];
+  rowSelectionMode?: DatatableOptions<D>['rowSelectionMode'];
   selectAllMode?: DatatableOptions<D>['selectAllMode'];
   state?: DatatableOptions<D>['state'];
 }
@@ -311,7 +312,7 @@ export interface DatatableOptions<D>
   > {
   /**
    * Definition of the table columns. Each column definition is REQUIRED to have `header` property
-   * set. If you define a column that is not used for displaing row data (e.g. have button...),
+   * set. If you define a column that is not used for displaing row data (e.g. have ...),
    * please provide `columnDefType: 'display'`. Setting this property will disable some unnecessary
    * functionalities and filter out the column from column orderdering.
    */
@@ -523,12 +524,12 @@ export interface DatatableOptions<D>
   /**
    * You can provide your own implementation of the row actions container. This property accepts
    * React component with properties:
-   *  - `selectedRows` - array of currently selected rows
+   *  - `selectedRows` - array of currently selected rows or list of row ids if manualPagination is enabled and rowSelectionMode is set to 'multi-page'
    *  - `totalRowCount` - count of all rows in the table
    *  - `table` - current instance of the table
    */
   renderRowSelectionActions?: (props: {
-    selectedRows: D[];
+    selectedRows: D[] | (string | number)[];
     totalRowCount: number;
     table: DatatableInstance<D>;
   }) => ReactNode;
@@ -550,6 +551,12 @@ export interface DatatableOptions<D>
    * default: `[10, 25, 50, 100]`
    */
   rowsPerPageOptions?: number[];
+  /**
+   * Available only if `manualPagination: true`.
+   *
+   * default: 'single-page`
+   */
+  rowSelectionMode?: 'single-page' | 'multi-page';
   /**
    * Switch mode for the select all checkbox in the table header. When `page` is set checkbox will
    * select all rows in the current page. When `all` is set checkbox will select all rows in the

.storybook/image-snapshots/expected/components_DatatableV2_Selection_Manual Pagination With Multi Page Selection.png

@@ -59,9 +59,14 @@ const SelectButton = <D,>({
 } & ComponentPropsWithoutRef<'input'>) => {
   const {
     getState,
-    options: { enableMultiRowSelection, selectAllMode },
+    options: {
+      enableMultiRowSelection,
+      selectAllMode,
+      manualPagination,
+      rowSelectionMode,
+    },
   } = table;
-  const { isLoading } = getState();
+  const { isLoading, rowSelection } = getState();
   const { t } = useSafeTranslation();
 
   const allRowsSelected =
@@ -104,9 +109,12 @@ const SelectButton = <D,>({
       <IndeterminateCheckbox
         className="ds-table-select-multi-button ds-table-select-button"
         indeterminate={
-          isHeaderCheckbox
-            ? table.getIsSomeRowsSelected() && !allRowsSelected
-            : false
+          !isHeaderCheckbox
+            ? false
+            : manualPagination && rowSelectionMode === 'single-page'
+            ? table.getIsSomePageRowsSelected() && !allRowsSelected
+            : Object.values(rowSelection ?? {}).filter(Boolean).length > 0 &&
+              !allRowsSelected
         }
         {...common}
         style={styles}

.storybook/image-snapshots/expected/components_DatatableV2_Selection_Manual Pagination With Single Page Selection.png

@@ -31,6 +31,7 @@ export const useOptions = <D>({
   renderNoDataFallback,
   renderRowSelectionActions,
   rowsPerPageOptions = [10, 25, 50, 100],
+  rowSelectionMode = 'single-page',
   selectAllMode = 'page',
   ...restDatatableOptions
 }: Partial<DatatableOptions<D>>): ParsedDatatableOptions<D> => {
@@ -90,6 +91,7 @@ export const useOptions = <D>({
     renderNoDataFallback,
     renderRowSelectionActions,
     rowsPerPageOptions,
+    rowSelectionMode,
     selectAllMode,
     ...restDatatableOptions,
     columnResizeMode: 'onChange',

.storybook/image-snapshots/expected/components_TreeView_Enabled Selection.png

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import { Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { RowSelectionState } from '@tanstack/react-table';
+import { PaginationState, RowSelectionState } from '@tanstack/react-table';
 
 import Datatable from '../Datatable';
 import Template, { Story } from './Template';
 import { Button } from '../../Button';
+import { fetchData, useQuery } from '../mocks/externalData';
 
 export default {
   title: 'components/DatatableV2/Selection',
@@ -141,3 +142,57 @@ export const SelectionManagedState: Story = (args) => {
   );
 };
 SelectionManagedState.args = SelectionEnabled.args;
+
+export const ManualPaginationWithSinglePageSelection: Story = (args) => {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 1,
+    pageSize: 10,
+  });
+
+  const dataQuery = useQuery({
+    queryKey: ['data', pagination],
+    queryFn: () => fetchData(pagination),
+    keepPreviousData: true,
+  });
+
+  return (
+    <Datatable
+      {...args}
+      data={dataQuery?.data?.entries ?? []}
+      pageCount={dataQuery?.data?.pageCount ?? -1}
+      rowCount={dataQuery?.data?.rowCount}
+      state={{ pagination }}
+      onPaginationChange={setPagination}
+    />
+  );
+};
+ManualPaginationWithSinglePageSelection.args = {
+  ...Template.args,
+  rowSelectionMode: 'single-page',
+  renderRowSelectionActions: ({ selectedRows }) => (
+    <Button onClick={() => action('batch action')(selectedRows)}>
+      Show selected rows
+    </Button>
+  ),
+  manualPagination: true,
+  initialState: {
+    rowSelection: {
+      '55ea9935-7f59-4e30-b132-5372d214c20e': true,
+      '72badeb8-8974-4dc3-82f5-b638b381b9c4': true,
+      'ffcc21d9-7fe7-4c26-b708-4b8ba6432ad6': true,
+    },
+  },
+};
+ManualPaginationWithSinglePageSelection.parameters = {
+  screenshot: { skip: false },
+};
+
+export const ManualPaginationWithMultiPageSelection: Story =
+  ManualPaginationWithSinglePageSelection.bind({});
+ManualPaginationWithMultiPageSelection.args = {
+  ...ManualPaginationWithSinglePageSelection.args,
+  rowSelectionMode: 'multi-page',
+};
+ManualPaginationWithMultiPageSelection.parameters = {
+  screenshot: { skip: false },
+};

.storybook/image-snapshots/expected/components_TreeView_Single Row Action.png

@@ -4,7 +4,7 @@ import { Surface } from '../../layout';
 import { DatatableInstance } from '../Datatable.types';
 import Table from './Table';
 import TopToolbar from '../toolbar/TopToolbar';
-import SelectionToolbar from '../../_internal/toolbars/SelectionToolbar';
+import { SelectionToolbarReactTable } from '../../_internal/toolbars/SelectionToolbar';
 import PaginationToolbar from '../../_internal/toolbars/PaginationToolbar';
 
 const DatatableRoot = styled.div<{ $isFullscreen }>`
@@ -87,7 +87,7 @@ const TableSurface = <D,>({ table }: { table: DatatableInstance<D> }) => {
       </Surface>
       {table.options.enableRowSelection &&
         table.options.enableSelectionToolbar && (
-          <SelectionToolbar<D> instance={table} />
+          <SelectionToolbarReactTable<D> instance={table} />
         )}
       {table.options.enablePagination &&
         table.getRowModel().rows.length > 0 && (

.storybook/image-snapshots/expected/components_TreeView_Two Row Actions.png

@@ -1,8 +1,52 @@
 import { screen, waitFor } from '@testing-library/react';
+import { useState } from 'react';
+import { type PaginationState } from '@tanstack/react-table';
 
 import { setup } from '../../../utils/tests/setup';
 import Datatable from '../Datatable';
 import { columns, data } from './mocks';
+import { fetchData, useQuery } from '../mocks/externalData';
+
+const SSPDatatable = ({ rowAction, rowSelectionMode }) => {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const dataQuery = useQuery({
+    queryKey: ['data', pagination],
+    queryFn: () => fetchData(pagination),
+    keepPreviousData: true,
+  });
+
+  return (
+    <Datatable
+      id="test"
+      getRowId={(row) => row.id}
+      columns={[
+        { accessorKey: 'organization.name', header: 'Name' },
+        { accessorKey: 'organization.domain', header: 'domain' },
+      ]}
+      data={dataQuery?.data?.entries ?? []}
+      pageCount={dataQuery?.data?.pageCount ?? -1}
+      renderRowSelectionActions={({ selectedRows }) => (
+        <button
+          type="button"
+          onClick={() => {
+            rowAction(selectedRows);
+          }}
+        >
+          Row action
+        </button>
+      )}
+      rowCount={dataQuery?.data?.rowCount}
+      rowSelectionMode={rowSelectionMode}
+      state={{ pagination }}
+      manualPagination
+      onPaginationChange={setPagination}
+    />
+  );
+};
 
 describe('DatatableV2/selection', () => {
   it('should have selection enabled by default', () => {
@@ -164,6 +208,7 @@ describe('DatatableV2/selection', () => {
           screen.getAllByLabelText('Toggle select row')[0],
         ).not.toBeChecked();
       });
+
       it('should select all rows when "selectionMode=all"', async () => {
         const { user } = setup(
           <Datatable
@@ -186,6 +231,145 @@ describe('DatatableV2/selection', () => {
         expect(screen.getAllByLabelText('Toggle select all')[0]).toBeChecked();
         expect(screen.getAllByLabelText('Toggle select row')[0]).toBeChecked();
       });
+
+      describe('with server-side pagination', () => {
+        describe('when "rowSelectionMode=multi-page"', () => {
+          it('should maintain selection toolbar during pagination', async () => {
+            const rowAction = vi.fn();
+            const { user } = setup(
+              <SSPDatatable
+                rowSelectionMode="multi-page"
+                rowAction={rowAction}
+              />,
+            );
+
+            await user.click(screen.getAllByLabelText('Toggle select row')[0]);
+            expect(
+              screen.getAllByLabelText('Toggle select row')[0],
+            ).toBeChecked();
+            expect(
+              screen.getByLabelText('Toggle select all'),
+            ).toBePartiallyChecked();
+
+            await user.click(
+              screen.getByLabelText('Go to the next page of table'),
+            );
+
+            await waitFor(() => {
+              expect(
+                screen.getAllByLabelText('Toggle select all')[0],
+              ).toBePartiallyChecked();
+            });
+            await waitFor(() => {
+              expect(
+                screen.getByRole('button', { name: /Clear selection/i }),
+              ).toBeInTheDocument();
+            });
+          });
+          it('should return list of selected rows ids', async () => {
+            const rowAction = vi.fn();
+            const { user } = setup(
+              <SSPDatatable
+                rowSelectionMode="multi-page"
+                rowAction={rowAction}
+              />,
+            );
+
+            await user.click(screen.getAllByLabelText('Toggle select row')[0]);
+
+            await user.click(
+              screen.getByLabelText('Go to the next page of table'),
+            );
+
+            await user.click(screen.getAllByLabelText('Toggle select row')[0]);
+
+            await user.click(
+              screen.getByRole('button', { name: /Row action/i }),
+            );
+
+            await waitFor(() => {
+              expect(rowAction).toBeCalledWith([
+                '5cf2bc99-2721-407d-8592-ba00fbdf302f',
+                '484e5bdb-2bb5-4844-8c6c-4d9e1808ac3a',
+              ]);
+            });
+          });
+        });
+
+        describe('when "rowSelectionMode=single-page"', () => {
+          it('should reset selection toolbar during pagination', async () => {
+            const rowAction = vi.fn();
+            const { user } = setup(
+              <SSPDatatable
+                rowSelectionMode="single-page"
+                rowAction={rowAction}
+              />,
+            );
+
+            await user.click(screen.getAllByLabelText('Toggle select row')[0]);
+            expect(
+              screen.getAllByLabelText('Toggle select row')[0],
+            ).toBeChecked();
+            expect(
+              screen.getByLabelText('Toggle select all'),
+            ).toBePartiallyChecked();
+
+            await user.click(
+              screen.getByLabelText('Go to the next page of table'),
+            );
+
+            await waitFor(() => {
+              expect(
+                screen.getAllByLabelText('Toggle select all')[0],
+              ).not.toBePartiallyChecked();
+            });
+            await waitFor(() => {
+              expect(
+                screen.queryByRole('button', { name: /Clear selection/i }),
+              ).not.toBeInTheDocument();
+            });
+          });
+          it('should return list of selected rows data only for current page', async () => {
+            const rowAction = vi.fn();
+            const { user } = setup(
+              <SSPDatatable
+                rowSelectionMode="single-page"
+                rowAction={rowAction}
+              />,
+            );
+
+            await user.click(screen.getAllByLabelText('Toggle select row')[0]);
+
+            await user.click(
+              screen.getByRole('button', { name: /Row action/i }),
+            );
+
+            expect(rowAction).toBeCalledWith([
+              expect.objectContaining({
+                id: '5cf2bc99-2721-407d-8592-ba00fbdf302f',
+                ipAddress: '5.74.134.156',
+              }),
+            ]);
+            rowAction.mockReset();
+
+            await user.click(
+              screen.getByLabelText('Go to the next page of table'),
+            );
+
+            await user.click(screen.getAllByLabelText('Toggle select row')[0]);
+
+            await user.click(
+              screen.getByRole('button', { name: /Row action/i }),
+            );
+            expect(rowAction).toBeCalledWith([
+              expect.objectContaining({
+                id: '484e5bdb-2bb5-4844-8c6c-4d9e1808ac3a',
+                ipAddress: '86.7.96.148',
+              }),
+            ]);
+          });
+        });
+      });
     });
 
     it('should circle through selected rows when multi select is disabled', async () => {