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

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) {
-    Object.assign(this, { $async, EdgeTemplateService, Notifications });
+  constructor($async, 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) {
-    this.formValues.StackFileContent = value;
-    this.state.isEditorDirty = true;
+    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
-  ng-if="$ctrl.state.Method === 'repository'"
-  value="$ctrl.formValues"
-  on-change="($ctrl.onChangeFormValues)"
-  base-webhook-url="{{ $ctrl.state.baseWebhookUrl }}"
-  webhook-id="{{ $ctrl.state.webhookId }}"
-  docs-links
-></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 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>
 </div>

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

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