From fa63432695d4356456daf0a285f8ebf5accab0d6 Mon Sep 17 00:00:00 2001
From: Oscar Zhou <100548325+oscarzhou-portainer@users.noreply.github.com>
Date: Fri, 19 Jan 2024 09:28:09 +1300
Subject: [PATCH] fix(stack/template): web editor error shows for changing
 between same mustache templates [EE-6563] (#10976)

---
 .../create-edge-stack-view.controller.js                    | 6 +++++-
 app/portainer/helpers/stackHelper.js                        | 2 +-
 .../react/components/custom-templates/variables-field.ts    | 2 +-
 app/portainer/views/stacks/create/createStackController.js  | 1 +
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
index c806c8e4b..801e63306 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
+++ b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
@@ -85,7 +85,11 @@ export default class CreateEdgeStackViewController {
         await this.onChangeTemplate(newTemplateValues.template);
       }
 
-      const newFile = renderTemplate(this.state.templateValues.file, this.state.templateValues.variables, this.state.templateValues.template.Variables);
+      let definitions = [];
+      if (this.state.templateValues.template) {
+        definitions = this.state.templateValues.template.Variables;
+      }
+      const newFile = renderTemplate(this.state.templateValues.file, this.state.templateValues.variables, definitions);
 
       this.formValues.StackFileContent = newFile;
     });
diff --git a/app/portainer/helpers/stackHelper.js b/app/portainer/helpers/stackHelper.js
index 57ba8f710..b8e2fb6b2 100644
--- a/app/portainer/helpers/stackHelper.js
+++ b/app/portainer/helpers/stackHelper.js
@@ -33,7 +33,7 @@ function validateYAML(yaml, containerNames, originalContainersNames = []) {
   let yamlObject;
 
   try {
-    yamlObject = YAML.parse(yaml);
+    yamlObject = YAML.parse(yaml, { mapAsMap: true });
   } catch (err) {
     return 'There is an error in the yaml syntax: ' + err;
   }
diff --git a/app/portainer/react/components/custom-templates/variables-field.ts b/app/portainer/react/components/custom-templates/variables-field.ts
index ec6ece554..30580417d 100644
--- a/app/portainer/react/components/custom-templates/variables-field.ts
+++ b/app/portainer/react/components/custom-templates/variables-field.ts
@@ -33,7 +33,7 @@ class VariablesFieldController implements IComponentController {
   }
 
   $onChanges({ value }: IOnChangesObject) {
-    if (value.currentValue) {
+    if (value?.currentValue) {
       this.checkValidity(value.currentValue);
     }
   }
diff --git a/app/portainer/views/stacks/create/createStackController.js b/app/portainer/views/stacks/create/createStackController.js
index 93532b81c..6dade3056 100644
--- a/app/portainer/views/stacks/create/createStackController.js
+++ b/app/portainer/views/stacks/create/createStackController.js
@@ -328,6 +328,7 @@ angular
           return;
         }
         const rendered = renderTemplate($scope.state.templateContent, $scope.formValues.Variables, $scope.state.selectedTemplate.Variables);
+        $scope.state.editorYamlValidationError = StackHelper.validateYAML(rendered, $scope.containerNames);
         onChangeFormValues({ StackFileContent: rendered });
       }