feat(edge/templates): introduce edge app templates [EE-6209] (#10480)

app/react/components/Blocklist/BlocklistItem.tsx

@@ -23,7 +23,7 @@ export function BlocklistItem<T extends ElementType>({
       type="button"
       className={clsx(
         className,
-        'blocklist-item flex items-stretch overflow-hidden bg-transparent w-full !ml-0',
+        'blocklist-item flex items-stretch overflow-hidden bg-transparent w-full !ml-0 text-left',
         {
           'blocklist-item--selected': isSelected,
         }

app/react/components/FallbackImage.tsx

@@ -1,23 +1,14 @@
-import { useEffect, useState } from 'react';
-
-import { BadgeIcon, BadgeSize } from './BadgeIcon/BadgeIcon';
+import { ReactNode, useEffect, useState } from 'react';
 
 interface Props {
   // props for the image to load
   src?: string; // a link to an external image
-  fallbackIcon: string;
+  fallbackIcon: ReactNode;
   alt?: string;
-  size?: BadgeSize;
   className?: string;
 }
 
-export function FallbackImage({
-  src,
-  fallbackIcon,
-  alt,
-  size,
-  className,
-}: Props) {
+export function FallbackImage({ src, fallbackIcon, alt, className }: Props) {
   const [error, setError] = useState(false);
 
   useEffect(() => {
@@ -36,5 +27,5 @@ export function FallbackImage({
   }
 
   // fallback icon if there is an error loading the image
-  return <BadgeIcon icon={fallbackIcon} size={size} />;
+  return <>{fallbackIcon}</>;
 }

app/react/components/form-components/PortainerSelect.tsx

@@ -12,6 +12,7 @@ import { Select as ReactSelect } from '@@/form-components/ReactSelect';
 export interface Option<TValue> {
   value: TValue;
   label: string;
+  disabled?: boolean;
 }
 
 type Options<TValue> = OptionsOrGroups<
@@ -99,6 +100,7 @@ export function SingleSelect<TValue = string>({
       options={options}
       value={selectedValue}
       onChange={(option) => onChange(option ? option.value : null)}
+      isOptionDisabled={(option) => !!option.disabled}
       data-cy={dataCy}
       inputId={inputId}
       placeholder={placeholder}
@@ -155,6 +157,7 @@ export function MultiSelect<TValue = string>({
       isClearable={isClearable}
       getOptionLabel={(option) => option.label}
       getOptionValue={(option) => String(option.value)}
+      isOptionDisabled={(option) => !!option.disabled}
       options={options}
       value={selectedOptions}
       closeMenuOnSelect={false}

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

@@ -0,0 +1,50 @@
+import { FormikErrors } from 'formik';
+import { SchemaOf, string } from 'yup';
+
+import { STACK_NAME_VALIDATION_REGEX } from '@/react/constants';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import { EdgeStack } from '../types';
+
+export function NameField({
+  onChange,
+  value,
+  errors,
+}: {
+  onChange(value: string): void;
+  value: string;
+  errors?: FormikErrors<string>;
+}) {
+  return (
+    <FormControl inputId="name-input" label="Name" errors={errors} required>
+      <Input
+        id="name-input"
+        onChange={(e) => onChange(e.target.value)}
+        value={value}
+        required
+      />
+    </FormControl>
+  );
+}
+
+export function nameValidation(
+  stacks: Array<EdgeStack>,
+  isComposeStack: boolean | undefined
+): SchemaOf<string> {
+  let schema = string()
+    .required('Name is required')
+    .test('unique', 'Name should be unique', (value) =>
+      stacks.every((s) => s.Name !== value)
+    );
+
+  if (isComposeStack) {
+    schema = schema.matches(
+      new RegExp(STACK_NAME_VALIDATION_REGEX),
+      "This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123')."
+    );
+  }
+
+  return schema;
+}

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/PrivateRegistryFieldsetWrapper.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 
 import { notifyError } from '@/portainer/services/notifications';
 import { PrivateRegistryFieldset } from '@/react/edge/edge-stacks/components/PrivateRegistryFieldset';
-import { useCreateStackFromFileContent } from '@/react/edge/edge-stacks/queries/useCreateStackFromFileContent';
+import { useCreateEdgeStackFromFileContent } from '@/react/edge/edge-stacks/queries/useCreateEdgeStackFromFileContent';
 import { useRegistries } from '@/react/portainer/registries/queries/useRegistries';
 
 import { FormValues } from './types';
@@ -24,7 +24,7 @@ export function PrivateRegistryFieldsetWrapper({
   stackName: string;
   onFieldError: (message: string) => void;
 }) {
-  const dryRunMutation = useCreateStackFromFileContent();
+  const dryRunMutation = useCreateEdgeStackFromFileContent();
 
   const registriesQuery = useRegistries();
 

app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx

@@ -18,6 +18,7 @@ interface Props {
   error?: string | string[];
   horizontal?: boolean;
   isGroupVisible?(group: EdgeGroup): boolean;
+  required?: boolean;
 }
 
 export function EdgeGroupsSelector({
@@ -26,6 +27,7 @@ export function EdgeGroupsSelector({
   error,
   horizontal,
   isGroupVisible = () => true,
+  required,
 }: Props) {
   const selector = (
     <InnerSelector
@@ -36,11 +38,11 @@ export function EdgeGroupsSelector({
   );
 
   return horizontal ? (
-    <FormControl errors={error} label="Edge Groups">
+    <FormControl errors={error} label="Edge Groups" required={required}>
       {selector}
     </FormControl>
   ) : (
-    <FormSection title="Edge Groups">
+    <FormSection title={`Edge Groups${required ? ' *' : ''}`}>
       <div className="form-group">
         <div className="col-sm-12">{selector} </div>
         {error && (

app/react/edge/edge-stacks/queries/useCreateEdgeStackFromFileContent.ts

@@ -1,17 +1,21 @@
-import { useMutation } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
-import { withError } from '@/react-tools/react-query';
+import { withError, withInvalidate } from '@/react-tools/react-query';
 import { RegistryId } from '@/react/portainer/registries/types';
 
 import { EdgeGroup } from '../../edge-groups/types';
 import { DeploymentType, EdgeStack } from '../types';
 
 import { buildUrl } from './buildUrl';
+import { queryKeys } from './query-keys';
 
-export function useCreateStackFromFileContent() {
-  return useMutation(createStackFromFileContent, {
+export function useCreateEdgeStackFromFileContent() {
+  const queryClient = useQueryClient();
+
+  return useMutation(createEdgeStackFromFileContent, {
     ...withError('Failed creating Edge stack'),
+    ...withInvalidate(queryClient, [queryKeys.base()]),
   });
 }
 
@@ -26,7 +30,7 @@ interface FileContentPayload {
   dryRun?: boolean;
 }
 
-export async function createStackFromFileContent({
+export async function createEdgeStackFromFileContent({
   dryRun,
   ...payload
 }: FileContentPayload) {

app/react/edge/edge-stacks/queries/useCreateEdgeStackFromGit.ts

@@ -0,0 +1,142 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withError, withInvalidate } from '@/react-tools/react-query';
+import { AutoUpdateModel } from '@/react/portainer/gitops/types';
+import { Pair } from '@/react/portainer/settings/types';
+import { RegistryId } from '@/react/portainer/registries/types';
+import { GitCredential } from '@/react/portainer/account/git-credentials/types';
+
+import { DeploymentType, EdgeStack } from '../types';
+import { EdgeGroup } from '../../edge-groups/types';
+
+import { buildUrl } from './buildUrl';
+import { queryKeys } from './query-keys';
+
+export function useCreateEdgeStackFromGit() {
+  const queryClient = useQueryClient();
+
+  return useMutation(createEdgeStackFromGit, {
+    ...withError('Failed creating Edge stack'),
+    ...withInvalidate(queryClient, [queryKeys.base()]),
+  });
+}
+
+/**
+ * Represents the payload for creating an edge stack from a Git repository.
+ */
+interface GitPayload {
+  /** Name of the stack. */
+  name: string;
+  /** URL of a Git repository hosting the Stack file. */
+  repositoryURL: string;
+  /** Reference name of a Git repository hosting the Stack file. */
+  repositoryReferenceName?: string;
+  /** Use basic authentication to clone the Git repository. */
+  repositoryAuthentication?: boolean;
+  /** Username used in basic authentication. Required when RepositoryAuthentication is true. */
+  repositoryUsername?: string;
+  /** Password used in basic authentication. Required when RepositoryAuthentication is true. */
+  repositoryPassword?: string;
+  /** GitCredentialID used to identify the bound git credential. */
+  repositoryGitCredentialID?: GitCredential['id'];
+  /** Path to the Stack file inside the Git repository. */
+  filePathInRepository?: string;
+  /** List of identifiers of EdgeGroups. */
+  edgeGroups: Array<EdgeGroup['Id']>;
+  /** Deployment type to deploy this stack. */
+  deploymentType: DeploymentType;
+  /** List of Registries to use for this stack. */
+  registries?: RegistryId[];
+  /** Uses the manifest's namespaces instead of the default one. */
+  useManifestNamespaces?: boolean;
+  /** Pre-pull image. */
+  prePullImage?: boolean;
+  /** Retry deploy. */
+  retryDeploy?: boolean;
+  /** TLSSkipVerify skips SSL verification when cloning the Git repository. */
+  tLSSkipVerify?: boolean;
+  /** Optional GitOps update configuration. */
+  autoUpdate?: AutoUpdateModel;
+  /** Whether the stack supports relative path volume. */
+  supportRelativePath?: boolean;
+  /** Local filesystem path. */
+  filesystemPath?: string;
+  /** Whether the edge stack supports per device configs. */
+  supportPerDeviceConfigs?: boolean;
+  /** Per device configs match type. */
+  perDeviceConfigsMatchType?: 'file' | 'dir';
+  /** Per device configs group match type. */
+  perDeviceConfigsGroupMatchType?: 'file' | 'dir';
+  /** Per device configs path. */
+  perDeviceConfigsPath?: string;
+  /** List of environment variables. */
+  envVars?: Pair[];
+  /** Configuration for stagger updates. */
+  staggerConfig?: EdgeStaggerConfig;
+}
+/**
+ * Represents the staggered updates configuration.
+ */
+interface EdgeStaggerConfig {
+  /** Stagger option for updates. */
+  staggerOption: EdgeStaggerOption;
+  /** Stagger parallel option for updates. */
+  staggerParallelOption: EdgeStaggerParallelOption;
+  /** Device number for updates. */
+  deviceNumber: number;
+  /** Starting device number for updates. */
+  deviceNumberStartFrom: number;
+  /** Increment value for device numbers during updates. */
+  deviceNumberIncrementBy: number;
+  /** Timeout for updates (in minutes). */
+  timeout: string;
+  /** Update delay (in minutes). */
+  updateDelay: string;
+  /** Action to take in case of update failure. */
+  updateFailureAction: EdgeUpdateFailureAction;
+}
+
+/** EdgeStaggerOption represents an Edge stack stagger option */
+enum EdgeStaggerOption {
+  /** AllAtOnce represents a staggered deployment where all nodes are updated at once */
+  AllAtOnce = 1,
+  /** OneByOne represents a staggered deployment where nodes are updated with parallel setting  */
+  Parallel,
+}
+
+/** EdgeStaggerParallelOption represents an Edge stack stagger parallel option */
+enum EdgeStaggerParallelOption {
+  /** Fixed represents a staggered deployment where nodes are updated with a fixed number of nodes in parallel */
+  Fixed = 1,
+  /** Incremental represents a staggered deployment where nodes are updated with an incremental number of nodes in parallel */
+  Incremental,
+}
+
+/** EdgeUpdateFailureAction represents an Edge stack update failure action */
+enum EdgeUpdateFailureAction {
+  /** Continue represents that stagger update will continue regardless of whether the endpoint update status */
+  Continue = 1,
+  /** Pause represents that stagger update will pause when the endpoint update status is failed */
+  Pause,
+  /** Rollback represents that stagger update will rollback as long as one endpoint update status is failed */
+  Rollback,
+}
+
+export async function createEdgeStackFromGit({
+  dryRun,
+  ...payload
+}: GitPayload & { dryRun?: boolean }) {
+  try {
+    const { data } = await axios.post<EdgeStack>(
+      buildUrl(undefined, 'create/repository'),
+      payload,
+      {
+        params: { dryrun: dryRun ? 'true' : 'false' },
+      }
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}

app/react/edge/templates/AppTemplatesView/AppTemplatesView.tsx

@@ -0,0 +1,41 @@
+import { useParamState } from '@/react/hooks/useParamState';
+import { AppTemplatesList } from '@/react/portainer/templates/app-templates/AppTemplatesList';
+import { useAppTemplates } from '@/react/portainer/templates/app-templates/queries/useAppTemplates';
+import { TemplateType } from '@/react/portainer/templates/app-templates/types';
+
+import { PageHeader } from '@@/PageHeader';
+
+import { DeployFormWidget } from './DeployForm';
+
+export function AppTemplatesView() {
+  const [selectedTemplateId, setSelectedTemplateId] = useParamState<number>(
+    'template',
+    (param) => (param ? parseInt(param, 10) : 0)
+  );
+  const templatesQuery = useAppTemplates();
+  const selectedTemplate = selectedTemplateId
+    ? templatesQuery.data?.find(
+        (template) => template.Id === selectedTemplateId
+      )
+    : undefined;
+  return (
+    <>
+      <PageHeader title="Application templates list" breadcrumbs="Templates" />
+      {selectedTemplate && (
+        <DeployFormWidget
+          template={selectedTemplate}
+          unselect={() => setSelectedTemplateId()}
+        />
+      )}
+
+      <AppTemplatesList
+        templates={templatesQuery.data}
+        selectedId={selectedTemplateId}
+        onSelect={(template) => setSelectedTemplateId(template.Id)}
+        disabledTypes={[TemplateType.Container]}
+        fixedCategories={['edge']}
+        hideDuplicate
+      />
+    </>
+  );
+}

app/react/edge/templates/AppTemplatesView/DeployForm.tsx

@@ -0,0 +1,190 @@
+import { Rocket } from 'lucide-react';
+import { Form, Formik } from 'formik';
+import { array, lazy, number, object, string } from 'yup';
+import { useRouter } from '@uirouter/react';
+import _ from 'lodash';
+
+import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
+import { EnvironmentType } from '@/react/portainer/environments/types';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { Widget } from '@@/Widget';
+import { FallbackImage } from '@@/FallbackImage';
+import { Icon } from '@@/Icon';
+import { FormActions } from '@@/form-components/FormActions';
+import { Button } from '@@/buttons';
+
+import { EdgeGroupsSelector } from '../../edge-stacks/components/EdgeGroupsSelector';
+import {
+  NameField,
+  nameValidation,
+} from '../../edge-stacks/CreateView/NameField';
+import { EdgeGroup } from '../../edge-groups/types';
+import { DeploymentType, EdgeStack } from '../../edge-stacks/types';
+import { useEdgeStacks } from '../../edge-stacks/queries/useEdgeStacks';
+import { useEdgeGroups } from '../../edge-groups/queries/useEdgeGroups';
+import { useCreateEdgeStackFromGit } from '../../edge-stacks/queries/useCreateEdgeStackFromGit';
+
+import { EnvVarsFieldset } from './EnvVarsFieldset';
+
+export function DeployFormWidget({
+  template,
+  unselect,
+}: {
+  template: TemplateViewModel;
+  unselect: () => void;
+}) {
+  return (
+    <div className="row">
+      <div className="col-sm-12">
+        <Widget>
+          <Widget.Title
+            icon={
+              <FallbackImage
+                src={template.Logo}
+                fallbackIcon={<Icon icon={Rocket} />}
+              />
+            }
+            title={template.Title}
+          />
+          <Widget.Body>
+            <DeployForm template={template} unselect={unselect} />
+          </Widget.Body>
+        </Widget>
+      </div>
+    </div>
+  );
+}
+
+interface FormValues {
+  name: string;
+  edgeGroupIds: Array<EdgeGroup['Id']>;
+  envVars: Record<string, string>;
+}
+
+function DeployForm({
+  template,
+  unselect,
+}: {
+  template: TemplateViewModel;
+  unselect: () => void;
+}) {
+  const router = useRouter();
+  const mutation = useCreateEdgeStackFromGit();
+  const edgeStacksQuery = useEdgeStacks();
+  const edgeGroupsQuery = useEdgeGroups({
+    select: (groups) =>
+      Object.fromEntries(groups.map((g) => [g.Id, g.EndpointTypes])),
+  });
+
+  const initialValues: FormValues = {
+    edgeGroupIds: [],
+    name: template.Name || '',
+    envVars:
+      Object.fromEntries(template.Env?.map((env) => [env.name, env.value])) ||
+      {},
+  };
+
+  if (!edgeStacksQuery.data || !edgeGroupsQuery.data) {
+    return null;
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validationSchema={() =>
+        validation(edgeStacksQuery.data, edgeGroupsQuery.data)
+      }
+      validateOnMount
+    >
+      {({ values, errors, setFieldValue, isValid }) => (
+        <Form className="form-horizontal">
+          <NameField
+            value={values.name}
+            onChange={(v) => setFieldValue('name', v)}
+            errors={errors.name}
+          />
+
+          <EdgeGroupsSelector
+            horizontal
+            value={values.edgeGroupIds}
+            error={errors.edgeGroupIds}
+            onChange={(value) => setFieldValue('edgeGroupIds', value)}
+            required
+          />
+
+          <EnvVarsFieldset
+            value={values.envVars}
+            options={template.Env}
+            errors={errors.envVars}
+            onChange={(values) => setFieldValue('envVars', values)}
+          />
+
+          <FormActions
+            isLoading={mutation.isLoading}
+            isValid={isValid}
+            loadingText="Deployment in progress..."
+            submitLabel="Deploy the stack"
+          >
+            <Button type="reset" onClick={() => unselect()} color="default">
+              Hide
+            </Button>
+          </FormActions>
+        </Form>
+      )}
+    </Formik>
+  );
+
+  function handleSubmit(values: FormValues) {
+    return mutation.mutate(
+      {
+        name: values.name,
+        edgeGroups: values.edgeGroupIds,
+        deploymentType: DeploymentType.Compose,
+        repositoryURL: template.Repository.url,
+        filePathInRepository: template.Repository.stackfile,
+        envVars: Object.entries(values.envVars).map(([name, value]) => ({
+          name,
+          value,
+        })),
+      },
+      {
+        onSuccess() {
+          notifySuccess('Success', 'Edge Stack created');
+          router.stateService.go('edge.stacks');
+        },
+      }
+    );
+  }
+}
+
+function validation(
+  stacks: EdgeStack[],
+  edgeGroupsType: Record<EdgeGroup['Id'], Array<EnvironmentType>>
+) {
+  return lazy((values: FormValues) => {
+    const types = getTypes(values.edgeGroupIds);
+
+    return object({
+      name: nameValidation(
+        stacks,
+        types?.includes(EnvironmentType.EdgeAgentOnDocker)
+      ),
+      edgeGroupIds: array(number().required().default(0))
+        .min(1, 'At least one group is required')
+        .test(
+          'same-type',
+          'Groups should be of the same type',
+          (value) => _.uniq(getTypes(value)).length === 1
+        ),
+      envVars: array()
+        .transform((_, orig) => Object.values(orig))
+        .of(string().required('Required')),
+    });
+  });
+
+  function getTypes(value: number[] | undefined) {
+    return value?.flatMap((g) => edgeGroupsType[g]);
+  }
+}

app/react/edge/templates/AppTemplatesView/EnvVarsFieldset.tsx

@@ -0,0 +1,76 @@
+import { FormikErrors } from 'formik';
+
+import { TemplateEnv } from '@/react/portainer/templates/app-templates/types';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input, Select } from '@@/form-components/Input';
+
+type Value = Record<string, string>;
+
+export function EnvVarsFieldset({
+  onChange,
+  options,
+  value,
+  errors,
+}: {
+  options: Array<TemplateEnv>;
+  onChange: (value: Value) => void;
+  value: Value;
+  errors?: FormikErrors<Value>;
+}) {
+  return (
+    <>
+      {options.map((env, index) => (
+        <Item
+          key={env.name}
+          option={env}
+          value={value[env.name]}
+          onChange={(value) => handleChange(env.name, value)}
+          errors={errors?.[index]}
+        />
+      ))}
+    </>
+  );
+
+  function handleChange(name: string, envValue: string) {
+    onChange({ ...value, [name]: envValue });
+  }
+}
+
+function Item({
+  onChange,
+  option,
+  value,
+  errors,
+}: {
+  option: TemplateEnv;
+  value: string;
+  onChange: (value: string) => void;
+  errors?: FormikErrors<string>;
+}) {
+  return (
+    <FormControl
+      label={option.label || option.name}
+      required={!option.preset}
+      errors={errors}
+    >
+      {option.select ? (
+        <Select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          options={option.select.map((o) => ({
+            label: o.text,
+            value: o.value,
+          }))}
+          disabled={option.preset}
+        />
+      ) : (
+        <Input
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={option.preset}
+        />
+      )}
+    </FormControl>
+  );
+}

app/react/edge/templates/AppTemplatesView/index.ts

@@ -0,0 +1 @@
+export { AppTemplatesView } from './AppTemplatesView';

app/react/hooks/useParamState.ts

@@ -2,7 +2,8 @@ import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 
 export function useParamState<T>(
   param: string,
-  parseParam: (param: string | undefined) => T | undefined
+  parseParam: (param: string | undefined) => T | undefined = (param) =>
+    param as unknown as T
 ) {
   const {
     params: { [param]: paramValue },
@@ -12,7 +13,7 @@ export function useParamState<T>(
 
   return [
     state,
-    (value: T | undefined) => {
+    (value?: T) => {
       router.stateService.go('.', { [param]: value });
     },
   ] as const;

app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/TemplatesUrlSection.tsx

@@ -23,12 +23,11 @@ export function TemplatesUrlSection() {
         </span>
       </div>
 
-      <FormControl label="URL" inputId="templates_url" required errors={error}>
+      <FormControl label="URL" inputId="templates_url" errors={error}>
         <Field
           as={Input}
           id="templates_url"
           placeholder="https://myserver.mydomain/templates.json"
-          required
           data-cy="settings-templateUrl"
           name={name}
         />

app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/validation.ts

@@ -7,7 +7,7 @@ import { Values } from './types';
 export function validation(): SchemaOf<Values> {
   return object({
     edgeAgentCheckinInterval: number().required(),
-    enableTelemetry: bool().required(),
+    enableTelemetry: bool().default(false),
     loginBannerEnabled: boolean().default(false),
     loginBanner: string()
       .default('')
@@ -30,7 +30,11 @@ export function validation(): SchemaOf<Values> {
       }),
     snapshotInterval: string().required('Snapshot interval is required'),
     templatesUrl: string()
-      .required('Templates URL is required')
-      .test('valid-url', 'Must be a valid URL', (value) => isValidUrl(value)),
+      .default('')
+      .test(
+        'valid-url',
+        'Must be a valid URL',
+        (value) => !value || isValidUrl(value)
+      ),
   });
 }

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

@@ -1,7 +1,6 @@
 import { Edit } from 'lucide-react';
 import _ from 'lodash';
 import { useState } from 'react';
-import { useRouter } from '@uirouter/react';
 
 import { DatatableHeader } from '@@/datatables/DatatableHeader';
 import { Table } from '@@/datatables';
@@ -11,39 +10,41 @@ import { DatatableFooter } from '@@/datatables/DatatableFooter';
 
 import { AppTemplatesListItem } from './AppTemplatesListItem';
 import { TemplateViewModel } from './view-model';
-import { ListState } from './types';
+import { ListState, TemplateType } from './types';
 import { useSortAndFilterTemplates } from './useSortAndFilter';
 import { Filters } from './Filters';
-import { useFetchTemplateInfoMutation } from './useFetchTemplateInfoMutation';
 
 const tableKey = 'app-templates-list';
 const store = createPersistedStore<ListState>(tableKey, undefined, (set) => ({
   category: null,
   setCategory: (category: ListState['category']) => set({ category }),
-  type: null,
-  setType: (type: ListState['type']) => set({ type }),
+  types: [],
+  setTypes: (types: ListState['types']) => set({ types }),
 }));
 
 export function AppTemplatesList({
   templates,
   onSelect,
   selectedId,
-  showSwarmStacks,
+  disabledTypes,
+  fixedCategories,
+  hideDuplicate,
 }: {
   templates?: TemplateViewModel[];
   onSelect: (template: TemplateViewModel) => void;
   selectedId?: TemplateViewModel['Id'];
-  showSwarmStacks?: boolean;
+  disabledTypes?: Array<TemplateType>;
+  fixedCategories?: Array<string>;
+  hideDuplicate?: boolean;
 }) {
-  const fetchTemplateInfoMutation = useFetchTemplateInfoMutation();
-  const router = useRouter();
   const [page, setPage] = useState(0);
 
   const listState = useTableState(store, tableKey);
   const filteredTemplates = useSortAndFilterTemplates(
     templates || [],
     listState,
-    showSwarmStacks
+    disabledTypes,
+    fixedCategories
   );
 
   const pagedTemplates =
@@ -59,8 +60,10 @@ export function AppTemplatesList({
         description={
           <Filters
             listState={listState}
-            templates={templates || []}
+            templates={filteredTemplates || []}
             onChange={() => setPage(0)}
+            disabledTypes={disabledTypes}
+            fixedCategories={fixedCategories}
           />
         }
       />
@@ -71,8 +74,8 @@ export function AppTemplatesList({
             key={template.Id}
             template={template}
             onSelect={onSelect}
-            onDuplicate={onDuplicate}
             isSelected={selectedId === template.Id}
+            hideDuplicate={hideDuplicate}
           />
         ))}
         {!templates && <div className="text-muted text-center">Loading...</div>}
@@ -96,15 +99,4 @@ export function AppTemplatesList({
     listState.setSearch(search);
     setPage(0);
   }
-
-  function onDuplicate(template: TemplateViewModel) {
-    fetchTemplateInfoMutation.mutate(template, {
-      onSuccess({ fileContent, type }) {
-        router.stateService.go('.custom.new', {
-          fileContent,
-          type,
-        });
-      },
-    });
-  }
 }

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

@@ -1,4 +1,7 @@
+import { StackType } from '@/react/common/stacks/types';
+
 import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
 
 import { TemplateItem } from '../components/TemplateItem';
 
@@ -8,14 +11,16 @@ import { TemplateType } from './types';
 export function AppTemplatesListItem({
   template,
   onSelect,
-  onDuplicate,
   isSelected,
+  hideDuplicate = false,
 }: {
   template: TemplateViewModel;
   onSelect: (template: TemplateViewModel) => void;
-  onDuplicate: (template: TemplateViewModel) => void;
   isSelected: boolean;
+  hideDuplicate?: boolean;
 }) {
+  const duplicateCustomTemplateType = getCustomTemplateType(template.Type);
+
   return (
     <TemplateItem
       template={template}
@@ -25,21 +30,39 @@ export function AppTemplatesListItem({
       onSelect={() => onSelect(template)}
       isSelected={isSelected}
       renderActions={
-        template.Type === TemplateType.SwarmStack ||
-        (template.Type === TemplateType.ComposeStack && (
+        !hideDuplicate &&
+        duplicateCustomTemplateType && (
           <div className="mr-5 mt-3">
             <Button
+              as={Link}
               size="xsmall"
               onClick={(e) => {
                 e.stopPropagation();
-                onDuplicate(template);
+              }}
+              props={{
+                to: '.custom.new',
+                params: {
+                  appTemplateId: template.Id,
+                  type: duplicateCustomTemplateType,
+                },
               }}
             >
               Copy as Custom
             </Button>
           </div>
-        ))
+        )
       }
     />
   );
 }
+
+function getCustomTemplateType(type: TemplateType): StackType | null {
+  switch (type) {
+    case TemplateType.SwarmStack:
+      return StackType.DockerSwarm;
+    case TemplateType.ComposeStack:
+      return StackType.DockerCompose;
+    default:
+      return null;
+  }
+}

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

@@ -1,58 +1,79 @@
 import _ from 'lodash';
 
-import { PortainerSelect } from '@@/form-components/PortainerSelect';
+import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
 
 import { ListState, TemplateType } from './types';
 import { TemplateViewModel } from './view-model';
 import { TemplateListSort } from './TemplateListSort';
 
 const orderByFields = ['Title', 'Categories', 'Description'] as const;
-const typeFilters = [
+const typeFilters: ReadonlyArray<Option<TemplateType>> = [
   { label: 'Container', value: TemplateType.Container },
-  { label: 'Stack', value: TemplateType.SwarmStack },
+  { label: 'Swarm Stack', value: TemplateType.SwarmStack },
+  { label: 'Compose Stack', value: TemplateType.ComposeStack },
 ] as const;
 
 export function Filters({
   templates,
   listState,
   onChange,
+  disabledTypes = [],
+  fixedCategories = [],
 }: {
   templates: TemplateViewModel[];
   listState: ListState & { search: string };
   onChange(): void;
+  disabledTypes?: Array<TemplateType>;
+  fixedCategories?: Array<string>;
 }) {
   const categories = _.sortBy(
     _.uniq(templates?.flatMap((template) => template.Categories))
-  ).map((category) => ({ label: category, value: category }));
+  )
+    .filter((category) => !fixedCategories.includes(category))
+    .map((category) => ({ label: category, value: category }));
+
+  const templatesTypes = _.uniq(
+    templates?.flatMap((template) => template.Type)
+  );
+
+  const typeFiltersEnabled = typeFilters.filter(
+    (type) =>
+      !disabledTypes.includes(type.value) && templatesTypes.includes(type.value)
+  );
 
   return (
     <div className="flex gap-4 w-full">
-      <div className="w-1/4">
-        <PortainerSelect
-          options={categories}
-          onChange={(category) => {
-            listState.setCategory(category);
-            onChange();
-          }}
-          placeholder="Category"
-          value={listState.category}
-          bindToBody
-          isClearable
-        />
-      </div>
-      <div className="w-1/4">
-        <PortainerSelect
-          options={typeFilters}
-          onChange={(type) => {
-            listState.setType(type);
-            onChange();
-          }}
-          placeholder="Type"
-          value={listState.type}
-          bindToBody
-          isClearable
-        />
-      </div>
+      {categories.length > 0 && (
+        <div className="w-1/4">
+          <PortainerSelect
+            options={categories}
+            onChange={(category) => {
+              listState.setCategory(category);
+              onChange();
+            }}
+            placeholder="Category"
+            value={listState.category}
+            bindToBody
+            isClearable
+          />
+        </div>
+      )}
+      {typeFiltersEnabled.length > 1 && (
+        <div className="w-1/4">
+          <PortainerSelect<TemplateType>
+            isMulti
+            options={typeFiltersEnabled}
+            onChange={(types) => {
+              listState.setTypes(types);
+              onChange();
+            }}
+            placeholder="Type"
+            value={listState.types}
+            bindToBody
+            isClearable
+          />
+        </div>
+      )}
       <div className="w-1/4 ml-auto">
         <TemplateListSort
           onChange={(value) => {

app/react/portainer/templates/app-templates/queries/build-url.ts

@@ -0,0 +1,18 @@
+import { AppTemplate } from '../types';
+
+export function buildUrl({
+  id,
+  action,
+}: { id?: AppTemplate['id']; action?: string } = {}) {
+  let baseUrl = '/templates';
+
+  if (id) {
+    baseUrl += `/${id}`;
+  }
+
+  if (action) {
+    baseUrl += `/${action}`;
+  }
+
+  return baseUrl;
+}

app/react/portainer/templates/app-templates/queries/useAppTemplates.ts

@@ -0,0 +1,54 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { useRegistries } from '@/react/portainer/registries/queries/useRegistries';
+import { DockerHubViewModel } from '@/portainer/models/dockerhub';
+import { Registry } from '@/react/portainer/registries/types/registry';
+
+import { AppTemplate } from '../types';
+import { TemplateViewModel } from '../view-model';
+
+import { buildUrl } from './build-url';
+
+export function useAppTemplates() {
+  const registriesQuery = useRegistries();
+
+  return useQuery(
+    'templates',
+    () => getTemplatesWithRegistry(registriesQuery.data),
+    {
+      enabled: !!registriesQuery.data,
+    }
+  );
+}
+
+async function getTemplatesWithRegistry(
+  registries: Array<Registry> | undefined
+) {
+  if (!registries) {
+    return [];
+  }
+
+  const { templates, version } = await getTemplates();
+  return templates.map((item) => {
+    const template = new TemplateViewModel(item, version);
+    const registryURL = item.registry;
+    const registry = registryURL
+      ? registries.find((reg) => reg.URL === registryURL)
+      : new DockerHubViewModel();
+    template.RegistryModel.Registry = registry || new DockerHubViewModel();
+    return template;
+  });
+}
+
+async function getTemplates() {
+  try {
+    const { data } = await axios.get<{
+      version: string;
+      templates: Array<AppTemplate>;
+    }>(buildUrl());
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err);
+  }
+}

app/react/portainer/templates/app-templates/queries/useFetchTemplateInfoMutation.ts

@@ -0,0 +1,16 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { AppTemplate } from '../types';
+
+import { buildUrl } from './build-url';
+
+export async function fetchFilePreview(id: AppTemplate['id']) {
+  try {
+    const { data } = await axios.post<{ FileContent: string }>(
+      buildUrl({ id, action: 'file' })
+    );
+    return data.FileContent;
+  } catch (err) {
+    throw parseAxiosError(err);
+  }
+}

app/react/portainer/templates/app-templates/types.ts

@@ -5,15 +5,14 @@ import { Pair } from '../../settings/types';
 export interface ListState extends BasicTableSettings {
   category: string | null;
   setCategory: (category: string | null) => void;
-  type: TemplateType | null;
-  setType: (type: TemplateType | null) => void;
+  types: ReadonlyArray<TemplateType>;
+  setTypes: (value: ReadonlyArray<TemplateType>) => void;
 }
 
 export enum TemplateType {
   Container = 1,
   SwarmStack = 2,
   ComposeStack = 3,
-  EdgeStack = 4,
 }
 
 /**
@@ -21,7 +20,12 @@ export enum TemplateType {
  */
 export interface AppTemplate {
   /**
-   * Template type. Valid values are: 1 (container), 2 (Swarm stack), 3 (Compose stack), 4 (Compose edge stack).
+   * Unique identifier of the template.
+   */
+  id: number;
+
+  /**
+   * Template type. Valid values are: 1 (container), 2 (Swarm stack), 3 (Compose stack)
    * @example 1
    */
   type: TemplateType;

app/react/portainer/templates/app-templates/useFetchTemplateInfoMutation.ts

@@ -1,52 +0,0 @@
-import { useMutation } from 'react-query';
-
-import { StackType } from '@/react/common/stacks/types';
-import { mutationOptions, withGlobalError } from '@/react-tools/react-query';
-import axios, { parseAxiosError } from '@/portainer/services/axios';
-
-import { TemplateType } from './types';
-import { TemplateViewModel } from './view-model';
-
-export function useFetchTemplateInfoMutation() {
-  return useMutation(
-    getTemplateInfo,
-    mutationOptions(withGlobalError('Unable to fetch template info'))
-  );
-}
-
-async function getTemplateInfo(template: TemplateViewModel) {
-  const fileContent = await fetchFilePreview({
-    url: template.Repository.url,
-    file: template.Repository.stackfile,
-  });
-
-  const type = getCustomTemplateType(template.Type);
-
-  return {
-    type,
-    fileContent,
-  };
-}
-
-function getCustomTemplateType(type: TemplateType): StackType {
-  switch (type) {
-    case TemplateType.SwarmStack:
-      return StackType.DockerSwarm;
-    case TemplateType.ComposeStack:
-      return StackType.DockerCompose;
-    default:
-      throw new Error(`Unknown supported template type: ${type}`);
-  }
-}
-
-async function fetchFilePreview({ url, file }: { url: string; file: string }) {
-  try {
-    const { data } = await axios.post<{ FileContent: string }>(
-      '/templates/file',
-      { repositoryUrl: url, composeFilePathInRepository: file }
-    );
-    return data.FileContent;
-  } catch (err) {
-    throw parseAxiosError(err);
-  }
-}

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

@@ -1,22 +1,26 @@
 import { useCallback, useMemo } from 'react';
+import _ from 'lodash';
 
 import { TemplateViewModel } from './view-model';
-import { ListState, TemplateType } from './types';
+import { ListState } from './types';
 
 export function useSortAndFilterTemplates(
   templates: Array<TemplateViewModel>,
   listState: ListState & { search: string },
-  showSwarmStacks?: boolean
+  disabledTypes: Array<TemplateViewModel['Type']> = [],
+  fixedCategories: Array<string> = []
 ) {
   const filterByCategory = useCallback(
     (item: TemplateViewModel) => {
-      if (!listState.category) {
+      if (!listState.category && !fixedCategories.length) {
         return true;
       }
 
-      return item.Categories.includes(listState.category);
+      return _.compact([...fixedCategories, listState.category]).every(
+        (category) => item.Categories.includes(category)
+      );
     },
-    [listState.category]
+    [fixedCategories, listState.category]
   );
 
   const filterBySearch = useCallback(
@@ -37,29 +41,20 @@ export function useSortAndFilterTemplates(
 
   const filterByTemplateType = useCallback(
     (item: TemplateViewModel) => {
-      switch (item.Type) {
-        case TemplateType.Container:
-          return (
-            listState.type === TemplateType.Container || listState.type === null
-          );
-        case TemplateType.SwarmStack:
-          return (
-            showSwarmStacks &&
-            (listState.type === TemplateType.SwarmStack ||
-              listState.type === null)
-          );
-        case TemplateType.ComposeStack:
-          return (
-            listState.type === TemplateType.SwarmStack ||
-            listState.type === null
-          );
-        case TemplateType.EdgeStack:
-          return listState.type === TemplateType.EdgeStack;
-        default:
-          return false;
+      if (listState.types.length === 0 && disabledTypes.length === 0) {
+        return true;
       }
+
+      if (listState.types.length === 0) {
+        return !disabledTypes.includes(item.Type);
+      }
+
+      return (
+        listState.types.includes(item.Type) &&
+        !disabledTypes.includes(item.Type)
+      );
     },
-    [listState.type, showSwarmStacks]
+    [disabledTypes, listState.types]
   );
 
   const sort = useCallback(

app/react/portainer/templates/app-templates/view-model.ts

@@ -12,7 +12,7 @@ import {
 } from './types';
 
 export class TemplateViewModel {
-  Id!: string;
+  Id!: number;
 
   Title!: string;
 
@@ -65,46 +65,56 @@ export class TemplateViewModel {
     protocol: string;
   }[];
 
-  constructor(data: AppTemplate, version: string) {
+  constructor(template: AppTemplate, version: string) {
     switch (version) {
       case '2':
-        this.setTemplatesV2(data);
+        setTemplatesV2.call(this, template);
+        break;
+      case '3':
+        setTemplatesV3.call(this, template);
         break;
       default:
         throw new Error('Unsupported template version');
     }
   }
+}
 
-  setTemplatesV2(template: AppTemplate) {
-    this.Id = _.uniqueId();
-    this.Title = template.title;
-    this.Type = template.type;
-    this.Description = template.description;
-    this.AdministratorOnly = template.administrator_only;
-    this.Name = template.name;
-    this.Note = template.note;
-    this.Categories = template.categories ? template.categories : [];
-    this.Platform = getPlatform(template.platform);
-    this.Logo = template.logo;
-    this.Repository = template.repository;
-    this.Hostname = template.hostname;
-    this.RegistryModel = new PorImageRegistryModel();
-    this.RegistryModel.Image = template.image;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.RegistryModel.Registry.URL = template.registry || '';
-    this.Command = template.command ? template.command : '';
-    this.Network = template.network ? template.network : '';
-    this.Privileged = template.privileged ? template.privileged : false;
-    this.Interactive = template.interactive ? template.interactive : false;
-    this.RestartPolicy = template.restart_policy
-      ? template.restart_policy
-      : 'always';
-    this.Labels = template.labels ? template.labels : [];
-    this.Env = templateEnv(template);
-    this.Volumes = templateVolumes(template);
-    this.Ports = templatePorts(template);
-  }
+function setTemplatesV3(this: TemplateViewModel, template: AppTemplate) {
+  setTemplatesV2.call(this, template);
+  this.Id = template.id;
+}
+
+let templateV2ID = 0;
+
+function setTemplatesV2(this: TemplateViewModel, template: AppTemplate) {
+  this.Id = templateV2ID++;
+  this.Title = template.title;
+  this.Type = template.type;
+  this.Description = template.description;
+  this.AdministratorOnly = template.administrator_only;
+  this.Name = template.name;
+  this.Note = template.note;
+  this.Categories = template.categories ? template.categories : [];
+  this.Platform = getPlatform(template.platform);
+  this.Logo = template.logo;
+  this.Repository = template.repository;
+  this.Hostname = template.hostname;
+  this.RegistryModel = new PorImageRegistryModel();
+  this.RegistryModel.Image = template.image;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  this.RegistryModel.Registry.URL = template.registry || '';
+  this.Command = template.command ? template.command : '';
+  this.Network = template.network ? template.network : '';
+  this.Privileged = template.privileged ? template.privileged : false;
+  this.Interactive = template.interactive ? template.interactive : false;
+  this.RestartPolicy = template.restart_policy
+    ? template.restart_policy
+    : 'always';
+  this.Labels = template.labels ? template.labels : [];
+  this.Env = templateEnv(template);
+  this.Volumes = templateVolumes(template);
+  this.Ports = templatePorts(template);
 }
 
 function templatePorts(data: AppTemplate) {

app/react/portainer/templates/components/TemplateItem.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Rocket } from 'lucide-react';
 
 import LinuxIcon from '@/assets/ico/linux.svg?c';
 import MicrosoftIcon from '@/assets/ico/vendor/microsoft.svg?c';
@@ -7,6 +8,7 @@ import KubernetesIcon from '@/assets/ico/vendor/kubernetes.svg?c';
 import { Icon } from '@@/Icon';
 import { FallbackImage } from '@@/FallbackImage';
 import { BlocklistItem } from '@@/Blocklist/BlocklistItem';
+import { BadgeIcon } from '@@/BadgeIcon';
 
 import { Platform } from '../../custom-templates/types';
 
@@ -38,9 +40,8 @@ export function TemplateItem({
         <div className="vertical-center min-w-[56px] justify-center">
           <FallbackImage
             src={template.Logo}
-            fallbackIcon="rocket"
+            fallbackIcon={<BadgeIcon icon={Rocket} size="3xl" />}
             className="blocklist-item-logo"
-            size="3xl"
           />
         </div>
         <div className="col-sm-12 flex justify-between flex-wrap">

app/react/sidebar/EdgeComputeSidebar.tsx

@@ -1,10 +1,11 @@
-import { Box, Clock, LayoutGrid, Layers, Puzzle } from 'lucide-react';
+import { Box, Clock, LayoutGrid, Layers, Puzzle, Edit } from 'lucide-react';
 
 import { isBE } from '../portainer/feature-flags/feature-flags.service';
 import { useSettings } from '../portainer/settings/queries';
 
 import { SidebarItem } from './SidebarItem';
 import { SidebarSection } from './SidebarSection';
+import { SidebarParent } from './SidebarItem/SidebarParent';
 
 export function EdgeComputeSidebar() {
   // this sidebar is rendered only for admins, so we can safely assume that settingsQuery will succeed
@@ -52,6 +53,26 @@ export function EdgeComputeSidebar() {
           data-cy="portainerSidebar-edgeDevicesWaitingRoom"
         />
       )}
+      <SidebarParent
+        icon={Edit}
+        label="Templates"
+        to="edge.templates"
+        data-cy="edgeSidebar-templates"
+      >
+        <SidebarItem
+          label="Application"
+          to="edge.templates"
+          ignorePaths={['edge.templates.custom']}
+          isSubMenu
+          data-cy="edgeSidebar-appTemplates"
+        />
+        {/* <SidebarItem
+          label="Custom"
+          to="edge.templates.custom"
+          isSubMenu
+          data-cy="edgeSidebar-customTemplates"
+        /> */}
+      </SidebarParent>
     </SidebarSection>
   );
 }