fix(stacks): store filter state [EE-5159] (#11637)

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

@@ -15,6 +15,8 @@ import {
 } from '@@/datatables/ColumnVisibilityMenu';
 import { TableSettingsProvider } from '@@/datatables/useTableSettings';
 import { useTableState } from '@@/datatables/useTableState';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
+import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
 import { useContainers } from '../../queries/containers';
 
@@ -92,6 +94,12 @@ export function ContainersDatatable({
           )}
           dataset={containersQuery.data || []}
           emptyContentLabel="No containers found"
+          extendTableOptions={mergeOptions(
+            withColumnFilters(
+              tableState.columnFilters,
+              tableState.setColumnFilters
+            )
+          )}
         />
       </TableSettingsProvider>
     </RowProvider>

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

@@ -2,6 +2,7 @@ import {
   refreshableSettings,
   hiddenColumnsSettings,
   createPersistedStore,
+  filteredColumnsSettings,
 } from '@@/datatables/types';
 
 import { QuickAction, TableSettings } from './types';
@@ -12,6 +13,7 @@ export function createStore(storageKey: string) {
   return createPersistedStore<TableSettings>(storageKey, 'name', (set) => ({
     ...hiddenColumnsSettings(set),
     ...refreshableSettings(set),
+    ...filteredColumnsSettings(set),
     truncateContainerName: TRUNCATE_LENGTH,
     setTruncateContainerName(truncateContainerName: number) {
       set({

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

@@ -1,5 +1,6 @@
 import {
   BasicTableSettings,
+  FilteredColumnsTableSettings,
   RefreshableTableSettings,
   SettableColumnsTableSettings,
 } from '@@/datatables/types';
@@ -15,7 +16,8 @@ export interface TableSettings
   extends BasicTableSettings,
     SettableColumnsTableSettings,
     SettableQuickActionsTableSettings<QuickAction>,
-    RefreshableTableSettings {
+    RefreshableTableSettings,
+    FilteredColumnsTableSettings {
   truncateContainerName: number;
   setTruncateContainerName: (value: number) => void;
 }

app/react/docker/images/ListView/ImagesDatatable/ImagesDatatable.tsx

@@ -10,6 +10,8 @@ import { Datatable, TableSettingsMenu } from '@@/datatables';
 import {
   BasicTableSettings,
   createPersistedStore,
+  FilteredColumnsTableSettings,
+  filteredColumnsSettings,
   refreshableSettings,
   RefreshableTableSettings,
 } from '@@/datatables/types';
@@ -18,6 +20,8 @@ import { AddButton, Button, ButtonGroup, LoadingButton } from '@@/buttons';
 import { Link } from '@@/Link';
 import { ButtonWithRef } from '@@/buttons/Button';
 import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
+import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
 import { ImagesListResponse, useImages } from '../../queries/useImages';
 
@@ -28,13 +32,15 @@ const tableKey = 'images';
 
 export interface TableSettings
   extends BasicTableSettings,
-    RefreshableTableSettings {}
+    RefreshableTableSettings,
+    FilteredColumnsTableSettings {}
 
 const settingsStore = createPersistedStore<TableSettings>(
   tableKey,
   'tags',
   (set) => ({
     ...refreshableSettings(set),
+    ...filteredColumnsSettings(set),
   })
 );
 
@@ -65,6 +71,9 @@ export function ImagesDatatable({
       title="Images"
       titleIcon={List}
       data-cy="docker-images-datatable"
+      extendTableOptions={mergeOptions(
+        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
+      )}
       renderTableActions={(selectedItems) => (
         <div className="flex items-center gap-2">
           <RemoveButtonMenu selectedItems={selectedItems} onRemove={onRemove} />

app/react/docker/services/ItemView/TasksDatatable/TasksDatatable.tsx

@@ -1,15 +1,24 @@
 import { List } from 'lucide-react';
 
 import { Datatable } from '@@/datatables';
-import { createPersistedStore } from '@@/datatables/types';
-import { useTableState } from '@@/datatables/useTableState';
+import {
+  BasicTableSettings,
+  type FilteredColumnsTableSettings,
+  filteredColumnsSettings,
+} from '@@/datatables/types';
+import { useTableStateWithStorage } from '@@/datatables/useTableState';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
+import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
 import { useColumns } from './columns';
 import { DecoratedTask } from './types';
 
 const storageKey = 'docker-service-tasks';
-const store = createPersistedStore(storageKey);
+
+interface TableSettings
+  extends BasicTableSettings,
+    FilteredColumnsTableSettings {}
 
 export function TasksDatatable({
   dataset,
@@ -20,7 +29,13 @@ export function TasksDatatable({
   isSlotColumnVisible: boolean;
   serviceName: string;
 }) {
-  const tableState = useTableState(store, storageKey);
+  const tableState = useTableStateWithStorage<TableSettings>(
+    storageKey,
+    undefined,
+    (set) => ({
+      ...filteredColumnsSettings(set),
+    })
+  );
   const columns = useColumns(isSlotColumnVisible);
 
   return (
@@ -31,7 +46,11 @@ export function TasksDatatable({
       columns={columns}
       dataset={dataset}
       emptyContentLabel="No task available."
-      extendTableOptions={withMeta({ table: 'tasks', serviceName })}
+      extendTableOptions={mergeOptions(
+        withMeta({ table: 'tasks', serviceName }),
+        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
+      )}
+      disableSelect
       data-cy="docker-service-tasks-datatable"
     />
   );

app/react/docker/stacks/ListView/StacksDatatable/StacksDatatable.tsx

@@ -5,22 +5,20 @@ import { useAuthorizations, useIsEdgeAdmin } from '@/react/hooks/useUser';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 import { Datatable } from '@@/datatables';
-import { useTableState } from '@@/datatables/useTableState';
 import { useRepeater } from '@@/datatables/useRepeater';
 import { defaultGlobalFilterFn } from '@@/datatables/Datatable';
 import { withGlobalFilter } from '@@/datatables/extend-options/withGlobalFilter';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
+import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
 import { isExternalStack, isOrphanedStack } from '../../view-models/utils';
 
 import { TableActions } from './TableActions';
 import { TableSettingsMenus } from './TableSettingsMenus';
-import { createStore } from './store';
+import { useStore } from './store';
 import { useColumns } from './columns';
 import { DecoratedStack } from './types';
 
-const tableKey = 'docker_stacks';
-const settingsStore = createStore(tableKey);
-
 export function StacksDatatable({
   onRemove,
   onReload,
@@ -32,7 +30,7 @@ export function StacksDatatable({
   isImageNotificationEnabled: boolean;
   dataset: Array<DecoratedStack>;
 }) {
-  const tableState = useTableState(settingsStore, tableKey);
+  const tableState = useStore();
   useRepeater(tableState.autoRefreshRate, onReload);
   const isAdminQuery = useIsEdgeAdmin();
   const { authorized: canManageStacks } = useAuthorizations([
@@ -69,7 +67,10 @@ export function StacksDatatable({
           tableState.hiddenColumns.map((col) => [col, false])
         ),
       }}
-      extendTableOptions={withGlobalFilter(globalFilterFn)}
+      extendTableOptions={mergeOptions(
+        withGlobalFilter(globalFilterFn),
+        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
+      )}
       data-cy="docker-stacks-datatable"
     />
   );

app/react/docker/stacks/ListView/StacksDatatable/store.ts

@@ -1,24 +1,30 @@
 import {
-  BasicTableSettings,
-  RefreshableTableSettings,
-  SettableColumnsTableSettings,
-  createPersistedStore,
+  type BasicTableSettings,
+  type FilteredColumnsTableSettings,
+  type RefreshableTableSettings,
+  type SettableColumnsTableSettings,
   hiddenColumnsSettings,
   refreshableSettings,
+  filteredColumnsSettings,
 } from '@@/datatables/types';
+import { useTableStateWithStorage } from '@@/datatables/useTableState';
 
 export interface TableSettings
   extends BasicTableSettings,
     SettableColumnsTableSettings,
-    RefreshableTableSettings {
+    RefreshableTableSettings,
+    FilteredColumnsTableSettings {
   showOrphanedStacks: boolean;
   setShowOrphanedStacks(value: boolean): void;
 }
 
-export function createStore(storageKey: string) {
-  return createPersistedStore<TableSettings>(storageKey, 'name', (set) => ({
+const tableKey = 'docker_stacks';
+
+export function useStore() {
+  return useTableStateWithStorage<TableSettings>(tableKey, 'name', (set) => ({
     ...hiddenColumnsSettings(set),
     ...refreshableSettings(set),
+    ...filteredColumnsSettings(set),
     showOrphanedStacks: false,
     setShowOrphanedStacks(showOrphanedStacks) {
       set((s) => ({ ...s, showOrphanedStacks }));

app/react/docker/volumes/ListView/VolumesDatatable/VolumesDatatable.tsx

@@ -4,6 +4,8 @@ import { Datatable, TableSettingsMenu } from '@@/datatables';
 import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
 import {
   BasicTableSettings,
+  FilteredColumnsTableSettings,
+  filteredColumnsSettings,
   RefreshableTableSettings,
   createPersistedStore,
   refreshableSettings,
@@ -11,13 +13,17 @@ import {
 import { useRepeater } from '@@/datatables/useRepeater';
 import { useTableState } from '@@/datatables/useTableState';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
 import { DecoratedVolume } from '../types';
 
 import { TableActions } from './TableActions';
 import { useColumns } from './columns';
 
-interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+interface TableSettings
+  extends BasicTableSettings,
+    RefreshableTableSettings,
+    FilteredColumnsTableSettings {}
 
 const storageKey = 'docker-volumes';
 const store = createPersistedStore<TableSettings>(
@@ -25,6 +31,7 @@ const store = createPersistedStore<TableSettings>(
   undefined,
   (set) => ({
     ...refreshableSettings(set),
+    ...filteredColumnsSettings(set),
   })
 );
 
@@ -63,10 +70,16 @@ export function VolumesDatatable({
           />
         </TableSettingsMenu>
       )}
-      extendTableOptions={withMeta({
-        table: 'volumes',
-        isBrowseVisible,
-      })}
+      extendTableOptions={
+        (withMeta({
+          table: 'volumes',
+          isBrowseVisible,
+        }),
+        withColumnFilters(
+          tableState.columnFilters,
+          tableState.setColumnFilters
+        ))
+      }
       data-cy="docker-volumes-datatable"
     />
   );