From 069f22afa485d3a7dc78cb17854fd3d0e212b876 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:58:43 +1300
Subject: [PATCH] fix(services): separate table state [BE-11401] (#152)

---
 app/docker/react/components/services.ts       |  1 +
 app/docker/views/services/services.html       |  1 +
 app/portainer/views/stacks/edit/stack.html    |  8 ++++-
 .../ServicesDatatable/ServicesDatatable.tsx   | 31 ++++++++++---------
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/docker/react/components/services.ts b/app/docker/react/components/services.ts
index 76eeeb63b..d5abd06d4 100644
--- a/app/docker/react/components/services.ts
+++ b/app/docker/react/components/services.ts
@@ -31,6 +31,7 @@ const ngModule = angular
       'isStackColumnVisible',
       'onRefresh',
       'titleIcon',
+      'tableKey',
     ])
   );
 
diff --git a/app/docker/views/services/services.html b/app/docker/views/services/services.html
index fc1dcb9fd..e1a7b8a56 100644
--- a/app/docker/views/services/services.html
+++ b/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>
diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html
index 2cdf107d3..caf7a4f92 100644
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/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
diff --git a/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx b/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
index 8a756783d..1cc74074d 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
+++ b/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();