fix(app): datatable global checkbox doesn't reflect the selected state (#470)

app/portainer/helpers/strings.ts

@@ -1,7 +1,7 @@
-export function pluralize(val: number, word: string, plural = `${word}s`) {
-  return [1, -1].includes(Number(val)) ? word : plural;
-}
-
-export function addPlural(value: number, word: string, plural = `${word}s`) {
-  return `${value} ${pluralize(value, word, plural)}`;
-}
+// Re-exporting so we don't have to update one meeeeellion files that are already importing these
+// functions from here.
+export {
+  pluralize,
+  addPlural,
+  grammaticallyJoin,
+} from '@/react/common/string-utils';

app/react/common/string-utils.ts

@@ -0,0 +1,27 @@
+export function capitalize(s: string) {
+  return s.slice(0, 1).toUpperCase() + s.slice(1);
+}
+
+export function pluralize(val: number, word: string, plural = `${word}s`) {
+  return [1, -1].includes(Number(val)) ? word : plural;
+}
+
+export function addPlural(value: number, word: string, plural = `${word}s`) {
+  return `${value} ${pluralize(value, word, plural)}`;
+}
+
+/**
+ * Joins an array of strings into a grammatically correct sentence.
+ */
+export function grammaticallyJoin(
+  values: string[],
+  separator = ', ',
+  lastSeparator = ' and '
+) {
+  if (values.length === 0) return '';
+  if (values.length === 1) return values[0];
+
+  const allButLast = values.slice(0, -1);
+  const last = values[values.length - 1];
+  return `${allButLast.join(separator)}${lastSeparator}${last}`;
+}

