fix(stack): git form validation improvement. EE-1291 EE-1292 (#5440)

* fix(stack): git form validation improvement. EE-1291 EE-1292

* feedback update

* moved comparison function to OnChange

* fixed on change method in environment variable panel.

* using angularJs.ToJson to strip out $$haskey in formValues

app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.controller.js

@@ -1,4 +1,5 @@
 import uuidv4 from 'uuid/v4';
+
 class StackRedeployGitFormController {
   /* @ngInject */
   constructor($async, $state, StackService, ModalService, Notifications, WebhookHelper, FormHelper) {
@@ -15,6 +16,7 @@ class StackRedeployGitFormController {
       redeployInProgress: false,
       showConfig: false,
       isEdit: false,
+      hasUnsavedChanges: false,
     };
 
     this.formValues = {
@@ -34,11 +36,8 @@ class StackRedeployGitFormController {
 
     this.onChange = this.onChange.bind(this);
     this.onChangeRef = this.onChangeRef.bind(this);
-    this.handleEnvVarChange = this.handleEnvVarChange.bind(this);
-  }
-
-  onChangeRef(value) {
-    this.onChange({ RefName: value });
+    this.onChangeAutoUpdate = this.onChangeAutoUpdate.bind(this);
+    this.onChangeEnvVar = this.onChangeEnvVar.bind(this);
   }
 
   onChange(values) {
@@ -46,6 +45,25 @@ class StackRedeployGitFormController {
       ...this.formValues,
       ...values,
     };
+
+    this.state.hasUnsavedChanges = angular.toJson(this.savedFormValues) !== angular.toJson(this.formValues);
+  }
+
+  onChangeRef(value) {
+    this.onChange({ RefName: value });
+  }
+
+  onChangeAutoUpdate(values) {
+    this.onChange({
+      AutoUpdate: {
+        ...this.formValues.AutoUpdate,
+        ...values,
+      },
+    });
+  }
+
+  onChangeEnvVar(value) {
+    this.onChange({ Env: value });
   }
 
   async submit() {
@@ -83,6 +101,8 @@ class StackRedeployGitFormController {
       try {
         this.state.inProgress = true;
         await this.StackService.updateGitStackSettings(this.stack.Id, this.stack.EndpointId, this.FormHelper.removeInvalidEnvVars(this.formValues.Env), this.formValues);
+        this.savedFormValues = angular.copy(this.formValues);
+        this.state.hasUnsavedChanges = false;
         this.Notifications.success('Save stack settings successfully');
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to save stack settings');
@@ -96,10 +116,6 @@ class StackRedeployGitFormController {
     return this.state.inProgress || this.state.redeployInProgress;
   }
 
-  handleEnvVarChange(value) {
-    this.formValues.Env = value;
-  }
-
   $onInit() {
     this.formValues.RefName = this.model.ReferenceName;
     this.formValues.Env = this.stack.Env;
@@ -125,6 +141,8 @@ class StackRedeployGitFormController {
       this.formValues.RepositoryAuthentication = true;
       this.state.isEdit = true;
     }
+
+    this.savedFormValues = angular.copy(this.formValues);
   }
 }
 

app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html

@@ -18,7 +18,7 @@
     </div>
   </div>
 
-  <git-form-auto-update-fieldset model="$ctrl.formValues.AutoUpdate" on-change="($ctrl.onChange)"></git-form-auto-update-fieldset>
+  <git-form-auto-update-fieldset model="$ctrl.formValues.AutoUpdate" on-change="($ctrl.onChangeAutoUpdate)"></git-form-auto-update-fieldset>
   <div class="form-group">
     <div class="col-sm-12">
       <p>
@@ -40,14 +40,14 @@
   <environment-variables-panel
     ng-model="$ctrl.formValues.Env"
     explanation="These values will be used as substitutions in the stack file"
-    on-change="($ctrl.handleEnvVarChange)"
+    on-change="($ctrl.onChangeEnvVar)"
   ></environment-variables-panel>
 
   <button
     class="btn btn-sm btn-primary"
     ng-click="$ctrl.submit()"
     ng-if="!$ctrl.formValues.AutoUpdate.RepositoryAutomaticUpdates"
-    ng-disabled="$ctrl.isSubmitButtonDisabled() || !$ctrl.redeployGitForm.$valid"
+    ng-disabled="$ctrl.isSubmitButtonDisabled() || $ctrl.state.hasUnsavedChanges || !$ctrl.redeployGitForm.$valid"
     style="margin-top: 7px; margin-left: 0;"
     button-spinner="$ctrl.state.redeployInProgress"
     style="margin-top: 7px; margin-left: 0;"
@@ -60,7 +60,7 @@
   <button
     class="btn btn-sm btn-primary"
     ng-click="$ctrl.saveGitSettings()"
-    ng-disabled="$ctrl.isSubmitButtonDisabled() || !$ctrl.redeployGitForm.$valid"
+    ng-disabled="$ctrl.isSubmitButtonDisabled() || !$ctrl.state.hasUnsavedChanges || !$ctrl.redeployGitForm.$valid"
     style="margin-top: 7px; margin-left: 0;"
     button-spinner="$ctrl.state.inProgress"
   >