From 54b4e4e1fabaa3db2e0bfadf022360ebe05fd31f Mon Sep 17 00:00:00 2001
From: waysonwei <degui.wei@gmail.com>
Date: Thu, 9 Sep 2021 12:51:16 +1200
Subject: [PATCH] fix issue from QA testing and added previous button

---
 .../wizard-aci.controller.js                  | 43 ++++++------
 .../wizard-endpoint-aci/wizard-aci.html       |  2 +-
 .../wizard-docker.controller.js               | 68 ++++++++++---------
 .../wizard-endpoint-docker/wizard-docker.html | 12 ++--
 .../wizard-kubernetes.controller.js           | 44 ++++++------
 .../wizard-kubernetes.html                    |  4 +-
 .../wizard-endpoints.controller.js            |  9 +++
 .../wizard-endpoints/wizard-endpoints.css     |  9 +++
 .../wizard-endpoints/wizard-endpoints.html    | 11 ++-
 .../views/wizard/wizard-view.controller.js    |  6 +-
 10 files changed, 121 insertions(+), 87 deletions(-)

diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-aci/wizard-aci.controller.js b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-aci/wizard-aci.controller.js
index f55fa734a..fb8c472b8 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-aci/wizard-aci.controller.js
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-aci/wizard-aci.controller.js
@@ -9,29 +9,30 @@ export default class WizardAciController {
     this.NameValidator = NameValidator;
   }
 
