feat(edge/templates): introduce custom templates [EE-6208] (#10561)

api/http/handler/customtemplates/customtemplate_create.go

@@ -103,6 +103,8 @@ type customTemplateFromFileContentPayload struct {
 	FileContent string `validate:"required"`
 	// Definitions of variables in the stack file
 	Variables []portainer.CustomTemplateVariableDefinition
+	// EdgeTemplate indicates if this template purpose for Edge Stack
+	EdgeTemplate bool `example:"false"`
 }
 
 func (payload *customTemplateFromFileContentPayload) Validate(r *http.Request) error {
@@ -169,6 +171,7 @@ func (handler *Handler) createCustomTemplateFromFileContent(r *http.Request) (*p
 		Type:         (payload.Type),
 		Logo:         payload.Logo,
 		Variables:    payload.Variables,
+		EdgeTemplate: payload.EdgeTemplate,
 	}
 
 	templateFolder := strconv.Itoa(customTemplateID)
@@ -218,6 +221,8 @@ type customTemplateFromGitRepositoryPayload struct {
 	TLSSkipVerify bool `example:"false"`
 	// IsComposeFormat indicates if the Kubernetes template is created from a Docker Compose file
 	IsComposeFormat bool `example:"false"`
+	// EdgeTemplate indicates if this template purpose for Edge Stack
+	EdgeTemplate bool `example:"false"`
 }
 
 func (payload *customTemplateFromGitRepositoryPayload) Validate(r *http.Request) error {
@@ -264,7 +269,7 @@ func (payload *customTemplateFromGitRepositoryPayload) Validate(r *http.Request)
 // @success 200 {object} portainer.CustomTemplate
 // @failure 400 "Invalid request"
 // @failure 500 "Server error"
-// @router /custom_templates/repository [post]
+// @router /custom_templates/create/repository [post]
 func (handler *Handler) createCustomTemplateFromGitRepository(r *http.Request) (*portainer.CustomTemplate, error) {
 	var payload customTemplateFromGitRepositoryPayload
 	err := request.DecodeAndValidateJSONPayload(r, &payload)
@@ -283,6 +288,7 @@ func (handler *Handler) createCustomTemplateFromGitRepository(r *http.Request) (
 		Logo:            payload.Logo,
 		Variables:       payload.Variables,
 		IsComposeFormat: payload.IsComposeFormat,
+		EdgeTemplate:    payload.EdgeTemplate,
 	}
 
 	getProjectPath := func() string {
@@ -367,6 +373,8 @@ type customTemplateFromFileUploadPayload struct {
 	FileContent []byte
 	// Definitions of variables in the stack file
 	Variables []portainer.CustomTemplateVariableDefinition
+	// EdgeTemplate indicates if this template purpose for Edge Stack
+	EdgeTemplate bool `example:"false"`
 }
 
 func (payload *customTemplateFromFileUploadPayload) Validate(r *http.Request) error {
@@ -419,8 +427,15 @@ func (payload *customTemplateFromFileUploadPayload) Validate(r *http.Request) er
 		if err != nil {
 			return errors.New("Invalid variables. Ensure that the variables are valid JSON")
 		}
-		return validateVariablesDefinitions(payload.Variables)
+		err = validateVariablesDefinitions(payload.Variables)
+		if err != nil {
+			return err
 		}
+	}
+
+	edgeTemplate, _ := request.RetrieveBooleanMultiPartFormValue(r, "EdgeTemplate", true)
+	payload.EdgeTemplate = edgeTemplate
+
 	return nil
 }
 
@@ -444,7 +459,7 @@ func (payload *customTemplateFromFileUploadPayload) Validate(r *http.Request) er
 // @success 200 {object} portainer.CustomTemplate
 // @failure 400 "Invalid request"
 // @failure 500 "Server error"
-// @router /custom_templates/file [post]
+// @router /custom_templates/create/file [post]
 func (handler *Handler) createCustomTemplateFromFileUpload(r *http.Request) (*portainer.CustomTemplate, error) {
 	payload := &customTemplateFromFileUploadPayload{}
 	err := payload.Validate(r)
@@ -463,6 +478,7 @@ func (handler *Handler) createCustomTemplateFromFileUpload(r *http.Request) (*po
 		Logo:         payload.Logo,
 		EntryPoint:   filesystem.ComposeFileDefaultName,
 		Variables:    payload.Variables,
+		EdgeTemplate: payload.EdgeTemplate,
 	}
 
 	templateFolder := strconv.Itoa(customTemplateID)

api/http/handler/customtemplates/customtemplate_update.go

@@ -59,6 +59,8 @@ type customTemplateUpdatePayload struct {
 	TLSSkipVerify bool `example:"false"`
 	// IsComposeFormat indicates if the Kubernetes template is created from a Docker Compose file
 	IsComposeFormat bool `example:"false"`
+	// EdgeTemplate indicates if this template purpose for Edge Stack
+	EdgeTemplate bool `example:"false"`
 }
 
 func (payload *customTemplateUpdatePayload) Validate(r *http.Request) error {
@@ -161,6 +163,7 @@ func (handler *Handler) customTemplateUpdate(w http.ResponseWriter, r *http.Requ
 	customTemplate.Type = payload.Type
 	customTemplate.Variables = payload.Variables
 	customTemplate.IsComposeFormat = payload.IsComposeFormat
+	customTemplate.EdgeTemplate = payload.EdgeTemplate
 
 	if payload.RepositoryURL != "" {
 		if !govalidator.IsURL(payload.RepositoryURL) {

api/http/handler/edgetemplates/edgetemplate_list.go

@@ -18,6 +18,7 @@ type templateFileFormat struct {
 }
 
 // @id EdgeTemplateList
+// @deprecated
 // @summary Fetches the list of Edge Templates
 // @description **Access policy**: administrator
 // @tags edge_templates

api/http/handler/edgetemplates/handler.go

@@ -4,6 +4,7 @@ import (
 	"net/http"
 
 	"github.com/portainer/portainer/api/dataservices"
+	"github.com/portainer/portainer/api/http/middlewares"
 	"github.com/portainer/portainer/api/http/security"
 	httperror "github.com/portainer/portainer/pkg/libhttp/error"
 
@@ -25,7 +26,7 @@ func NewHandler(bouncer security.BouncerService) *Handler {
 	}
 
 	h.Handle("/edge_templates",
-		bouncer.AdminAccess(httperror.LoggerHandler(h.edgeTemplateList))).Methods(http.MethodGet)
+		bouncer.AdminAccess(middlewares.Deprecated(httperror.LoggerHandler(h.edgeTemplateList), func(w http.ResponseWriter, r *http.Request) (string, *httperror.HandlerError) { return "", nil }))).Methods(http.MethodGet)
 
 	return h
 }

api/http/middlewares/deprecated.go

@@ -16,6 +16,12 @@ func Deprecated(router http.Handler, urlBuilder func(w http.ResponseWriter, r *h
 			return
 		}
 
+		if newUrl == "" {
+			log.Warn().Msg("This api is deprecated.")
+			router.ServeHTTP(w, r)
+			return
+		}
+
 		log.Warn().Msgf("This api is deprecated. Use %s instead", newUrl)
 
 		redirectedRequest := r.Clone(r.Context())

api/portainer.go

@@ -187,6 +187,8 @@ type (
 		GitConfig       *gittypes.RepoConfig `json:"GitConfig"`
 		// IsComposeFormat indicates if the Kubernetes template is created from a Docker Compose file
 		IsComposeFormat bool `example:"false"`
+		// EdgeTemplate indicates if this template purpose for Edge Stack
+		EdgeTemplate bool `example:"false"`
 	}
 
 	// CustomTemplateID represents a custom template identifier

app/edge/__module.js

@@ -62,7 +62,7 @@ angular
 
     const stacksNew = {
       name: 'edge.stacks.new',
-      url: '/new',
+      url: '/new?templateId',
       views: {
         'content@': {
           component: 'createEdgeStackView',
@@ -150,6 +150,44 @@ angular
           component: 'edgeAppTemplatesView',
         },
       },
+      data: {
+        docs: '/user/edge/templates',
+      },
+    });
+
+    $stateRegistryProvider.register({
+      name: 'edge.templates.custom',
+      url: '/custom',
+      views: {
+        'content@': {
+          component: 'edgeCustomTemplatesView',
+        },
+      },
+      data: {
+        docs: '/user/edge/templates/custom',
+      },
+    });
+
+    $stateRegistryProvider.register({
+      name: 'edge.templates.custom.new',
+      url: '/new?appTemplateId&type',
+
+      views: {
+        'content@': {
+          component: 'edgeCreateCustomTemplatesView',
+        },
+      },
+    });
+
+    $stateRegistryProvider.register({
+      name: 'edge.templates.custom.edit',
+      url: '/:templateId',
+
+      views: {
+        'content@': {
+          component: 'edgeEditCustomTemplatesView',
+        },
+      },
     });
 
     $stateRegistryProvider.register(edge);

app/edge/react/components/index.ts

@@ -13,6 +13,7 @@ import { withUIRouter } from '@/react-tools/withUIRouter';
 import { EdgeGroupAssociationTable } from '@/react/edge/components/EdgeGroupAssociationTable';
 import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/AssociatedEdgeEnvironmentsSelector';
 import { EnvironmentsDatatable } from '@/react/edge/edge-stacks/ItemView/EnvironmentsDatatable';
+import { TemplateFieldset } from '@/react/edge/edge-stacks/CreateView/TemplateFieldset';
 
 export const componentsModule = angular
   .module('portainer.edge.react.components', [])
@@ -99,4 +100,8 @@ export const componentsModule = angular
       'onChange',
       'value',
     ])
+  )
+  .component(
+    'edgeStackCreateTemplateFieldset',
+    r2a(withReactQuery(TemplateFieldset), ['onChange', 'value', 'onChangeFile'])
   ).name;

app/edge/react/views/templates.ts

@@ -3,12 +3,26 @@ import angular from 'angular';
 import { r2a } from '@/react-tools/react2angular';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withUIRouter } from '@/react-tools/withUIRouter';
+import { ListView } from '@/react/edge/templates/custom-templates/ListView';
+import { CreateView } from '@/react/edge/templates/custom-templates/CreateView';
+import { EditView } from '@/react/edge/templates/custom-templates/EditView';
 import { AppTemplatesView } from '@/react/edge/templates/AppTemplatesView';
 
 export const templatesModule = angular
   .module('portainer.app.react.components.templates', [])
-
   .component(
     'edgeAppTemplatesView',
     r2a(withCurrentUser(withUIRouter(AppTemplatesView)), [])
+  )
+  .component(
+    'edgeCustomTemplatesView',
+    r2a(withCurrentUser(withUIRouter(ListView)), [])
+  )
+  .component(
+    'edgeCreateCustomTemplatesView',
+    r2a(withCurrentUser(withUIRouter(CreateView)), [])
+  )
+  .component(
+    'edgeEditCustomTemplatesView',
+    r2a(withCurrentUser(withUIRouter(EditView)), [])
   ).name;

app/edge/rest/edge-templates.js

@@ -1,11 +0,0 @@
-import angular from 'angular';
-
-angular.module('portainer.edge').factory('EdgeTemplates', function EdgeStacksFactory($resource, API_ENDPOINT_EDGE_TEMPLATES) {
-  return $resource(
-    API_ENDPOINT_EDGE_TEMPLATES,
-    {},
-    {
-      query: { method: 'GET', isArray: true },
-    }
-  );
-});

app/edge/services/edge-template.js

@@ -1,23 +0,0 @@
-import angular from 'angular';
-
-class EdgeTemplateService {
-  /* @ngInject */
-  constructor(EdgeTemplates) {
-    this.EdgeTemplates = EdgeTemplates;
-  }
-
-  edgeTemplates() {
-    return this.EdgeTemplates.query().$promise;
-  }
-
-  async edgeTemplate(template) {
-    const response = await fetch(template.stackFile);
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-
-    return response.text();
-  }
-}
-
-angular.module('portainer.edge').service('EdgeTemplateService', EdgeTemplateService);

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

@@ -5,11 +5,14 @@ import { confirmWebEditorDiscard } from '@@/modals/confirm';
 import { baseEdgeStackWebhookUrl } from '@/portainer/helpers/webhookHelper';
 import { EnvironmentType } from '@/react/portainer/environments/types';
 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';
 
 export default class CreateEdgeStackViewController {
   /* @ngInject */
-  constructor($state, $window, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async, $scope) {
+  constructor($state, $window, EdgeStackService, EdgeGroupService, Notifications, FormHelper, $async, $scope) {
-    Object.assign(this, { $state, $window, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async, $scope });
+    Object.assign(this, { $state, $window, EdgeStackService, EdgeGroupService, Notifications, FormHelper, $async, $scope });
 
     this.formValues = {
       Name: '',
@@ -41,6 +44,8 @@ export default class CreateEdgeStackViewController {
       hasKubeEndpoint: false,
       endpointTypes: [],
       baseWebhookUrl: baseEdgeStackWebhookUrl(),
+      isEdit: false,
+      selectedTemplate: null,
     };
 
     this.edgeGroups = null;
@@ -57,6 +62,16 @@ export default class CreateEdgeStackViewController {
     this.hasType = this.hasType.bind(this);
     this.onChangeDeploymentType = this.onChangeDeploymentType.bind(this);
     this.onEnvVarChange = this.onEnvVarChange.bind(this);
+    this.onChangeTemplate = this.onChangeTemplate.bind(this);
+  }
+
+  /**
+   * @param {import('@/react/portainer/templates/custom-templates/types').CustomTemplate} template
+   */
+  onChangeTemplate(template) {
+    return this.$scope.$evalAsync(() => {
+      this.state.selectedTemplate = template;
+    });
   }
 
   onEnvVarChange(envVars) {
@@ -70,7 +85,7 @@ export default class CreateEdgeStackViewController {
     const metadata = { type: methodLabel(this.state.Method), format };
 
     if (metadata.type === 'template') {
-      metadata.templateName = this.selectedTemplate.title;
+      metadata.templateName = this.state.selectedTemplate && this.state.selectedTemplate.title;
     }
 
     return { metadata };
@@ -95,6 +110,18 @@ export default class CreateEdgeStackViewController {
     }
   }
 
+  async preSelectTemplate(templateId) {
+    try {
+      this.state.Method = 'template';
+      const template = await getCustomTemplate(templateId);
+      this.onChangeTemplate(template);
+      const fileContent = await getCustomTemplateFile({ id: templateId, git: !!template.GitConfig });
+      this.formValues.StackFileContent = fileContent;
+    } catch (e) {
+      notifyError('Failed loading template', e);
+    }
+  }
+
   async $onInit() {
     try {
       this.edgeGroups = await this.EdgeGroupService.groups();
@@ -102,6 +129,11 @@ export default class CreateEdgeStackViewController {
       this.Notifications.error('Failure', err, 'Unable to retrieve Edge groups');
     }
 
+    const templateId = this.$state.params.templateId;
+    if (templateId) {
+      this.preSelectTemplate(templateId);
+    }
+
     this.$window.onbeforeunload = () => {
       if (this.state.Method === 'editor' && this.formValues.StackFileContent && this.state.isEditorDirty) {
         return '';

app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html

@@ -57,6 +57,8 @@
             ng-if="$ctrl.formValues.DeploymentType == $ctrl.EditorType.Compose"
             form-values="$ctrl.formValues"
             state="$ctrl.state"
+            template="$ctrl.state.selectedTemplate"
+            on-change-template="($ctrl.onChangeTemplate)"
           ></edge-stacks-docker-compose-form>
 
           <edge-stacks-kube-manifest-form

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.controller.js

@@ -1,18 +1,14 @@
-import { fetchFilePreview } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateInfoMutation';
 import { editor, git, edgeStackTemplate, upload } from '@@/BoxSelector/common-options/build-methods';
 
 class DockerComposeFormController {
   /* @ngInject */
-  constructor($async, EdgeTemplateService, Notifications) {
+  constructor($async, Notifications) {
-    Object.assign(this, { $async, EdgeTemplateService, Notifications });
+    Object.assign(this, { $async, Notifications });
 
     this.methodOptions = [editor, upload, git, edgeStackTemplate];
 
-    this.selectedTemplate = null;
-
     this.onChangeFileContent = this.onChangeFileContent.bind(this);
     this.onChangeFile = this.onChangeFile.bind(this);
-    this.onChangeTemplate = this.onChangeTemplate.bind(this);
     this.onChangeMethod = this.onChangeMethod.bind(this);
     this.onChangeFormValues = this.onChangeFormValues.bind(this);
   }
@@ -29,24 +25,13 @@ class DockerComposeFormController {
   onChangeMethod(method) {
     this.state.Method = method;
     this.formValues.StackFileContent = '';
-    this.selectedTemplate = null;
-  }
-
-  onChangeTemplate(template) {
-    return this.$async(async () => {
-      this.formValues.StackFileContent = '';
-      try {
-        const fileContent = await fetchFilePreview(template.id);
-        this.formValues.StackFileContent = fileContent;
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to retrieve Template');
-      }
-    });
   }
 
   onChangeFileContent(value) {
+    return this.$async(async () => {
       this.formValues.StackFileContent = value;
       this.state.isEditorDirty = true;
+    });
   }
 
   onChangeFile(value) {
@@ -54,17 +39,6 @@ class DockerComposeFormController {
       this.formValues.StackFile = value;
     });
   }
-
-  async $onInit() {
-    return this.$async(async () => {
-      try {
-        const templates = await this.EdgeTemplateService.edgeTemplates();
-        this.templates = templates.map((template) => ({ ...template, label: `${template.title} - ${template.description}` }));
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to retrieve Templates');
-      }
-    });
-  }
 }
 
 export default DockerComposeFormController;

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.html

@@ -1,14 +1,25 @@
 <div class="col-sm-12 form-section-title"> Build method </div>
 <box-selector slim="true" radio-name="'method'" value="$ctrl.state.Method" options="$ctrl.methodOptions" on-change="($ctrl.onChangeMethod)"></box-selector>
 
+<!-- template -->
+<div ng-if="$ctrl.state.Method === 'template'">
+  <edge-stack-create-template-fieldset
+    value="$ctrl.template"
+    on-change="($ctrl.onChangeTemplate)"
+    on-change-file="($ctrl.onChangeFileContent)"
+  ></edge-stack-create-template-fieldset>
+</div>
+<!-- !template -->
+
 <web-editor-form
-  ng-if="$ctrl.state.Method === 'editor'"
+  ng-if="$ctrl.state.Method === 'editor' || ($ctrl.state.Method === 'template' && $ctrl.template)"
   identifier="stack-creation-editor"
   value="$ctrl.formValues.StackFileContent"
   on-change="($ctrl.onChangeFileContent)"
   ng-required="true"
   yml="true"
   placeholder="Define or paste the content of your docker compose file here"
+  read-only="$ctrl.state.Method === 'template' && $ctrl.template.GitConfig"
 >
   <editor-description>
     You can get more information about Compose file format in the
@@ -21,51 +32,12 @@
   <file-upload-description> You can upload a Compose file from your computer. </file-upload-description>
 </file-upload-form>
 
-<git-form
+<div ng-if="$ctrl.state.Method == 'repository'">
-  ng-if="$ctrl.state.Method === 'repository'"
+  <git-form
     value="$ctrl.formValues"
     on-change="($ctrl.onChangeFormValues)"
     base-webhook-url="{{ $ctrl.state.baseWebhookUrl }}"
     webhook-id="{{ $ctrl.state.webhookId }}"
     docs-links
-></git-form>
+  ></git-form>
-
-<!-- template -->
-<div ng-if="$ctrl.state.Method === 'template'">
-  <div class="form-group">
-    <label for="stack_template" class="col-sm-1 control-label text-left"> Template </label>
-    <div class="col-sm-11">
-      <select
-        class="form-control"
-        ng-model="$ctrl.selectedTemplate"
-        ng-options="template as template.label for template in $ctrl.templates"
-        ng-change="$ctrl.onChangeTemplate($ctrl.selectedTemplate)"
-      >
-        <option value="" label="Select an Edge stack template" disabled selected="selected"> </option>
-      </select>
-    </div>
-  </div>
-  <!-- description -->
-  <div ng-if="$ctrl.selectedTemplate.note">
-    <div class="col-sm-12 form-section-title"> Information </div>
-    <div class="form-group">
-      <div class="col-sm-12">
-        <div class="template-note" ng-bind-html="$ctrl.selectedTemplate.note"></div>
-      </div>
-    </div>
-  </div>
-  <!-- !description -->
-
-  <web-editor-form
-    ng-if="$ctrl.selectedTemplate && $ctrl.formValues.StackFileContent"
-    identifier="template-content-editor"
-    value="$ctrl.formValues.StackFileContent"
-    on-change="($ctrl.onChangeFileContent)"
-    yml="true"
-    placeholder="Define or paste the content of your docker compose file here"
-    ng-required="true"
-  >
-  </web-editor-form>
-
-  <!-- !template -->
 </div>

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/index.js

@@ -7,5 +7,7 @@ export const edgeStacksDockerComposeForm = {
   bindings: {
     formValues: '=',
     state: '=',
+    template: '<',
+    onChangeTemplate: '<',
   },
 };

app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js

@@ -1,6 +1,5 @@
 import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
-import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
+import { getTemplateVariables, intersectVariables, isTemplateVariablesEnabled } from '@/react/portainer/custom-templates/components/utils';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { editor, upload, git } from '@@/BoxSelector/common-options/build-methods';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
 import { KUBE_TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
@@ -13,7 +12,7 @@ class KubeCreateCustomTemplateViewController {
     this.methodOptions = [editor, upload, git];
 
     this.templates = null;
-    this.isTemplateVariablesEnabled = isBE;
+    this.isTemplateVariablesEnabled = isTemplateVariablesEnabled;
 
     this.state = {
       method: 'editor',
@@ -83,7 +82,7 @@ class KubeCreateCustomTemplateViewController {
       return;
     }
 
-    const variables = getTemplateVariables(templateStr);
+    const [variables] = getTemplateVariables(templateStr);
 
     const isValid = !!variables;
 

app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.controller.js

@@ -24,8 +24,8 @@ export default class KubeCustomTemplatesViewController {
     this.selectTemplate = this.selectTemplate.bind(this);
   }
 
-  selectTemplate(template) {
+  selectTemplate(templateId) {
-    this.$state.go('kubernetes.deploy', { templateId: template });
+    this.$state.go('kubernetes.deploy', { templateId });
   }
 
   isEditAllowed(template) {
@@ -36,7 +36,8 @@ export default class KubeCustomTemplatesViewController {
   getTemplates() {
     return this.$async(async () => {
       try {
-        this.templates = await this.CustomTemplateService.customTemplates(3);
+        const templates = await this.CustomTemplateService.customTemplates(3);
+        this.templates = templates.filter((t) => !t.EdgeTemplate);
       } catch (err) {
         this.Notifications.error('Failed loading templates', err, 'Unable to load custom templates');
       }

app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js

@@ -1,7 +1,6 @@
 import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+import { getTemplateVariables, intersectVariables, isTemplateVariablesEnabled } from '@/react/portainer/custom-templates/components/utils';
-import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
 import { getFilePreview } from '@/react/portainer/gitops/gitops.service';
 import { KUBE_TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
@@ -11,7 +10,7 @@ class KubeEditCustomTemplateViewController {
   constructor($async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
     Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
 
-    this.isTemplateVariablesEnabled = isBE;
+    this.isTemplateVariablesEnabled = isTemplateVariablesEnabled;
 
     this.formValues = {
       Variables: [],
@@ -112,7 +111,7 @@ class KubeEditCustomTemplateViewController {
       return;
     }
 
-    const variables = getTemplateVariables(templateStr);
+    const [variables] = getTemplateVariables(templateStr);
 
     const isValid = !!variables;
 

app/kubernetes/views/deploy/deployController.js

@@ -4,14 +4,14 @@ import stripAnsi from 'strip-ansi';
 
 import PortainerError from '@/portainer/error';
 import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods, RepositoryMechanismTypes } from 'Kubernetes/models/deploy';
-import { renderTemplate } from '@/react/portainer/custom-templates/components/utils';
+import { isTemplateVariablesEnabled, renderTemplate } from '@/react/portainer/custom-templates/components/utils';
 import { getDeploymentOptions } from '@/react/portainer/environments/environment.service';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { kubernetes } from '@@/BoxSelector/common-options/deployment-methods';
 import { editor, git, customTemplate, url, helm } from '@@/BoxSelector/common-options/build-methods';
 import { parseAutoUpdateResponse, transformAutoUpdateViewModel } from '@/react/portainer/gitops/AutoUpdateFieldset/utils';
 import { baseStackWebhookUrl, createWebhookId } from '@/portainer/helpers/webhookHelper';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
+import { getVariablesFieldDefaultValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
 
 class KubernetesDeployController {
   /* @ngInject */
@@ -25,7 +25,7 @@ class KubernetesDeployController {
     this.StackService = StackService;
     this.CustomTemplateService = CustomTemplateService;
 
-    this.isTemplateVariablesEnabled = isBE;
+    this.isTemplateVariablesEnabled = isTemplateVariablesEnabled;
 
     this.deployOptions = [{ ...kubernetes, value: KubernetesDeployManifestTypes.KUBERNETES }];
 
@@ -72,7 +72,7 @@ class KubernetesDeployController {
       RepositoryPassword: '',
       AdditionalFiles: [],
       ComposeFilePathInRepository: '',
-      Variables: {},
+      Variables: [],
       AutoUpdate: parseAutoUpdateResponse(),
       TLSSkipVerify: false,
       Name: '',
@@ -220,7 +220,7 @@ class KubernetesDeployController {
         }
 
         if (template.Variables && template.Variables.length > 0) {
-          const variables = Object.fromEntries(template.Variables.map((variable) => [variable.name, '']));
+          const variables = getVariablesFieldDefaultValues(template.Variables);
           this.onChangeTemplateVariables(variables);
         }
       } catch (err) {

app/portainer/react/components/custom-templates/index.ts

@@ -26,6 +26,7 @@ export const ngModule = angular
       'value',
       'onChange',
       'definitions',
+      'errors',
     ])
   )
   .component('customTemplatesVariablesField', VariablesFieldAngular)
@@ -46,7 +47,6 @@ export const ngModule = angular
       'selectedId',
       'disabledTypes',
       'fixedCategories',
-      'hideDuplicate',
     ])
   )
   .component(
@@ -56,6 +56,7 @@ export const ngModule = angular
       'onSelect',
       'templates',
       'selectedId',
+      'templateLinkParams',
     ])
   )
   .component(

app/portainer/services/axios.ts

@@ -101,3 +101,30 @@ export function isAxiosError<
 >(error: unknown): error is AxiosError<ResponseType> {
   return axiosOrigin.isAxiosError(error);
 }
+
+export function arrayToJson<T>(arr?: Array<T>) {
+  if (!arr) {
+    return '';
+  }
+
+  return JSON.stringify(arr);
+}
+
+export function json2formData(json: Record<string, unknown>) {
+  const formData = new FormData();
+
+  Object.entries(json).forEach(([key, value]) => {
+    if (typeof value === 'undefined' || value === null) {
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      formData.append(key, arrayToJson(value));
+      return;
+    }
+
+    formData.append(key, value as string);
+  });
+
+  return formData;
+}

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js

@@ -1,11 +1,10 @@
 import _ from 'lodash';
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
-import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
+import { getTemplateVariables, intersectVariables, isTemplateVariablesEnabled } from '@/react/portainer/custom-templates/components/utils';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { editor, upload, git } from '@@/BoxSelector/common-options/build-methods';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
-import { fetchFilePreview } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateInfoMutation';
+import { fetchFilePreview } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateFile';
 
 class CreateCustomTemplateViewController {
   /* @ngInject */
@@ -26,7 +25,7 @@ class CreateCustomTemplateViewController {
 
     this.buildMethods = [editor, upload, git];
 
-    this.isTemplateVariablesEnabled = isBE;
+    this.isTemplateVariablesEnabled = isTemplateVariablesEnabled;
 
     this.formValues = {
       Title: '',
@@ -207,7 +206,7 @@ class CreateCustomTemplateViewController {
       return;
     }
 
-    const variables = getTemplateVariables(templateStr);
+    const [variables] = getTemplateVariables(templateStr);
 
     const isValid = !!variables;
 

app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js

@@ -1,9 +1,9 @@
 import _ from 'lodash-es';
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
-import { renderTemplate } from '@/react/portainer/custom-templates/components/utils';
+import { isTemplateVariablesEnabled, renderTemplate } from '@/react/portainer/custom-templates/components/utils';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { confirmDelete } from '@@/modals/confirm';
+import { getVariablesFieldDefaultValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
 
 class CustomTemplatesViewController {
   /* @ngInject */
@@ -34,7 +34,7 @@ class CustomTemplatesViewController {
     this.StateManager = StateManager;
     this.StackService = StackService;
 
-    this.isTemplateVariablesEnabled = isBE;
+    this.isTemplateVariablesEnabled = isTemplateVariablesEnabled;
 
     this.DOCKER_STANDALONE = 'DOCKER_STANDALONE';
     this.DOCKER_SWARM_MODE = 'DOCKER_SWARM_MODE';
@@ -93,7 +93,8 @@ class CustomTemplatesViewController {
   }
   async getTemplatesAsync() {
     try {
-      this.templates = await this.CustomTemplateService.customTemplates([1, 2]);
+      const templates = await this.CustomTemplateService.customTemplates([1, 2]);
+      this.templates = templates.filter((t) => !t.EdgeTemplate);
     } catch (err) {
       this.Notifications.error('Failed loading templates', err, 'Unable to load custom templates');
     }
@@ -221,7 +222,7 @@ class CustomTemplatesViewController {
     this.state.deployable = this.isDeployable(applicationState.endpoint, template.Type);
 
     if (template.Variables && template.Variables.length > 0) {
-      const variables = Object.fromEntries(template.Variables.map((variable) => [variable.name, '']));
+      const variables = getVariablesFieldDefaultValues(template.Variables);
       this.onChangeTemplateVariables(variables);
     }
   }

app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js

@@ -4,8 +4,7 @@ import { ResourceControlViewModel } from '@/react/portainer/access-control/model
 import { TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
 
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
-import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
+import { getTemplateVariables, intersectVariables, isTemplateVariablesEnabled } from '@/react/portainer/custom-templates/components/utils';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
 
 class EditCustomTemplateViewController {
@@ -13,7 +12,7 @@ class EditCustomTemplateViewController {
   constructor($async, $state, $window, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
     Object.assign(this, { $async, $state, $window, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
 
-    this.isTemplateVariablesEnabled = isBE;
+    this.isTemplateVariablesEnabled = isTemplateVariablesEnabled;
 
     this.formValues = {
       Variables: [],
@@ -178,7 +177,7 @@ class EditCustomTemplateViewController {
       return;
     }
 
-    const variables = getTemplateVariables(templateStr);
+    const [variables] = getTemplateVariables(templateStr);
 
     const isValid = !!variables;
 

app/portainer/views/stacks/create/createStackController.js

@@ -4,12 +4,12 @@ import { AccessControlFormData } from '@/portainer/components/accessControlForm/
 import { STACK_NAME_VALIDATION_REGEX } from '@/react/constants';
 import { RepositoryMechanismTypes } from '@/kubernetes/models/deploy';
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+import { isTemplateVariablesEnabled, renderTemplate } from '@/react/portainer/custom-templates/components/utils';
-import { renderTemplate } from '@/react/portainer/custom-templates/components/utils';
 import { editor, upload, git, customTemplate } from '@@/BoxSelector/common-options/build-methods';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
 import { parseAutoUpdateResponse, transformAutoUpdateViewModel } from '@/react/portainer/gitops/AutoUpdateFieldset/utils';
 import { baseStackWebhookUrl, createWebhookId } from '@/portainer/helpers/webhookHelper';
+import { getVariablesFieldDefaultValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
 
 angular
   .module('portainer.app')
@@ -28,13 +28,12 @@ angular
       FormHelper,
       StackHelper,
       ContainerHelper,
-      CustomTemplateService,
       ContainerService,
       endpoint
     ) {
       $scope.onChangeTemplateId = onChangeTemplateId;
       $scope.onChangeTemplateVariables = onChangeTemplateVariables;
-      $scope.isTemplateVariablesEnabled = isBE;
+      $scope.isTemplateVariablesEnabled = isTemplateVariablesEnabled;
       $scope.buildAnalyticsProperties = buildAnalyticsProperties;
       $scope.stackWebhookFeature = FeatureId.STACK_WEBHOOK;
       $scope.buildMethods = [editor, upload, git, customTemplate];
@@ -54,7 +53,7 @@ angular
         ComposeFilePathInRepository: 'docker-compose.yml',
         AccessControlData: new AccessControlFormData(),
         EnableWebhook: false,
-        Variables: {},
+        Variables: [],
         AutoUpdate: parseAutoUpdateResponse(),
         TLSSkipVerify: false,
       };
@@ -313,7 +312,7 @@ angular
             }
 
             if (template.Variables && template.Variables.length > 0) {
-              const variables = Object.fromEntries(template.Variables.map((variable) => [variable.name, '']));
+              const variables = getVariablesFieldDefaultValues(template.Variables);
               onChangeTemplateVariables(variables);
             }
           } catch (err) {

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 text-left',
+        'blocklist-item flex items-stretch overflow-hidden bg-transparent w-full !ml-0 no-link text-left',
         {
           'blocklist-item--selected': isSelected,
         }

app/react/components/WebEditorForm.tsx

@@ -1,4 +1,5 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect, useMemo } from 'react';
+import { useTransitionHook } from '@uirouter/react';
 
 import { BROWSER_OS_PLATFORM } from '@/react/constants';
 
@@ -6,6 +7,10 @@ import { CodeEditor } from '@@/CodeEditor';
 import { Tooltip } from '@@/Tip/Tooltip';
 
 import { FormSectionTitle } from './form-components/FormSectionTitle';
+import { FormError } from './form-components/FormError';
+import { confirm } from './modals/confirm';
+import { ModalType } from './modals';
+import { buildConfirmButton } from './modals/utils';
 
 const otherEditorConfig = {
   tooltip: (
@@ -91,6 +96,8 @@ export function WebEditorForm({
           </div>
         )}
 
+        {error && <FormError>{error}</FormError>}
+
         <div className="form-group">
           <div className="col-sm-12 col-lg-12">
             <CodeEditor
@@ -104,11 +111,59 @@ export function WebEditorForm({
             />
           </div>
         </div>
-
-        <div className="form-group">
-          <div className="col-sm-12 col-lg-12">{error}</div>
-        </div>
       </div>
     </div>
   );
 }
+
+export function usePreventExit(
+  initialValue: string,
+  value: string,
+  check: boolean
+) {
+  const isChanged = useMemo(
+    () => cleanText(initialValue) !== cleanText(value),
+    [initialValue, value]
+  );
+
+  const preventExit = check && isChanged;
+
+  // when navigating away from the page with unsaved changes, show a portainer prompt to confirm
+  useTransitionHook('onBefore', {}, async () => {
+    if (!preventExit) {
+      return true;
+    }
+    const confirmed = await confirm({
+      modalType: ModalType.Warn,
+      title: 'Are you sure?',
+      message:
+        'You currently have unsaved changes in the text editor. Are you sure you want to leave?',
+      confirmButton: buildConfirmButton('Yes', 'danger'),
+    });
+    return confirmed;
+  });
+
+  // when reloading or exiting the page with unsaved changes, show a browser prompt to confirm
+  useEffect(() => {
+    function handler(event: BeforeUnloadEvent) {
+      if (!preventExit) {
+        return undefined;
+      }
+
+      event.preventDefault();
+      // eslint-disable-next-line no-param-reassign
+      event.returnValue = '';
+      return '';
+    }
+
+    // if the form is changed, then set the onbeforeunload
+    window.addEventListener('beforeunload', handler);
+    return () => {
+      window.removeEventListener('beforeunload', handler);
+    };
+  }, [preventExit]);
+}
+
+function cleanText(value: string) {
+  return value.replace(/(\r\n|\n|\r)/gm, '');
+}

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

@@ -1,13 +1,16 @@
 import { PropsWithChildren } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { LoadingButton } from '@@/buttons';
 
-interface Props {
+import { FormSection } from './FormSection';
+
+interface Props extends AutomationTestingProps {
   submitLabel: string;
   loadingText: string;
   isLoading: boolean;
   isValid: boolean;
-  'data-cy'?: string;
 }
 
 export function FormActions({
@@ -19,6 +22,7 @@ export function FormActions({
   'data-cy': dataCy,
 }: PropsWithChildren<Props>) {
   return (
+    <FormSection title="Actions">
       <div className="form-group">
         <div className="col-sm-12">
           <LoadingButton
@@ -34,5 +38,6 @@ export function FormActions({
           {children}
         </div>
       </div>
+    </FormSection>
   );
 }

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

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import sanitize from 'sanitize-html';
+
+import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
+import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
+import { useCustomTemplateFileMutation } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplateFile';
+import {
+  CustomTemplatesVariablesField,
+  VariablesFieldValue,
+  getVariablesFieldDefaultValues,
+} from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
+import { renderTemplate } from '@/react/portainer/custom-templates/components/utils';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { PortainerSelect } from '@@/form-components/PortainerSelect';
+
+export function TemplateFieldset({
+  value: selectedTemplate,
+  onChange,
+  onChangeFile,
+}: {
+  value: CustomTemplate | undefined;
+  onChange: (value?: CustomTemplate) => void;
+  onChangeFile: (value: string) => void;
+}) {
+  const fetchFileMutation = useCustomTemplateFileMutation();
+  const [templateFile, setTemplateFile] = useState('');
+  const templatesQuery = useCustomTemplates({
+    select: (templates) =>
+      templates.filter((template) => template.EdgeTemplate),
+  });
+
+  const [variableValues, setVariableValues] = useState<VariablesFieldValue>([]);
+
+  return (
+    <>
+      <TemplateSelector
+        value={selectedTemplate?.Id}
+        onChange={handleChangeTemplate}
+      />
+      {selectedTemplate && (
+        <>
+          {selectedTemplate.Note && (
+            <div>
+              <div className="col-sm-12 form-section-title"> Information </div>
+              <div className="form-group">
+                <div className="col-sm-12">
+                  <div
+                    className="template-note"
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML={{
+                      __html: sanitize(selectedTemplate.Note),
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          <CustomTemplatesVariablesField
+            onChange={(value) => {
+              setVariableValues(value);
+              onChangeFile(
+                renderTemplate(templateFile, value, selectedTemplate.Variables)
+              );
+            }}
+            value={variableValues}
+            definitions={selectedTemplate.Variables}
+          />
+        </>
+      )}
+    </>
+  );
+
+  function handleChangeTemplate(templateId: CustomTemplate['Id'] | undefined) {
+    const selectedTemplate = templatesQuery.data?.find(
+      (template) => template.Id === templateId
+    );
+    if (!selectedTemplate) {
+      setVariableValues([]);
+      onChange(undefined);
+      return;
+    }
+
+    fetchFileMutation.mutate(
+      { id: selectedTemplate.Id, git: !!selectedTemplate.GitConfig },
+      {
+        onSuccess: (data) => {
+          setTemplateFile(data);
+          onChangeFile(
+            renderTemplate(
+              data,
+              getVariablesFieldDefaultValues(selectedTemplate.Variables),
+              selectedTemplate.Variables
+            )
+          );
+        },
+      }
+    );
+    setVariableValues(
+      selectedTemplate
+        ? getVariablesFieldDefaultValues(selectedTemplate.Variables)
+        : []
+    );
+    onChange(selectedTemplate);
+  }
+}
+
+function TemplateSelector({
+  value,
+  onChange,
+}: {
+  value: CustomTemplate['Id'] | undefined;
+  onChange: (value: CustomTemplate['Id'] | undefined) => void;
+}) {
+  const templatesQuery = useCustomTemplates({
+    select: (templates) =>
+      templates.filter((template) => template.EdgeTemplate),
+  });
+
+  if (!templatesQuery.data) {
+    return null;
+  }
+
+  return (
+    <FormControl label="Template" inputId="stack_template">
+      <PortainerSelect
+        placeholder="Select an Edge stack template"
+        value={value}
+        onChange={handleChange}
+        options={templatesQuery.data.map((template) => ({
+          label: `${template.Title} - ${template.Description}`,
+          value: template.Id,
+        }))}
+      />
+    </FormControl>
+  );
+
+  function handleChange(value: CustomTemplate['Id']) {
+    onChange(value);
+  }
+}

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

@@ -34,7 +34,6 @@ export function AppTemplatesView() {
         onSelect={(template) => setSelectedTemplateId(template.Id)}
         disabledTypes={[TemplateType.Container]}
         fixedCategories={['edge']}
-        hideDuplicate
       />
     </>
   );

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

@@ -0,0 +1,107 @@
+import { Formik } from 'formik';
+import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
+
+import { StackType } from '@/react/common/stacks/types';
+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 { editor } from '@@/BoxSelector/common-options/build-methods';
+
+import { InnerForm } from './InnerForm';
+import { FormValues } from './types';
+import { useValidation } from './useValidation';
+
+export function CreateTemplateForm() {
+  const router = useRouter();
+  const mutation = useCreateTemplateMutation();
+  const validation = useValidation();
+  const { appTemplateId, type } = useParams();
+
+  const fileContentQuery = useFetchTemplateFile(appTemplateId);
+
+  if (fileContentQuery.isLoading) {
+    return null;
+  }
+
+  const initialValues: FormValues = {
+    Title: '',
+    FileContent: fileContentQuery.data ?? '',
+    Type: type,
+    File: undefined,
+    Method: editor.value,
+    Description: '',
+    Note: '',
+    Logo: '',
+    Platform: Platform.LINUX,
+    Variables: [],
+    Git: {
+      RepositoryURL: '',
+      RepositoryReferenceName: '',
+      RepositoryAuthentication: false,
+      RepositoryUsername: '',
+      RepositoryPassword: '',
+      ComposeFilePathInRepository: 'docker-compose.yml',
+      AdditionalFiles: [],
+      RepositoryURLValid: true,
+      TLSSkipVerify: false,
+    },
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validationSchema={validation}
+      validateOnMount
+    >
+      <InnerForm isLoading={mutation.isLoading} />
+    </Formik>
+  );
+
+  function handleSubmit(values: FormValues) {
+    mutation.mutate(
+      { ...values, EdgeTemplate: true },
+      {
+        onSuccess() {
+          notifySuccess('Success', 'Template created');
+          router.stateService.go('^');
+        },
+      }
+    );
+  }
+}
+
+function useParams() {
+  const {
+    params: { type = StackType.DockerCompose, appTemplateId },
+  } = useCurrentStateAndParams();
+
+  return {
+    type: getStackType(type),
+    appTemplateId: getTemplateId(appTemplateId),
+  };
+
+  function getStackType(type: string): StackType {
+    const typeNum = parseInt(type, 10);
+
+    if (
+      [
+        StackType.DockerSwarm,
+        StackType.DockerCompose,
+        StackType.Kubernetes,
+      ].includes(typeNum)
+    ) {
+      return typeNum;
+    }
+
+    return StackType.DockerCompose;
+  }
+
+  function getTemplateId(appTemplateId: string): number | undefined {
+    const id = parseInt(appTemplateId, 10);
+
+    return Number.isNaN(id) ? undefined : id;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+
+import { CreateTemplateForm } from './CreateTemplateForm';
+
+export function CreateView() {
+  return (
+    <div>
+      <PageHeader
+        title="Create Custom template"
+        breadcrumbs={[
+          { label: 'Custom Templates', link: '^' },
+          'Create Custom template',
+        ]}
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <Widget.Body>
+              <CreateTemplateForm />
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,172 @@
+import { Form, useFormikContext } from 'formik';
+
+import { CommonFields } from '@/react/portainer/custom-templates/components/CommonFields';
+import { CustomTemplatesVariablesDefinitionField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { PlatformField } from '@/react/portainer/custom-templates/components/PlatformSelector';
+import { GitForm } from '@/react/portainer/gitops/GitForm';
+import {
+  getTemplateVariables,
+  intersectVariables,
+  isTemplateVariablesEnabled,
+} from '@/react/portainer/custom-templates/components/utils';
+import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
+
+import { BoxSelector } from '@@/BoxSelector';
+import { WebEditorForm, usePreventExit } from '@@/WebEditorForm';
+import { FileUploadForm } from '@@/form-components/FileUpload';
+import { FormActions } from '@@/form-components/FormActions';
+import { FormSection } from '@@/form-components/FormSection';
+import {
+  editor,
+  upload,
+  git,
+} from '@@/BoxSelector/common-options/build-methods';
+
+import { FormValues, Method, buildMethods } from './types';
+
+export function InnerForm({ isLoading }: { isLoading: boolean }) {
+  const {
+    values,
+    initialValues,
+    setFieldValue,
+    errors,
+    isValid,
+    setFieldError,
+    setValues,
+    isSubmitting,
+  } = useFormikContext<FormValues>();
+
+  usePreventExit(
+    initialValues.FileContent,
+    values.FileContent,
+    values.Method === editor.value && !isSubmitting
+  );
+  return (
+    <Form className="form-horizontal">
+      <CommonFields
+        values={values}
+        onChange={(newValues) =>
+          setValues((values) => ({ ...values, ...newValues }))
+        }
+        errors={errors}
+      />
+
+      <PlatformField
+        value={values.Platform}
+        onChange={(value) => setFieldValue('Platform', value)}
+      />
+
+      <TemplateTypeSelector
+        value={values.Type}
+        onChange={(value) => setFieldValue('Type', value)}
+      />
+
+      <FormSection title="Build method">
+        <BoxSelector
+          slim
+          options={buildMethods}
+          value={values.Method}
+          onChange={handleChangeMethod}
+          radioName="buildMethod"
+        />
+      </FormSection>
+
+      {values.Method === editor.value && (
+        <WebEditorForm
+          id="custom-template-creation-editor"
+          value={values.FileContent}
+          onChange={handleChangeFileContent}
+          yaml
+          placeholder="Define or paste the content of your docker compose file here"
+          error={errors.FileContent}
+        >
+          <p>
+            You can get more information about Compose file format in the{' '}
+            <a
+              href="https://docs.docker.com/compose/compose-file/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              official documentation
+            </a>
+            .
+          </p>
+        </WebEditorForm>
+      )}
+
+      {values.Method === upload.value && (
+        <FileUploadForm
+          description="You can upload a Compose file from your computer."
+          value={values.File}
+          onChange={(value) => setFieldValue('File', value)}
+          required
+        />
+      )}
+
+      {values.Method === git.value && (
+        <GitForm
+          value={values.Git}
+          onChange={(newValues) =>
+            setValues((values) => ({
+              ...values,
+              Git: { ...values.Git, ...newValues },
+            }))
+          }
+          errors={errors.Git}
+        />
+      )}
+
+      {isTemplateVariablesEnabled && (
+        <CustomTemplatesVariablesDefinitionField
+          value={values.Variables}
+          onChange={(values) => setFieldValue('Variables', values)}
+          isVariablesNamesFromParent={values.Method === editor.value}
+          errors={errors.Variables}
+        />
+      )}
+
+      <FormActions
+        isLoading={isLoading}
+        isValid={isValid}
+        loadingText="Creating custom template..."
+        submitLabel="Create custom template"
+      />
+    </Form>
+  );
+
+  function handleChangeFileContent(value: string) {
+    setFieldValue(
+      'FileContent',
+      value,
+      isTemplateVariablesEnabled ? !value : true
+    );
+    parseTemplate(value);
+  }
+
+  function parseTemplate(value: string) {
+    if (!isTemplateVariablesEnabled || value === '') {
+      setFieldValue('Variables', []);
+      return;
+    }
+
+    const [variables, validationError] = getTemplateVariables(value);
+    const isValid = !!variables;
+
+    setFieldError(
+      'FileContent',
+      validationError ? `Template invalid: ${validationError}` : undefined
+    );
+    if (isValid) {
+      setFieldValue(
+        'Variables',
+        intersectVariables(values.Variables, variables)
+      );
+    }
+  }
+
+  function handleChangeMethod(method: Method) {
+    setFieldValue('FileContent', '');
+    setFieldValue('Variables', []);
+    setFieldValue('Method', method);
+  }
+}

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

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

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

@@ -0,0 +1,25 @@
+import { StackType } from '@/react/common/stacks/types';
+import { type Values as CommonFieldsValues } from '@/react/portainer/custom-templates/components/CommonFields';
+import { DefinitionFieldValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { Platform } from '@/react/portainer/templates/types';
+import { GitFormModel } from '@/react/portainer/gitops/types';
+
+import {
+  editor,
+  upload,
+  git,
+} from '@@/BoxSelector/common-options/build-methods';
+
+export const buildMethods = [editor, upload, git] as const;
+
+export type Method = (typeof buildMethods)[number]['value'];
+
+export interface FormValues extends CommonFieldsValues {
+  Platform: Platform;
+  Type: StackType;
+  Method: Method;
+  FileContent: string;
+  File: File | undefined;
+  Git: GitFormModel;
+  Variables: DefinitionFieldValues;
+}

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

@@ -0,0 +1,59 @@
+import { mixed, number, object, string } from 'yup';
+import { useMemo } from 'react';
+
+import { StackType } from '@/react/common/stacks/types';
+import { validation as commonFieldsValidation } from '@/react/portainer/custom-templates/components/CommonFields';
+import { Platform } from '@/react/portainer/templates/types';
+import { variablesValidation } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { buildGitValidationSchema } from '@/react/portainer/gitops/GitForm';
+import { useGitCredentials } from '@/react/portainer/account/git-credentials/git-credentials.service';
+import { useCurrentUser } from '@/react/hooks/useUser';
+import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
+
+import { file } from '@@/form-components/yup-file-validation';
+import {
+  editor,
+  git,
+  upload,
+} from '@@/BoxSelector/common-options/build-methods';
+
+import { buildMethods } from './types';
+
+export function useValidation() {
+  const { user } = useCurrentUser();
+  const gitCredentialsQuery = useGitCredentials(user.Id);
+  const customTemplatesQuery = useCustomTemplates();
+
+  return useMemo(
+    () =>
+      object({
+        Platform: number()
+          .oneOf([Platform.LINUX, Platform.WINDOWS])
+          .default(Platform.LINUX),
+        Type: number()
+          .oneOf([
+            StackType.DockerCompose,
+            StackType.DockerSwarm,
+            StackType.Kubernetes,
+          ])
+          .default(StackType.DockerCompose),
+        Method: string().oneOf(buildMethods.map((m) => m.value)),
+        FileContent: string().when('Method', {
+          is: editor.value,
+          then: (schema) => schema.required('Template is required.'),
+        }),
+        File: file().when('Method', {
+          is: upload.value,
+          then: (schema) => schema.required(),
+        }),
+        Git: mixed().when('Method', {
+          is: git.value,
+          then: () => buildGitValidationSchema(gitCredentialsQuery.data || []),
+        }),
+        Variables: variablesValidation(),
+      }).concat(
+        commonFieldsValidation({ templates: customTemplatesQuery.data })
+      ),
+    [customTemplatesQuery.data, gitCredentialsQuery.data]
+  );
+}

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

@@ -0,0 +1,99 @@
+import { Formik } from 'formik';
+import { useRouter } from '@uirouter/react';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
+import { useCustomTemplateFile } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplateFile';
+import { useUpdateTemplateMutation } from '@/react/portainer/templates/custom-templates/queries/useUpdateTemplateMutation';
+import {
+  getTemplateVariables,
+  intersectVariables,
+  isTemplateVariablesEnabled,
+} from '@/react/portainer/custom-templates/components/utils';
+import { toGitFormModel } from '@/react/portainer/gitops/types';
+
+import { InnerForm } from './InnerForm';
+import { FormValues } from './types';
+import { useValidation } from './useValidation';
+
+export function EditTemplateForm({ template }: { template: CustomTemplate }) {
+  const mutation = useUpdateTemplateMutation();
+  const router = useRouter();
+  const isGit = !!template.GitConfig;
+  const validation = useValidation(template.Id, isGit);
+  const fileQuery = useCustomTemplateFile(template.Id, isGit);
+
+  if (fileQuery.isLoading) {
+    return null;
+  }
+
+  const initialValues: FormValues = {
+    Title: template.Title,
+    Type: template.Type,
+    Description: template.Description,
+    Note: template.Note,
+    Logo: template.Logo,
+    Platform: template.Platform,
+    Variables: parseTemplate(fileQuery.data || ''),
+
+    FileContent: fileQuery.data || '',
+    Git: template.GitConfig ? toGitFormModel(template.GitConfig) : undefined,
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validationSchema={validation}
+      validateOnMount
+    >
+      <InnerForm
+        isLoading={mutation.isLoading}
+        isEditorReadonly={isGit}
+        gitFileContent={isGit ? fileQuery.data : ''}
+        refreshGitFile={fileQuery.refetch}
+        gitFileError={
+          fileQuery.error instanceof Error ? fileQuery.error.message : ''
+        }
+      />
+    </Formik>
+  );
+
+  function handleSubmit(values: FormValues) {
+    mutation.mutate(
+      {
+        id: template.Id,
+        EdgeTemplate: template.EdgeTemplate,
+        Description: values.Description,
+        Title: values.Title,
+        Type: values.Type,
+        Logo: values.Logo,
+        FileContent: values.FileContent,
+        Note: values.Note,
+        Platform: values.Platform,
+        Variables: values.Variables,
+        ...values.Git,
+      },
+      {
+        onSuccess() {
+          notifySuccess('Success', 'Template updated successfully');
+          router.stateService.go('^');
+        },
+      }
+    );
+  }
+
+  function parseTemplate(templateContent: string) {
+    if (!isTemplateVariablesEnabled) {
+      return template.Variables;
+    }
+
+    const [variables] = getTemplateVariables(templateContent);
+
+    if (!variables) {
+      return template.Variables;
+    }
+
+    return intersectVariables(template.Variables, variables);
+  }
+}

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

@@ -0,0 +1,49 @@
+import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
+import { useEffect } from 'react';
+
+import { useCustomTemplate } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplate';
+import { notifyError } from '@/portainer/services/notifications';
+
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+
+import { EditTemplateForm } from './EditTemplateForm';
+
+export function EditView() {
+  const router = useRouter();
+  const {
+    params: { id },
+  } = useCurrentStateAndParams();
+  const customTemplateQuery = useCustomTemplate(id);
+
+  useEffect(() => {
+    if (customTemplateQuery.data && !customTemplateQuery.data.EdgeTemplate) {
+      notifyError('Error', new Error('Trying to load non edge template'));
+      router.stateService.go('^');
+    }
+  }, [customTemplateQuery.data, router.stateService]);
+
+  if (!customTemplateQuery.data) {
+    return null;
+  }
+
+  const template = customTemplateQuery.data;
+
+  return (
+    <>
+      <PageHeader
+        title="Edit Custom Template"
+        breadcrumbs={[{ label: 'Custom templates', link: '^' }, template.Title]}
+      />
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <Widget.Body>
+              <EditTemplateForm template={template} />
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,170 @@
+import { Form, useFormikContext } from 'formik';
+import { RefreshCw } from 'lucide-react';
+
+import { CommonFields } from '@/react/portainer/custom-templates/components/CommonFields';
+import { CustomTemplatesVariablesDefinitionField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { PlatformField } from '@/react/portainer/custom-templates/components/PlatformSelector';
+import { GitForm } from '@/react/portainer/gitops/GitForm';
+import {
+  getTemplateVariables,
+  intersectVariables,
+  isTemplateVariablesEnabled,
+} from '@/react/portainer/custom-templates/components/utils';
+import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
+
+import { WebEditorForm, usePreventExit } from '@@/WebEditorForm';
+import { FormActions } from '@@/form-components/FormActions';
+import { Button } from '@@/buttons';
+import { FormError } from '@@/form-components/FormError';
+
+import { FormValues } from './types';
+
+export function InnerForm({
+  isLoading,
+  isEditorReadonly,
+  gitFileContent,
+  gitFileError,
+  refreshGitFile,
+}: {
+  isLoading: boolean;
+  isEditorReadonly: boolean;
+  gitFileContent?: string;
+  gitFileError?: string;
+  refreshGitFile: () => void;
+}) {
+  const {
+    values,
+    initialValues,
+    setFieldValue,
+    errors,
+    isValid,
+    setFieldError,
+    isSubmitting,
+    dirty,
+    setValues,
+  } = useFormikContext<FormValues>();
+
+  usePreventExit(
+    initialValues.FileContent,
+    values.FileContent,
+    !isEditorReadonly && !isSubmitting
+  );
+  return (
+    <Form className="form-horizontal">
+      <CommonFields
+        values={values}
+        onChange={(newValues) =>
+          setValues((values) => ({ ...values, ...newValues }))
+        }
+        errors={errors}
+      />
+
+      <PlatformField
+        value={values.Platform}
+        onChange={(value) => setFieldValue('Platform', value)}
+      />
+
+      <TemplateTypeSelector
+        value={values.Type}
+        onChange={(value) => setFieldValue('Type', value)}
+      />
+
+      <WebEditorForm
+        id="edit-custom-template-editor"
+        value={gitFileContent || values.FileContent}
+        onChange={handleChangeFileContent}
+        yaml
+        placeholder="Define or paste the content of your docker compose file here"
+        error={errors.FileContent}
+        readonly={isEditorReadonly}
+      >
+        <p>
+          You can get more information about Compose file format in the{' '}
+          <a
+            href="https://docs.docker.com/compose/compose-file/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            official documentation
+          </a>
+          .
+        </p>
+      </WebEditorForm>
+
+      {values.Git && (
+        <>
+          <GitForm
+            value={values.Git}
+            onChange={(newValues) =>
+              setValues((values) => ({
+                ...values,
+                // set ! for values.Git because this callback will only be called when it's defined (see L94)
+                Git: { ...values.Git!, ...newValues },
+              }))
+            }
+            errors={typeof errors.Git === 'object' ? errors.Git : undefined}
+          />
+          <div className="form-group">
+            <div className="col-sm-12">
+              <Button color="light" icon={RefreshCw} onClick={refreshGitFile}>
+                Reload custom template
+              </Button>
+            </div>
+            {gitFileError && (
+              <div className="col-sm-12">
+                <FormError>
+                  Custom template could not be loaded, {gitFileError}.
+                </FormError>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {isTemplateVariablesEnabled && (
+        <CustomTemplatesVariablesDefinitionField
+          value={values.Variables}
+          onChange={(values) => setFieldValue('Variables', values)}
+          isVariablesNamesFromParent={!isEditorReadonly}
+          errors={errors.Variables}
+        />
+      )}
+
+      <FormActions
+        isLoading={isLoading}
+        isValid={isValid && dirty}
+        loadingText="Updating custom template..."
+        submitLabel="Update custom template"
+      />
+    </Form>
+  );
+
+  function handleChangeFileContent(value: string) {
+    setFieldValue(
+      'FileContent',
+      value,
+      isTemplateVariablesEnabled ? !value : true
+    );
+    parseTemplate(value);
+  }
+
+  function parseTemplate(value: string) {
+    if (!isTemplateVariablesEnabled || value === '') {
+      setFieldValue('Variables', []);
+      return;
+    }
+
+    const [variables, validationError] = getTemplateVariables(value);
+
+    setFieldError(
+      'FileContent',
+      validationError ? `Template invalid: ${validationError}` : undefined
+    );
+    if (variables) {
+      setFieldValue(
+        'Variables',
+        intersectVariables(values.Variables, variables)
+      );
+    }
+  }
+}

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

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

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

@@ -0,0 +1,13 @@
+import { StackType } from '@/react/common/stacks/types';
+import { DefinitionFieldValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+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';
+
+export interface FormValues extends CommonFieldsValues {
+  Platform: Platform;
+  Type: StackType;
+  FileContent: string;
+  Git?: GitFormModel;
+  Variables: DefinitionFieldValues;
+}

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

@@ -0,0 +1,56 @@
+import { mixed, number, object, string } from 'yup';
+import { useMemo } from 'react';
+
+import { StackType } from '@/react/common/stacks/types';
+import { validation as commonFieldsValidation } from '@/react/portainer/custom-templates/components/CommonFields';
+import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
+import { variablesValidation } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { buildGitValidationSchema } from '@/react/portainer/gitops/GitForm';
+import { useGitCredentials } from '@/react/portainer/account/git-credentials/git-credentials.service';
+import { useCurrentUser } from '@/react/hooks/useUser';
+import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
+import { Platform } from '@/react/portainer/templates/types';
+
+export function useValidation(
+  currentTemplateId: CustomTemplate['Id'],
+  isGit: boolean
+) {
+  const { user } = useCurrentUser();
+  const gitCredentialsQuery = useGitCredentials(user.Id);
+  const customTemplatesQuery = useCustomTemplates();
+
+  return useMemo(
+    () =>
+      object({
+        Platform: number()
+          .oneOf([Platform.LINUX, Platform.WINDOWS])
+          .default(Platform.LINUX),
+        Type: number()
+          .oneOf([
+            StackType.DockerCompose,
+            StackType.DockerSwarm,
+            StackType.Kubernetes,
+          ])
+          .default(StackType.DockerCompose),
+        FileContent: isGit
+          ? string().default('')
+          : string().required('Template is required.'),
+
+        Git: isGit
+          ? buildGitValidationSchema(gitCredentialsQuery.data || [])
+          : mixed(),
+        Variables: variablesValidation(),
+      }).concat(
+        commonFieldsValidation({
+          templates: customTemplatesQuery.data,
+          currentTemplateId,
+        })
+      ),
+    [
+      currentTemplateId,
+      customTemplatesQuery.data,
+      gitCredentialsQuery.data,
+      isGit,
+    ]
+  );
+}

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

@@ -0,0 +1,46 @@
+import { notifySuccess } from '@/portainer/services/notifications';
+import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
+import { useDeleteTemplateMutation } from '@/react/portainer/templates/custom-templates/queries/useDeleteTemplateMutation';
+import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
+import { CustomTemplatesList } from '@/react/portainer/templates/custom-templates/ListView/CustomTemplatesList';
+
+import { PageHeader } from '@@/PageHeader';
+import { confirmDelete } from '@@/modals/confirm';
+
+export function ListView() {
+  const templatesQuery = useCustomTemplates({
+    select(templates) {
+      return templates.filter((t) => t.EdgeTemplate);
+    },
+  });
+  const deleteMutation = useDeleteTemplateMutation();
+
+  return (
+    <>
+      <PageHeader title="Custom Templates" breadcrumbs="Custom Templates" />
+
+      <CustomTemplatesList
+        templates={templatesQuery.data}
+        onDelete={handleDelete}
+        templateLinkParams={(template) => ({
+          to: 'edge.stacks.new',
+          params: { templateId: template.Id },
+        })}
+      />
+    </>
+  );
+
+  async function handleDelete(templateId: CustomTemplate['Id']) {
+    if (
+      !(await confirmDelete('Are you sure you want to delete this template?'))
+    ) {
+      return;
+    }
+
+    deleteMutation.mutate(templateId, {
+      onSuccess: () => {
+        notifySuccess('Success', 'Template deleted');
+      },
+    });
+  }
+}

app/react/edge/templates/custom-templates/ListView/index.ts

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

app/react/portainer/account/git-credentials/git-credentials.service.ts

@@ -2,6 +2,9 @@ import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { success as notifySuccess } from '@/portainer/services/notifications';
+import { UserId } from '@/portainer/users/types';
+
+import { isBE } from '../../feature-flags/feature-flags.service';
 
 import {
   CreateGitCredentialPayload,
@@ -112,9 +115,12 @@ export function useDeleteGitCredentialMutation() {
   });
 }
 
-export function useGitCredentials(userId: number) {
+export function useGitCredentials(
+  userId: UserId,
+  { enabled }: { enabled?: boolean } = {}
+) {
   return useQuery('gitcredentials', () => getGitCredentials(userId), {
-    staleTime: 20,
+    enabled: isBE && enabled,
     meta: {
       error: {
         title: 'Failure',

app/react/portainer/custom-templates/components/CommonFields.tsx

@@ -4,7 +4,9 @@ import { FormikErrors } from 'formik';
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
 
-interface Values {
+import { CustomTemplate } from '../../templates/custom-templates/types';
+
+export interface Values {
   Title: string;
   Description: string;
   Note: string;
@@ -87,11 +89,26 @@ export function CommonFields({
 }
 
 export function validation({
+  currentTemplateId,
+  templates = [],
   title,
 }: {
+  currentTemplateId?: CustomTemplate['Id'];
+  templates?: Array<CustomTemplate>;
   title?: { pattern: string; error: string };
 } = {}): SchemaOf<Values> {
-  let titleSchema = string().required('Title is required.');
+  let titleSchema = string()
+    .required('Title is required.')
+    .test(
+      'is-unique',
+      'Title must be unique',
+      (value) =>
+        !value ||
+        !templates.some(
+          (template) =>
+            template.Title === value && template.Id !== currentTemplateId
+        )
+    );
   if (title?.pattern) {
     const pattern = new RegExp(title.pattern);
     titleSchema = titleSchema.matches(pattern, title.error);

app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx

@@ -1,9 +1,9 @@
-import { FormikErrors } from 'formik';
+import { SchemaOf, array, object, string } from 'yup';
 
 import { FormError } from '@@/form-components/FormError';
 import { Input } from '@@/form-components/Input';
 import { InputList } from '@@/form-components/InputList';
-import { ItemProps } from '@@/form-components/InputList/InputList';
+import { ArrayError, ItemProps } from '@@/form-components/InputList/InputList';
 
 export interface VariableDefinition {
   name: string;
@@ -12,10 +12,12 @@ export interface VariableDefinition {
   description: string;
 }
 
+export type Values = VariableDefinition[];
+
 interface Props {
-  value: VariableDefinition[];
+  value: Values;
-  onChange: (value: VariableDefinition[]) => void;
+  onChange: (value: Values) => void;
-  errors?: FormikErrors<VariableDefinition>[];
+  errors?: ArrayError<Values>;
   isVariablesNamesFromParent?: boolean;
 }
 
@@ -107,3 +109,16 @@ function Item({ item, onChange, error, isNameReadonly }: DefinitionItemProps) {
     onChange({ ...item, [e.target.name]: e.target.value });
   }
 }
+
+function itemValidation(): SchemaOf<VariableDefinition> {
+  return object().shape({
+    name: string().required('Name is required'),
+    label: string().required('Label is required'),
+    defaultValue: string().default(''),
+    description: string().default(''),
+  });
+}
+
+export function validation(): SchemaOf<Values> {
+  return array().of(itemValidation());
+}

app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/index.ts

@@ -1,2 +1,8 @@
-export { CustomTemplatesVariablesDefinitionField } from './CustomTemplatesVariablesDefinitionField';
+export {
-export type { VariableDefinition } from './CustomTemplatesVariablesDefinitionField';
+  CustomTemplatesVariablesDefinitionField,
+  validation as variablesValidation,
+} from './CustomTemplatesVariablesDefinitionField';
+export type {
+  VariableDefinition,
+  Values as DefinitionFieldValues,
+} from './CustomTemplatesVariablesDefinitionField';

app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/CustomTemplatesVariablesField.stories.tsx

@@ -4,7 +4,7 @@ import { VariableDefinition } from '../CustomTemplatesVariablesDefinitionField/C
 
 import {
   CustomTemplatesVariablesField,
-  Variables,
+  Values,
 } from './CustomTemplatesVariablesField';
 
 export default {
@@ -34,10 +34,8 @@ const definitions: VariableDefinition[] = [
 ];
 
 function Template() {
-  const [value, setValue] = useState<Variables>(
+  const [value, setValue] = useState<Values>(
-    Object.fromEntries(
+    definitions.map((def) => ({ key: def.name, value: def.defaultValue || '' }))
-      definitions.map((def) => [def.name, def.defaultValue || ''])
-    )
   );
 
   return (

app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/CustomTemplatesVariablesField.tsx

@@ -1,18 +1,24 @@
+import { array, object, string } from 'yup';
+
 import { FormControl } from '@@/form-components/FormControl';
 import { FormSection } from '@@/form-components/FormSection/FormSection';
 import { Input } from '@@/form-components/Input';
+import { ArrayError } from '@@/form-components/InputList/InputList';
+import { FormError } from '@@/form-components/FormError';
 
 import { VariableDefinition } from '../CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
 
-export type Variables = Record<string, string>;
+export type Values = Array<{ key: string; value?: string }>;
 
 interface Props {
-  value: Variables;
+  errors?: ArrayError<Values>;
-  definitions?: VariableDefinition[];
+  value: Values;
-  onChange: (value: Variables) => void;
+  definitions: VariableDefinition[] | undefined;
+  onChange: (value: Values) => void;
 }
 
 export function CustomTemplatesVariablesField({
+  errors,
   value,
   definitions,
   onChange,
@@ -23,32 +29,88 @@ export function CustomTemplatesVariablesField({
 
   return (
     <FormSection title="Template Variables">
-      {definitions.map((def) => {
+      {definitions.map((definition, index) => (
-        const inputId = `${def.name}-input`;
+        <VariableFieldItem
-        const variable = value[def.name] || '';
+          key={definition.name}
-        return (
+          definition={definition}
-          <FormControl
+          value={value.find((v) => v.key === definition.name)?.value || ''}
-            required={!def.defaultValue}
+          error={getError(errors, index)}
-            label={def.label}
+          onChange={(fieldValue) => {
-            key={def.name}
+            onChange(
-            inputId={inputId}
+              value.map((v) =>
-            tooltip={def.description}
+                v.key === definition.name ? { ...v, value: fieldValue } : v
-            size="small"
+              )
-          >
-            <Input
-              name={`variables.${def.name}`}
-              value={variable}
-              id={inputId}
-              onChange={(e) =>
-                onChange({
-                  ...value,
-                  [def.name]: e.target.value,
-                })
-              }
-            />
-          </FormControl>
             );
-      })}
+          }}
+        />
+      ))}
+
+      {typeof errors === 'string' && <FormError>{errors}</FormError>}
     </FormSection>
   );
 }
+
+function VariableFieldItem({
+  definition,
+  value,
+  error,
+  onChange,
+}: {
+  definition: VariableDefinition;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+}) {
+  const inputId = `${definition.name}-input`;
+
+  return (
+    <FormControl
+      required={!definition.defaultValue}
+      label={definition.label}
+      key={definition.name}
+      inputId={inputId}
+      tooltip={definition.description}
+      size="small"
+      errors={error}
+    >
+      <Input
+        name={`variables.${definition.name}`}
+        value={value}
+        id={inputId}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </FormControl>
+  );
+}
+
+function getError(errors: ArrayError<Values> | undefined, index: number) {
+  if (!errors || typeof errors !== 'object') {
+    return undefined;
+  }
+
+  const error = errors[index];
+  if (!error) {
+    return undefined;
+  }
+
+  return typeof error === 'object' ? error.value : error;
+}
+export function validation(definitions: VariableDefinition[]) {
+  return array(
+    object({
+      key: string().default(''),
+      value: string().default(''),
+    }).test('required-if-no-default-value', 'This field is required', (obj) => {
+      const definition = definitions.find((d) => d.name === obj.key);
+      if (!definition) {
+        return true;
+      }
+
+      if (!definition.defaultValue && !obj.value) {
+        return false;
+      }
+
+      return true;
+    })
+  );
+}

app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/getDefaultValues.ts

@@ -0,0 +1,10 @@
+import { VariableDefinition } from '../CustomTemplatesVariablesDefinitionField';
+
+import { Values } from './CustomTemplatesVariablesField';
+
+export function getDefaultValues(definitions: VariableDefinition[]): Values {
+  return definitions.map((v) => ({
+    key: v.name,
+    value: v.defaultValue,
+  }));
+}

app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/index.ts

@@ -1 +1,7 @@
-export { CustomTemplatesVariablesField } from './CustomTemplatesVariablesField';
+export {
+  CustomTemplatesVariablesField,
+  type Values as VariablesFieldValue,
+  validation as variablesFieldValidation,
+} from './CustomTemplatesVariablesField';
+
+export { getDefaultValues as getVariablesFieldDefaultValues } from './getDefaultValues';

app/react/portainer/custom-templates/components/PlatformSelector.tsx

@@ -1,7 +1,7 @@
 import { FormControl } from '@@/form-components/FormControl';
 import { Select } from '@@/form-components/Input';
 
-import { Platform } from '../types';
+import { Platform } from '../../templates/types';
 
 const platformOptions = [
   { label: 'Linux', value: Platform.LINUX },

app/react/portainer/custom-templates/components/utils.ts

@@ -1,34 +1,48 @@
 import _ from 'lodash';
 import Mustache from 'mustache';
 
+import { isBE } from '../../feature-flags/feature-flags.service';
+
 import { VariableDefinition } from './CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
+import { VariablesFieldValue } from './CustomTemplatesVariablesField';
+
+export const isTemplateVariablesEnabled = isBE;
 
 export function getTemplateVariables(templateStr: string) {
-  const template = validateAndParse(templateStr);
+  const [template, error] = validateAndParse(templateStr);
 
   if (!template) {
-    return null;
+    return [null, error] as const;
   }
 
-  return template
+  return [
+    template
       .filter(([type, value]) => type === 'name' && value)
       .map(([, value]) => ({
         name: value,
         label: '',
         defaultValue: '',
         description: '',
-    }));
+      })),
+    null,
+  ] as const;
 }
-
+type TemplateSpans = ReturnType<typeof Mustache.parse>;
-function validateAndParse(templateStr: string) {
+function validateAndParse(
+  templateStr: string
+): readonly [TemplateSpans, null] | readonly [null, string] {
   if (!templateStr) {
-    return [];
+    return [[] as TemplateSpans, null] as const;
   }
 
   try {
-    return Mustache.parse(templateStr);
+    return [Mustache.parse(templateStr), null] as const;
   } catch (e) {
-    return null;
+    if (!(e instanceof Error)) {
+      return [null, 'Parse error'] as const;
+    }
+
+    return [null, e.message] as const;
   }
 }
 
@@ -51,22 +65,22 @@ export function intersectVariables(
 
 export function renderTemplate(
   template: string,
-  variables: Record<string, string>,
+  variables: VariablesFieldValue,
   definitions: VariableDefinition[]
 ) {
   const state = Object.fromEntries(
     _.compact(
-      Object.entries(variables).map(([name, value]) => {
+      variables.map(({ key, value }) => {
         if (value) {
-          return [name, value];
+          return [key, value];
         }
 
-        const definition = definitions.find((def) => def.name === name);
+        const definition = definitions.find((def) => def.name === key);
         if (!definition) {
           return null;
         }
 
-        return [name, definition.defaultValue || `{{ ${definition.name} }}`];
+        return [key, definition.defaultValue || `{{ ${definition.name} }}`];
       })
     )
   );

app/react/portainer/environments/environment.service/create.ts

@@ -1,11 +1,15 @@
-import axios, { parseAxiosError } from '@/portainer/services/axios';
+import axios, {
+  parseAxiosError,
+  json2formData,
+  arrayToJson,
+} from '@/portainer/services/axios';
 import { type EnvironmentGroupId } from '@/react/portainer/environments/environment-groups/types';
 import { type TagId } from '@/portainer/tags/types';
 import { EdgeAsyncIntervalsValues } from '@/react/edge/components/EdgeAsyncIntervalsForm';
 
 import { type Environment, EnvironmentCreationTypes } from '../types';
 
-import { arrayToJson, buildUrl, json2formData } from './utils';
+import { buildUrl } from './utils';
 
 export interface EnvironmentMetadata {
   groupId?: EnvironmentGroupId;

app/react/portainer/environments/environment.service/utils.ts

@@ -12,25 +12,3 @@ export function buildUrl(id?: EnvironmentId, action?: string) {
 
   return baseUrl;
 }
-
-export function arrayToJson<T>(arr?: Array<T>) {
-  if (!arr) {
-    return '';
-  }
-
-  return JSON.stringify(arr);
-}
-
-export function json2formData(json: Record<string, unknown>) {
-  const formData = new FormData();
-
-  Object.entries(json).forEach(([key, value]) => {
-    if (typeof value === 'undefined' || value === null) {
-      return;
-    }
-
-    formData.append(key, value as string);
-  });
-
-  return formData;
-}

app/react/portainer/gitops/GitForm.tsx

@@ -28,9 +28,9 @@ interface Props {
   isAdditionalFilesFieldVisible?: boolean;
   isForcePullVisible?: boolean;
   isAuthExplanationVisible?: boolean;
-  errors: FormikErrors<GitFormModel>;
+  errors?: FormikErrors<GitFormModel>;
-  baseWebhookUrl: string;
+  baseWebhookUrl?: string;
-  webhookId: string;
+  webhookId?: string;
   webhooksDocs?: string;
 }
 
@@ -88,7 +88,7 @@ export function GitForm({
 
       {isAdditionalFilesFieldVisible && (
         <AdditionalFileField
-          value={value.AdditionalFiles}
+          value={value.AdditionalFiles || []}
           onChange={(value) => handleChange({ AdditionalFiles: value })}
           errors={errors.AdditionalFiles}
         />
@@ -97,8 +97,8 @@ export function GitForm({
       {value.AutoUpdate && (
         <AutoUpdateFieldset
           environmentType={environmentType}
-          webhookId={webhookId}
+          webhookId={webhookId || ''}
-          baseWebhookUrl={baseWebhookUrl}
+          baseWebhookUrl={baseWebhookUrl || ''}
           value={value.AutoUpdate}
           onChange={(value) => handleChange({ AutoUpdate: value })}
           isForcePullVisible={isForcePullVisible}
@@ -165,5 +165,5 @@ export function buildGitValidationSchema(
     RepositoryURLValid: boolean().default(false),
     AutoUpdate: autoUpdateValidation().nullable(),
     TLSSkipVerify: boolean().default(false),
-  }).concat(gitAuthValidation(gitCredentials, false));
+  }).concat(gitAuthValidation(gitCredentials, false)) as SchemaOf<GitFormModel>;
 }

app/react/portainer/gitops/RefField/RefField.tsx

@@ -18,7 +18,7 @@ interface Props {
   onChange(value: string): void;
   model: RefFieldModel;
   error?: string;
-  isUrlValid: boolean;
+  isUrlValid?: boolean;
   stackId?: StackId;
 }
 

app/react/portainer/gitops/RefField/RefSelector.tsx

@@ -18,7 +18,7 @@ export function RefSelector({
   value: string;
   stackId?: StackId;
   onChange: (value: string) => void;
-  isUrlValid: boolean;
+  isUrlValid?: boolean;
 }) {
   const creds = getAuthentication(model);
   const payload = {

app/react/portainer/gitops/types.ts

@@ -1,5 +1,4 @@
 export type AutoUpdateMechanism = 'Webhook' | 'Interval';
-
 export interface AutoUpdateResponse {
   /* Auto update interval */
   Interval: string;
@@ -26,6 +25,7 @@ export interface RepoConfigResponse {
   ConfigFilePath: string;
   Authentication?: GitAuthenticationResponse;
   ConfigHash: string;
+  TLSSkipVerify: boolean;
 }
 
 export type AutoUpdateModel = {
@@ -52,11 +52,11 @@ export type GitAuthModel = GitCredentialsModel & GitNewCredentialModel;
 
 export interface GitFormModel extends GitAuthModel {
   RepositoryURL: string;
-  RepositoryURLValid: boolean;
+  RepositoryURLValid?: boolean;
   ComposeFilePathInRepository: string;
   RepositoryAuthentication: boolean;
   RepositoryReferenceName?: string;
-  AdditionalFiles: string[];
+  AdditionalFiles?: string[];
 
   SaveCredential?: boolean;
   NewCredentialName?: string;
@@ -78,3 +78,31 @@ export interface RelativePathModel {
   PerDeviceConfigsMatchType?: string;
   PerDeviceConfigsGroupMatchType?: string;
 }
+
+export function toGitFormModel(response?: RepoConfigResponse): GitFormModel {
+  if (!response) {
+    return {
+      RepositoryURL: '',
+      ComposeFilePathInRepository: '',
+      RepositoryAuthentication: false,
+      TLSSkipVerify: false,
+    };
+  }
+
+  const { URL, ReferenceName, ConfigFilePath, Authentication, TLSSkipVerify } =
+    response;
+
+  return {
+    RepositoryURL: URL,
+    ComposeFilePathInRepository: ConfigFilePath,
+    RepositoryReferenceName: ReferenceName,
+    RepositoryAuthentication: !!(
+      Authentication &&
+      (Authentication?.GitCredentialID || Authentication?.Username)
+    ),
+    RepositoryUsername: Authentication?.Username,
+    RepositoryPassword: Authentication?.Password,
+    RepositoryGitCredentialID: Authentication?.GitCredentialID,
+    TLSSkipVerify,
+  };
+}

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

@@ -28,14 +28,12 @@ export function AppTemplatesList({
   selectedId,
   disabledTypes,
   fixedCategories,
-  hideDuplicate,
 }: {
   templates?: TemplateViewModel[];
   onSelect: (template: TemplateViewModel) => void;
   selectedId?: TemplateViewModel['Id'];
   disabledTypes?: Array<TemplateType>;
   fixedCategories?: Array<string>;
-  hideDuplicate?: boolean;
 }) {
   const [page, setPage] = useState(0);
 
@@ -75,7 +73,6 @@ export function AppTemplatesList({
             template={template}
             onSelect={onSelect}
             isSelected={selectedId === template.Id}
-            hideDuplicate={hideDuplicate}
           />
         ))}
         {!templates && <div className="text-muted text-center">Loading...</div>}

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

@@ -12,12 +12,10 @@ export function AppTemplatesListItem({
   template,
   onSelect,
   isSelected,
-  hideDuplicate = false,
 }: {
   template: TemplateViewModel;
   onSelect: (template: TemplateViewModel) => void;
   isSelected: boolean;
-  hideDuplicate?: boolean;
 }) {
   const duplicateCustomTemplateType = getCustomTemplateType(template.Type);
 
@@ -30,7 +28,6 @@ export function AppTemplatesListItem({
       onSelect={() => onSelect(template)}
       isSelected={isSelected}
       renderActions={
-        !hideDuplicate &&
         duplicateCustomTemplateType && (
           <div className="mr-5 mt-3">
             <Button

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

@@ -14,7 +14,7 @@ export function useAppTemplates() {
   const registriesQuery = useRegistries();
 
   return useQuery(
-    'templates',
+    ['templates'],
     () => getTemplatesWithRegistry(registriesQuery.data),
     {
       enabled: !!registriesQuery.data,

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

@@ -1,9 +1,17 @@
+import { useQuery } from 'react-query';
+
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 
 import { AppTemplate } from '../types';
 
 import { buildUrl } from './build-url';
 
+export function useFetchTemplateFile(id?: AppTemplate['id']) {
+  return useQuery(['templates', id, 'file'], () => fetchFilePreview(id!), {
+    enabled: !!id,
+  });
+}
+
 export async function fetchFilePreview(id: AppTemplate['id']) {
   try {
     const { data } = await axios.post<{ FileContent: string }>(

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

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
 
 import { Pair } from '../../settings/types';
-import { Platform } from '../../custom-templates/types';
+import { Platform } from '../types';
 
 import {
   AppTemplate,

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

@@ -9,8 +9,9 @@ import { Icon } from '@@/Icon';
 import { FallbackImage } from '@@/FallbackImage';
 import { BlocklistItem } from '@@/Blocklist/BlocklistItem';
 import { BadgeIcon } from '@@/BadgeIcon';
+import { Link } from '@@/Link';
 
-import { Platform } from '../../custom-templates/types';
+import { Platform } from '../types';
 
 type Value = {
   Id: number | string;
@@ -27,16 +28,24 @@ export function TemplateItem({
   onSelect,
   renderActions,
   isSelected,
+  linkParams,
 }: {
   template: Value;
   typeLabel: string;
   onSelect: () => void;
   renderActions: ReactNode;
   isSelected: boolean;
+  linkParams?: { to: string; params: object };
 }) {
   return (
     <div className="relative">
-      <BlocklistItem isSelected={isSelected} onClick={() => onSelect()}>
+      <BlocklistItem
+        isSelected={isSelected}
+        onClick={() => onSelect()}
+        as={linkParams ? Link : undefined}
+        to={linkParams?.to}
+        params={linkParams?.params}
+      >
         <div className="vertical-center min-w-[56px] justify-center">
           <FallbackImage
             src={template.Logo}

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

@@ -2,7 +2,7 @@ import { Edit, Plus } from 'lucide-react';
 import _ from 'lodash';
 import { useCallback, useState } from 'react';
 
-import { CustomTemplate } from '@/react/portainer/custom-templates/types';
+import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
 
 import { DatatableHeader } from '@@/datatables/DatatableHeader';
 import { Table } from '@@/datatables';
@@ -22,11 +22,16 @@ export function CustomTemplatesList({
   onSelect,
   onDelete,
   selectedId,
+  templateLinkParams,
 }: {
   templates?: CustomTemplate[];
-  onSelect: (template: CustomTemplate['Id']) => void;
+  onSelect?: (template: CustomTemplate['Id']) => void;
   onDelete: (template: CustomTemplate['Id']) => void;
-  selectedId: CustomTemplate['Id'];
+  selectedId?: CustomTemplate['Id'];
+  templateLinkParams?: (template: CustomTemplate) => {
+    to: string;
+    params: object;
+  };
 }) {
   const [page, setPage] = useState(0);
 
@@ -67,6 +72,7 @@ export function CustomTemplatesList({
             onSelect={onSelect}
             isSelected={template.Id === selectedId}
             onDelete={onDelete}
+            linkParams={templateLinkParams?.(template)}
           />
         ))}
         {!templates && <div className="text-muted text-center">Loading...</div>}

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

@@ -2,7 +2,7 @@ import { Edit, Trash2 } from 'lucide-react';
 
 import { useCurrentUser } from '@/react/hooks/useUser';
 import { StackType } from '@/react/common/stacks/types';
-import { CustomTemplate } from '@/react/portainer/custom-templates/types';
+import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
 
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
@@ -14,11 +14,13 @@ export function CustomTemplatesListItem({
   onSelect,
   onDelete,
   isSelected,
+  linkParams,
 }: {
   template: CustomTemplate;
-  onSelect: (templateId: CustomTemplate['Id']) => void;
+  onSelect?: (templateId: CustomTemplate['Id']) => void;
   onDelete: (templateId: CustomTemplate['Id']) => void;
   isSelected: boolean;
+  linkParams?: { to: string; params: object };
 }) {
   const { isAdmin, user } = useCurrentUser();
   const isEditAllowed = isAdmin || template.CreatedByUserId === user.Id;
@@ -27,8 +29,9 @@ export function CustomTemplatesListItem({
     <TemplateItem
       template={template}
       typeLabel={getTypeLabel(template.Type)}
-      onSelect={() => onSelect(template.Id)}
+      onSelect={() => onSelect?.(template.Id)}
       isSelected={isSelected}
+      linkParams={linkParams}
       renderActions={
         <div className="mr-4 mt-3">
           {isEditAllowed && (
@@ -36,13 +39,14 @@ export function CustomTemplatesListItem({
               <Button
                 as={Link}
                 onClick={(e) => {
+                  e.preventDefault();
                   e.stopPropagation();
                 }}
                 color="secondary"
                 props={{
                   to: '.edit',
                   params: {
-                    id: template.Id,
+                    templateId: template.Id,
                   },
                 }}
                 icon={Edit}

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

@@ -0,0 +1,21 @@
+import { CustomTemplate } from '../types';
+
+export function buildUrl({
+  id,
+  action,
+}: {
+  id?: CustomTemplate['Id'];
+  action?: string;
+} = {}) {
+  let base = '/custom_templates';
+
+  if (id) {
+    base = `${base}/${id}`;
+  }
+
+  if (action) {
+    base = `${base}/${action}`;
+  }
+
+  return base;
+}

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

@@ -0,0 +1,8 @@
+import { CustomTemplate } from '../types';
+
+export const queryKeys = {
+  base: () => ['custom-templates'] as const,
+  item: (id: CustomTemplate['Id']) => [...queryKeys.base(), id] as const,
+  file: (id: CustomTemplate['Id'], options: { git: boolean }) =>
+    [...queryKeys.item(id), 'file', options] as const,
+};

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

@@ -0,0 +1,188 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import axios, {
+  json2formData,
+  parseAxiosError,
+} from '@/portainer/services/axios';
+import {
+  mutationOptions,
+  withGlobalError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+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 { Platform } from '../../types';
+
+import { buildUrl } from './build-url';
+
+export function useCreateTemplateMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    createTemplate,
+    mutationOptions(
+      withInvalidate(queryClient, [['custom-templates']]),
+      withGlobalError('Failed to create template')
+    )
+  );
+}
+
+function createTemplate({
+  Method,
+  Git,
+  ...values
+}: FormValues & { EdgeTemplate?: boolean }) {
+  switch (Method) {
+    case 'editor':
+      return createTemplateFromText(values);
+    case 'upload':
+      return createTemplateFromFile(values);
+    case 'repository':
+      return createTemplateFromGit({ ...values, ...Git });
+    default:
+      throw new Error('Unknown method');
+  }
+}
+
+/**
+ * Payload for creating a custom template from file content.
+ */
+interface CustomTemplateFromFileContentPayload {
+  /** URL of the template's logo. */
+  Logo: string;
+  /** Title of the template. Required. */
+  Title: string;
+  /** Description of the template. Required. */
+  Description: string;
+  /** A note that will be displayed in the UI. Supports HTML content. */
+  Note: string;
+  /** Platform associated with the template. */
+  Platform: Platform;
+  /** Type of created stack. Required. */
+  Type: StackType;
+  /** Content of the stack file. Required. */
+  FileContent: string;
+  /** Definitions of variables in the stack file. */
+  Variables: VariableDefinition[];
+  /** Indicates if this template is for Edge Stack. */
+  EdgeTemplate?: boolean;
+}
+async function createTemplateFromText(
+  values: CustomTemplateFromFileContentPayload
+) {
+  try {
+    const { data } = await axios.post<CustomTemplate>(
+      buildUrl({ action: 'create/string' }),
+      values
+    );
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error);
+  }
+}
+
+interface CustomTemplateFromFilePayload {
+  /** Title of the template */
+  Title: string;
+  /** Description of the template */
+  Description: string;
+  /** A note that will be displayed in the UI */
+  Note: string;
+  /** Platform associated with the template */
+  Platform: Platform;
+  /** Type of created stack */
+  Type: StackType;
+  /** File to upload */
+  File?: File;
+  /** URL of the template's logo */
+  Logo?: string;
+  /** Definitions of variables in the stack file */
+  Variables?: VariableDefinition[];
+  /** Indicates if this template is for Edge Stack. */
+  EdgeTemplate?: boolean;
+}
+
+async function createTemplateFromFile(values: CustomTemplateFromFilePayload) {
+  try {
+    if (!values.File) {
+      throw new Error('No file provided');
+    }
+
+    const payload = json2formData({
+      Platform: values.Platform,
+      Type: values.Type,
+      Title: values.Title,
+      Description: values.Description,
+      Note: values.Note,
+      Logo: values.Logo,
+      File: values.File,
+      Variables: values.Variables,
+      EdgeTemplate: values.EdgeTemplate,
+    });
+
+    const { data } = await axios.post<CustomTemplate>(
+      buildUrl({ action: 'create/file' }),
+      payload,
+      {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      }
+    );
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error);
+  }
+}
+
+/**
+ * Payload for creating a custom template from a Git repository.
+ */
+interface CustomTemplateFromGitRepositoryPayload {
+  /** URL of the template's logo. */
+  Logo: string;
+  /** Title of the template. Required. */
+  Title: string;
+  /** Description of the template. Required. */
+  Description: string;
+  /** A note that will be displayed in the UI. Supports HTML content. */
+  Note: string;
+  /** Platform associated with the template. */
+  Platform: Platform;
+  /** Type of created stack. Required. */
+  Type: StackType;
+  /** URL of a Git repository hosting the Stack file. Required. */
+  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 when RepositoryAuthentication is true. */
+  RepositoryUsername?: string;
+  /** Password used in basic authentication when RepositoryAuthentication is true. */
+  RepositoryPassword?: string;
+  /** Path to the Stack file inside the Git repository. */
+  ComposeFilePathInRepository: string;
+  /** Definitions of variables in the stack file. */
+  Variables: VariableDefinition[];
+  /** Indicates whether to skip SSL verification when cloning the Git repository. */
+  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;
+}
+async function createTemplateFromGit(
+  values: CustomTemplateFromGitRepositoryPayload
+) {
+  try {
+    const { data } = await axios.post<CustomTemplate>(
+      buildUrl({ action: 'create/repository' }),
+      values
+    );
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error);
+  }
+}

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

@@ -0,0 +1,25 @@
+import { useQuery } from 'react-query';
+
+import { withGlobalError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { CustomTemplate } from '../types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+
+export async function getCustomTemplate(id: CustomTemplate['Id']) {
+  try {
+    const { data } = await axios.get<CustomTemplate>(buildUrl({ id }));
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get custom template');
+  }
+}
+
+export function useCustomTemplate(id?: CustomTemplate['Id']) {
+  return useQuery(queryKeys.item(id!), () => getCustomTemplate(id!), {
+    ...withGlobalError('Unable to retrieve custom template'),
+    enabled: !!id,
+  });
+}

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

@@ -0,0 +1,67 @@
+import { useMutation, useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withGlobalError } from '@/react-tools/react-query';
+
+import { CustomTemplate } from '../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+type CustomTemplateFileContent = {
+  FileContent: string;
+};
+
+export function useCustomTemplateFile(id?: CustomTemplate['Id'], git = false) {
+  return useQuery(
+    id ? queryKeys.file(id, { git }) : [],
+    () => getCustomTemplateFile({ id: id!, git }),
+    {
+      ...withGlobalError('Failed to get custom template file'),
+      enabled: !!id,
+    }
+  );
+}
+
+export function useCustomTemplateFileMutation() {
+  return useMutation({
+    mutationFn: getCustomTemplateFile,
+    ...withGlobalError('Failed to get custom template file'),
+  });
+}
+
+export function getCustomTemplateFile({
+  git,
+  id,
+}: {
+  id: CustomTemplate['Id'];
+  git: boolean;
+}) {
+  return git ? getCustomTemplateGitFetch(id) : getCustomTemplateFileContent(id);
+}
+
+async function getCustomTemplateFileContent(id: number) {
+  try {
+    const {
+      data: { FileContent },
+    } = await axios.get<CustomTemplateFileContent>(
+      buildUrl({ id, action: 'file' })
+    );
+    return FileContent;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get custom template file content');
+  }
+}
+
+async function getCustomTemplateGitFetch(id: number) {
+  try {
+    const {
+      data: { FileContent },
+    } = await axios.put<CustomTemplateFileContent>(
+      buildUrl({ id, action: 'git_fetch' })
+    );
+    return FileContent;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get custom template file content');
+  }
+}

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

@@ -0,0 +1,27 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withGlobalError } from '@/react-tools/react-query';
+
+import { CustomTemplate } from '../types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+
+export async function getCustomTemplates() {
+  try {
+    const { data } = await axios.get<CustomTemplate[]>(buildUrl());
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get custom templates');
+  }
+}
+
+export function useCustomTemplates<T = Array<CustomTemplate>>({
+  select,
+}: { select?(templates: Array<CustomTemplate>): T } = {}) {
+  return useQuery(queryKeys.base(), () => getCustomTemplates(), {
+    select,
+    ...withGlobalError('Unable to retrieve custom templates'),
+  });
+}

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

@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import {
+  mutationOptions,
+  withGlobalError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { CustomTemplate } from '../types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+
+export function useDeleteTemplateMutation() {
+  const queryClient = useQueryClient();
+  return useMutation(
+    deleteTemplate,
+    mutationOptions(
+      withInvalidate(queryClient, [queryKeys.base()]),
+      withGlobalError('Unable to delete custom template')
+    )
+  );
+}
+export async function deleteTemplate(id: CustomTemplate['Id']) {
+  try {
+    await axios.delete(buildUrl({ id }));
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get custom template');
+  }
+}

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

@@ -0,0 +1,92 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import {
+  mutationOptions,
+  withGlobalError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+import { StackType } from '@/react/common/stacks/types';
+import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
+
+import { CustomTemplate } from '../types';
+import { Platform } from '../../types';
+
+import { buildUrl } from './build-url';
+
+export function useUpdateTemplateMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    updateTemplate,
+    mutationOptions(
+      withInvalidate(queryClient, [['custom-templates']]),
+      withGlobalError('Failed to update template')
+    )
+  );
+}
+
+/**
+ * Payload for updating a custom template
+ */
+interface CustomTemplateUpdatePayload {
+  /** URL of the template's logo */
+  Logo?: string;
+  /** Title of the template */
+  Title: string;
+  /** Description of the template */
+  Description: string;
+  /** A note that will be displayed in the UI. Supports HTML content */
+  Note?: string;
+  /**
+   * Platform associated to the template.
+   * Required for Docker stacks
+   */
+  Platform?: Platform;
+  /**
+   * Type of created stack
+   * Required
+   */
+  Type: StackType;
+  /** 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.
+   * Required when RepositoryAuthentication is true and RepositoryUsername/RepositoryPassword are not provided
+   */
+  RepositoryGitCredentialID?: number;
+  /** Path to the Stack file inside the Git repository */
+  ComposeFilePathInRepository?: string;
+  /** Content of stack file */
+  FileContent?: string;
+  /** Definitions of variables in the stack file */
+  Variables?: VariableDefinition[];
+  /** TLSSkipVerify skips SSL verification when cloning the Git repository */
+  TLSSkipVerify?: boolean;
+  /** IsComposeFormat indicates if the Kubernetes template is created from a Docker Compose file */
+  IsComposeFormat?: boolean;
+  /** EdgeTemplate indicates if this template purpose for Edge Stack */
+  EdgeTemplate?: boolean;
+}
+
+async function updateTemplate(
+  values: CustomTemplateUpdatePayload & { id: CustomTemplate['Id'] }
+) {
+  try {
+    const { data } = await axios.put<CustomTemplate>(
+      buildUrl({ id: values.id }),
+      values
+    );
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error);
+  }
+}

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

@@ -1,15 +1,10 @@
 import { UserId } from '@/portainer/users/types';
 import { StackType } from '@/react/common/stacks/types';
 
-import { ResourceControlResponse } from '../access-control/types';
+import { ResourceControlResponse } from '../../access-control/types';
-import { RepoConfigResponse } from '../gitops/types';
+import { RepoConfigResponse } from '../../gitops/types';
-
+import { VariableDefinition } from '../../custom-templates/components/CustomTemplatesVariablesDefinitionField';
-import { VariableDefinition } from './components/CustomTemplatesVariablesDefinitionField';
+import { Platform } from '../types';
-
-export enum Platform {
-  LINUX = 1,
-  WINDOWS,
-}
 
 export type CustomTemplate = {
   Id: number;
@@ -89,6 +84,9 @@ export type CustomTemplate = {
    * @example false
    */
   IsComposeFormat: boolean;
+
+  /** EdgeTemplate indicates if this template purpose for Edge Stack */
+  EdgeTemplate: boolean;
 };
 
 export type CustomTemplateFileContent = {

app/react/portainer/templates/types.ts

@@ -0,0 +1,4 @@
+export enum Platform {
+  LINUX = 1,
+  WINDOWS,
+}

app/react/sidebar/EdgeComputeSidebar.tsx

@@ -55,7 +55,7 @@ export function EdgeComputeSidebar() {
       )}
       <SidebarParent
         icon={Edit}
-        label="Templates"
+        label="Edge Templates"
         to="edge.templates"
         data-cy="edgeSidebar-templates"
       >
@@ -66,12 +66,12 @@ export function EdgeComputeSidebar() {
           isSubMenu
           data-cy="edgeSidebar-appTemplates"
         />
-        {/* <SidebarItem
+        <SidebarItem
           label="Custom"
           to="edge.templates.custom"
           isSubMenu
           data-cy="edgeSidebar-customTemplates"
-        /> */}
+        />
       </SidebarParent>
     </SidebarSection>
   );

webpack/webpack.common.js

@@ -179,7 +179,7 @@ module.exports = {
   },
   watchOptions: {
     ignored: /node_modules/,
-    aggregateTimeout: 500,
+    aggregateTimeout: 200,
   },
   resolve: {
     alias: {