From e4fc41fc9400cb9456ab8640ffc225980ba25bc2 Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Thu, 14 Jul 2022 21:35:37 +0800
Subject: [PATCH] fix(ui): update UI of docker/network/create EE-3507 (#7255)

* EE-3507 update UI of docker/network/create

* EE-3507 update all icons
---
 .../networkMacvlanForm.html                   | 16 ++--
 .../create/createNetworkController.js         | 12 +++
 .../views/networks/create/createnetwork.html  | 88 +++++++++----------
 3 files changed, 64 insertions(+), 52 deletions(-)

diff --git a/app/docker/components/network-macvlan-form/networkMacvlanForm.html b/app/docker/components/network-macvlan-form/networkMacvlanForm.html
index fb61daa16..980219c38 100644
--- a/app/docker/components/network-macvlan-form/networkMacvlanForm.html
+++ b/app/docker/components/network-macvlan-form/networkMacvlanForm.html
@@ -2,13 +2,13 @@
   <div class="col-sm-12 form-section-title"> Macvlan configuration </div>
   <!-- selector -->
   <div class="form-group">
-    <span class="col-sm-12 text-muted small">
-      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+    <span class="col-sm-12 text-muted small vertical-center">
+      <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
       To create a MACVLAN network you need to create a configuration, then create the network from this configuration.
     </span>
   </div>
   <div class="col-sm-12">
-    <div class="form-group" style="margin-bottom: 0">
+    <div class="form-group">
       <div class="boxselector_wrapper">
         <div>
           <input type="radio" id="network_config" ng-model="$ctrl.data.Scope" value="local" />
@@ -55,7 +55,7 @@
       <div class="form-group" ng-show="macvlanConfigurationForm.network_card.$invalid">
         <div class="col-sm-12 small text-warning">
           <div ng-messages="macvlanConfigurationForm.network_card.$error">
-            <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Parent network card must be specified.</p>
+            <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Parent network card must be specified.</p>
           </div>
         </div>
       </div>
@@ -82,7 +82,7 @@
         <div class="form-group" ng-show="macvlanConfigurationForm.node_selector.$invalid">
           <div class="col-sm-12 small text-warning">
             <div ng-messages="macvlanConfigurationForm.node_selector.$error">
-              <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> At least one node must be selected.</p>
+              <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> At least one node must be selected.</p>
             </div>
           </div>
         </div>
@@ -95,8 +95,8 @@
       <!-- configuration-selector -->
       <!-- network-input -->
       <div class="form-group">
-        <label for="config_network" class="col-sm-2 col-lg-1 control-label text-left">Configuration</label>
-        <div class="col-sm-9">
+        <label for="config_network" class="col-sm-3 col-lg-2 control-label text-left">Configuration</label>
+        <div class="col-sm-9 col-lg-10">
           <select
             class="form-control"
             ng-options="net.Name for net in $ctrl.availableNetworks"
@@ -112,7 +112,7 @@
       <div class="form-group" ng-show="macvlanConfigurationForm.config_network.$invalid">
         <div class="col-sm-12 small text-warning">
           <div ng-messages="macvlanConfigurationForm.config_network.$error">
-            <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Select a configuration network.</p>
+            <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Select a configuration network.</p>
           </div>
         </div>
       </div>
diff --git a/app/docker/views/networks/create/createNetworkController.js b/app/docker/views/networks/create/createNetworkController.js
index 134d4fff9..7a3fed4b2 100644
--- a/app/docker/views/networks/create/createNetworkController.js
+++ b/app/docker/views/networks/create/createNetworkController.js
@@ -202,6 +202,18 @@ angular.module('portainer.docker').controller('CreateNetworkController', [
       }
     }
 
+    $scope.onChangeInternal = function (enable) {
+      $scope.$evalAsync(() => {
+        $scope.config.Internal = enable;
+      });
+    };
+
+    $scope.onChangeAttachable = function (enable) {
+      $scope.$evalAsync(() => {
+        $scope.config.Attachable = enable;
+      });
+    };
+
     function validateForm(accessControlData, isAdmin) {
       $scope.state.formValidationError = '';
       var error = '';
diff --git a/app/docker/views/networks/create/createnetwork.html b/app/docker/views/networks/create/createnetwork.html
index c109e2d55..b3a05a2a6 100644
--- a/app/docker/views/networks/create/createnetwork.html
+++ b/app/docker/views/networks/create/createnetwork.html
@@ -27,18 +27,15 @@
           <!-- !driver-input -->
           <!-- driver-options -->
           <div class="form-group">
-            <div class="col-sm-12" style="margin-top: 5px">
+            <div class="col-sm-12 mt-1">
               <label class="control-label text-left">
                 Driver options
                 <portainer-tooltip message="'Driver options are specific to the selected driver. Please refer to the selected driver documentation.'"></portainer-tooltip>
               </label>
-              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addDriverOption()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> add driver option
-              </span>
             </div>
             <!-- driver-options-input-list -->
-            <div class="col-sm-12 form-inline" style="margin-top: 10px">
-              <div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px">
+            <div class="col-sm-12 form-inline mt-2">
+              <div ng-repeat="option in formValues.DriverOptions" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
                   <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. com.docker.network.bridge.enable_icc" />
@@ -47,10 +44,13 @@
                   <span class="input-group-addon">value</span>
                   <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" />
                 </div>
-                <button class="btn btn-sm btn-danger" type="button" ng-click="removeDriverOption($index)">
-                  <i class="fa fa-trash" aria-hidden="true"></i>
+                <button class="btn btn-sm btn-light" type="button" ng-click="removeDriverOption($index)">
+                  <pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
                 </button>
               </div>
+              <div class="small interactive text-muted vertical-center mt-1" ng-click="addDriverOption()">
+                <pr-icon icon="'plus'" size="'md'" feather="true"></pr-icon> Add driver option
+              </div>
             </div>
             <!-- !driver-options-input-list -->
           </div>
@@ -91,18 +91,18 @@
                   placeholder="e.g. my-router=172.20.10.129"
                 />
               </div>
-              <button class="btn btn-sm btn-danger" type="button" ng-click="removeIPV4AuxAddress($index)">
-                <i class="fa fa-trash" aria-hidden="true"></i>
+              <button class="btn btn-md btn-light" type="button" ng-click="removeIPV4AuxAddress($index)">
+                <pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
               </button>
-              <div class="col-sm-12 small text-warning" ng-show="state.IPV4AuxiliaryAddressesError[$index]">
-                <p><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Exclude ip cannot be the same as gateway.</p>
+              <div class="col-sm-12 small text-warning" ng-if="state.IPV4AuxiliaryAddressesError[$index]">
+                <p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p>
               </div>
             </div>
             <!-- !iprange-auxaddr-inputs -->
             <div class="form-group">
-              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addIPV4AuxAddress()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> add excluded IP
-              </span>
+              <div class="col-sm-12 small interactive text-muted vertical-center" ng-click="addIPV4AuxAddress()">
+                <pr-icon icon="'plus'" size="'md'" feather="true"></pr-icon> Add excluded IP
+              </div>
             </div>
           </div>
           <div ng-show="config.Driver === 'bridge' || (config.Driver === 'macvlan' && formValues.Macvlan.Scope !== 'swarm')">
@@ -138,30 +138,26 @@
                   placeholder="e.g. my-router=2001:db8::1"
                 />
               </div>
-              <button class="btn btn-sm btn-danger" type="button" ng-click="removeIPV6AuxAddress($index)">
-                <i class="fa fa-trash" aria-hidden="true"></i>
+              <button class="btn btn-md btn-light" type="button" ng-click="removeIPV6AuxAddress($index)">
+                <pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
               </button>
               <div class="col-sm-12 small text-warning" ng-show="state.IPV6AuxiliaryAddressesError[$index]">
-                <p><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Exclude ip cannot be the same as gateway.</p>
+                <p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p>
               </div>
             </div>
             <!-- !iprange-auxaddr-inputs -->
             <div class="form-group">
-              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addIPV6AuxAddress()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> add excluded IP
-              </span>
+              <div class="col-sm-12 small interactive text-muted vertical-center" ng-click="addIPV6AuxAddress()">
+                <pr-icon icon="'plus'" size="'md'" feather="true"></pr-icon> Add excluded IP
+              </div>
             </div>
           </div>
           <div class="col-sm-12 form-section-title"> Advanced configuration </div>
           <!-- labels -->
           <div class="form-group">
-            <div class="col-sm-12" style="margin-top: 5px">
-              <label class="control-label text-left">Labels</label>
-              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add label </span>
-            </div>
             <!-- labels-input-list -->
-            <div class="col-sm-12 form-inline" style="margin-top: 10px">
-              <div ng-repeat="label in formValues.Labels" style="margin-top: 2px">
+            <div class="col-sm-12 form-inline">
+              <div ng-repeat="label in formValues.Labels" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
                   <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
@@ -170,10 +166,15 @@
                   <span class="input-group-addon">value</span>
                   <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
                 </div>
-                <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
-                  <i class="fa fa-trash" aria-hidden="true"></i>
+                <button class="btn btn-sm btn-light" type="button" ng-click="removeLabel($index)">
+                  <pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
                 </button>
               </div>
+              <div class="form-group">
+                <div class="col-sm-12 small interactive text-muted vertical-center mt-1" ng-click="addLabel()">
+                  <pr-icon icon="'plus'" size="'md'" feather="true"></pr-icon> Add label
+                </div>
+              </div>
             </div>
             <!-- !labels-input-list -->
           </div>
@@ -181,25 +182,25 @@
           <!-- internal -->
           <div class="form-group" ng-hide="config.Driver === 'macvlan' && formValues.Macvlan.Scope === 'local'">
             <div class="col-sm-12">
-              <label for="ownership" class="control-label text-left">
-                Isolated network
-                <portainer-tooltip message="'An isolated network has no inbound or outbound communications.'"></portainer-tooltip>
-              </label>
-              <label name="ownership" class="switch" style="margin-left: 20px">
-                <input type="checkbox" ng-model="config.Internal" />
-                <i></i>
-              </label>
+              <por-switch-field
+                label-class="'col-sm-2'"
+                checked="config.Internal"
+                label="'Isolated network'"
+                tooltip="'An isolated network has no inbound or outbound communications.'"
+                on-change="(onChangeInternal)"
+              ></por-switch-field>
             </div>
           </div>
           <!-- !internal -->
           <!-- attachable -->
           <div class="form-group" ng-hide="config.Driver === 'macvlan' && formValues.Macvlan.Scope === 'local'">
             <div class="col-sm-12">
-              <label for="attachable" class="control-label text-left"> Enable manual container attachment </label>
-              <label name="attachable" class="switch" style="margin-left: 20px">
-                <input type="checkbox" ng-model="config.Attachable" />
-                <i></i>
-              </label>
+              <por-switch-field
+                label-class="'col-sm-2'"
+                checked="config.Attachable"
+                label="'Enable manual container attachment'"
+                on-change="(onChangeAttachable)"
+              ></por-switch-field>
             </div>
           </div>
           <!-- !attachable -->
@@ -233,8 +234,7 @@
                 <span ng-hide="state.actionInProgress">Create the network</span>
                 <span ng-show="state.actionInProgress">Creating network...</span>
               </button>
-              <i id="createResourceSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none"></i>
-              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px">{{ state.formValidationError }}</span>
+              <span class="text-danger space-left" ng-if="state.formValidationError">{{ state.formValidationError }}</span>
             </div>
           </div>
           <!-- !actions -->