app/react/components/datatables/Datatable.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { describe, it, expect } from 'vitest';
 import {
   createColumnHelper,
@@ -170,7 +171,7 @@ describe('Datatable', () => {
     fireEvent.click(selectAllCheckbox);
 
     // Check if all rows on the page are selected
-    expect(screen.getByText('2 item(s) selected')).toBeInTheDocument();
+    expect(screen.getByText('2 items selected')).toBeInTheDocument();
 
     // Deselect
     fireEvent.click(selectAllCheckbox);
@@ -192,13 +193,44 @@ describe('Datatable', () => {
     fireEvent.click(selectAllCheckbox, { shiftKey: true });
 
     // Check if all rows on the page are selected
-    expect(screen.getByText('3 item(s) selected')).toBeInTheDocument();
+    expect(screen.getByText('3 items selected')).toBeInTheDocument();
 
     // Deselect
     fireEvent.click(selectAllCheckbox, { shiftKey: true });
     const checkboxes: HTMLInputElement[] = screen.queryAllByRole('checkbox');
     expect(checkboxes.filter((checkbox) => checkbox.checked).length).toBe(0);
   });
+
+  it('shows indeterminate state and correct footer text when hidden rows are selected', async () => {
+    const user = userEvent.setup();
+    render(
+      <DatatableWithStore
+        dataset={mockData}
+        columns={mockColumns}
+        data-cy="test-table"
+        title="Test table with search"
+      />
+    );
+
+    // Select Jane
+    const checkboxes = screen.getAllByRole('checkbox');
+    await user.click(checkboxes[2]); // Select the second row
+
+    // Search for John (will hide selected Jane)
+    const searchInput = screen.getByPlaceholderText('Search...');
+    await user.type(searchInput, 'John');
+
+    // Check if the footer text is correct
+    expect(
+      await screen.findByText('1 item selected (1 hidden by filters)')
+    ).toBeInTheDocument();
+
+    // Check if the checkbox is indeterminate
+    const selectAllCheckbox: HTMLInputElement =
+      screen.getByLabelText('Select all rows');
+    expect(selectAllCheckbox.indeterminate).toBe(true);
+    expect(selectAllCheckbox.checked).toBe(false);
+  });
 });
 
 // Test the defaultGlobalFilterFn used in searches

app/react/components/datatables/Datatable.tsx

@@ -171,6 +171,14 @@ export function Datatable<D extends DefaultType>({
 
   const selectedRowModel = tableInstance.getSelectedRowModel();
   const selectedItems = selectedRowModel.rows.map((row) => row.original);
+  const filteredItems = tableInstance
+    .getFilteredRowModel()
+    .rows.map((row) => row.original);
+
+  const hiddenSelectedItems = useMemo(
+    () => _.difference(selectedItems, filteredItems),
+    [selectedItems, filteredItems]
+  );
 
   return (
     <Table.Container noWidget={noWidget} aria-label={title}>
@@ -203,6 +211,7 @@ export function Datatable<D extends DefaultType>({
         pageSize={tableState.pagination.pageSize}
         pageCount={tableInstance.getPageCount()}
         totalSelected={selectedItems.length}
+        totalHiddenSelected={hiddenSelectedItems.length}
       />
     </Table.Container>
   );

app/react/components/datatables/DatatableFooter.tsx

@@ -5,6 +5,7 @@ import { SelectedRowsCount } from './SelectedRowsCount';
 
 interface Props {
   totalSelected: number;
+  totalHiddenSelected: number;
   pageSize: number;
   page: number;
   onPageChange(page: number): void;
@@ -14,6 +15,7 @@ interface Props {
 
 export function DatatableFooter({
   totalSelected,
+  totalHiddenSelected,
   pageSize,
   page,
   onPageChange,
@@ -22,7 +24,7 @@ export function DatatableFooter({
 }: Props) {
   return (
     <Table.Footer>
-      <SelectedRowsCount value={totalSelected} />
+      <SelectedRowsCount value={totalSelected} hidden={totalHiddenSelected} />
       <PaginationControls
         showAll
         pageLimit={pageSize}

app/react/components/datatables/SelectedRowsCount.tsx

@@ -1,9 +1,15 @@
+import { addPlural } from '@/react/common/string-utils';
+
 interface SelectedRowsCountProps {
   value: number;
+  hidden: number;
 }
 
-export function SelectedRowsCount({ value }: SelectedRowsCountProps) {
+export function SelectedRowsCount({ value, hidden }: SelectedRowsCountProps) {
   return value !== 0 ? (
-    <div className="infoBar">{value} item(s) selected</div>
+    <div className="infoBar">
+      {addPlural(value, 'item')} selected
+      {hidden !== 0 && ` (${hidden} hidden by filters)`}
+    </div>
   ) : null;
 }

app/react/components/datatables/select-column.tsx

@@ -1,7 +1,19 @@
-import { ColumnDef, Row } from '@tanstack/react-table';
+import { ColumnDef, Row, Table } from '@tanstack/react-table';
 
 import { Checkbox } from '@@/form-components/Checkbox';
 
+function allRowsSelected<T>(table: Table<T>) {
+  return table.getCoreRowModel().rows.every((row) => row.getIsSelected());
+}
+
+function someRowsSelected<T>(table: Table<T>) {
+  return table.getCoreRowModel().rows.some((row) => row.getIsSelected());
+}
+
+function somePageRowsSelected<T>(table: Table<T>) {
+  return table.getRowModel().rows.some((row) => row.getIsSelected());
+}
+
 export function createSelectColumn<T>(dataCy: string): ColumnDef<T> {
   let lastSelectedId = '';
 
@@ -11,15 +23,15 @@ export function createSelectColumn<T>(dataCy: string): ColumnDef<T> {
       <Checkbox
         id="select-all"
         data-cy={`select-all-checkbox-${dataCy}`}
-        checked={table.getIsAllPageRowsSelected()}
-        indeterminate={table.getIsSomeRowsSelected()}
+        checked={allRowsSelected(table)}
+        indeterminate={!allRowsSelected(table) && someRowsSelected(table)}
         onChange={(e) => {
           // Select all rows if shift key is held down, otherwise only page rows
           if (e.nativeEvent instanceof MouseEvent && e.nativeEvent.shiftKey) {
-            table.getToggleAllRowsSelectedHandler()(e);
+            table.toggleAllRowsSelected();
             return;
           }
-          table.getToggleAllPageRowsSelectedHandler()(e);
+          table.toggleAllPageRowsSelected(!somePageRowsSelected(table));
         }}
         disabled={table.getRowModel().rows.every((row) => !row.getCanSelect())}
         onClick={(e) => {

app/react/components/form-components/Checkbox.tsx

@@ -42,6 +42,8 @@ export const Checkbox = forwardRef<HTMLInputElement, Props>(
       resolvedRef = defaultRef;
     }
 
+    // Need to check this on every render as the browser will always set the element's
+    // indeterminate state to false when the checkbox is clicked, even if the indeterminate prop hasn't changed
     useEffect(() => {
       if (resolvedRef === null || resolvedRef.current === null) {
         return;
@@ -50,7 +52,7 @@ export const Checkbox = forwardRef<HTMLInputElement, Props>(
       if (typeof indeterminate !== 'undefined') {
         resolvedRef.current.indeterminate = indeterminate;
       }
-    }, [resolvedRef, indeterminate]);
+    });
 
     return (
       <div className="md-checkbox flex items-center" title={title || label}>

app/react/portainer/templates/app-templates/AppTemplatesList.tsx

@@ -110,6 +110,7 @@ export function AppTemplatesList({
         pageSize={listState.pageSize}
         pageCount={Math.ceil(filteredTemplates.length / listState.pageSize)}
         totalSelected={0}
+        totalHiddenSelected={0}
       />
     </Table.Container>
   );

app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx

@@ -86,6 +86,7 @@ export function CustomTemplatesList({
         pageSize={listState.pageSize}
         pageCount={Math.ceil(filteredTemplates.length / listState.pageSize)}
         totalSelected={0}
+        totalHiddenSelected={0}
       />
     </Table.Container>
   );