fix(templates): separate template views filters [EE-6397] (#10711)

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>

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(

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>

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>

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"
       />
     </>
   );

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"
       />
     </>
   );

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) {

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) =>