From d0a9c046b38f918e2ad96134b2af577402f25cf7 Mon Sep 17 00:00:00 2001
From: Zhang Hao <hao.zhang@portainer.io>
Date: Mon, 1 Aug 2022 23:07:41 +0800
Subject: [PATCH] refactor(docker/stack): stack creation page [EE-3486] (#7316)

* reactor(docker/stack): stack creation page [EE-3486]

* feat(stack): some missing component on stack create page and edit page [EE-3486]
---
 .../environment-variables-panel.html          |  2 +-
 .../stacks/create/createStackController.js    |  6 +++
 .../views/stacks/create/createstack.html      | 31 ++++++------
 app/portainer/views/stacks/edit/stack.html    | 48 +++++++++----------
 .../views/stacks/edit/stackController.js      | 12 +++++
 5 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/app/portainer/components/environment-variables-panel/environment-variables-panel.html b/app/portainer/components/environment-variables-panel/environment-variables-panel.html
index 1bf871e43..b3fd051ab 100644
--- a/app/portainer/components/environment-variables-panel/environment-variables-panel.html
+++ b/app/portainer/components/environment-variables-panel/environment-variables-panel.html
@@ -15,7 +15,7 @@
 
     <div ng-if="$ctrl.mode == 'advanced'" class="environment-variables-panel--advanced">
       <div class="col-sm-12">
-        <a class="small interactive" ng-click="$ctrl.switchEnvMode()"> <i class="fa fa-list-ol space-right" aria-hidden="true"></i> Simple mode </a>
+        <a class="small interactive" ng-click="$ctrl.switchEnvMode()"> <pr-icon icon="'list'" feather="true"></pr-icon> Simple mode </a>
       </div>
       <div class="col-sm-12 small text-muted">
         <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
diff --git a/app/portainer/views/stacks/create/createStackController.js b/app/portainer/views/stacks/create/createStackController.js
index 5a8445900..29042eeb3 100644
--- a/app/portainer/views/stacks/create/createStackController.js
+++ b/app/portainer/views/stacks/create/createStackController.js
@@ -84,6 +84,12 @@ angular
 
       $scope.onChangeFormValues = onChangeFormValues;
 
+      $scope.onEnableWebhookChange = function (enable) {
+        $scope.$evalAsync(() => {
+          $scope.formValues.EnableWebhook = enable;
+        });
+      };
+
       $scope.addAdditionalFiles = function () {
         $scope.formValues.AdditionalFiles.push('');
       };
diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html
index 1064c5c01..49901afd2 100644
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/app/portainer/views/stacks/create/createstack.html
@@ -107,7 +107,10 @@
             </div>
             <div class="form-group">
               <div class="col-sm-12">
-                <button type="button" class="btn btn-sm btn-primary" ngf-select="uploadFile($file)">Select file</button>
+                <button type="button" class="btn btn-sm btn-light" ngf-select="uploadFile($file)">
+                  <pr-icon icon="'upload'" feather="true"></pr-icon>
+                  Select file</button
+                >
                 <span style="margin-left: 5px">
                   {{ formValues.StackFile.name }}
                   <i class="fa fa-times red-icon" ng-if="!formValues.StackFile" aria-hidden="true"></i>
@@ -164,21 +167,17 @@
           </web-editor-form>
 
           <div ng-if="state.Method !== 'repository' && isAdmin && applicationState.endpoint.type !== 4">
-            <div class="col-sm-12 form-section-title"> Webhooks </div>
-            <div class="form-group">
-              <div class="col-sm-12">
-                <label class="control-label text-left">
-                  Create a Stack webhook
-                  <portainer-tooltip
-                    position="'top'"
-                    message="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
-                  ></portainer-tooltip>
-                </label>
-                <label class="switch box-selector-item limited business" style="margin-left: 20px">
-                  <input type="checkbox" ng-model="formValues.EnableWebhook" disabled="disabled" ng-checked="false" /><i></i>
-                </label>
-                <be-feature-indicator feature="stackWebhookFeature"></be-feature-indicator>
-              </div>
+            <div class="col-sm-12 form-section-title">
+              Webhooks
+              <por-switch-field
+                name="EnableWebhook"
+                checked="formValues.EnableWebhook"
+                label-class="'col-sm-2'"
+                tooltip="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
+                label="'Create a Stack webhook'"
+                on-change="(onEnableWebhookChange)"
+                feature-id="'stack-webhook'"
+              ></por-switch-field>
             </div>
           </div>
 
diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html
index 4085a0014..2c08a79a7 100644
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/app/portainer/views/stacks/edit/stack.html
@@ -44,15 +44,15 @@
                     ng-if="regular && stack.Status === 1"
                     authorization="PortainerStackUpdate"
                     ng-disabled="state.actionInProgress"
-                    class="btn btn-xs btn-danger"
+                    class="btn btn-xs btn-light"
                     ng-click="stopStack()"
                   >
-                    <i class="fa fa-stop space-right" aria-hidden="true"></i>
+                    <pr-icon icon="'stop-circle'" feather="true"></pr-icon>
                     Stop this stack
                   </button>
 
-                  <button authorization="PortainerStackDelete" class="btn btn-xs btn-danger" ng-click="removeStack()" ng-if="!external || stack.Type == 1">
-                    <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>
+                  <button authorization="PortainerStackDelete" class="btn btn-xs btn-light" ng-click="removeStack()" ng-if="!external || stack.Type == 1">
+                    <pr-icon icon="'trash-2'" feather="true"></pr-icon>
                     Delete this stack
                   </button>
 
@@ -61,7 +61,7 @@
                     class="btn btn-primary btn-xs"
                     ui-sref="docker.templates.custom.new({fileContent: stackFileContent, type: stack.Type})"
                   >
-                    <i class="fa fa-plus space-right" aria-hidden="true"></i>
+                    <pr-icon icon="'plus'" feather="true"></pr-icon>
                     Create template from stack
                   </button>
                   <button
@@ -156,21 +156,16 @@
               </div>
 
               <div ng-if="isAdmin && applicationState.endpoint.type !== 4">
-                <div class="col-sm-12 form-section-title"> Webhooks </div>
-                <div class="form-group">
-                  <div class="col-sm-12">
-                    <label class="control-label text-left">
-                      Create a Stack webhook
-                      <portainer-tooltip
-                        position="'top'"
-                        message="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
-                      ></portainer-tooltip>
-                    </label>
-                    <label class="switch box-selector-item limited business" style="margin-left: 20px">
-                      <input type="checkbox" ng-model="formValues.EnableWebhook" disabled="disabled" ng-checked="false" /><i></i>
-                    </label>
-                    <be-feature-indicator feature="stackWebhookFeature"></be-feature-indicator>
-                  </div>
+                <div class="col-sm-12 form-section-title">
+                  Webhooks
+                  <por-switch-field
+                    name="EnableWebhook"
+                    checked="formValues.EnableWebhook"
+                    label-class="'col-sm-2'"
+                    tooltip="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
+                    label="'Create a Stack webhook'"
+                    feature-id="'stack-webhook'"
+                  ></por-switch-field>
                 </div>
               </div>
 
@@ -189,11 +184,14 @@
                 <div class="col-sm-12 form-section-title"> Options </div>
                 <div class="form-group">
                   <div class="col-sm-12">
-                    <label for="prune" class="control-label text-left">
-                      Prune services
-                      <portainer-tooltip position="'top'" message="'Prune services that are no longer referenced.'"></portainer-tooltip>
-                    </label>
-                    <label class="switch" style="margin-left: 20px"> <input name="prune" type="checkbox" ng-model="formValues.Prune" /><i></i> </label>
+                    <por-switch-field
+                      name="prune"
+                      checked="formValues.Prune"
+                      tooltip="'Prune services that are no longer referenced.'"
+                      label-class="'col-sm-2'"
+                      label="'Prune services'"
+                      on-change="(onPruneChange)"
+                    ></por-switch-field>
                   </div>
                 </div>
               </div>
diff --git a/app/portainer/views/stacks/edit/stackController.js b/app/portainer/views/stacks/edit/stackController.js
index 4bb08a802..b9d32cbef 100644
--- a/app/portainer/views/stacks/edit/stackController.js
+++ b/app/portainer/views/stacks/edit/stackController.js
@@ -94,6 +94,18 @@ angular.module('portainer.app').controller('StackController', [
       $scope.formValues.Env = value;
     }
 
+    $scope.onEnableWebhookChange = function (enable) {
+      $scope.$evalAsync(() => {
+        $scope.formValues.EnableWebhook = enable;
+      });
+    };
+
+    $scope.onPruneChange = function (enable) {
+      $scope.$evalAsync(() => {
+        $scope.formValues.Prune = enable;
+      });
+    };
+
     $scope.duplicateStack = function duplicateStack(name, targetEndpointId) {
       var stack = $scope.stack;
       var env = FormHelper.removeInvalidEnvVars($scope.formValues.Env);