feat(custom-templates): filter templates by edge [EE-6565] (#10979)

app/react/edge/edge-stacks/CreateView/TemplateFieldset.tsx

@@ -36,8 +36,9 @@ export function TemplateFieldset({
   }, [initialValues, values.template?.Id]);
 
   const templatesQuery = useCustomTemplates({
-    select: (templates) =>
-      templates.filter((template) => template.EdgeTemplate),
+    params: {
+      edge: true,
+    },
   });
 
   return (
@@ -111,8 +112,9 @@ function TemplateSelector({
   error?: string;
 }) {
   const templatesQuery = useCustomTemplates({
-    select: (templates) =>
-      templates.filter((template) => template.EdgeTemplate),
+    params: {
+      edge: true,
+    },
   });
 
   if (!templatesQuery.data) {

app/react/edge/templates/custom-templates/ListView/ListView.tsx

@@ -9,8 +9,8 @@ import { confirmDelete } from '@@/modals/confirm';
 
 export function ListView() {
   const templatesQuery = useCustomTemplates({
-    select(templates) {
-      return templates.filter((t) => t.EdgeTemplate);
+    params: {
+      edge: true,
     },
   });
   const deleteMutation = useDeleteTemplateMutation();

app/react/portainer/templates/custom-templates/CreateView/useValidation.tsx

@@ -27,7 +27,11 @@ export function useValidation({
 }) {
   const { user } = useCurrentUser();
   const gitCredentialsQuery = useGitCredentials(user.Id);
-  const customTemplatesQuery = useCustomTemplates();
+  const customTemplatesQuery = useCustomTemplates({
+    params: {
+      edge: undefined,
+    },
+  });
 
   return useMemo(
     () =>

app/react/portainer/templates/custom-templates/EditView/useValidation.tsx

@@ -25,7 +25,11 @@ export function useValidation({
 }) {
   const { user } = useCurrentUser();
   const gitCredentialsQuery = useGitCredentials(user.Id);
-  const customTemplatesQuery = useCustomTemplates();
+  const customTemplatesQuery = useCustomTemplates({
+    params: {
+      edge: undefined,
+    },
+  });
 
   return useMemo(
     () =>

app/react/portainer/templates/custom-templates/queries/query-keys.ts

@@ -2,6 +2,7 @@ import { CustomTemplate } from '../types';
 
 export const queryKeys = {
   base: () => ['custom-templates'] as const,
+  list: (params: unknown) => [...queryKeys.base(), { params }] as const,
   item: (id: CustomTemplate['Id']) => [...queryKeys.base(), id] as const,
   file: (id: CustomTemplate['Id'], options: { git: boolean }) =>
     [...queryKeys.item(id), 'file', options] as const,

app/react/portainer/templates/custom-templates/queries/useCustomTemplates.ts

@@ -2,26 +2,45 @@ import { useQuery } from 'react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { withGlobalError } from '@/react-tools/react-query';
+import { StackType } from '@/react/common/stacks/types';
 
 import { CustomTemplate } from '../types';
 
 import { queryKeys } from './query-keys';
 import { buildUrl } from './build-url';
 
-export async function getCustomTemplates() {
+type Params = {
+  type?: StackType[];
+  /**
+   * filter edge templates
+   * true if should show only edge templates
+   * false if should show only non-edge templates
+   * undefined if should show all templates
+   */
+  edge?: boolean;
+};
+
+export function useCustomTemplates<T = Array<CustomTemplate>>({
+  select,
+  params,
+}: { params?: Params; select?(templates: Array<CustomTemplate>): T } = {}) {
+  return useQuery(queryKeys.list(params), () => getCustomTemplates(params), {
+    select,
+    ...withGlobalError('Unable to retrieve custom templates'),
+  });
+}
+
+async function getCustomTemplates({ type, edge = false }: Params = {}) {
   try {
-    const { data } = await axios.get<CustomTemplate[]>(buildUrl());
+    const { data } = await axios.get<CustomTemplate[]>(buildUrl(), {
+      params: {
+        // deconstruct to make sure we don't pass other params
+        type,
+        edge,
+      },
+    });
     return data;
   } catch (e) {
     throw parseAxiosError(e, 'Unable to get custom templates');
   }
 }
-
-export function useCustomTemplates<T = Array<CustomTemplate>>({
-  select,
-}: { select?(templates: Array<CustomTemplate>): T } = {}) {
-  return useQuery(queryKeys.base(), () => getCustomTemplates(), {
-    select,
-    ...withGlobalError('Unable to retrieve custom templates'),
-  });
-}