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

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 }));