SW-4503 Implement v2 enhanced top bar with select all, select none, enhanced selection text (#450)

Author: nickgraz

src/components/table/EnhancedTableToolbar.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import { Theme, Toolbar, Typography } from '@mui/material';
+import React, { useMemo } from 'react';
+import { Link, Theme, Toolbar, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import { isTopBarButton, TopBarButton } from '.';
 import Button from '../Button/Button';
-import { makeStyles } from '@mui/styles';
 import Tooltip from '../Tooltip/Tooltip';
+import { EnhancedTopBarSelectionConfig } from './EnhancedTableToolbarV2';
 
 const styles = makeStyles((theme: Theme) => ({
   toolbar: {
@@ -15,22 +16,56 @@ const styles = makeStyles((theme: Theme) => ({
   buttonSpacing: {
     marginLeft: theme.spacing(1),
   },
+  selectLink: {
+    color: theme.palette.TwClrTxtBrand,
+    cursor: 'pointer',
+  },
 }));
 
 interface EnhancedTableToolbarProps {
+  isAllSelected?: boolean;
   numSelected: number;
-  renderNumSelectedText?: (numSelected: number) => string | JSX.Element;
+  renderNumSelectedText?: (numSelected: number) => string;
   topBarButtons?: (TopBarButton | JSX.Element)[];
+  topBarSelectionConfig?: EnhancedTopBarSelectionConfig;
 }
 
 export default function EnhancedTableToolbar(props: EnhancedTableToolbarProps): JSX.Element | null {
-  const { numSelected, renderNumSelectedText, topBarButtons } = props;
+  const { isAllSelected, numSelected, renderNumSelectedText, topBarButtons, topBarSelectionConfig } = props;
   const classes = styles();
 
+  const topBarSelection = useMemo(() => {
+    if (!renderNumSelectedText) {
+      return null;
+    }
+
+    if (!topBarSelectionConfig) {
+      return renderNumSelectedText(numSelected);
+    }
+
+    const { handleSelectAll, handleSelectNone, renderSelectAllText, renderSelectNoneText, renderEnhancedNumSelectedText } = topBarSelectionConfig;
+
+    return (
+      <>
+        {renderEnhancedNumSelectedText ? renderEnhancedNumSelectedText() : renderNumSelectedText(numSelected)}{' '}
+        {!isAllSelected && handleSelectAll && renderSelectAllText && (
+          <Link className={classes.selectLink} onClick={handleSelectAll}>
+            {renderSelectAllText()}
+          </Link>
+        )}
+        {isAllSelected && handleSelectNone && renderSelectNoneText && (
+          <Link className={classes.selectLink} onClick={handleSelectNone}>
+            {renderSelectNoneText()}
+          </Link>
+        )}
+      </>
+    );
+  }, [renderNumSelectedText, topBarSelectionConfig, numSelected]);
+
   return renderNumSelectedText && numSelected > 0 ? (
     <Toolbar className={classes.toolbar}>
       <Typography color='inherit' variant='subtitle1' component='div' className={classes.flexText}>
-        {renderNumSelectedText(numSelected)}
+        {topBarSelection}
       </Typography>
       {topBarButtons?.map((tbButton: TopBarButton | JSX.Element, index) =>
         isTopBarButton(tbButton) ? (

src/components/table/EnhancedTableToolbarV2.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react';
+import EnhancedTableToolbar from './EnhancedTableToolbar';
+import { TopBarButton, EnhancedTopBarSelectionProps } from './index';
+
+export interface EnhancedTopBarSelectionConfig {
+  handleSelectAll?: () => void;
+  handleSelectNone?: () => void;
+  renderEnhancedNumSelectedText?: () => string;
+  renderSelectAllText?: () => string;
+  renderSelectNoneText?: () => string;
+}
+
+type DecoratedEnhancedTopBarSelectionConfig = Omit<
+  EnhancedTopBarSelectionConfig,
+  'renderEnhancedNumSelectedText' | 'renderSelectAllText' | 'renderSelectNoneText'
+> &
+  EnhancedTopBarSelectionProps;
+
+interface EnhancedTableToolbarV2Props {
+  selectedRowsCount: number;
+  pagesCount: number;
+  renderNumSelectedText?: (selectedCount: number) => string;
+  rowsCount: number;
+  topBarButtons?: (TopBarButton | JSX.Element)[];
+  topBarSelectionConfig?: DecoratedEnhancedTopBarSelectionConfig;
+}
+
+const EnhancedTableToolbarV2 = ({
+  selectedRowsCount,
+  pagesCount,
+  renderNumSelectedText,
+  rowsCount,
+  topBarButtons,
+  topBarSelectionConfig,
+}: EnhancedTableToolbarV2Props) => {
+  const _topBarSelectionConfig = useMemo((): EnhancedTopBarSelectionConfig | undefined => {
+    if (!topBarSelectionConfig) {
+      return topBarSelectionConfig;
+    }
+
+    const { renderEnhancedNumSelectedText, renderSelectAllText } = topBarSelectionConfig;
+
+    return {
+      ...topBarSelectionConfig,
+      renderEnhancedNumSelectedText: () => (renderEnhancedNumSelectedText && renderEnhancedNumSelectedText(selectedRowsCount || 0, pagesCount)) || '',
+      renderSelectAllText: () => (renderSelectAllText && renderSelectAllText(rowsCount)) || '',
+    };
+  }, [topBarSelectionConfig, selectedRowsCount, rowsCount, pagesCount]);
+
+  if (topBarSelectionConfig) {
+    return (
+      <EnhancedTableToolbar
+        numSelected={selectedRowsCount}
+        topBarButtons={topBarButtons}
+        topBarSelectionConfig={_topBarSelectionConfig}
+        isAllSelected={rowsCount === selectedRowsCount}
+        renderNumSelectedText={renderNumSelectedText}
+      />
+    );
+  }
+
+  return <EnhancedTableToolbar numSelected={selectedRowsCount} renderNumSelectedText={renderNumSelectedText} topBarButtons={topBarButtons} />;
+};
+
+export default EnhancedTableToolbarV2;

src/components/table/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Checkbox, Pagination, Table, TableBody, TableCell, TableContainer, TableRow, Theme, TooltipProps, Typography, useTheme } from '@mui/material';
-import React, { useCallback, useEffect, useState } from 'react';
-import EnhancedTableToolbar from './EnhancedTableToolbar';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import EnhancedTableToolbarV2 from './EnhancedTableToolbarV2';
 import { descendingComparator, getComparator, SortOrder, stableSort } from './sort';
 import TableCellRenderer, { TableRowType } from './TableCellRenderer';
 import TableHeader from './TableHeader';
@@ -45,13 +45,20 @@ export interface HeadCell {
 }
 
 export interface LocalizationProps {
-  renderNumSelectedText?: (numSelected: number) => string | JSX.Element;
+  renderNumSelectedText?: (numSelected: number) => string;
   renderPaginationText?: (from: number, to: number, total: number) => string;
   booleanFalseText: string;
   booleanTrueText: string;
   editText: string;
 }
 
+// Only the text related props need to be passed in by the implementer, and extra data is passed to the caller
+export type EnhancedTopBarSelectionProps = {
+  renderEnhancedNumSelectedText?: (selectedCount: number, pagesCount: number) => string;
+  renderSelectAllText?: (rowsCount: number) => string;
+  renderSelectNoneText?: () => string;
+};
+
 export interface Props<T> extends LocalizationProps {
   id?: string;
   orderBy: string;
@@ -80,6 +87,8 @@ export interface Props<T> extends LocalizationProps {
   reloadData?: () => void;
   stickyHeader?: boolean;
   hideHeader?: boolean;
+  // Adds "select all rows across all pages" and "clear selection" to the table top bar
+  enhancedTopBarSelectionConfig?: EnhancedTopBarSelectionProps;
 }
 
 export type TopBarButton = {
@@ -127,6 +136,7 @@ export default function EnhancedTable<T extends TableRowType>({
   editText,
   renderNumSelectedText,
   renderPaginationText,
+  enhancedTopBarSelectionConfig,
 }: Props<T>): JSX.Element {
   const classes = tableStyles();
   const theme = useTheme();
@@ -291,15 +301,29 @@ export default function EnhancedTable<T extends TableRowType>({
     }
   }
 
+  const pagesCount = Math.ceil(rows.length / maxItemsPerPage);
+
   return (
     <>
       {showTopBar && (
-        <EnhancedTableToolbar
-          numSelected={selectedRows ? selectedRows.length : 0}
+        <EnhancedTableToolbarV2
+          selectedRowsCount={selectedRows?.length || 0}
+          pagesCount={pagesCount}
           renderNumSelectedText={renderNumSelectedText}
+          rowsCount={rows.length}
           topBarButtons={topBarButtons}
+          topBarSelectionConfig={
+            enhancedTopBarSelectionConfig
+              ? {
+                  ...enhancedTopBarSelectionConfig,
+                  handleSelectAll: () => setSelectedRows && setSelectedRows(rows),
+                  handleSelectNone: () => setSelectedRows && setSelectedRows([]),
+                }
+              : undefined
+          }
         />
       )}
+
       <TableContainer id={id} sx={{ overflowX: 'visible' }}>
         <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
           <Table stickyHeader={stickyHeader} aria-labelledby='tableTitle' size='medium' aria-label='enhanced table' className={classes.table}>
@@ -406,7 +430,7 @@ export default function EnhancedTable<T extends TableRowType>({
             </Typography>
           )}
           <Pagination
-            count={Math.ceil(rows.length / maxItemsPerPage)}
+            count={pagesCount}
             page={itemsToSkip / maxItemsPerPage + 1}
             shape='rounded'
             onChange={handleChangePage}

src/stories/Table.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from '@storybook/react';
 import React, { useState } from 'react';
-import Table, { Props as TableProps } from '../components/table/index';
+import Table, { EnhancedTopBarSelectionProps, Props as TableProps } from '../components/table/index';
 import CellRenderer from '..//components/table/TableCellRenderer';
 import { RendererProps } from '../components/table/types';
 import { Box } from '@mui/material';
@@ -70,6 +70,7 @@ export const Default = Template.bind({});
 export const Selectable = Template.bind({});
 export const Presorted = Template.bind({});
 export const ShowTopBar = Template.bind({});
+export const ShowTopBarV2 = Template.bind({});
 
 Default.args = {
   orderBy: 'name',
@@ -134,3 +135,23 @@ ShowTopBar.args = {
   controlledOnSelect: true,
   showTopBar: true,
 };
+
+const enhancedTopBarSelectionConfig: EnhancedTopBarSelectionProps = {
+  renderEnhancedNumSelectedText(selectedCount: number, pageCount: number): string {
+    return `${selectedCount} selected across ${pageCount} pages`;
+  },
+  renderSelectAllText(rowsCount: number): string {
+    return `Select all ${rowsCount} rows`;
+  },
+  renderSelectNoneText(): string {
+    return 'Clear selection';
+  },
+};
+
+ShowTopBarV2.args = {
+  ...Default.args,
+  showCheckbox: true,
+  controlledOnSelect: true,
+  showTopBar: true,
+  enhancedTopBarSelectionConfig,
+};