fix(services): separate table state [BE-11401] (#152)

app/docker/react/components/services.ts

@@ -31,6 +31,7 @@ const ngModule = angular
       'isStackColumnVisible',
       'onRefresh',
       'titleIcon',
+      'tableKey',
     ])
   );
 

app/docker/views/services/services.html

@@ -6,4 +6,5 @@
   on-refresh="(getServices)"
   is-add-action-visible="true"
   is-stack-column-visible="true"
+  table-key="'services'"
 ></docker-services-datatable>

app/portainer/views/stacks/edit/stack.html

@@ -241,7 +241,13 @@
   environment="endpoint"
 ></stack-containers-datatable>
 
-<docker-services-datatable ng-if="services && (!orphaned || orphanedRunning)" dataset="services" title-icon="list" on-refresh="(getServices)"></docker-services-datatable>
+<docker-services-datatable
+  ng-if="services && (!orphaned || orphanedRunning)"
+  dataset="services"
+  title-icon="list"
+  on-refresh="(getServices)"
+  table-key="'stack-services'"
+></docker-services-datatable>
 
 <!-- access-control-panel -->
 <access-control-panel

app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx

@@ -28,34 +28,35 @@ import { TableActions } from './TableActions';
 import { type TableSettings as TableSettingsType } from './types';
 import { TableSettings } from './TableSettings';
 
-const tableKey = 'services';
-
-const store = createPersistedStore<TableSettingsType>(
-  tableKey,
-  'name',
-  (set) => ({
-    ...refreshableSettings(set),
-    ...hiddenColumnsSettings(set),
-    expanded: {},
-    setExpanded(value) {
-      set({ expanded: value });
-    },
-  })
-);
-
 export function ServicesDatatable({
   titleIcon = Shuffle,
   dataset,
   isAddActionVisible,
   isStackColumnVisible,
   onRefresh,
+  tableKey,
 }: {
   dataset: Array<ServiceViewModel> | undefined;
   titleIcon?: IconProps['icon'];
   isAddActionVisible?: boolean;
   isStackColumnVisible?: boolean;
   onRefresh?(): void;
+  tableKey: string;
 }) {
+  // use a unique tableKey so that unrelated services datatables don't share state
+  const store = createPersistedStore<TableSettingsType>(
+    tableKey,
+    'name',
+    (set) => ({
+      ...refreshableSettings(set),
+      ...hiddenColumnsSettings(set),
+      expanded: {},
+      setExpanded(value) {
+        set({ expanded: value });
+      },
+    })
+  );
+
   // useRef so that updating the parent filter doesn't cause a re-render
   const parentFilteredStatusRef = useRef<Map<string, boolean>>(new Map());
   const environmentId = useEnvironmentId();