chore(deps): upgrade react-table to v8 [EE-4837] (#8245)

app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx

@@ -1,19 +1,17 @@
-import _ from 'lodash';
-import { useStore } from 'zustand';
 import { Box } from 'lucide-react';
 
 import { Environment } from '@/react/portainer/environments/types';
 import type { DockerContainer } from '@/react/docker/containers/types';
 import { useShowGPUsColumn } from '@/react/docker/containers/utils';
 
-import { TableSettingsMenu, Datatable } from '@@/datatables';
+import { Table, Datatable } from '@@/datatables';
 import {
   buildAction,
   QuickActionsSettings,
 } from '@@/datatables/QuickActionsSettings';
 import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { TableSettingsProvider } from '@@/datatables/useTableSettings';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { useContainers } from '../../queries/containers';
 
@@ -43,20 +41,15 @@ export function ContainersDatatable({
   isHostColumnVisible,
   environment,
 }: Props) {
-  const settings = useStore(settingsStore);
   const isGPUsColumnVisible = useShowGPUsColumn(environment.Id);
   const columns = useColumns(isHostColumnVisible, isGPUsColumnVisible);
-  const hidableColumns = _.compact(
-    columns.filter((col) => col.canHide).map((col) => col.id)
-  );
-
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   const containersQuery = useContainers(
     environment.Id,
     true,
     undefined,
-    settings.autoRefreshRate * 1000
+    tableState.autoRefreshRate * 1000
   );
 
   return (
@@ -65,12 +58,7 @@ export function ContainersDatatable({
         <Datatable
           titleIcon={Box}
           title="Containers"
-          initialPageSize={settings.pageSize}
-          onPageSizeChange={settings.setPageSize}
-          initialSortBy={settings.sortBy}
-          onSortByChange={settings.setSortBy}
-          searchValue={search}
-          onSearchChange={setSearch}
+          settingsManager={tableState}
           columns={columns}
           renderTableActions={(selectedRows) => (
             <ContainersDatatableActions
@@ -81,30 +69,38 @@ export function ContainersDatatable({
           )}
           isLoading={containersQuery.isLoading}
           isRowSelectable={(row) => !row.original.IsPortainer}
-          initialTableState={{ hiddenColumns: settings.hiddenColumns }}
+          initialTableState={{
+            columnVisibility: Object.fromEntries(
+              tableState.hiddenColumns.map((col) => [col, false])
+            ),
+          }}
           renderTableSettings={(tableInstance) => {
-            const columnsToHide = tableInstance.allColumns.filter(
-              (colInstance) => hidableColumns?.includes(colInstance.id)
-            );
+            const columnsToHide = tableInstance
+              .getAllColumns()
+              .filter((col) => col.getCanHide());
 
             return (
               <>
                 <ColumnVisibilityMenu<DockerContainer>
                   columns={columnsToHide}
                   onChange={(hiddenColumns) => {
-                    settings.setHiddenColumns(hiddenColumns);
-                    tableInstance.setHiddenColumns(hiddenColumns);
+                    tableState.setHiddenColumns(hiddenColumns);
+                    tableInstance.setColumnVisibility(
+                      Object.fromEntries(
+                        hiddenColumns.map((col) => [col, false])
+                      )
+                    );
                   }}
-                  value={settings.hiddenColumns}
+                  value={tableState.hiddenColumns}
                 />
-                <TableSettingsMenu
+                <Table.SettingsMenu
                   quickActions={<QuickActionsSettings actions={actions} />}
                 >
                   <ContainersDatatableSettings
                     isRefreshVisible
-                    settings={settings}
+                    settings={tableState}
                   />
-                </TableSettingsMenu>
+                </Table.SettingsMenu>
               </>
             );
           }}

app/react/docker/containers/ListView/ContainersDatatable/columns/created.tsx

@@ -1,14 +1,9 @@
-import { Column } from 'react-table';
-
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
-import type { DockerContainer } from '@/react/docker/containers/types';
 
-export const created: Column<DockerContainer> = {
-  Header: 'Created',
-  accessor: 'Created',
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor('Created', {
+  header: 'Created',
   id: 'created',
-  Cell: ({ value }) => isoDateFromTimestamp(value),
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+  cell: ({ getValue }) => isoDateFromTimestamp(getValue()),
+});

app/react/docker/containers/ListView/ContainersDatatable/columns/gpus.tsx

@@ -1,21 +1,20 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useContainerGpus } from '@/react/docker/containers/queries/gpus';
 
-export const gpus: Column<DockerContainer> = {
-  Header: 'GPUs',
+import { columnHelper } from './helper';
+
+export const gpus = columnHelper.display({
+  header: 'GPUs',
   id: 'gpus',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-  Cell: GpusCell,
-};
+  cell: GpusCell,
+});
 
 function GpusCell({
   row: { original: container },
-}: CellProps<DockerContainer>) {
+}: CellContext<DockerContainer, unknown>) {
   const containerId = container.Id;
   const environmentId = useEnvironmentId();
   const gpusQuery = useContainerGpus(environmentId, containerId);

app/react/docker/containers/ListView/ContainersDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { DockerContainer } from '../../../types';
+
+export const columnHelper = createColumnHelper<DockerContainer>();

app/react/docker/containers/ListView/ContainersDatatable/columns/host.tsx

@@ -1,13 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
-
-export const host: Column<DockerContainer> = {
-  Header: 'Host',
-  accessor: (row) => row.NodeName || '-',
+export const host = columnHelper.accessor((row) => row.NodeName || '-', {
+  header: 'Host',
   id: 'host',
-  disableFilters: true,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
+});

app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx

@@ -1,24 +1,18 @@
-import { Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 import { useSref } from '@uirouter/react';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
 
-export const image: Column<DockerContainer> = {
-  Header: 'Image',
-  accessor: 'Image',
+import { columnHelper } from './helper';
+
+export const image = columnHelper.accessor('Image', {
+  header: 'Image',
   id: 'image',
-  disableFilters: true,
-  Cell: ImageCell,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
+  cell: ImageCell,
+});
 
-interface Props {
-  value: string;
-}
-
-function ImageCell({ value: imageName }: Props) {
+function ImageCell({ getValue }: CellContext<DockerContainer, string>) {
+  const imageName = getValue();
   const linkProps = useSref('docker.images.image', { id: imageName });
   const shortImageName = trimSHASum(imageName);
 

app/react/docker/containers/ListView/ContainersDatatable/columns/index.tsx

@@ -1,12 +1,14 @@
 import _ from 'lodash';
 import { useMemo } from 'react';
 
+import { createOwnershipColumn } from '@/react/docker/components/datatable-helpers/createOwnershipColumn';
+import { DockerContainer } from '@/react/docker/containers/types';
+
 import { created } from './created';
 import { host } from './host';
 import { image } from './image';
 import { ip } from './ip';
 import { name } from './name';
-import { ownership } from './ownership';
 import { ports } from './ports';
 import { quickActions } from './quick-actions';
 import { stack } from './stack';
@@ -15,7 +17,7 @@ import { gpus } from './gpus';
 
 export function useColumns(
   isHostColumnVisible: boolean,
-  isGPUsColumnVisible?: boolean
+  isGPUsColumnVisible: boolean | undefined
 ) {
   return useMemo(
     () =>
@@ -30,7 +32,7 @@ export function useColumns(
         isHostColumnVisible && host,
         isGPUsColumnVisible && gpus,
         ports,
-        ownership,
+        createOwnershipColumn<DockerContainer>(),
       ]),
     [isHostColumnVisible, isGPUsColumnVisible]
   );

app/react/docker/containers/ListView/ContainersDatatable/columns/ip.tsx

@@ -1,12 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
-
-export const ip: Column<DockerContainer> = {
-  Header: 'IP Address',
-  accessor: (row) => row.IP || '-',
+export const ip = columnHelper.accessor((row) => row.IP || '-', {
+  header: 'IP Address',
   id: 'ip',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+});

app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx

@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 import _ from 'lodash';
 import { useSref } from '@uirouter/react';
 
@@ -8,21 +8,20 @@ import { useTableSettings } from '@@/datatables/useTableSettings';
 
 import { TableSettings } from '../types';
 
-export const name: Column<DockerContainer> = {
-  Header: 'Name',
-  accessor: (row) => row.Names[0],
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor((row) => row.Names[0], {
+  header: 'Name',
   id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: true,
-  sortType: 'string',
-};
+  cell: NameCell,
+});
 
 export function NameCell({
-  value: name,
+  getValue,
   row: { original: container },
-}: CellProps<DockerContainer>) {
+}: CellContext<DockerContainer, string>) {
+  const name = getValue();
+
   const linkProps = useSref('.container', {
     id: container.Id,
     nodeName: container.NodeName,

app/react/docker/containers/ListView/ContainersDatatable/columns/ownership.tsx

@@ -1,34 +0,0 @@
-import { Column } from 'react-table';
-import clsx from 'clsx';
-
-import { ownershipIcon } from '@/portainer/filters/filters';
-import type { DockerContainer } from '@/react/docker/containers/types';
-import { ResourceControlOwnership } from '@/react/portainer/access-control/types';
-
-export const ownership: Column<DockerContainer> = {
-  Header: 'Ownership',
-  id: 'ownership',
-  accessor: (row) =>
-    row.ResourceControl?.Ownership || ResourceControlOwnership.ADMINISTRATORS,
-  Cell: OwnershipCell,
-  disableFilters: true,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
-
-interface Props {
-  value: 'public' | 'private' | 'restricted' | 'administrators';
-}
-
-function OwnershipCell({ value }: Props) {
-  return (
-    <>
-      <i
-        className={clsx(ownershipIcon(value), 'space-right')}
-        aria-hidden="true"
-      />
-      {value || ResourceControlOwnership.ADMINISTRATORS}
-    </>
-  );
-}

app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx

@@ -1,6 +1,6 @@
-import { Column } from 'react-table';
 import _ from 'lodash';
 import { ExternalLink } from 'lucide-react';
+import { CellContext } from '@tanstack/react-table';
 
 import type { DockerContainer, Port } from '@/react/docker/containers/types';
 
@@ -8,22 +8,17 @@ import { Icon } from '@@/Icon';
 
 import { useRowContext } from '../RowContext';
 
-export const ports: Column<DockerContainer> = {
-  Header: 'Published Ports',
-  accessor: 'Ports',
+import { columnHelper } from './helper';
+
+export const ports = columnHelper.accessor('Ports', {
+  header: 'Published Ports',
   id: 'ports',
-  Cell: PortsCell,
-  disableSortBy: true,
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+  cell: PortsCell,
+});
 
-interface Props {
-  value: Port[];
-}
+function PortsCell({ getValue }: CellContext<DockerContainer, Port[]>) {
+  const ports = getValue();
 
-function PortsCell({ value: ports }: Props) {
   const { environment } = useRowContext();
 
   if (ports.length === 0) {

app/react/docker/containers/ListView/ContainersDatatable/columns/quick-actions.tsx

@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { useAuthorizations } from '@/react/hooks/useUser';
 import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
@@ -8,20 +8,17 @@ import { useTableSettings } from '@@/datatables/useTableSettings';
 
 import { TableSettings } from '../types';
 
-export const quickActions: Column<DockerContainer> = {
-  Header: 'Quick Actions',
+import { columnHelper } from './helper';
+
+export const quickActions = columnHelper.display({
+  header: 'Quick Actions',
   id: 'actions',
-  Cell: QuickActionsCell,
-  disableFilters: true,
-  disableSortBy: true,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
+  cell: QuickActionsCell,
+});
 
 function QuickActionsCell({
   row: { original: container },
-}: CellProps<DockerContainer>) {
+}: CellContext<DockerContainer, unknown>) {
   const settings = useTableSettings<TableSettings>();
 
   const { hiddenQuickActions = [] } = settings;

app/react/docker/containers/ListView/ContainersDatatable/columns/stack.tsx

@@ -1,13 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
-
-export const stack: Column<DockerContainer> = {
-  Header: 'Stack',
-  accessor: (row) => row.StackName || '-',
+export const stack = columnHelper.accessor((row) => row.StackName || '-', {
+  header: 'Stack',
   id: 'stack',
-  sortType: 'string',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+});

app/react/docker/containers/ListView/ContainersDatatable/columns/state.tsx

@@ -1,27 +1,32 @@
-import { CellProps, Column } from 'react-table';
 import clsx from 'clsx';
+import { CellContext } from '@tanstack/react-table';
 
 import {
   type DockerContainer,
   ContainerStatus,
 } from '@/react/docker/containers/types';
 
-import { DefaultFilter } from '@@/datatables/Filter';
+import { filterHOC } from '@@/datatables/Filter';
+import { multiple } from '@@/datatables/filter-types';
 
-export const state: Column<DockerContainer> = {
-  Header: 'State',
-  accessor: 'Status',
+import { columnHelper } from './helper';
+
+export const state = columnHelper.accessor('Status', {
+  header: 'State',
   id: 'state',
-  Cell: StatusCell,
-  sortType: 'string',
-  filter: 'multiple',
-  Filter: DefaultFilter,
-  canHide: true,
-};
+  cell: StatusCell,
+  enableColumnFilter: true,
+  filterFn: multiple,
+  meta: {
+    filter: filterHOC('Filter by state'),
+  },
+});
 
 function StatusCell({
-  value: status,
-}: CellProps<DockerContainer, ContainerStatus>) {
+  getValue,
+}: CellContext<DockerContainer, ContainerStatus>) {
+  const status = getValue();
+
   const hasHealthCheck = [
     ContainerStatus.Starting,
     ContainerStatus.Healthy,

app/react/docker/containers/ListView/ContainersDatatable/datatable-store.ts

@@ -9,7 +9,7 @@ import { QuickAction, TableSettings } from './types';
 export const TRUNCATE_LENGTH = 32;
 
 export function createStore(storageKey: string) {
-  return createPersistedStore<TableSettings>(storageKey, 'Name', (set) => ({
+  return createPersistedStore<TableSettings>(storageKey, 'name', (set) => ({
     ...hiddenColumnsSettings(set),
     ...refreshableSettings(set),
     truncateContainerName: TRUNCATE_LENGTH,