refactor(ui/datatables): migrate views to use datatable component [EE-4064] (#7609)

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

@@ -1,4 +1,6 @@
 import _ from 'lodash';
+import { useStore } from 'zustand';
+import { Box } from 'react-feather';
 
 import { Environment } from '@/react/portainer/environments/types';
 import type { DockerContainer } from '@/react/docker/containers/types';
@@ -10,6 +12,8 @@ import {
   QuickActionsSettings,
 } from '@@/datatables/QuickActionsSettings';
 import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
+import { useSearchBarState } from '@@/datatables/SearchBar';
+import { TableSettingsProvider } from '@@/datatables/useTableSettings';
 
 import { useContainers } from '../../queries/containers';
 
@@ -20,7 +24,7 @@ import { ContainersDatatableActions } from './ContainersDatatableActions';
 import { RowProvider } from './RowContext';
 
 const storageKey = 'containers';
-const useStore = createStore(storageKey);
+const settingsStore = createStore(storageKey);
 
 const actions = [
   buildAction('logs', 'Logs'),
@@ -39,13 +43,15 @@ export function ContainersDatatable({
   isHostColumnVisible,
   environment,
 }: Props) {
-  const settings = useStore();
+  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 containersQuery = useContainers(
     environment.Id,
     true,
@@ -55,53 +61,57 @@ export function ContainersDatatable({
 
   return (
     <RowProvider context={{ environment }}>
-      <Datatable
-        titleOptions={{
-          icon: 'svg-cubes',
-          title: 'Containers',
-        }}
-        settingsStore={settings}
-        columns={columns}
-        renderTableActions={(selectedRows) => (
-          <ContainersDatatableActions
-            selectedItems={selectedRows}
-            isAddActionVisible
-            endpointId={environment.Id}
-          />
-        )}
-        isLoading={containersQuery.isLoading}
-        isRowSelectable={(row) => !row.original.IsPortainer}
-        initialTableState={{ hiddenColumns: settings.hiddenColumns }}
-        renderTableSettings={(tableInstance) => {
-          const columnsToHide = tableInstance.allColumns.filter((colInstance) =>
-            hidableColumns?.includes(colInstance.id)
-          );
+      <TableSettingsProvider settings={settingsStore}>
+        <Datatable
+          titleIcon={Box}
+          title="Containers"
+          initialPageSize={settings.pageSize}
+          onPageSizeChange={settings.setPageSize}
+          initialSortBy={settings.sortBy}
+          onSortByChange={settings.setSortBy}
+          searchValue={search}
+          onSearchChange={setSearch}
+          columns={columns}
+          renderTableActions={(selectedRows) => (
+            <ContainersDatatableActions
+              selectedItems={selectedRows}
+              isAddActionVisible
+              endpointId={environment.Id}
+            />
+          )}
+          isLoading={containersQuery.isLoading}
+          isRowSelectable={(row) => !row.original.IsPortainer}
+          initialTableState={{ hiddenColumns: settings.hiddenColumns }}
+          renderTableSettings={(tableInstance) => {
+            const columnsToHide = tableInstance.allColumns.filter(
+              (colInstance) => hidableColumns?.includes(colInstance.id)
+            );
 
-          return (
-            <>
-              <ColumnVisibilityMenu<DockerContainer>
-                columns={columnsToHide}
-                onChange={(hiddenColumns) => {
-                  settings.setHiddenColumns(hiddenColumns);
-                  tableInstance.setHiddenColumns(hiddenColumns);
-                }}
-                value={settings.hiddenColumns}
-              />
-              <TableSettingsMenu
-                quickActions={<QuickActionsSettings actions={actions} />}
-              >
-                <ContainersDatatableSettings
-                  isRefreshVisible
-                  settings={settings}
+            return (
+              <>
+                <ColumnVisibilityMenu<DockerContainer>
+                  columns={columnsToHide}
+                  onChange={(hiddenColumns) => {
+                    settings.setHiddenColumns(hiddenColumns);
+                    tableInstance.setHiddenColumns(hiddenColumns);
+                  }}
+                  value={settings.hiddenColumns}
                 />
-              </TableSettingsMenu>
-            </>
-          );
-        }}
-        storageKey={storageKey}
-        dataset={containersQuery.data || []}
-        emptyContentLabel="No containers found"
-      />
+                <TableSettingsMenu
+                  quickActions={<QuickActionsSettings actions={actions} />}
+                >
+                  <ContainersDatatableSettings
+                    isRefreshVisible
+                    settings={settings}
+                  />
+                </TableSettingsMenu>
+              </>
+            );
+          }}
+          dataset={containersQuery.data || []}
+          emptyContentLabel="No containers found"
+        />
+      </TableSettingsProvider>
     </RowProvider>
   );
 }

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

@@ -4,7 +4,7 @@ import { useSref } from '@uirouter/react';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
 
-import { useTableSettings } from '@@/datatables/useZustandTableSettings';
+import { useTableSettings } from '@@/datatables/useTableSettings';
 
 import { TableSettings } from '../types';
 
@@ -31,7 +31,7 @@ export function NameCell({
     nodeName: container.NodeName,
   });
 
-  const { settings } = useTableSettings<TableSettings>();
+  const settings = useTableSettings<TableSettings>();
   const truncate = settings.truncateContainerName;
 
   let shortName = name;

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

@@ -4,7 +4,7 @@ import { useAuthorizations } from '@/react/hooks/useUser';
 import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
 import { DockerContainer } from '@/react/docker/containers/types';
 
-import { useTableSettings } from '@@/datatables/useZustandTableSettings';
+import { useTableSettings } from '@@/datatables/useTableSettings';
 
 import { TableSettings } from '../types';
 
@@ -22,7 +22,7 @@ export const quickActions: Column<DockerContainer> = {
 function QuickActionsCell({
   row: { original: container },
 }: CellProps<DockerContainer>) {
-  const { settings } = useTableSettings<TableSettings>();
+  const settings = useTableSettings<TableSettings>();
 
   const { hiddenQuickActions = [] } = settings;
 

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

@@ -1,40 +1,26 @@
-import create from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import { keyBuilder } from '@/react/hooks/useLocalStorage';
 import {
-  paginationSettings,
-  sortableSettings,
   refreshableSettings,
   hiddenColumnsSettings,
-} from '@/react/components/datatables/types';
+  createPersistedStore,
+} from '@@/datatables/types';
 
 import { QuickAction, TableSettings } from './types';
 
 export const TRUNCATE_LENGTH = 32;
 
 export function createStore(storageKey: string) {
-  return create<TableSettings>()(
-    persist(
-      (set) => ({
-        ...sortableSettings(set),
-        ...paginationSettings(set),
-        ...hiddenColumnsSettings(set),
-        ...refreshableSettings(set),
-        truncateContainerName: TRUNCATE_LENGTH,
-        setTruncateContainerName(truncateContainerName: number) {
-          set({
-            truncateContainerName,
-          });
-        },
+  return createPersistedStore<TableSettings>(storageKey, 'Name', (set) => ({
+    ...hiddenColumnsSettings(set),
+    ...refreshableSettings(set),
+    truncateContainerName: TRUNCATE_LENGTH,
+    setTruncateContainerName(truncateContainerName: number) {
+      set({
+        truncateContainerName,
+      });
+    },
 
-        hiddenQuickActions: [] as QuickAction[],
-        setHiddenQuickActions: (hiddenQuickActions: QuickAction[]) =>
-          set({ hiddenQuickActions }),
-      }),
-      {
-        name: keyBuilder(storageKey),
-      }
-    )
-  );
+    hiddenQuickActions: [] as QuickAction[],
+    setHiddenQuickActions: (hiddenQuickActions: QuickAction[]) =>
+      set({ hiddenQuickActions }),
+  }));
 }

app/react/docker/containers/ListView/ContainersDatatable/types.ts

@@ -1,9 +1,8 @@
 import {
-  PaginationTableSettings,
+  BasicTableSettings,
   RefreshableTableSettings,
   SettableColumnsTableSettings,
-  SortableTableSettings,
-} from '@/react/components/datatables/types';
+} from '@@/datatables/types';
 
 export type QuickAction = 'attach' | 'exec' | 'inspect' | 'logs' | 'stats';
 
@@ -13,8 +12,7 @@ export interface SettableQuickActionsTableSettings<TAction> {
 }
 
 export interface TableSettings
-  extends SortableTableSettings,
-    PaginationTableSettings,
+  extends BasicTableSettings,
     SettableColumnsTableSettings,
     SettableQuickActionsTableSettings<QuickAction>,
     RefreshableTableSettings {