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

app/react/docker/stacks/ItemView/StackContainersDatatable.tsx

@@ -1,5 +1,3 @@
-import _ from 'lodash';
-import { useStore } from 'zustand';
 import { Box } from 'lucide-react';
 
 import { DockerContainer } from '@/react/docker/containers/types';
@@ -10,17 +8,16 @@ import { ContainersDatatableActions } from '@/react/docker/containers/ListView/C
 import { ContainersDatatableSettings } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings';
 import { useShowGPUsColumn } from '@/react/docker/containers/utils';
 
-import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { Datatable, Table } 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 '../../containers/queries/containers';
-import { RowProvider } from '../../containers/ListView/ContainersDatatable/RowContext';
 
 const storageKey = 'stack-containers';
 const settingsStore = createStore(storageKey);
@@ -39,74 +36,68 @@ export interface Props {
 }
 
 export function StackContainersDatatable({ environment, stackName }: Props) {
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   const isGPUsColumnVisible = useShowGPUsColumn(environment.Id);
   const columns = useColumns(false, isGPUsColumnVisible);
 
-  const hidableColumns = _.compact(
-    columns.filter((col) => col.canHide).map((col) => col.id)
-  );
-
   const containersQuery = useContainers(
     environment.Id,
     true,
     {
       label: [`com.docker.compose.project=${stackName}`],
     },
-    settings.autoRefreshRate * 1000
+    tableState.autoRefreshRate * 1000
   );
 
   return (
-    <RowProvider context={{ environment }}>
-      <TableSettingsProvider settings={settingsStore}>
-        <Datatable
-          title="Containers"
-          titleIcon={Box}
-          initialPageSize={settings.pageSize}
-          onPageSizeChange={settings.setPageSize}
-          initialSortBy={settings.sortBy}
-          onSortByChange={settings.setSortBy}
-          searchValue={search}
-          onSearchChange={setSearch}
-          columns={columns}
-          renderTableActions={(selectedRows) => (
-            <ContainersDatatableActions
-              selectedItems={selectedRows}
-              isAddActionVisible={false}
-              endpointId={environment.Id}
-            />
-          )}
-          initialTableState={{ hiddenColumns: settings.hiddenColumns }}
-          renderTableSettings={(tableInstance) => {
-            const columnsToHide = tableInstance.allColumns.filter(
-              (colInstance) => hidableColumns?.includes(colInstance.id)
-            );
+    <TableSettingsProvider settings={settingsStore}>
+      <Datatable
+        title="Containers"
+        titleIcon={Box}
+        settingsManager={tableState}
+        columns={columns}
+        renderTableActions={(selectedRows) => (
+          <ContainersDatatableActions
+            selectedItems={selectedRows}
+            isAddActionVisible={false}
+            endpointId={environment.Id}
+          />
+        )}
+        initialTableState={{
+          columnVisibility: Object.fromEntries(
+            tableState.hiddenColumns.map((col) => [col, false])
+          ),
+        }}
+        renderTableSettings={(tableInstance) => {
+          const columnsToHide = tableInstance
+            .getAllColumns()
+            .filter((col) => col.getCanHide());
 
-            return (
-              <>
-                <ColumnVisibilityMenu<DockerContainer>
-                  columns={columnsToHide}
-                  onChange={(hiddenColumns) => {
-                    settings.setHiddenColumns(hiddenColumns);
-                    tableInstance.setHiddenColumns(hiddenColumns);
-                  }}
-                  value={settings.hiddenColumns}
-                />
-                <TableSettingsMenu
-                  quickActions={<QuickActionsSettings actions={actions} />}
-                >
-                  <ContainersDatatableSettings settings={settings} />
-                </TableSettingsMenu>
-              </>
-            );
-          }}
-          dataset={containersQuery.data || []}
-          isLoading={containersQuery.isLoading}
-          emptyContentLabel="No containers found"
-        />
-      </TableSettingsProvider>
-    </RowProvider>
+          return (
+            <>
+              <ColumnVisibilityMenu<DockerContainer>
+                columns={columnsToHide}
+                onChange={(hiddenColumns) => {
+                  tableState.setHiddenColumns(hiddenColumns);
+                  tableInstance.setColumnVisibility(
+                    Object.fromEntries(hiddenColumns.map((col) => [col, false]))
+                  );
+                }}
+                value={tableState.hiddenColumns}
+              />
+              <Table.SettingsMenu
+                quickActions={<QuickActionsSettings actions={actions} />}
+              >
+                <ContainersDatatableSettings settings={tableState} />
+              </Table.SettingsMenu>
+            </>
+          );
+        }}
+        dataset={containersQuery.data || []}
+        isLoading={containersQuery.isLoading}
+        emptyContentLabel="No containers found"
+      />
+    </TableSettingsProvider>
   );
 }