fix(templates): show type selector [EE-6370] (#10694)

app/react/portainer/templates/app-templates/AppTemplatesList.tsx

@@ -1,6 +1,6 @@
 import { Edit } from 'lucide-react';
 import _ from 'lodash';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { DatatableHeader } from '@@/datatables/DatatableHeader';
 import { Table } from '@@/datatables';
@@ -23,7 +23,7 @@ const store = createPersistedStore<ListState>(tableKey, undefined, (set) => ({
 }));
 
 export function AppTemplatesList({
-  templates,
+  templates: initialTemplates,
   onSelect,
   selectedId,
   disabledTypes,
@@ -38,11 +38,25 @@ export function AppTemplatesList({
   const [page, setPage] = useState(0);
 
   const listState = useTableState(store, tableKey);
+
+  const templates = useMemo(() => {
+    if (!initialTemplates) {
+      return [];
+    }
+
+    if (!fixedCategories?.length) {
+      return initialTemplates;
+    }
+
+    return initialTemplates.filter((template) =>
+      fixedCategories.some((category) => template.Categories.includes(category))
+    );
+  }, [fixedCategories, initialTemplates]);
+
   const filteredTemplates = useSortAndFilterTemplates(
     templates || [],
     listState,
-    disabledTypes,
+    disabledTypes
-    fixedCategories
   );
 
   const pagedTemplates =
@@ -58,7 +72,7 @@ export function AppTemplatesList({
         description={
           <Filters
             listState={listState}
-            templates={filteredTemplates || []}
+            templates={templates || []}
             onChange={() => setPage(0)}
             disabledTypes={disabledTypes}
             fixedCategories={fixedCategories}

app/react/portainer/templates/app-templates/useSortAndFilter.tsx

@@ -7,20 +7,19 @@ import { ListState } from './types';
 export function useSortAndFilterTemplates(
   templates: Array<TemplateViewModel>,
   listState: ListState & { search: string },
-  disabledTypes: Array<TemplateViewModel['Type']> = [],
+  disabledTypes: Array<TemplateViewModel['Type']> = []
-  fixedCategories: Array<string> = []
 ) {
   const filterByCategory = useCallback(
     (item: TemplateViewModel) => {
-      if (!listState.category && !fixedCategories.length) {
+      if (!listState.category) {
         return true;
       }
 
-      return _.compact([...fixedCategories, listState.category]).every(
+      return _.compact([listState.category]).every((category) =>
-        (category) => item.Categories.includes(category)
+        item.Categories.includes(category)
       );
     },
-    [fixedCategories, listState.category]
+    [listState.category]
   );
 
   const filterBySearch = useCallback(