-  async addAciEndpoint() {
-    const { name, azureApplicationId, azureTenantId, azureAuthenticationKey } = this.formValues;
-    const groupId = 1;
-    const tagIds = [];
+  addAciEndpoint() {
+    return this.$async(async () => {
+      const { name, azureApplicationId, azureTenantId, azureAuthenticationKey } = this.formValues;
+      const groupId = 1;
+      const tagIds = [];
 
-    try {
-      this.state.actionInProgress = true;
-      // Check name is duplicated or not
-      let nameUsed = await this.NameValidator.validateEnvironmentName(name);
-      if (nameUsed) {
-        this.Notifications.error('Failure', true, 'This name is been used, please try another one');
-        return;
+      try {
+        this.state.actionInProgress = true;
+        // Check name is duplicated or not
+        let nameUsed = await this.NameValidator.validateEnvironmentName(name);
+        if (nameUsed) {
+          this.Notifications.error('Failure', true, 'This name is been used, please try another one');
+          return;
+        }
+        await this.EndpointService.createAzureEndpoint(name, azureApplicationId, azureTenantId, azureAuthenticationKey, groupId, tagIds);
+        this.Notifications.success('Environment connected', name);
+        this.clearForm();
+        this.onUpdate();
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to connect your environment');
+        this.state.actionInProgress = false;
       }
-      await this.EndpointService.createAzureEndpoint(name, azureApplicationId, azureTenantId, azureAuthenticationKey, groupId, tagIds);
-      this.Notifications.success('Environment connected', name);
-      this.clearForm();
-      this.onUpdate();
-    } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to connect your environment');
-      this.state.actionInProgress = false;
-    }
-
-    this.onAnalytics('aci-api');
+      this.onAnalytics('aci-api');
+    });
   }
 
   clearForm() {
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-aci/wizard-aci.html b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-aci/wizard-aci.html
index d355ee261..0232d4bcb 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-aci/wizard-aci.html
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-aci/wizard-aci.html
@@ -55,7 +55,7 @@
       <button
         type="submit"
         class="btn btn-primary btn-sm wizard-connect-button"
-        ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.azureApplicationId || !$ctrl.formValues.azureTenantId || !$ctrl.formValues.azureAuthenticationKey"
+        ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.azureApplicationId || !$ctrl.formValues.azureTenantId || !$ctrl.formValues.azureAuthenticationKey || $ctrl.state.actionInProgress"
         ng-click="$ctrl.addAciEndpoint()"
         button-spinner="$ctrl.state.actionInProgress"
       >
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-docker/wizard-docker.controller.js b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-docker/wizard-docker.controller.js
index 7d352dfd8..a7ce1a2a2 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-docker/wizard-docker.controller.js
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-docker/wizard-docker.controller.js
@@ -40,43 +40,45 @@ export default class WizardDockerController {
   }
 
   // connect docker environment
-  async connectEnvironment(type) {
-    const name = this.formValues.name;
-    const url = this.$filter('stripprotocol')(this.formValues.url);
-    const publicUrl = url.split(':')[0];
-    const overrideUrl = this.formValues.socketPath;
-    const groupId = this.formValues.groupId;
-    const tagIds = this.formValues.tagIds;
-    const securityData = this.formValues.securityFormData;
-    const socketUrl = this.formValues.overrideSocket ? overrideUrl : url;
+  connectEnvironment(type) {
+    return this.$async(async () => {
+      const name = this.formValues.name;
+      const url = this.$filter('stripprotocol')(this.formValues.url);
+      const publicUrl = url.split(':')[0];
+      const overrideUrl = this.formValues.socketPath;
+      const groupId = this.formValues.groupId;
+      const tagIds = this.formValues.tagIds;
+      const securityData = this.formValues.securityFormData;
+      const socketUrl = this.formValues.overrideSocket ? overrideUrl : url;
 
-    var creationType = null;
+      var creationType = null;
 
-    if (type === 'agent') {
-      creationType = PortainerEndpointCreationTypes.AgentEnvironment;
-    }
+      if (type === 'agent') {
+        creationType = PortainerEndpointCreationTypes.AgentEnvironment;
+      }
 
-    if (type === 'api') {
-      creationType = PortainerEndpointCreationTypes.LocalDockerEnvironment;
-    }
+      if (type === 'api') {
+        creationType = PortainerEndpointCreationTypes.LocalDockerEnvironment;
+      }
 
-    // Check name is duplicated or not
-    const nameUsed = await this.NameValidator.validateEnvironmentName(name);
-    if (nameUsed) {
-      this.Notifications.error('Failure', true, 'This name is been used, please try another one');
-      return;
-    }
-    switch (type) {
-      case 'agent':
-        await this.addDockerAgentEndpoint(name, creationType, url, publicUrl, groupId, tagIds);
-        break;
-      case 'api':
-        await this.addDockerApiEndpoint(name, creationType, url, publicUrl, groupId, tagIds, securityData);
-        break;
-      case 'socket':
-        await this.addDockerLocalEndpoint(name, socketUrl, publicUrl, groupId, tagIds);
-        break;
-    }
+      // Check name is duplicated or not
+      const nameUsed = await this.NameValidator.validateEnvironmentName(name);
+      if (nameUsed) {
+        this.Notifications.error('Failure', true, 'This name is been used, please try another one');
+        return;
+      }
+      switch (type) {
+        case 'agent':
+          await this.addDockerAgentEndpoint(name, creationType, url, publicUrl, groupId, tagIds);
+          break;
+        case 'api':
+          await this.addDockerApiEndpoint(name, creationType, url, publicUrl, groupId, tagIds, securityData);
+          break;
+        case 'socket':
+          await this.addDockerLocalEndpoint(name, socketUrl, publicUrl, groupId, tagIds);
+          break;
+      }
+    });
   }
 
   // Docker Agent Endpoint
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-docker/wizard-docker.html b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-docker/wizard-docker.html
index c49d91ddb..18f1884ca 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-docker/wizard-docker.html
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-docker/wizard-docker.html
@@ -138,9 +138,9 @@
         ng-if="$ctrl.state.endpointType === 'agent'"
         type="submit"
         class="btn btn-primary btn-sm wizard-connect-button"
-        ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.url"
+        ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.url || $ctrl.state.actionInProgress"
         ng-click="$ctrl.connectEnvironment('agent')"
-        button-spinner="state.actionInProgress"
+        button-spinner="$ctrl.state.actionInProgress"
       >
         <span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plug" style="margin-right: 5px;"></i>Connect </span>
         <span ng-show="$ctrl.state.actionInProgress">Connecting environment...</span>
@@ -149,9 +149,9 @@
         ng-if="$ctrl.state.endpointType === 'api'"
         type="submit"
         class="btn btn-primary btn-sm wizard-connect-button"
-        ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.url"
+        ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.url || $ctrl.state.actionInProgress"
         ng-click="$ctrl.connectEnvironment('api')"
-        button-spinner="state.actionInProgress"
+        button-spinner="$ctrl.state.actionInProgress"
       >
         <span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plug" style="margin-right: 5px;"></i>Connect </span>
         <span ng-show="$ctrl.state.actionInProgress">Connecting environment...</span>
@@ -160,9 +160,9 @@
         ng-if="$ctrl.state.endpointType === 'socket'"
         type="submit"
         class="btn btn-primary btn-sm wizard-connect-button"
-        ng-disabled="!$ctrl.formValues.name"
+        ng-disabled="!$ctrl.formValues.name || $ctrl.state.actionInProgress"
         ng-click="$ctrl.connectEnvironment('socket')"
-        button-spinner="state.actionInProgress"
+        button-spinner="$ctrl.state.actionInProgress"
       >
         <span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plug" style="margin-right: 5px;"></i>Connect </span>
         <span ng-show="$ctrl.state.actionInProgress">Connecting environment...</span>
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-kubernetes/wizard-kubernetes.controller.js b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-kubernetes/wizard-kubernetes.controller.js
index 989ec884b..675e2b958 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-kubernetes/wizard-kubernetes.controller.js
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-kubernetes/wizard-kubernetes.controller.js
@@ -14,28 +14,30 @@ export default class WizardKubernetesController {
     this.NameValidator = NameValidator;
   }
 
-  async addKubernetesAgent() {
-    const name = this.state.formValues.name;
-    const groupId = 1;
-    const tagIds = [];
-    const url = this.$filter('stripprotocol')(this.state.formValues.url);
-    const publicUrl = url.split(':')[0];
-    const creationType = PortainerEndpointCreationTypes.AgentEnvironment;
-    const tls = true;
-    const tlsSkipVerify = true;
-    const tlsSkipClientVerify = true;
-    const tlsCaFile = null;
-    const tlsCertFile = null;
-    const tlsKeyFile = null;
+  addKubernetesAgent() {
+    return this.$async(async () => {
+      const name = this.state.formValues.name;
+      const groupId = 1;
+      const tagIds = [];
+      const url = this.$filter('stripprotocol')(this.state.formValues.url);
+      const publicUrl = url.split(':')[0];
+      const creationType = PortainerEndpointCreationTypes.AgentEnvironment;
+      const tls = true;
+      const tlsSkipVerify = true;
+      const tlsSkipClientVerify = true;
+      const tlsCaFile = null;
+      const tlsCertFile = null;
+      const tlsKeyFile = null;
 
-    // Check name is duplicated or not
-    let nameUsed = await this.NameValidator.validateEnvironmentName(name);
-    if (nameUsed) {
-      this.Notifications.error('Failure', true, 'This name is been used, please try another one');
-      return;
-    }
-    this.addRemoteEndpoint(name, creationType, url, publicUrl, groupId, tagIds, tls, tlsSkipVerify, tlsSkipClientVerify, tlsCaFile, tlsCertFile, tlsKeyFile);
-    this.onAnalytics('kubernetes-agent');
+      // Check name is duplicated or not
+      let nameUsed = await this.NameValidator.validateEnvironmentName(name);
+      if (nameUsed) {
+        this.Notifications.error('Failure', true, 'This name is been used, please try another one');
+        return;
+      }
+      await this.addRemoteEndpoint(name, creationType, url, publicUrl, groupId, tagIds, tls, tlsSkipVerify, tlsSkipClientVerify, tlsCaFile, tlsCertFile, tlsKeyFile);
+      this.onAnalytics('kubernetes-agent');
+    });
   }
 
   async addRemoteEndpoint(name, creationType, url, publicURL, groupId, tagIds, tls, tlsSkipVerify, tlsSkipClientVerify, tlsCaFile, tlsCertFile, tlsKeyFile) {
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-kubernetes/wizard-kubernetes.html b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-kubernetes/wizard-kubernetes.html
index 6d532dd42..cd6cac537 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-kubernetes/wizard-kubernetes.html
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoint-kubernetes/wizard-kubernetes.html
@@ -53,9 +53,9 @@
       <button
         type="submit"
         class="btn btn-primary btn-sm wizard-connect-button"
-        ng-disabled="!$ctrl.state.formValues.name || !$ctrl.state.formValues.url"
+        ng-disabled="!$ctrl.state.formValues.name || !$ctrl.state.formValues.url || $ctrl.state.actionInProgress"
         ng-click="$ctrl.addKubernetesAgent()"
-        button-spinner="state.actionInProgress"
+        button-spinner="$ctrl.state.actionInProgress"
       >
         <span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plug" style="margin-right: 5px;"></i> Connect </span>
         <span ng-show="$ctrl.state.actionInProgress">Connecting environment...</span>
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.controller.js b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.controller.js
index aedc2c563..2a09b80bb 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.controller.js
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.controller.js
@@ -44,6 +44,14 @@ export default class WizardEndpointsController {
     this.state.currentStep++;
   }
 
+  previousStep() {
+    this.state.section = this.state.selections[this.state.currentStep - 2].endpoint;
+    this.state.selections[this.state.currentStep - 2].stage = 'active';
+    this.state.selections[this.state.currentStep - 1].stage = '';
+    this.state.nextStep = 'Next Step';
+    this.state.currentStep--;
+  }
+
   nextStep() {
     if (this.state.currentStep >= this.state.maxStep - 1) {
       this.state.nextStep = 'Finish';
@@ -137,6 +145,7 @@ export default class WizardEndpointsController {
         kubernetesActive: '',
         aciActive: '',
         maxStep: '',
+        previousStep: 'Previous',
         nextStep: 'Next Step',
         selections: [],
         analytics: {
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.css b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.css
index 7ee97c3d9..8b6a8a56f 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.css
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.css
@@ -62,6 +62,15 @@
   border-top: 1px solid #777;
 }
 
+.next-btn {
+  float: right;
+}
+
+.previous-btn {
+  float: left;
+  margin-left: 0px !important;
+}
+
 .wizard-wrapper {
   display: grid;
   grid-template-columns: 1fr 400px;
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.html b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.html
index 786dfa149..d54eb5bd7 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.html
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-endpoints.html
@@ -23,7 +23,16 @@
             </div>
 
             <div class="wizard-step-action">
-              <button ng-click="$ctrl.nextStep()" ng-show="$ctrl.state.currentStep !== 0" type="submit" class="btn btn-primary btn-sm">
+              <button
+                ng-click="$ctrl.previousStep()"
+                ng-show="$ctrl.state.currentStep !== 0"
+                type="submit"
+                class="btn btn-primary btn-sm previous-btn"
+                ng-disabled="$ctrl.state.currentStep === 1"
+              >
+                <i class="fas fa-arrow-left space-right"></i>{{ $ctrl.state.previousStep }}
+              </button>
+              <button ng-click="$ctrl.nextStep()" ng-show="$ctrl.state.currentStep !== 0" type="submit" class="btn btn-primary btn-sm next-btn">
                 {{ $ctrl.state.nextStep }} <i class="fas fa-arrow-right space-left"></i
               ></button>
             </div>
diff --git a/app/portainer/views/wizard/wizard-view.controller.js b/app/portainer/views/wizard/wizard-view.controller.js
index 09aa6c33e..314719cd0 100644
--- a/app/portainer/views/wizard/wizard-view.controller.js
+++ b/app/portainer/views/wizard/wizard-view.controller.js
@@ -1,3 +1,5 @@
+import { PortainerEndpointCreationTypes } from 'Portainer/models/endpoint/models';
+
 export default class WizardViewController {
   /* @ngInject */
   constructor($async, $state, EndpointService, $analytics) {
@@ -80,13 +82,13 @@ export default class WizardViewController {
         }
       } else {
         const addedLocalEndpoint = endpoints.value[0];
-        if (addedLocalEndpoint.Type === 1) {
+        if (addedLocalEndpoint.Type === PortainerEndpointCreationTypes.LocalDockerEnvironment) {
           this.state.endpoint.added = true;
           this.state.endpoint.connected = 'docker';
           this.state.local.icon = 'fab fa-docker';
         }
 
-        if (addedLocalEndpoint.Type === 5) {
+        if (addedLocalEndpoint.Type === PortainerEndpointCreationTypes.LocalKubernetesEnvironment) {
           this.state.endpoint.added = true;
           this.state.endpoint.connected = 'kubernetes';
           this.state.local.icon = 'fas fa-dharmachakra';