From 4c226d7a171ee3ae099fd65d24d257f84b31425b Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Tue, 2 Jan 2024 13:25:26 +0700
Subject: [PATCH] fix(templates): separate template views filters [EE-6397]
 (#10711)

---
 .../kube-custom-templates-view.html           |  1 +
 .../components/custom-templates/index.ts      |  2 ++
 .../customTemplatesView.html                  |  1 +
 app/portainer/views/templates/templates.html  |  8 ++++++-
 .../AppTemplatesView/AppTemplatesView.tsx     |  1 +
 .../custom-templates/ListView/ListView.tsx    |  1 +
 .../app-templates/AppTemplatesList.tsx        | 21 ++++++++++---------
 .../ListView/CustomTemplatesList.tsx          |  9 ++++----
 8 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html b/app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html
index c191d4e58..2ac399d05 100644
--- a/app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html
+++ b/app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html
@@ -5,4 +5,5 @@
   on-select="($ctrl.selectTemplate)"
   on-delete="($ctrl.confirmDelete)"
   selected-id="$ctrl.state.selectedTemplate.Id"
+  storage-key="'kube-custom-templates'"
 ></custom-templates-list>
diff --git a/app/portainer/react/components/custom-templates/index.ts b/app/portainer/react/components/custom-templates/index.ts
index 99d60faba..5730e7131 100644
--- a/app/portainer/react/components/custom-templates/index.ts
+++ b/app/portainer/react/components/custom-templates/index.ts
@@ -47,6 +47,7 @@ export const ngModule = angular
       'selectedId',
       'disabledTypes',
       'fixedCategories',
+      'storageKey',
     ])
   )
   .component(
@@ -57,6 +58,7 @@ export const ngModule = angular
       'templates',
       'selectedId',
       'templateLinkParams',
+      'storageKey',
     ])
   )
   .component(
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
index 7a2cfff49..d0444a972 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
+++ b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
@@ -68,4 +68,5 @@
   on-select="($ctrl.selectTemplate)"
   on-delete="($ctrl.confirmDelete)"
   selected-id="$ctrl.state.selectedTemplate.Id"
+  storage-key="'docker-custom-templates'"
 ></custom-templates-list>
diff --git a/app/portainer/views/templates/templates.html b/app/portainer/views/templates/templates.html
index 955a4a805..3e2901821 100644
--- a/app/portainer/views/templates/templates.html
+++ b/app/portainer/views/templates/templates.html
@@ -270,4 +270,10 @@
   <!-- container-form -->
 </div>
 
-<app-templates-list templates="templates" on-select="(selectTemplate)" selected-id="state.selectedTemplate.Id" disabled-types="disabledTypes"></app-templates-list>
+<app-templates-list
+  storage-key="'docker-app-templates'"
+  templates="templates"
+  on-select="(selectTemplate)"
+  selected-id="state.selectedTemplate.Id"
+  disabled-types="disabledTypes"
+></app-templates-list>
diff --git a/app/react/edge/templates/AppTemplatesView/AppTemplatesView.tsx b/app/react/edge/templates/AppTemplatesView/AppTemplatesView.tsx
index 8f8777099..86f47efb0 100644
--- a/app/react/edge/templates/AppTemplatesView/AppTemplatesView.tsx
+++ b/app/react/edge/templates/AppTemplatesView/AppTemplatesView.tsx
@@ -34,6 +34,7 @@ export function AppTemplatesView() {
         onSelect={(template) => setSelectedTemplateId(template.Id)}
         disabledTypes={[TemplateType.Container]}
         fixedCategories={['edge']}
+        storageKey="edge-app-templates"
       />
     </>
   );
diff --git a/app/react/edge/templates/custom-templates/ListView/ListView.tsx b/app/react/edge/templates/custom-templates/ListView/ListView.tsx
index 0a65f3f75..a7389d0e5 100644
--- a/app/react/edge/templates/custom-templates/ListView/ListView.tsx
+++ b/app/react/edge/templates/custom-templates/ListView/ListView.tsx
@@ -26,6 +26,7 @@ export function ListView() {
           to: 'edge.stacks.new',
           params: { templateId: template.Id },
         })}
+        storageKey="edge-custom-templates"
       />
     </>
   );
diff --git a/app/react/portainer/templates/app-templates/AppTemplatesList.tsx b/app/react/portainer/templates/app-templates/AppTemplatesList.tsx
index 191162caa..ab013e2d2 100644
--- a/app/react/portainer/templates/app-templates/AppTemplatesList.tsx
+++ b/app/react/portainer/templates/app-templates/AppTemplatesList.tsx
@@ -14,21 +14,15 @@ import { ListState, TemplateType } from './types';
 import { useSortAndFilterTemplates } from './useSortAndFilter';
 import { Filters } from './Filters';
 
-const tableKey = 'app-templates-list';
-const store = createPersistedStore<ListState>(tableKey, undefined, (set) => ({
-  category: null,
-  setCategory: (category: ListState['category']) => set({ category }),
-  types: [],
-  setTypes: (types: ListState['types']) => set({ types }),
-}));
-
 export function AppTemplatesList({
   templates: initialTemplates,
   onSelect,
   selectedId,
   disabledTypes,
   fixedCategories,
+  storageKey,
 }: {
+  storageKey: string;
   templates?: TemplateViewModel[];
   onSelect: (template: TemplateViewModel) => void;
   selectedId?: TemplateViewModel['Id'];
@@ -36,8 +30,15 @@ export function AppTemplatesList({
   fixedCategories?: Array<string>;
 }) {
   const [page, setPage] = useState(0);
-
-  const listState = useTableState(store, tableKey);
+  const [store] = useState(() =>
+    createPersistedStore<ListState>(storageKey, undefined, (set) => ({
+      category: null,
+      setCategory: (category: ListState['category']) => set({ category }),
+      types: [],
+      setTypes: (types: ListState['types']) => set({ types }),
+    }))
+  );
+  const listState = useTableState(store, storageKey);
 
   const templates = useMemo(() => {
     if (!initialTemplates) {
diff --git a/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx b/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx
index 6a4a47831..b76c0b924 100644
--- a/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx
+++ b/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx
@@ -14,15 +14,13 @@ import { Link } from '@@/Link';
 
 import { CustomTemplatesListItem } from './CustomTemplatesListItem';
 
-const tableKey = 'custom-templates-list';
-const store = createPersistedStore(tableKey);
-
 export function CustomTemplatesList({
   templates,
   onSelect,
   onDelete,
   selectedId,
   templateLinkParams,
+  storageKey,
 }: {
   templates?: CustomTemplate[];
   onSelect?: (template: CustomTemplate['Id']) => void;
@@ -32,10 +30,11 @@ export function CustomTemplatesList({
     to: string;
     params: object;
   };
+  storageKey: string;
 }) {
   const [page, setPage] = useState(0);
-
-  const listState = useTableState(store, tableKey);
+  const [store] = useState(() => createPersistedStore(storageKey));
+  const listState = useTableState(store, storageKey);
 
   const filterBySearch = useCallback(
     (item: CustomTemplate) =>