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

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'),
-  });
-}