feat(edge/templates): introduce edge specific settings [EE-6276] (#10609)

app/edge/__module.js

@@ -181,7 +181,7 @@ angular
 
     $stateRegistryProvider.register({
       name: 'edge.templates.custom.edit',
-      url: '/:templateId',
+      url: '/:id',
 
       views: {
         'content@': {

app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js

@@ -1,4 +1,4 @@
-import { EditorType } from '@/react/edge/edge-stacks/types';
+import { DeploymentType, EditorType } from '@/react/edge/edge-stacks/types';
 import { getValidEditorTypes } from '@/react/edge/edge-stacks/utils';
 import { STACK_NAME_VALIDATION_REGEX } from '@/react/constants';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
@@ -8,6 +8,8 @@ import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { getCustomTemplate } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplate';
 import { notifyError } from '@/portainer/services/notifications';
 import { getCustomTemplateFile } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplateFile';
+import { toGitFormModel } from '@/react/portainer/gitops/types';
+import { StackType } from '@/react/common/stacks/types';
 
 export default class CreateEdgeStackViewController {
   /* @ngInject */
@@ -71,6 +73,21 @@ export default class CreateEdgeStackViewController {
   onChangeTemplate(template) {
     return this.$scope.$evalAsync(() => {
       this.state.selectedTemplate = template;
+
+      this.formValues = {
+        ...this.formValues,
+        DeploymentType: template.Type === StackType.Kubernetes ? DeploymentType.Kubernetes : DeploymentType.Compose,
+        ...toGitFormModel(template.GitConfig),
+        ...(template.EdgeSettings
+          ? {
+              PrePullImage: template.EdgeSettings.PrePullImage || false,
+              RetryDeploy: template.EdgeSettings.RetryDeploy || false,
+              Registries: template.EdgeSettings.PrivateRegistryId ? [template.EdgeSettings.PrivateRegistryId] : [],
+              SupportRelativePath: template.EdgeSettings.RelativePathSettings.SupportRelativePath || false,
+              FilesystemPath: template.EdgeSettings.RelativePathSettings.FilesystemPath || '',
+            }
+          : {}),
+      };
     });
   }
 

app/react-tools/apply-set-state-action.ts

@@ -0,0 +1,12 @@
+import { SetStateAction } from 'react';
+
+export function applySetStateAction<T>(applier: SetStateAction<T>, values?: T) {
+  if (isFunction(applier)) {
+    return values ? applier(values) : undefined;
+  }
+  return applier;
+
+  function isFunction(value: unknown): value is (prevState: T) => T {
+    return typeof value === 'function';
+  }
+}

app/react/components/CodeEditor.module.css

@@ -117,3 +117,9 @@
 .root :global(.cm-content[contenteditable='true']) {
   min-height: 100%;
 }
+
+.root :global(.cm-content[aria-readonly='true']) {
+  @apply bg-gray-3;
+  @apply th-dark:bg-gray-iron-10;
+  @apply th-highcontrast:bg-black;
+}

app/react/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,36 @@
+import { Option } from '@@/form-components/PortainerSelect';
+
+interface Props<T extends string | number> {
+  options: Array<Option<T>> | ReadonlyArray<Option<T>>;
+  selectedOption: T;
+  name: string;
+  onOptionChange: (value: T) => void;
+}
+
+export function RadioGroup<T extends string | number = string>({
+  options,
+  selectedOption,
+  name,
+  onOptionChange,
+}: Props<T>) {
+  return (
+    <div>
+      {options.map((option) => (
+        <span
+          key={option.value}
+          className="col-sm-3 col-lg-2 control-label !p-0 text-left"
+        >
+          <input
+            type="radio"
+            name={name}
+            value={option.value}
+            checked={selectedOption === option.value}
+            onChange={() => onOptionChange(option.value)}
+            style={{ margin: '0 4px 0 0' }}
+          />
+          {option.label}
+        </span>
+      ))}
+    </div>
+  );
+}

app/react/edge/edge-groups/types.ts

@@ -1,4 +1,7 @@
-import { EnvironmentId } from '@/react/portainer/environments/types';
+import {
+  EnvironmentId,
+  EnvironmentType,
+} from '@/react/portainer/environments/types';
 import { TagId } from '@/portainer/tags/types';
 
 export interface EdgeGroup {
@@ -8,4 +11,5 @@ export interface EdgeGroup {
   TagIds: TagId[];
   Endpoints: EnvironmentId[];
   PartialMatch: boolean;
+  EndpointTypes: EnvironmentType[];
 }

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

@@ -20,6 +20,9 @@ import {
   envVarValidation,
 } from '@@/form-components/EnvironmentVariablesFieldset';
 
+import { PrePullToggle } from '../../components/PrePullToggle';
+import { RetryDeployToggle } from '../../components/RetryDeployToggle';
+
 import { PrivateRegistryFieldsetWrapper } from './PrivateRegistryFieldsetWrapper';
 import { FormValues } from './types';
 import { ComposeForm } from './ComposeForm';
@@ -175,46 +178,30 @@ function InnerForm({
           <PrivateRegistryFieldsetWrapper
             value={values.privateRegistryId}
             onChange={(value) => setFieldValue('privateRegistryId', value)}
-            isValid={isValid}
+            values={{
-            values={values}
+              fileContent: values.content,
-            stackName={edgeStack.Name}
+            }}
             onFieldError={(error) => setFieldError('privateRegistryId', error)}
             error={errors.privateRegistryId}
           />
 
-          <EnvironmentVariablesPanel
-            onChange={(value) => setFieldValue('envVars', value)}
-            values={values.envVars}
-            errors={errors.envVars}
-          />
-
           {values.deploymentType === DeploymentType.Compose && (
             <>
-              <div className="form-group">
+              <EnvironmentVariablesPanel
-                <div className="col-sm-12">
+                onChange={(value) => setFieldValue('envVars', value)}
-                  <SwitchField
+                values={values.envVars}
-                    checked={values.prePullImage}
+                errors={errors.envVars}
-                    name="prePullImage"
+              />
-                    label="Pre-pull images"
-                    tooltip="When enabled, redeployment will be executed when image(s) is pulled successfully"
-                    labelClass="col-sm-3 col-lg-2"
-                    onChange={(value) => setFieldValue('prePullImage', value)}
-                  />
-                </div>
-              </div>
 
-              <div className="form-group">
+              <PrePullToggle
-                <div className="col-sm-12">
+                onChange={(value) => setFieldValue('prePullImage', value)}
-                  <SwitchField
+                value={values.prePullImage}
-                    checked={values.retryDeploy}
+              />
-                    name="retryDeploy"
+
-                    label="Retry deployment"
+              <RetryDeployToggle
-                    tooltip="When enabled, this will allow the edge agent to retry deployment if failed to deploy initially"
+                onChange={(value) => setFieldValue('retryDeploy', value)}
-                    labelClass="col-sm-3 col-lg-2"
+                value={values.retryDeploy}
-                    onChange={(value) => setFieldValue('retryDeploy', value)}
+              />
-                  />
-                </div>
-              </div>
             </>
           )}
         </>

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

@@ -2,29 +2,32 @@ import _ from 'lodash';
 
 import { notifyError } from '@/portainer/services/notifications';
 import { PrivateRegistryFieldset } from '@/react/edge/edge-stacks/components/PrivateRegistryFieldset';
-import { useCreateEdgeStackFromFileContent } from '@/react/edge/edge-stacks/queries/useCreateEdgeStackFromFileContent';
 import { useRegistries } from '@/react/portainer/registries/queries/useRegistries';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+
+import { useParseRegistries } from '../../queries/useParseRegistries';
 
 import { FormValues } from './types';
 
 export function PrivateRegistryFieldsetWrapper({
   value,
-  isValid,
   error,
   onChange,
-  values,
-  stackName,
   onFieldError,
+  values,
+  isGit,
 }: {
   value: FormValues['privateRegistryId'];
-  isValid: boolean;
   error?: string;
   onChange: (value?: number) => void;
-  values: FormValues;
+  values: {
-  stackName: string;
+    fileContent?: string;
+    file?: File;
+  };
   onFieldError: (message: string) => void;
+  isGit?: boolean;
 }) {
-  const dryRunMutation = useCreateEdgeStackFromFileContent();
+  const dryRunMutation = useParseRegistries();
 
   const registriesQuery = useRegistries();
 
@@ -35,34 +38,37 @@ export function PrivateRegistryFieldsetWrapper({
   return (
     <PrivateRegistryFieldset
       value={value}
-      formInvalid={!isValid}
+      formInvalid={!values.file && !values.fileContent && !isGit}
       errorMessage={error}
       registries={registriesQuery.data}
-      onChange={() => matchRegistry()}
+      onChange={() => matchRegistry(values)}
       onSelect={(value) => onChange(value)}
       isActive={!!value}
       clearRegistries={() => onChange(undefined)}
+      method={isGit ? 'repository' : 'file'}
     />
   );
 
-  async function matchRegistry() {
+  async function matchRegistry(values: { fileContent?: string; file?: File }) {
-    try {
+    if (isGit) {
-      const response = await dryRunMutation.mutateAsync({
+      return;
-        name: `${stackName}-dryrun`,
+    }
-        stackFileContent: values.content,
-        edgeGroups: values.edgeGroups,
-        deploymentType: values.deploymentType,
-        dryRun: true,
-      });
 
-      if (response.Registries.length === 0) {
+    try {
+      if (!isBE) {
+        return;
+      }
+
+      const registries = await dryRunMutation.mutateAsync(values);
+
+      if (registries.length === 0) {
         onChange(undefined);
         return;
       }
 
-      const validRegistry = onlyOne(response.Registries);
+      const validRegistry = onlyOne(registries);
       if (validRegistry) {
-        onChange(response.Registries[0]);
+        onChange(registries[0]);
       } else {
         onChange(undefined);
         onFieldError(

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

@@ -0,0 +1,24 @@
+import { SwitchField } from '@@/form-components/SwitchField';
+
+export function PrePullToggle({
+  value,
+  onChange,
+}: {
+  value: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return (
+    <div className="form-group">
+      <div className="col-sm-12">
+        <SwitchField
+          checked={value}
+          name="prePullImage"
+          label="Pre-pull images"
+          tooltip="When enabled, redeployment will be executed when image(s) is pulled successfully"
+          labelClass="col-sm-3 col-lg-2"
+          onChange={onChange}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { SwitchField } from '@@/form-components/SwitchField';
+
+export function RetryDeployToggle({
+  value,
+  onChange,
+}: {
+  value: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return (
+    <div className="form-group">
+      <div className="col-sm-12">
+        <SwitchField
+          checked={value}
+          name="retryDeploy"
+          label="Retry deployment"
+          tooltip="When enabled, this will allow the edge agent to retry deployment if failed to deploy initially"
+          labelClass="col-sm-3 col-lg-2"
+          onChange={onChange}
+        />
+      </div>
+    </div>
+  );
+}

app/react/edge/edge-stacks/components/StaggerFieldset.types.ts

@@ -0,0 +1,39 @@
+export type StaggerConfig = {
+  StaggerOption: StaggerOption;
+  StaggerParallelOption?: StaggerParallelOption;
+  DeviceNumber?: number;
+  DeviceNumberStartFrom?: number;
+  DeviceNumberIncrementBy?: number;
+  Timeout?: string;
+  UpdateDelay?: string;
+  UpdateFailureAction?: UpdateFailureAction;
+};
+
+export enum StaggerOption {
+  AllAtOnce = 1,
+  Parallel,
+}
+
+export enum StaggerParallelOption {
+  Fixed = 1,
+  Incremental,
+}
+
+export enum UpdateFailureAction {
+  Continue = 1,
+  Pause,
+  Rollback,
+}
+
+export function getDefaultStaggerConfig(): StaggerConfig {
+  return {
+    StaggerOption: StaggerOption.AllAtOnce,
+    StaggerParallelOption: StaggerParallelOption.Fixed,
+    DeviceNumber: 1,
+    DeviceNumberStartFrom: 0,
+    DeviceNumberIncrementBy: 2,
+    Timeout: '',
+    UpdateDelay: '',
+    UpdateFailureAction: UpdateFailureAction.Continue,
+  };
+}

app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromFile.ts

@@ -0,0 +1,47 @@
+import axios, {
+  json2formData,
+  parseAxiosError,
+} from '@/portainer/services/axios';
+import { RegistryId } from '@/react/portainer/registries/types';
+import { Pair } from '@/react/portainer/settings/types';
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+
+import { DeploymentType, EdgeStack, StaggerConfig } from '../../types';
+import { buildUrl } from '../buildUrl';
+
+/**
+ * Payload to create an EdgeStack from a git repository
+ */
+export type FileUploadPayload = {
+  Name: string;
+  file: File;
+  EdgeGroups: Array<EdgeGroup['Id']>;
+  DeploymentType: DeploymentType;
+  Registries?: Array<RegistryId>;
+  /** * Uses the manifest's namespaces instead of the default one */
+  UseManifestNamespaces?: boolean;
+  PrePullImage?: boolean;
+  RetryDeploy?: boolean;
+  /** List of environment variables */
+  EnvVars?: Array<Pair>;
+  /** Configuration for stagger updates */
+  StaggerConfig?: StaggerConfig;
+  Webhook?: string;
+};
+
+export async function createStackFromFile(payload: FileUploadPayload) {
+  try {
+    const { data } = await axios.post<EdgeStack>(
+      buildUrl(undefined, 'create/file'),
+      json2formData(payload),
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}

app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromFileContent.ts

@@ -0,0 +1,47 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { RegistryId } from '@/react/portainer/registries/types';
+import { Pair } from '@/react/portainer/settings/types';
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+
+import { DeploymentType, EdgeStack, StaggerConfig } from '../../types';
+import { buildUrl } from '../buildUrl';
+
+/**
+ * Payload for creating an EdgeStack from a string
+ */
+export interface FileContentPayload {
+  /** Name of the stack */
+  name: string;
+  /** Content of the Stack file */
+  stackFileContent: 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?: Array<RegistryId>;
+  /** Uses the manifest's namespaces instead of the default one */
+  useManifestNamespaces?: boolean;
+  /** Pre Pull image */
+  prePullImage?: boolean;
+  /** Retry deploy */
+  retryDeploy?: boolean;
+  /** Optional webhook configuration */
+  webhook?: string;
+  /** List of environment variables */
+  envVars?: Array<Pair>;
+  /** Configuration for stagger updates */
+  staggerConfig?: StaggerConfig;
+}
+
+export async function createStackFromFileContent(payload: FileContentPayload) {
+  try {
+    const { data } = await axios.post<EdgeStack>(
+      buildUrl(undefined, 'create/string'),
+      payload
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}

app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromGit.ts

@@ -0,0 +1,74 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { RegistryId } from '@/react/portainer/registries/types';
+import { Pair } from '@/react/portainer/settings/types';
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { AutoUpdateModel } from '@/react/portainer/gitops/types';
+
+import { DeploymentType, EdgeStack, StaggerConfig } from '../../types';
+import { buildUrl } from '../buildUrl';
+
+/**
+ * Payload to create an EdgeStack from a git repository
+ */
+export type GitRepositoryPayload = {
+  /** 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 binded git credential */
+  repositoryGitCredentialId?: number;
+  /** 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. Valid values are: 0 - 'compose', 1 - 'kubernetes', 2 - 'nomad'. Compose is enabled only for docker environments, kubernetes is enabled only for kubernetes environments, nomad is enabled only for nomad environments */
+  deploymentType: DeploymentType;
+  /** List of Registries to use for this stack */
+  registries?: Array<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?: string;
+  /** Per device configs group match type */
+  perDeviceConfigsGroupMatchType?: string;
+  /** Per device configs path */
+  perDeviceConfigsPath?: string;
+  /** List of environment variables */
+  envVars?: Array<Pair>;
+  /** Configuration for stagger updates */
+  staggerConfig?: StaggerConfig;
+};
+
+export async function createStackFromGit(payload: GitRepositoryPayload) {
+  try {
+    const { data } = await axios.post<EdgeStack>(
+      buildUrl(undefined, 'create/repository'),
+      payload
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}

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

@@ -0,0 +1,135 @@
+import { useMutation } from 'react-query';
+
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { RegistryId } from '@/react/portainer/registries/types';
+import { Pair } from '@/react/portainer/settings/types';
+import {
+  GitFormModel,
+  RelativePathModel,
+} from '@/react/portainer/gitops/types';
+
+import { DeploymentType, StaggerConfig } from '../../types';
+
+import { createStackFromFile } from './createStackFromFile';
+import { createStackFromFileContent } from './createStackFromFileContent';
+import { createStackFromGit } from './createStackFromGit';
+
+export function useCreateEdgeStack() {
+  return useMutation(createEdgeStack);
+}
+
+type BasePayload = {
+  /** Name of the stack */
+  name: string;
+  /** Content of the Stack file */
+  /** 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?: Array<RegistryId>;
+  /** Uses the manifest's namespaces instead of the default one */
+  useManifestNamespaces?: boolean;
+  /** Pre Pull image */
+  prePullImage?: boolean;
+  /** Retry deploy */
+  retryDeploy?: boolean;
+  /** List of environment variables */
+  envVars?: Array<Pair>;
+  /** Configuration for stagger updates */
+  staggerConfig?: StaggerConfig;
+};
+
+/**
+ * Payload for creating an EdgeStack from a string
+ */
+export type CreateEdgeStackPayload =
+  | {
+      method: 'file';
+      payload: BasePayload & {
+        /** File to upload */
+        file: File;
+        /** Optional webhook configuration */
+        webhook?: string;
+      };
+    }
+  | {
+      method: 'string';
+      payload: BasePayload & {
+        /** Content of the Stack file */
+        fileContent: string;
+        /** Optional webhook configuration */
+        webhook?: string;
+      };
+    }
+  | {
+      method: 'git';
+      payload: BasePayload & {
+        git: GitFormModel;
+        relativePathSettings?: RelativePathModel;
+      };
+    };
+
+function createEdgeStack({ method, payload }: CreateEdgeStackPayload) {
+  switch (method) {
+    case 'file':
+      return createStackFromFile({
+        DeploymentType: payload.deploymentType,
+        EdgeGroups: payload.edgeGroups,
+        Name: payload.name,
+        file: payload.file,
+        EnvVars: payload.envVars,
+        PrePullImage: payload.prePullImage,
+        Registries: payload.registries,
+        RetryDeploy: payload.retryDeploy,
+        StaggerConfig: payload.staggerConfig,
+        UseManifestNamespaces: payload.useManifestNamespaces,
+        Webhook: payload.webhook,
+      });
+    case 'git':
+      return createStackFromGit({
+        deploymentType: payload.deploymentType,
+        edgeGroups: payload.edgeGroups,
+        name: payload.name,
+        envVars: payload.envVars,
+        prePullImage: payload.prePullImage,
+        registries: payload.registries,
+        retryDeploy: payload.retryDeploy,
+        staggerConfig: payload.staggerConfig,
+        useManifestNamespaces: payload.useManifestNamespaces,
+        repositoryUrl: payload.git.RepositoryURL,
+        repositoryReferenceName: payload.git.RepositoryReferenceName,
+        filePathInRepository: payload.git.ComposeFilePathInRepository,
+        repositoryAuthentication: payload.git.RepositoryAuthentication,
+        repositoryUsername: payload.git.RepositoryUsername,
+        repositoryPassword: payload.git.RepositoryPassword,
+        repositoryGitCredentialId: payload.git.RepositoryGitCredentialID,
+        filesystemPath: payload.relativePathSettings?.FilesystemPath,
+        supportRelativePath: payload.relativePathSettings?.SupportRelativePath,
+        perDeviceConfigsGroupMatchType:
+          payload.relativePathSettings?.PerDeviceConfigsGroupMatchType,
+        perDeviceConfigsMatchType:
+          payload.relativePathSettings?.PerDeviceConfigsMatchType,
+        perDeviceConfigsPath:
+          payload.relativePathSettings?.PerDeviceConfigsPath,
+        tlsSkipVerify: payload.git.TLSSkipVerify,
+        autoUpdate: payload.git.AutoUpdate,
+      });
+    case 'string':
+      return createStackFromFileContent({
+        deploymentType: payload.deploymentType,
+        edgeGroups: payload.edgeGroups,
+        name: payload.name,
+        envVars: payload.envVars,
+        prePullImage: payload.prePullImage,
+        registries: payload.registries,
+        retryDeploy: payload.retryDeploy,
+        staggerConfig: payload.staggerConfig,
+        useManifestNamespaces: payload.useManifestNamespaces,
+        stackFileContent: payload.fileContent,
+        webhook: payload.webhook,
+      });
+    default:
+      throw new Error('Invalid method');
+  }
+}

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

@@ -1,49 +0,0 @@
-import { useMutation, useQueryClient } from 'react-query';
-
-import axios, { parseAxiosError } from '@/portainer/services/axios';
-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 useCreateEdgeStackFromFileContent() {
-  const queryClient = useQueryClient();
-
-  return useMutation(createEdgeStackFromFileContent, {
-    ...withError('Failed creating Edge stack'),
-    ...withInvalidate(queryClient, [queryKeys.base()]),
-  });
-}
-
-interface FileContentPayload {
-  name: string;
-  stackFileContent: string;
-  edgeGroups: EdgeGroup['Id'][];
-  deploymentType: DeploymentType;
-  registries?: RegistryId[];
-  useManifestNamespaces?: boolean;
-  prePullImage?: boolean;
-  dryRun?: boolean;
-}
-
-export async function createEdgeStackFromFileContent({
-  dryRun,
-  ...payload
-}: FileContentPayload) {
-  try {
-    const { data } = await axios.post<EdgeStack>(
-      buildUrl(undefined, 'create/string'),
-      payload,
-      {
-        params: { dryrun: dryRun ? 'true' : 'false' },
-      }
-    );
-    return data;
-  } catch (e) {
-    throw parseAxiosError(e as Error);
-  }
-}

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

@@ -1,142 +0,0 @@
-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/edge-stacks/queries/useParseRegistries.ts

@@ -0,0 +1,44 @@
+import { useMutation } from 'react-query';
+
+import { withError } from '@/react-tools/react-query';
+import { RegistryId } from '@/react/portainer/registries/types';
+import axios, {
+  json2formData,
+  parseAxiosError,
+} from '@/portainer/services/axios';
+
+import { buildUrl } from './buildUrl';
+
+export function useParseRegistries() {
+  return useMutation(parseRegistries, {
+    ...withError('Failed parsing registries'),
+  });
+}
+
+export async function parseRegistries(props: {
+  file?: File;
+  fileContent?: string;
+}) {
+  if (!props.file && !props.fileContent) {
+    throw new Error('File or fileContent must be provided');
+  }
+
+  let currentFile = props.file;
+  if (!props.file && props.fileContent) {
+    currentFile = new File([props.fileContent], 'registries.yml');
+  }
+  try {
+    const { data } = await axios.post<Array<RegistryId>>(
+      buildUrl(undefined, 'parse_registries'),
+      json2formData({ file: currentFile }),
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}

app/react/edge/edge-stacks/types.ts

@@ -1,6 +1,7 @@
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import {
   AutoUpdateResponse,
+  RelativePathModel,
   RepoConfigResponse,
 } from '@/react/portainer/gitops/types';
 import { RegistryId } from '@/react/portainer/registries/types';
@@ -9,6 +10,13 @@ import { EnvVar } from '@@/form-components/EnvironmentVariablesFieldset/types';
 
 import { EdgeGroup } from '../edge-groups/types';
 
+export {
+  type StaggerConfig,
+  StaggerOption,
+  StaggerParallelOption,
+  UpdateFailureAction,
+} from './components/StaggerFieldset.types';
+
 export enum StatusType {
   /** Pending represents a pending edge stack */
   Pending,
@@ -62,7 +70,7 @@ export enum DeploymentType {
   Kubernetes,
 }
 
-export type EdgeStack = {
+export type EdgeStack = RelativePathModel & {
   Id: number;
   Name: string;
   Status: { [key: EnvironmentId]: EdgeStackStatus };
@@ -89,10 +97,6 @@ export type EdgeStack = {
   EnvVars?: EnvVar[];
   SupportRelativePath: boolean;
   FilesystemPath?: string;
-  SupportPerDeviceConfigs?: boolean;
-  PerDeviceConfigsPath?: string;
-  PerDeviceConfigsMatchType?: string;
-  PerDeviceConfigsGroupMatchType?: string;
 };
 
 export enum EditorType {

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

@@ -23,7 +23,7 @@ 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 { useCreateEdgeStack } from '../../edge-stacks/queries/useCreateEdgeStack/useCreateEdgeStack';
 
 import { EnvVarsFieldset } from './EnvVarsFieldset';
 
@@ -70,7 +70,7 @@ function DeployForm({
   unselect: () => void;
 }) {
   const router = useRouter();
-  const mutation = useCreateEdgeStackFromGit();
+  const mutation = useCreateEdgeStack();
   const edgeStacksQuery = useEdgeStacks();
   const edgeGroupsQuery = useEdgeGroups({
     select: (groups) =>
@@ -139,15 +139,21 @@ function DeployForm({
   function handleSubmit(values: FormValues) {
     return mutation.mutate(
       {
-        name: values.name,
+        method: 'git',
-        edgeGroups: values.edgeGroupIds,
+        payload: {
-        deploymentType: DeploymentType.Compose,
+          name: values.name,
-        repositoryURL: template.Repository.url,
+          edgeGroups: values.edgeGroupIds,
-        filePathInRepository: template.Repository.stackfile,
+          deploymentType: DeploymentType.Compose,
-        envVars: Object.entries(values.envVars).map(([name, value]) => ({
+
-          name,
+          envVars: Object.entries(values.envVars).map(([name, value]) => ({
-          value,
+            name,
-        })),
+            value,
+          })),
+          git: {
+            RepositoryURL: template.Repository.url,
+            ComposeFilePathInRepository: template.Repository.stackfile,
+          },
+        },
       },
       {
         onSuccess() {

app/react/edge/templates/custom-templates/CreateView/CreateTemplateForm.tsx

@@ -6,6 +6,7 @@ import { notifySuccess } from '@/portainer/services/notifications';
 import { useCreateTemplateMutation } from '@/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation';
 import { Platform } from '@/react/portainer/templates/types';
 import { useFetchTemplateFile } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateFile';
+import { getDefaultEdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
 
 import { editor } from '@@/BoxSelector/common-options/build-methods';
 
@@ -47,6 +48,7 @@ export function CreateTemplateForm() {
       RepositoryURLValid: true,
       TLSSkipVerify: false,
     },
+    EdgeSettings: getDefaultEdgeTemplateSettings(),
   };
 
   return (

app/react/edge/templates/custom-templates/CreateView/EdgeSettingsFieldset.tsx

@@ -0,0 +1,81 @@
+import { FormikErrors } from 'formik';
+import { SetStateAction } from 'react';
+
+import { RelativePathFieldset } from '@/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset';
+import { PrivateRegistryFieldsetWrapper } from '@/react/edge/edge-stacks/ItemView/EditEdgeStackForm/PrivateRegistryFieldsetWrapper';
+import { PrePullToggle } from '@/react/edge/edge-stacks/components/PrePullToggle';
+import { RetryDeployToggle } from '@/react/edge/edge-stacks/components/RetryDeployToggle';
+import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
+import { GitFormModel } from '@/react/portainer/gitops/types';
+
+import { FormSection } from '@@/form-components/FormSection';
+
+export function EdgeSettingsFieldset({
+  values,
+  setValues,
+  errors,
+  gitConfig,
+  fileValues,
+  setFieldError,
+}: {
+  values: EdgeTemplateSettings;
+  setValues: (values: SetStateAction<EdgeTemplateSettings>) => void;
+  errors?: FormikErrors<EdgeTemplateSettings>;
+  gitConfig?: GitFormModel;
+  setFieldError: (field: string, message: string) => void;
+  fileValues: {
+    fileContent?: string;
+    file?: File;
+  };
+}) {
+  const isGit = !!gitConfig;
+  return (
+    <>
+      {isGit && (
+        <FormSection title="Advanced settings">
+          <RelativePathFieldset
+            value={values.RelativePathSettings}
+            gitModel={gitConfig}
+            onChange={(newValues) =>
+              setValues((values) => ({
+                ...values,
+                RelativePathSettings: {
+                  ...values.RelativePathSettings,
+                  ...newValues,
+                },
+              }))
+            }
+          />
+        </FormSection>
+      )}
+
+      <PrivateRegistryFieldsetWrapper
+        value={values.PrivateRegistryId}
+        onChange={(registryId) =>
+          setValues((values) => ({
+            ...values,
+            PrivateRegistryId: registryId,
+          }))
+        }
+        values={fileValues}
+        onFieldError={(error) => setFieldError('Edge?.Registries', error)}
+        error={errors?.PrivateRegistryId}
+        isGit={isGit}
+      />
+
+      <PrePullToggle
+        onChange={(value) =>
+          setValues((values) => ({ ...values, PrePullImage: value }))
+        }
+        value={values.PrePullImage}
+      />
+
+      <RetryDeployToggle
+        onChange={(value) =>
+          setValues((values) => ({ ...values, RetryDeploy: value }))
+        }
+        value={values.RetryDeploy}
+      />
+    </>
+  );
+}

app/react/edge/templates/custom-templates/CreateView/EdgeSettingsFieldset.validation.ts

@@ -0,0 +1,19 @@
+import { SchemaOf, boolean, mixed, number, object } from 'yup';
+
+import { relativePathValidation } from '@/react/portainer/gitops/RelativePathFieldset/validation';
+import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+
+export function edgeFieldsetValidation(): SchemaOf<EdgeTemplateSettings> {
+  if (!isBE) {
+    return mixed().default(undefined) as SchemaOf<EdgeTemplateSettings>;
+  }
+
+  return object({
+    RelativePathSettings: relativePathValidation(),
+    PrePullImage: boolean().default(false),
+    RetryDeploy: boolean().default(false),
+    PrivateRegistryId: number().default(undefined),
+    StaggerConfig: mixed(),
+  });
+}

app/react/edge/templates/custom-templates/CreateView/InnerForm.tsx

@@ -1,4 +1,4 @@
-import { Form, useFormikContext } from 'formik';
+import { Form, FormikErrors, useFormikContext } from 'formik';
 
 import { CommonFields } from '@/react/portainer/custom-templates/components/CommonFields';
 import { CustomTemplatesVariablesDefinitionField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
@@ -10,6 +10,8 @@ import {
   isTemplateVariablesEnabled,
 } from '@/react/portainer/custom-templates/components/utils';
 import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
+import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
+import { applySetStateAction } from '@/react-tools/apply-set-state-action';
 
 import { BoxSelector } from '@@/BoxSelector';
 import { WebEditorForm, usePreventExit } from '@@/WebEditorForm';
@@ -23,6 +25,7 @@ import {
 } from '@@/BoxSelector/common-options/build-methods';
 
 import { FormValues, Method, buildMethods } from './types';
+import { EdgeSettingsFieldset } from './EdgeSettingsFieldset';
 
 export function InnerForm({ isLoading }: { isLoading: boolean }) {
   const {
@@ -41,6 +44,8 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
     values.FileContent,
     values.Method === editor.value && !isSubmitting
   );
+
+  const isGit = values.Method === git.value;
   return (
     <Form className="form-horizontal">
       <CommonFields
@@ -103,6 +108,15 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
         />
       )}
 
+      {isTemplateVariablesEnabled && (
+        <CustomTemplatesVariablesDefinitionField
+          value={values.Variables}
+          onChange={(values) => setFieldValue('Variables', values)}
+          isVariablesNamesFromParent={values.Method === editor.value}
+          errors={errors.Variables}
+        />
+      )}
+
       {values.Method === git.value && (
         <GitForm
           value={values.Git}
@@ -116,12 +130,25 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
         />
       )}
 
-      {isTemplateVariablesEnabled && (
+      {values.EdgeSettings && (
-        <CustomTemplatesVariablesDefinitionField
+        <EdgeSettingsFieldset
-          value={values.Variables}
+          setValues={(edgeSetValues) =>
-          onChange={(values) => setFieldValue('Variables', values)}
+            setValues((values) => ({
-          isVariablesNamesFromParent={values.Method === editor.value}
+              ...values,
-          errors={errors.Variables}
+              EdgeSettings: applySetStateAction(
+                edgeSetValues,
+                values.EdgeSettings
+              ),
+            }))
+          }
+          gitConfig={isGit ? values.Git : undefined}
+          fileValues={{
+            fileContent: values.FileContent,
+            file: values.File,
+          }}
+          values={values.EdgeSettings}
+          errors={errors.EdgeSettings as FormikErrors<EdgeTemplateSettings>}
+          setFieldError={setFieldError}
         />
       )}
 

app/react/edge/templates/custom-templates/CreateView/types.ts

@@ -3,6 +3,7 @@ import { type Values as CommonFieldsValues } from '@/react/portainer/custom-temp
 import { DefinitionFieldValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
 import { Platform } from '@/react/portainer/templates/types';
 import { GitFormModel } from '@/react/portainer/gitops/types';
+import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
 
 import {
   editor,
@@ -22,4 +23,5 @@ export interface FormValues extends CommonFieldsValues {
   File: File | undefined;
   Git: GitFormModel;
   Variables: DefinitionFieldValues;
+  EdgeSettings?: EdgeTemplateSettings;
 }

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

@@ -18,6 +18,7 @@ import {
 } from '@@/BoxSelector/common-options/build-methods';
 
 import { buildMethods } from './types';
+import { edgeFieldsetValidation } from './EdgeSettingsFieldset.validation';
 
 export function useValidation() {
   const { user } = useCurrentUser();
@@ -51,6 +52,7 @@ export function useValidation() {
           then: () => buildGitValidationSchema(gitCredentialsQuery.data || []),
         }),
         Variables: variablesValidation(),
+        EdgeSettings: edgeFieldsetValidation(),
       }).concat(
         commonFieldsValidation({ templates: customTemplatesQuery.data })
       ),

app/react/edge/templates/custom-templates/EditView/EditTemplateForm.tsx

@@ -38,6 +38,7 @@ export function EditTemplateForm({ template }: { template: CustomTemplate }) {
 
     FileContent: fileQuery.data || '',
     Git: template.GitConfig ? toGitFormModel(template.GitConfig) : undefined,
+    EdgeSettings: template.EdgeSettings,
   };
 
   return (
@@ -72,6 +73,7 @@ export function EditTemplateForm({ template }: { template: CustomTemplate }) {
         Note: values.Note,
         Platform: values.Platform,
         Variables: values.Variables,
+        EdgeSettings: values.EdgeSettings,
         ...values.Git,
       },
       {

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

@@ -12,9 +12,9 @@ import { EditTemplateForm } from './EditTemplateForm';
 export function EditView() {
   const router = useRouter();
   const {
-    params: { id },
+    params: { id: templateId },
   } = useCurrentStateAndParams();
-  const customTemplateQuery = useCustomTemplate(id);
+  const customTemplateQuery = useCustomTemplate(templateId);
 
   useEffect(() => {
     if (customTemplateQuery.data && !customTemplateQuery.data.EdgeTemplate) {

app/react/edge/templates/custom-templates/EditView/InnerForm.tsx

@@ -1,4 +1,4 @@
-import { Form, useFormikContext } from 'formik';
+import { Form, FormikErrors, useFormikContext } from 'formik';
 import { RefreshCw } from 'lucide-react';
 
 import { CommonFields } from '@/react/portainer/custom-templates/components/CommonFields';
@@ -11,12 +11,16 @@ import {
   isTemplateVariablesEnabled,
 } from '@/react/portainer/custom-templates/components/utils';
 import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
+import { applySetStateAction } from '@/react-tools/apply-set-state-action';
+import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
 
 import { WebEditorForm, usePreventExit } from '@@/WebEditorForm';
 import { FormActions } from '@@/form-components/FormActions';
 import { Button } from '@@/buttons';
 import { FormError } from '@@/form-components/FormError';
 
+import { EdgeSettingsFieldset } from '../CreateView/EdgeSettingsFieldset';
+
 import { FormValues } from './types';
 
 export function InnerForm({
@@ -74,7 +78,11 @@ export function InnerForm({
         value={gitFileContent || values.FileContent}
         onChange={handleChangeFileContent}
         yaml
-        placeholder="Define or paste the content of your docker compose file here"
+        placeholder={
+          gitFileContent
+            ? 'Preview of the file from git repository'
+            : 'Define or paste the content of your docker compose file here'
+        }
         error={errors.FileContent}
         readonly={isEditorReadonly}
       >
@@ -91,6 +99,15 @@ export function InnerForm({
         </p>
       </WebEditorForm>
 
+      {isTemplateVariablesEnabled && (
+        <CustomTemplatesVariablesDefinitionField
+          value={values.Variables}
+          onChange={(values) => setFieldValue('Variables', values)}
+          isVariablesNamesFromParent={!isEditorReadonly}
+          errors={errors.Variables}
+        />
+      )}
+
       {values.Git && (
         <>
           <GitForm
@@ -121,12 +138,21 @@ export function InnerForm({
         </>
       )}
 
-      {isTemplateVariablesEnabled && (
+      {values.EdgeSettings && (
-        <CustomTemplatesVariablesDefinitionField
+        <EdgeSettingsFieldset
-          value={values.Variables}
+          setValues={(edgeValues) =>
-          onChange={(values) => setFieldValue('Variables', values)}
+            setFieldValue(
-          isVariablesNamesFromParent={!isEditorReadonly}
+              'EdgeSettings',
-          errors={errors.Variables}
+              applySetStateAction(edgeValues, values.EdgeSettings)
+            )
+          }
+          gitConfig={values.Git}
+          fileValues={{
+            fileContent: values.FileContent,
+          }}
+          values={values.EdgeSettings}
+          errors={errors.EdgeSettings as FormikErrors<EdgeTemplateSettings>}
+          setFieldError={setFieldError}
         />
       )}
 

app/react/edge/templates/custom-templates/EditView/types.ts

@@ -3,6 +3,7 @@ import { DefinitionFieldValues } from '@/react/portainer/custom-templates/compon
 import { Platform } from '@/react/portainer/templates/types';
 import { type Values as CommonFieldsValues } from '@/react/portainer/custom-templates/components/CommonFields';
 import { GitFormModel } from '@/react/portainer/gitops/types';
+import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
 
 export interface FormValues extends CommonFieldsValues {
   Platform: Platform;
@@ -10,4 +11,5 @@ export interface FormValues extends CommonFieldsValues {
   FileContent: string;
   Git?: GitFormModel;
   Variables: DefinitionFieldValues;
+  EdgeSettings?: EdgeTemplateSettings;
 }

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

@@ -11,6 +11,8 @@ import { useCurrentUser } from '@/react/hooks/useUser';
 import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
 import { Platform } from '@/react/portainer/templates/types';
 
+import { edgeFieldsetValidation } from '../CreateView/EdgeSettingsFieldset.validation';
+
 export function useValidation(
   currentTemplateId: CustomTemplate['Id'],
   isGit: boolean
@@ -40,6 +42,7 @@ export function useValidation(
           ? buildGitValidationSchema(gitCredentialsQuery.data || [])
           : mixed(),
         Variables: variablesValidation(),
+        EdgeSettings: edgeFieldsetValidation(),
       }).concat(
         commonFieldsValidation({
           templates: customTemplatesQuery.data,

app/react/portainer/gitops/AuthFieldset/AuthFieldset.tsx

@@ -45,7 +45,7 @@ export function AuthFieldset({
             label="Authentication"
             labelClass="col-sm-3 col-lg-2"
             name="authentication"
-            checked={value.RepositoryAuthentication}
+            checked={value.RepositoryAuthentication || false}
             onChange={(value) =>
               handleChange({ RepositoryAuthentication: value })
             }

app/react/portainer/gitops/GitForm.tsx

@@ -113,7 +113,7 @@ export function GitForm({
         <div className="col-sm-12">
           <SwitchField
             label="Skip TLS Verification"
-            checked={value.TLSSkipVerify}
+            checked={value.TLSSkipVerify || false}
             onChange={(value) => handleChange({ TLSSkipVerify: value })}
             name="TLSSkipVerify"
             tooltip="Enabling this will allow skipping TLS validation for any self-signed certificate."

app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx

@@ -1,9 +1,6 @@
 import { useCallback } from 'react';
 
-import {
+import { GitFormModel } from '@/react/portainer/gitops/types';
-  GitFormModel,
-  RelativePathModel,
-} from '@/react/portainer/gitops/types';
 import { PathSelector } from '@/react/portainer/gitops/ComposePathField/PathSelector';
 import { dummyGitForm } from '@/react/portainer/gitops/RelativePathFieldset/utils';
 import { useValidation } from '@/react/portainer/gitops/RelativePathFieldset/useValidation';
@@ -13,6 +10,8 @@ import { TextTip } from '@@/Tip/TextTip';
 import { FormControl } from '@@/form-components/FormControl';
 import { Input, Select } from '@@/form-components/Input';
 
+import { RelativePathModel, getPerDevConfigsFilterType } from './types';
+
 interface Props {
   value: RelativePathModel;
   gitModel?: GitFormModel;
@@ -156,7 +155,9 @@ export function RelativePathFieldset({
                       value={value.PerDeviceConfigsMatchType}
                       onChange={(e) =>
                         innerOnChange({
-                          PerDeviceConfigsMatchType: e.target.value,
+                          PerDeviceConfigsMatchType: getPerDevConfigsFilterType(
+                            e.target.value
+                          ),
                         })
                       }
                       options={[
@@ -186,7 +187,8 @@ export function RelativePathFieldset({
                       value={value.PerDeviceConfigsGroupMatchType}
                       onChange={(e) =>
                         innerOnChange({
-                          PerDeviceConfigsGroupMatchType: e.target.value,
+                          PerDeviceConfigsGroupMatchType:
+                            getPerDevConfigsFilterType(e.target.value),
                         })
                       }
                       options={[

app/react/portainer/gitops/RelativePathFieldset/types.ts

@@ -0,0 +1,37 @@
+export function getDefaultRelativePathModel(): RelativePathModel {
+  return {
+    SupportRelativePath: false,
+    FilesystemPath: '',
+    PerDeviceConfigsGroupMatchType: '',
+    PerDeviceConfigsMatchType: '',
+    PerDeviceConfigsPath: '',
+    SupportPerDeviceConfigs: false,
+  };
+}
+
+export interface RelativePathModel {
+  SupportRelativePath: boolean;
+  FilesystemPath: string;
+  SupportPerDeviceConfigs: boolean;
+  PerDeviceConfigsPath: string;
+  PerDeviceConfigsMatchType: PerDevConfigsFilterType;
+  PerDeviceConfigsGroupMatchType: PerDevConfigsFilterType;
+}
+
+export type PerDevConfigsFilterType = 'file' | 'dir' | '';
+
+function isPerDevConfigsFilterType(
+  type: string
+): type is PerDevConfigsFilterType {
+  return ['file', 'dir'].includes(type);
+}
+
+export function getPerDevConfigsFilterType(
+  type: string
+): PerDevConfigsFilterType {
+  if (isPerDevConfigsFilterType(type)) {
+    return type;
+  }
+
+  return '';
+}

app/react/portainer/gitops/RelativePathFieldset/validation.ts

@@ -1,6 +1,6 @@
-import { boolean, object, SchemaOf, string } from 'yup';
+import { boolean, mixed, object, SchemaOf, string } from 'yup';
 
-import { RelativePathModel } from '@/react/portainer/gitops/types';
+import { PerDevConfigsFilterType, RelativePathModel } from './types';
 
 export function relativePathValidation(): SchemaOf<RelativePathModel> {
   return object({
@@ -18,7 +18,11 @@ export function relativePathValidation(): SchemaOf<RelativePathModel> {
         then: string().required('Directory is required'),
       })
       .default(''),
-    PerDeviceConfigsMatchType: string().oneOf(['', 'file', 'dir']),
+    PerDeviceConfigsMatchType: mixed<PerDevConfigsFilterType>()
-    PerDeviceConfigsGroupMatchType: string().oneOf(['', 'file', 'dir']),
+      .oneOf(['', 'file', 'dir'])
+      .default(''),
+    PerDeviceConfigsGroupMatchType: mixed<PerDevConfigsFilterType>()
+      .oneOf(['', 'file', 'dir'])
+      .default(''),
   });
 }

app/react/portainer/gitops/types.ts

@@ -1,4 +1,6 @@
 export type AutoUpdateMechanism = 'Webhook' | 'Interval';
+export { type RelativePathModel } from './RelativePathFieldset/types';
+
 export interface AutoUpdateResponse {
   /* Auto update interval */
   Interval: string;
@@ -37,7 +39,7 @@ export type AutoUpdateModel = {
 };
 
 export type GitCredentialsModel = {
-  RepositoryAuthentication: boolean;
+  RepositoryAuthentication?: boolean;
   RepositoryUsername?: string;
   RepositoryPassword?: string;
   RepositoryGitCredentialID?: number;
@@ -54,13 +56,12 @@ export interface GitFormModel extends GitAuthModel {
   RepositoryURL: string;
   RepositoryURLValid?: boolean;
   ComposeFilePathInRepository: string;
-  RepositoryAuthentication: boolean;
   RepositoryReferenceName?: string;
   AdditionalFiles?: string[];
 
   SaveCredential?: boolean;
   NewCredentialName?: string;
-  TLSSkipVerify: boolean;
+  TLSSkipVerify?: boolean;
 
   /**
    * Auto update
@@ -70,15 +71,6 @@ export interface GitFormModel extends GitAuthModel {
   AutoUpdate?: AutoUpdateModel;
 }
 
-export interface RelativePathModel {
-  SupportRelativePath: boolean;
-  FilesystemPath?: string;
-  SupportPerDeviceConfigs?: boolean;
-  PerDeviceConfigsPath?: string;
-  PerDeviceConfigsMatchType?: string;
-  PerDeviceConfigsGroupMatchType?: string;
-}
-
 export function toGitFormModel(response?: RepoConfigResponse): GitFormModel {
   if (!response) {
     return {

app/react/portainer/settings/types.ts

@@ -41,7 +41,7 @@ export interface LDAPSettings {
 
 export interface Pair {
   name: string;
-  value: string;
+  value?: string;
 }
 
 export interface OpenAMTConfiguration {

app/react/portainer/templates/custom-templates/ListView/CustomTemplatesListItem.tsx

@@ -46,7 +46,7 @@ export function CustomTemplatesListItem({
                 props={{
                   to: '.edit',
                   params: {
-                    templateId: template.Id,
+                    id: template.Id,
                   },
                 }}
                 icon={Edit}

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

@@ -12,7 +12,10 @@ import {
 import { StackType } from '@/react/common/stacks/types';
 import { FormValues } from '@/react/edge/templates/custom-templates/CreateView/types';
 import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
-import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
+import {
+  CustomTemplate,
+  EdgeTemplateSettings,
+} from '@/react/portainer/templates/custom-templates/types';
 
 import { Platform } from '../../types';
 
@@ -41,7 +44,18 @@ function createTemplate({
     case 'upload':
       return createTemplateFromFile(values);
     case 'repository':
-      return createTemplateFromGit({ ...values, ...Git });
+      return createTemplateFromGit({
+        ...values,
+        ...Git,
+        ...(values.EdgeSettings
+          ? {
+              EdgeSettings: {
+                ...values.EdgeSettings,
+                ...values.EdgeSettings.RelativePathSettings,
+              },
+            }
+          : {}),
+      });
     default:
       throw new Error('Unknown method');
   }
@@ -69,6 +83,7 @@ interface CustomTemplateFromFileContentPayload {
   Variables: VariableDefinition[];
   /** Indicates if this template is for Edge Stack. */
   EdgeTemplate?: boolean;
+  EdgeSettings?: EdgeTemplateSettings;
 }
 async function createTemplateFromText(
   values: CustomTemplateFromFileContentPayload
@@ -103,6 +118,7 @@ interface CustomTemplateFromFilePayload {
   Variables?: VariableDefinition[];
   /** Indicates if this template is for Edge Stack. */
   EdgeTemplate?: boolean;
+  EdgeSettings?: EdgeTemplateSettings;
 }
 
 async function createTemplateFromFile(values: CustomTemplateFromFilePayload) {
@@ -121,6 +137,7 @@ async function createTemplateFromFile(values: CustomTemplateFromFilePayload) {
       File: values.File,
       Variables: values.Variables,
       EdgeTemplate: values.EdgeTemplate,
+      EdgeSettings: values.EdgeSettings,
     });
 
     const { data } = await axios.post<CustomTemplate>(
@@ -157,7 +174,7 @@ interface CustomTemplateFromGitRepositoryPayload {
   /** Reference name of a Git repository hosting the Stack file. */
   RepositoryReferenceName?: string;
   /** Use basic authentication to clone the Git repository. */
-  RepositoryAuthentication: boolean;
+  RepositoryAuthentication?: boolean;
   /** Username used in basic authentication when RepositoryAuthentication is true. */
   RepositoryUsername?: string;
   /** Password used in basic authentication when RepositoryAuthentication is true. */
@@ -167,11 +184,12 @@ interface CustomTemplateFromGitRepositoryPayload {
   /** Definitions of variables in the stack file. */
   Variables: VariableDefinition[];
   /** Indicates whether to skip SSL verification when cloning the Git repository. */
-  TLSSkipVerify: boolean;
+  TLSSkipVerify?: boolean;
   /** Indicates if the Kubernetes template is created from a Docker Compose file. */
   IsComposeFormat?: boolean;
   /** Indicates if this template is for Edge Stack. */
   EdgeTemplate?: boolean;
+  EdgeSettings?: EdgeTemplateSettings;
 }
 async function createTemplateFromGit(
   values: CustomTemplateFromGitRepositoryPayload

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

@@ -9,7 +9,7 @@ import {
 import { StackType } from '@/react/common/stacks/types';
 import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
 
-import { CustomTemplate } from '../types';
+import { CustomTemplate, EdgeTemplateSettings } from '../types';
 import { Platform } from '../../types';
 
 import { buildUrl } from './build-url';
@@ -75,6 +75,7 @@ interface CustomTemplateUpdatePayload {
   IsComposeFormat?: boolean;
   /** EdgeTemplate indicates if this template purpose for Edge Stack */
   EdgeTemplate?: boolean;
+  EdgeSettings?: EdgeTemplateSettings;
 }
 
 async function updateTemplate(

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

@@ -2,9 +2,12 @@ import { UserId } from '@/portainer/users/types';
 import { StackType } from '@/react/common/stacks/types';
 
 import { ResourceControlResponse } from '../../access-control/types';
-import { RepoConfigResponse } from '../../gitops/types';
+import { RelativePathModel, RepoConfigResponse } from '../../gitops/types';
 import { VariableDefinition } from '../../custom-templates/components/CustomTemplatesVariablesDefinitionField';
 import { Platform } from '../types';
+import { RegistryId } from '../../registries/types';
+import { getDefaultRelativePathModel } from '../../gitops/RelativePathFieldset/types';
+import { isBE } from '../../feature-flags/feature-flags.service';
 
 export type CustomTemplate = {
   Id: number;
@@ -87,16 +90,38 @@ export type CustomTemplate = {
 
   /** EdgeTemplate indicates if this template purpose for Edge Stack */
   EdgeTemplate: boolean;
+
+  EdgeSettings?: EdgeTemplateSettings;
+};
+
+/**
+ * EdgeTemplateSettings represents the configuration of a custom template for Edge
+ */
+export type EdgeTemplateSettings = {
+  PrePullImage: boolean;
+
+  RetryDeploy: boolean;
+
+  PrivateRegistryId: RegistryId | undefined;
+
+  RelativePathSettings: RelativePathModel;
 };
 
 export type CustomTemplateFileContent = {
   FileContent: string;
 };
 
-export const CustomTemplateKubernetesType = 3;
+export const CustomTemplateKubernetesType = StackType.Kubernetes;
 
-export enum Types {
+export function getDefaultEdgeTemplateSettings() {
-  SWARM = 1,
+  if (!isBE) {
-  STANDALONE,
+    return undefined;
-  KUBERNETES,
+  }
+
+  return {
+    PrePullImage: false,
+    RetryDeploy: false,
+    PrivateRegistryId: undefined,
+    RelativePathSettings: getDefaultRelativePathModel(),
+  };
 }