refactor(ui/datatables): allow datatable to globally filter on object value [EE-5824] (#9955)

app/react/components/datatables/Datatable.tsx

@@ -13,7 +13,6 @@ import {
   getFacetedMinMaxValues,
   getExpandedRowModel,
   TableOptions,
-  TableMeta,
 } from '@tanstack/react-table';
 import { ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
@@ -28,7 +27,7 @@ import { DatatableFooter } from './DatatableFooter';
 import { defaultGetRowId } from './defaultGetRowId';
 import { Table } from './Table';
 import { useGoToHighlightedRow } from './useGoToHighlightedRow';
-import { BasicTableSettings } from './types';
+import { BasicTableSettings, DefaultType } from './types';
 import { DatatableContent } from './DatatableContent';
 import { createSelectColumn } from './select-column';
 import { TableRow } from './TableRow';
@@ -48,10 +47,7 @@ export type PaginationProps =
       onPageChange(page: number): void;
     };
 
-export interface Props<
-  D extends Record<string, unknown>,
-  TMeta extends TableMeta<D> = TableMeta<D>
-> extends AutomationTestingProps {
+export interface Props<D extends DefaultType> extends AutomationTestingProps {
   dataset: D[];
   columns: TableOptions<D>['columns'];
   renderTableSettings?(instance: TableInstance<D>): ReactNode;
@@ -70,13 +66,10 @@ export interface Props<
   renderRow?(row: Row<D>, highlightedItemId?: string): ReactNode;
   getRowCanExpand?(row: Row<D>): boolean;
   noWidget?: boolean;
-  meta?: TMeta;
+  extendTableOptions?: (options: TableOptions<D>) => TableOptions<D>;
 }
 
-export function Datatable<
-  D extends Record<string, unknown>,
-  TMeta extends TableMeta<D> = TableMeta<D>
->({
+export function Datatable<D extends DefaultType>({
   columns,
   dataset,
   renderTableSettings = () => null,
@@ -96,12 +89,12 @@ export function Datatable<
   noWidget,
   getRowCanExpand,
   'data-cy': dataCy,
-  meta,
   onPageChange = () => {},
   page,
   totalCount = dataset.length,
   isServerSidePagination = false,
-}: Props<D, TMeta> & PaginationProps) {
+  extendTableOptions = (value) => value,
+}: Props<D> & PaginationProps) {
   const pageCount = useMemo(
     () => Math.ceil(totalCount / settings.pageSize),
     [settings.pageSize, totalCount]
@@ -117,44 +110,48 @@ export function Datatable<
     [disableSelect, columns]
   );
 
-  const tableInstance = useReactTable<D>({
-    columns: allColumns,
-    data: dataset,
-    initialState: {
-      pagination: {
-        pageSize: settings.pageSize,
-        pageIndex: page || 0,
-      },
-      sorting: settings.sortBy ? [settings.sortBy] : [],
-      globalFilter: settings.search,
+  const tableInstance = useReactTable<D>(
+    extendTableOptions({
+      columns: allColumns,
+      data: dataset,
+      initialState: {
+        pagination: {
+          pageSize: settings.pageSize,
+          pageIndex: page || 0,
+        },
+        sorting: settings.sortBy ? [settings.sortBy] : [],
+        globalFilter: {
+          search: settings.search,
+          ...initialTableState.globalFilter,
+        },
 
-      ...initialTableState,
-    },
-    defaultColumn: {
-      enableColumnFilter: false,
-      enableHiding: true,
-      sortingFn: 'alphanumeric',
-    },
-    enableRowSelection,
-    autoResetExpanded: false,
-    globalFilterFn,
-    getRowId,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    getFacetedMinMaxValues: getFacetedMinMaxValues(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getRowCanExpand,
-    getColumnCanGlobalFilter,
-    ...(isServerSidePagination
-      ? { manualPagination: true, pageCount }
-      : {
-          getSortedRowModel: getSortedRowModel(),
-        }),
-    meta,
-  });
+        ...initialTableState,
+      },
+      defaultColumn: {
+        enableColumnFilter: false,
+        enableHiding: true,
+        sortingFn: 'alphanumeric',
+      },
+      enableRowSelection,
+      autoResetExpanded: false,
+      globalFilterFn: defaultGlobalFilterFn,
+      getRowId,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getFacetedRowModel: getFacetedRowModel(),
+      getFacetedUniqueValues: getFacetedUniqueValues(),
+      getFacetedMinMaxValues: getFacetedMinMaxValues(),
+      getExpandedRowModel: getExpandedRowModel(),
+      getRowCanExpand,
+      getColumnCanGlobalFilter,
+      ...(isServerSidePagination
+        ? { manualPagination: true, pageCount }
+        : {
+            getSortedRowModel: getSortedRowModel(),
+          }),
+    })
+  );
 
   const tableState = tableInstance.getState();
 
@@ -201,9 +198,9 @@ export function Datatable<
     </Table.Container>
   );
 
-  function handleSearchBarChange(value: string) {
-    tableInstance.setGlobalFilter(value);
-    settings.setSearch(value);
+  function handleSearchBarChange(search: string) {
+    tableInstance.setGlobalFilter({ search });
+    settings.setSearch(search);
   }
 
   function handlePageChange(page: number) {
@@ -221,7 +218,7 @@ export function Datatable<
   }
 }
 
-function defaultRenderRow<D extends Record<string, unknown>>(
+function defaultRenderRow<D extends DefaultType>(
   row: Row<D>,
   highlightedItemId?: string
 ) {
@@ -235,7 +232,7 @@ function defaultRenderRow<D extends Record<string, unknown>>(
   );
 }
 
-function getIsSelectionEnabled<D extends Record<string, unknown>>(
+function getIsSelectionEnabled<D extends DefaultType>(
   disabledSelect?: boolean,
   isRowSelectable?: Props<D>['isRowSelectable']
 ) {
@@ -250,14 +247,14 @@ function getIsSelectionEnabled<D extends Record<string, unknown>>(
   return true;
 }
 
-function globalFilterFn<D>(
+export function defaultGlobalFilterFn<D, TFilter extends { search: string }>(
   row: Row<D>,
   columnId: string,
-  filterValue: null | string
+  filterValue: null | TFilter
 ): boolean {
   const value = row.getValue(columnId);
 
-  if (filterValue === null || filterValue === '') {
+  if (filterValue === null || !filterValue.search) {
     return true;
   }
 
@@ -265,7 +262,7 @@ function globalFilterFn<D>(
     return false;
   }
 
-  const filterValueLower = filterValue.toLowerCase();
+  const filterValueLower = filterValue.search.toLowerCase();
 
   if (
     typeof value === 'string' ||

app/react/components/datatables/DatatableContent.tsx

@@ -3,9 +3,9 @@ import { Row, Table as TableInstance } from '@tanstack/react-table';
 import { AutomationTestingProps } from '@/types';
 
 import { Table } from './Table';
+import { DefaultType } from './types';
 
-interface Props<D extends Record<string, unknown>>
-  extends AutomationTestingProps {
+interface Props<D extends DefaultType> extends AutomationTestingProps {
   tableInstance: TableInstance<D>;
   renderRow(row: Row<D>): React.ReactNode;
   onSortChange?(colId: string, desc: boolean): void;
@@ -13,7 +13,7 @@ interface Props<D extends Record<string, unknown>>
   emptyContentLabel?: string;
 }
 
-export function DatatableContent<D extends Record<string, unknown>>({
+export function DatatableContent<D extends DefaultType>({
   tableInstance,
   renderRow,
   onSortChange,

app/react/components/datatables/ExpandableDatatable.tsx

@@ -7,14 +7,15 @@ import {
   Props as DatatableProps,
   PaginationProps,
 } from './Datatable';
+import { DefaultType } from './types';
 
-interface Props<D extends Record<string, unknown>>
+interface Props<D extends DefaultType>
   extends Omit<DatatableProps<D>, 'renderRow' | 'expandable'> {
   renderSubRow(row: Row<D>): ReactNode;
   expandOnRowClick?: boolean;
 }
 
-export function ExpandableDatatable<D extends Record<string, unknown>>({
+export function ExpandableDatatable<D extends DefaultType>({
   renderSubRow,
   getRowCanExpand = () => true,
   expandOnRowClick,

app/react/components/datatables/ExpandableDatatableRow.tsx

@@ -2,15 +2,16 @@ import { ReactNode } from 'react';
 import { Row } from '@tanstack/react-table';
 
 import { TableRow } from './TableRow';
+import { DefaultType } from './types';
 
-interface Props<D extends Record<string, unknown>> {
+interface Props<D extends DefaultType> {
   row: Row<D>;
   disableSelect?: boolean;
   renderSubRow(row: Row<D>): ReactNode;
   expandOnClick?: boolean;
 }
 
-export function ExpandableDatatableTableRow<D extends Record<string, unknown>>({
+export function ExpandableDatatableTableRow<D extends DefaultType>({
   row,
   disableSelect,
   renderSubRow,

app/react/components/datatables/Filter.tsx

@@ -8,8 +8,10 @@ import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
 
 import { Icon } from '@@/Icon';
 
+import { DefaultType } from './types';
+
 interface MultipleSelectionFilterProps {
-  options: string[];
+  options: Array<string> | ReadonlyArray<string>;
   value: string[];
   filterKey: string;
   onChange: (value: string[]) => void;
@@ -28,12 +30,12 @@ export function MultipleSelectionFilter({
     <div>
       <Menu>
         <MenuButton
-          className={clsx('table-filter', { 'filter-active': enabled })}
+          className={clsx('table-filter flex items-center gap-1', {
+            'filter-active': enabled,
+          })}
         >
-          <div className="flex items-center gap-1">
-            Filter
-            <Icon icon={enabled ? Check : Filter} />
-          </div>
+          Filter
+          <Icon icon={enabled ? Check : Filter} />
         </MenuButton>
         <MenuPopover className="dropdown-menu">
           <div className="tableMenu">
@@ -70,9 +72,7 @@ export function MultipleSelectionFilter({
   }
 }
 
-export function filterHOC<TData extends Record<string, unknown>>(
-  menuTitle: string
-) {
+export function filterHOC<TData extends DefaultType>(menuTitle: string) {
   return function Filter({
     column: { getFilterValue, setFilterValue, getFacetedRowModel, id },
   }: {

app/react/components/datatables/NestedDatatable.tsx

@@ -12,9 +12,9 @@ import { defaultGetRowId } from './defaultGetRowId';
 import { Table } from './Table';
 import { NestedTable } from './NestedTable';
 import { DatatableContent } from './DatatableContent';
-import { BasicTableSettings } from './types';
+import { BasicTableSettings, DefaultType } from './types';
 
-interface Props<D extends Record<string, unknown>> {
+interface Props<D extends DefaultType> {
   dataset: D[];
   columns: TableOptions<D>['columns'];
 
@@ -25,7 +25,7 @@ interface Props<D extends Record<string, unknown>> {
   initialSortBy?: BasicTableSettings['sortBy'];
 }
 
-export function NestedDatatable<D extends Record<string, unknown>>({
+export function NestedDatatable<D extends DefaultType>({
   columns,
   dataset,
   getRowId = defaultGetRowId,

app/react/components/datatables/TableContent.tsx

@@ -1,16 +1,16 @@
 import { Fragment, PropsWithChildren } from 'react';
 import { Row } from '@tanstack/react-table';
 
-interface Props<T extends Record<string, unknown> = Record<string, unknown>> {
+import { DefaultType } from './types';
+
+interface Props<T extends DefaultType = DefaultType> {
   isLoading?: boolean;
   rows: Row<T>[];
   emptyContent?: string;
   renderRow(row: Row<T>): React.ReactNode;
 }
 
-export function TableContent<
-  T extends Record<string, unknown> = Record<string, unknown>
->({
+export function TableContent<T extends DefaultType = DefaultType>({
   isLoading = false,
   rows,
   emptyContent = 'No items available',

app/react/components/datatables/TableHeaderRow.tsx

@@ -2,15 +2,17 @@ import { Header, flexRender } from '@tanstack/react-table';
 
 import { filterHOC } from './Filter';
 import { TableHeaderCell } from './TableHeaderCell';
+import { DefaultType } from './types';
 
-interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
+interface Props<D extends DefaultType = DefaultType> {
   headers: Header<D, unknown>[];
   onSortChange?(colId: string, desc: boolean): void;
 }
 
-export function TableHeaderRow<
-  D extends Record<string, unknown> = Record<string, unknown>
->({ headers, onSortChange }: Props<D>) {
+export function TableHeaderRow<D extends DefaultType = DefaultType>({
+  headers,
+  onSortChange,
+}: Props<D>) {
   return (
     <tr>
       {headers.map((header) => {

app/react/components/datatables/TableRow.tsx

@@ -1,15 +1,19 @@
 import { Cell, flexRender } from '@tanstack/react-table';
 import clsx from 'clsx';
 
-interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
+import { DefaultType } from './types';
+
+interface Props<D extends DefaultType = DefaultType> {
   cells: Cell<D, unknown>[];
   className?: string;
   onClick?: () => void;
 }
 
-export function TableRow<
-  D extends Record<string, unknown> = Record<string, unknown>
->({ cells, className, onClick }: Props<D>) {
+export function TableRow<D extends DefaultType = DefaultType>({
+  cells,
+  className,
+  onClick,
+}: Props<D>) {
   return (
     <tr
       className={clsx(className, { 'cursor-pointer': !!onClick })}

app/react/components/datatables/buildNameColumn.tsx

@@ -2,13 +2,16 @@ import { ColumnDef, CellContext } from '@tanstack/react-table';
 
 import { Link } from '@@/Link';
 
-export function buildNameColumn<T extends Record<string, unknown>>(
+import { DefaultType } from './types';
+import { defaultGetRowId } from './defaultGetRowId';
+
+export function buildNameColumn<T extends DefaultType>(
   nameKey: keyof T,
-  idKey: string,
   path: string,
-  idParam = 'id'
+  idParam = 'id',
+  idGetter: (row: T) => string = defaultGetRowId<T>
 ): ColumnDef<T> {
-  const cell = createCell<T>();
+  const cell = createCell();
 
   return {
     header: 'Name',
@@ -19,7 +22,7 @@ export function buildNameColumn<T extends Record<string, unknown>>(
     enableHiding: false,
   };
 
-  function createCell<T extends Record<string, unknown>>() {
+  function createCell() {
     return function NameCell({ renderValue, row }: CellContext<T, unknown>) {
       const name = renderValue() || '';
 
@@ -30,7 +33,7 @@ export function buildNameColumn<T extends Record<string, unknown>>(
       return (
         <Link
           to={path}
-          params={{ [idParam]: row.original[idKey] }}
+          params={{ [idParam]: idGetter(row.original) }}
           title={name}
         >
           {name}

app/react/components/datatables/defaultGetRowId.ts

@@ -1,16 +1,17 @@
-export function defaultGetRowId<D extends Record<string, unknown>>(
-  row: D
-): string {
-  if (row.id && (typeof row.id === 'string' || typeof row.id === 'number')) {
-    return row.id.toString();
-  }
+import { DefaultType } from './types';
 
-  if (row.Id && (typeof row.Id === 'string' || typeof row.Id === 'number')) {
-    return row.Id.toString();
-  }
+/**
+ * gets row id by looking for one of id, Id, or ID keys on the object
+ */
+export function defaultGetRowId<D extends DefaultType>(row: D): string {
+  const key = ['id', 'Id', 'ID'].find((key) =>
+    Object.hasOwn(row, key)
+  ) as keyof D;
 
-  if (row.ID && (typeof row.ID === 'string' || typeof row.ID === 'number')) {
-    return row.ID.toString();
+  const value = row[key];
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value.toString();
   }
 
   return '';

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

@@ -3,9 +3,9 @@ import { ColumnDef } from '@tanstack/react-table';
 
 import { Button } from '@@/buttons';
 
-export function buildExpandColumn<
-  T extends Record<string, unknown>
->(): ColumnDef<T> {
+import { DefaultType } from './types';
+
+export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
   return {
     id: 'expand',
     header: ({ table }) => {

app/react/components/datatables/extend-options/mergeOptions.ts

@@ -0,0 +1,10 @@
+import { TableOptions } from '@tanstack/react-table';
+
+type OptionExtender<T> = (options: TableOptions<T>) => TableOptions<T>;
+
+export function mergeOptions<T>(
+  ...extenders: Array<OptionExtender<T>>
+): OptionExtender<T> {
+  return (options: TableOptions<T>) =>
+    extenders.reduce((acc, option) => option(acc), options);
+}

app/react/components/datatables/extend-options/withControlledSelected.tsx

@@ -0,0 +1,37 @@
+import {
+  RowSelectionState,
+  TableOptions,
+  Updater,
+} from '@tanstack/react-table';
+
+import { DefaultType } from '../types';
+
+export function withControlledSelected<D extends DefaultType>(
+  onChange?: (value: string[]) => void,
+  value?: string[]
+) {
+  return function extendTableOptions(options: TableOptions<D>) {
+    if (!onChange || !value) {
+      return options;
+    }
+
+    return {
+      ...options,
+      state: {
+        ...options.state,
+        rowSelection: Object.fromEntries(value.map((i) => [i, true])),
+      },
+      onRowSelectionChange(updater: Updater<RowSelectionState>) {
+        const newValue =
+          typeof updater !== 'function'
+            ? updater
+            : updater(Object.fromEntries(value.map((i) => [i, true])));
+        onChange(
+          Object.entries(newValue)
+            .filter(([, selected]) => selected)
+            .map(([id]) => id)
+        );
+      },
+    };
+  };
+}

app/react/components/datatables/extend-options/withGlobalFilter.ts

@@ -0,0 +1,15 @@
+import { TableOptions } from '@tanstack/react-table';
+
+import { defaultGlobalFilterFn } from '../Datatable';
+import { DefaultType } from '../types';
+
+export function withGlobalFilter<D extends DefaultType>(
+  filterFn: typeof defaultGlobalFilterFn
+) {
+  return function extendOptions(options: TableOptions<D>) {
+    return {
+      ...options,
+      globalFilterFn: filterFn,
+    };
+  };
+}

app/react/components/datatables/extend-options/withMeta.ts

@@ -0,0 +1,15 @@
+import { TableOptions } from '@tanstack/react-table';
+
+import { DefaultType } from '../types';
+
+export function withMeta<D extends DefaultType>(meta: Record<string, unknown>) {
+  return function extendOptions(options: TableOptions<D>) {
+    return {
+      ...options,
+      meta: {
+        ...options.meta,
+        ...meta,
+      },
+    };
+  };
+}

app/react/components/datatables/filter-types.ts

@@ -1,8 +1,12 @@
 import { Row } from '@tanstack/react-table';
 
-export function multiple<
-  D extends Record<string, unknown> = Record<string, unknown>
->({ getValue }: Row<D>, columnId: string, filterValue: string[]): boolean {
+import { DefaultType } from './types';
+
+export function multiple<D extends DefaultType = DefaultType>(
+  { getValue }: Row<D>,
+  columnId: string,
+  filterValue: string[]
+): boolean {
   if (filterValue.length === 0) {
     return true;
   }

app/react/components/datatables/types.ts

@@ -3,6 +3,8 @@ import { persist } from 'zustand/middleware';
 
 import { keyBuilder } from '@/react/hooks/useLocalStorage';
 
+export type DefaultType = object;
+
 export interface PaginationTableSettings {
   pageSize: number;
   setPageSize: (pageSize: number) => void;
@@ -23,21 +25,24 @@ export function paginationSettings<T extends PaginationTableSettings>(
 }
 
 export interface SortableTableSettings {
-  sortBy: { id: string; desc: boolean };
-  setSortBy: (id: string, desc: boolean) => void;
+  sortBy: { id: string; desc: boolean } | undefined;
+  setSortBy: (id: string | undefined, desc: boolean) => void;
 }
 
 export function sortableSettings<T extends SortableTableSettings>(
   set: ZustandSetFunc<T>,
-  initialSortBy: string | { id: string; desc: boolean }
+  initialSortBy?: string | { id: string; desc: boolean }
 ): SortableTableSettings {
   return {
     sortBy:
       typeof initialSortBy === 'string'
         ? { id: initialSortBy, desc: false }
         : initialSortBy,
-    setSortBy: (id: string, desc: boolean) =>
-      set((s) => ({ ...s, sortBy: { id, desc } })),
+    setSortBy: (id: string | undefined, desc: boolean) =>
+      set((s) => ({
+        ...s,
+        sortBy: typeof id === 'string' ? { id, desc } : id,
+      })),
   };
 }
 
@@ -77,7 +82,7 @@ export interface BasicTableSettings
 
 export function createPersistedStore<T extends BasicTableSettings>(
   storageKey: string,
-  initialSortBy: string | { id: string; desc: boolean } = 'name',
+  initialSortBy?: string | { id: string; desc: boolean },
   create: (set: ZustandSetFunc<T>) => Omit<T, keyof BasicTableSettings> = () =>
     ({} as T)
 ) {
@@ -85,11 +90,8 @@ export function createPersistedStore<T extends BasicTableSettings>(
     persist(
       (set) =>
         ({
-          ...sortableSettings(
-            set as ZustandSetFunc<SortableTableSettings>,
-            initialSortBy
-          ),
-          ...paginationSettings(set as ZustandSetFunc<PaginationTableSettings>),
+          ...sortableSettings<T>(set, initialSortBy),
+          ...paginationSettings<T>(set),
           ...create(set),
         } as T),
       {
@@ -98,18 +100,3 @@ export function createPersistedStore<T extends BasicTableSettings>(
     )
   );
 }
-
-/** this class is just a dummy class to get return type of createPersistedStore
- * can be fixed after upgrade to ts 4.7+
- * https://stackoverflow.com/a/64919133
- */
-class Wrapper<T extends BasicTableSettings> {
-  // eslint-disable-next-line class-methods-use-this
-  wrapped() {
-    return createPersistedStore<T>('', '');
-  }
-}
-
-export type CreatePersistedStoreReturn<
-  T extends BasicTableSettings = BasicTableSettings
-> = ReturnType<Wrapper<T>['wrapped']>;

app/react/components/datatables/useTableState.ts

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { useStore } from 'zustand';
 
 import { useSearchBarState } from './SearchBar';
-import { BasicTableSettings, CreatePersistedStoreReturn } from './types';
+import { BasicTableSettings, createPersistedStore } from './types';
 
 export type TableState<TSettings extends BasicTableSettings> = TSettings & {
   setSearch: (search: string) => void;
@@ -11,7 +11,10 @@ export type TableState<TSettings extends BasicTableSettings> = TSettings & {
 
 export function useTableState<
   TSettings extends BasicTableSettings = BasicTableSettings
->(store: CreatePersistedStoreReturn<TSettings>, storageKey: string) {
+>(
+  store: ReturnType<typeof createPersistedStore<TSettings>>,
+  storageKey: string
+) {
   const settings = useStore(store);
 
   const [search, setSearch] = useSearchBarState(storageKey);
@@ -23,21 +26,24 @@ export function useTableState<
 }
 
 export function useTableStateWithoutStorage(
-  defaultSortKey: string
+  defaultSortKey?: string
 ): BasicTableSettings & {
   setSearch: (search: string) => void;
   search: string;
 } {
   const [search, setSearch] = useState('');
   const [pageSize, setPageSize] = useState(10);
-  const [sortBy, setSortBy] = useState({ id: defaultSortKey, desc: false });
+  const [sortBy, setSortBy] = useState(
+    defaultSortKey ? { id: defaultSortKey, desc: false } : undefined
+  );
 
   return {
     search,
     setSearch,
     pageSize,
     setPageSize,
-    setSortBy: (id: string, desc: boolean) => setSortBy({ id, desc }),
+    setSortBy: (id: string | undefined, desc: boolean) =>
+      setSortBy(id ? { id, desc } : undefined),
     sortBy,
   };
 }