From e779939ae11276975ec72fe7384376eb8c1aa5bc Mon Sep 17 00:00:00 2001
From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com>
Date: Thu, 28 Jul 2022 11:17:32 +1200
Subject: [PATCH] feature(ui): ui improvements kube config add from EE-3471
 (#7341)

---
 .../kubernetesConfigurationData.html          | 62 ++++++++++---------
 .../kubernetesConfigurationDataController.js  |  1 +
 .../create/createConfiguration.html           | 45 +++++++-------
 3 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
index e2c901228..15fa9683c 100644
--- a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
+++ b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
@@ -4,20 +4,20 @@
   <div class="form-group" ng-if="$ctrl.isCreation">
     <div class="col-sm-12">
       <p>
-        <a class="small interactive" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
-          <i class="fa fa-list-ol space-right" aria-hidden="true"></i> Advanced mode
+        <a class="small interactive vertical-center" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
+          <pr-icon icon="'list'" feather="true"></pr-icon> Advanced mode
         </a>
-        <a class="small interactive" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
-          <i class="fa fa-edit space-right" aria-hidden="true"></i> Simple mode
+        <a class="small interactive vertical-center" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
+          <pr-icon icon="'edit'" feather="true"></pr-icon> Simple mode
         </a>
       </p>
     </div>
-    <div class="col-sm-12 small text-muted" ng-if="$ctrl.formValues.IsSimple">
-      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+    <div class="col-sm-12 small text-muted vertical-center" ng-if="$ctrl.formValues.IsSimple">
+      <pr-icon icon="'alert-circle'" mode="'primary'" feather="true" class="vertical-center"></pr-icon>
       Switch to advanced mode to copy and paste multiple key/values
     </div>
-    <div class="col-sm-12 small text-muted" ng-if="!$ctrl.formValues.IsSimple">
-      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+    <div class="col-sm-12 small text-muted vertical-center" ng-if="!$ctrl.formValues.IsSimple">
+      <pr-icon icon="'alert-circle'" mode="'primary'" feather="true" class="vertical-center"></pr-icon>
       Generate a configuration entry per line, use YAML format
     </div>
   </div>
@@ -25,18 +25,18 @@
   <div class="form-group" ng-if="$ctrl.formValues.IsSimple">
     <div class="col-sm-12">
       <button type="button" class="btn btn-sm btn-default" style="margin-left: 0" ng-click="$ctrl.addEntry()" data-cy="k8sConfigCreate-createEntryButton">
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> Create entry
+        <pr-icon icon="'plus'" feather="true" class="vertical-center"></pr-icon> Create entry
       </button>
       <button type="button" class="btn btn-sm btn-default" ngf-select="$ctrl.addEntryFromFile($file)" style="margin-left: 0" data-cy="k8sConfigCreate-createConfigsFromFileButton">
-        <i class="fa fa-file-upload" aria-hidden="true"></i> Create key/value from file
+        <pr-icon icon="'upload'" feather="true" class="vertical-center"></pr-icon> Create key/value from file
       </button>
     </div>
   </div>
 
   <div ng-repeat="(index, entry) in $ctrl.formValues.Data" ng-if="$ctrl.formValues.IsSimple">
     <div class="form-group">
-      <label for="configuration_data_key_{{ index }}" class="col-sm-1 control-label text-left">Key</label>
-      <div class="col-sm-11">
+      <label for="configuration_data_key_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Key</label>
+      <div class="col-sm-8">
         <input
           type="text"
           class="form-control"
@@ -49,7 +49,7 @@
         />
       </div>
       <div
-        class="col-sm-11 small text-warning"
+        class="col-sm-11 small text-muted"
         style="margin-top: 5px"
         ng-show="
           kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
@@ -58,18 +58,22 @@
         "
       >
         <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required. </p>
         </ng-messages>
-        <p ng-if="$ctrl.state.duplicateKeys[index] !== undefined"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This key is already defined.</p>
-        <p ng-if="$ctrl.state.invalidKeys[index]"
-          ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This key is invalid. A valid key must consist of alphanumeric characters, '-', '_' or '.'</p
-        >
+        <div>
+          <p ng-if="$ctrl.state.duplicateKeys[index] !== undefined" class="vertical-center">
+            <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This key is already defined.
+          </p>
+        </div>
+        <p ng-if="$ctrl.state.invalidKeys[index]" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This key is invalid. A valid key must consist of alphanumeric characters, '-', '_' or '.'
+        </p>
       </div>
     </div>
 
     <div class="form-group" ng-if="$ctrl.formValues.IsSimple && !entry.IsBinary">
-      <label for="configuration_data_value_{{ index }}" class="col-sm-1 control-label text-left">Value</label>
-      <div class="col-sm-11">
+      <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Value</label>
+      <div class="col-sm-8">
         <textarea
           class="form-control"
           rows="5"
@@ -79,35 +83,35 @@
           required
         ></textarea>
       </div>
-      <div class="col-sm-11 small text-warning" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
+      <div class="col-sm-11 small text-muted" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
         <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
         </ng-messages>
       </div>
     </div>
 
     <div class="form-group" ng-if="$ctrl.formValues.IsSimple && entry.IsBinary">
-      <label for="configuration_data_value_{{ index }}" class="col-sm-1 control-label text-left">Value</label>
-      <div class="col-sm-11 control-label small text-muted text-left"
+      <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Value</label>
+      <div class="col-sm-8 control-label small text-muted text-left"
         >Binary data <portainer-tooltip message="'This key holds binary data and cannot be displayed.'"></portainer-tooltip
       ></div>
     </div>
 
     <div class="form-group" ng-if="$ctrl.formValues.IsSimple">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-11">
+      <div class="col-sm-3 col-lg-2"></div>
+      <div class="col-sm-8">
         <button
           type="button"
-          class="btn btn-sm btn-danger space-right"
+          class="btn btn-sm btn-dangerlight !ml-0"
           style="margin-left: 0"
           ng-disabled="entry.Used"
           ng-click="$ctrl.removeEntry(index, entry)"
           data-cy="k8sConfigDetail-removeEntryButton{{ index }}"
         >
-          <i class="fa fa-trash-alt" aria-hidden="true"></i> Remove entry
+          <pr-icon icon="'trash-2'" feather="true"></pr-icon> Remove entry
         </button>
         <span class="small text-muted" ng-if="entry.Used">
-          <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+          <pr-icon icon="'alert-circle'" feather="true" mode="'primary'"></pr-icon>
           This key is currently used by one or more applications
         </span>
       </div>
diff --git a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationDataController.js b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationDataController.js
index af7685b12..5ce32f964 100644
--- a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationDataController.js
+++ b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationDataController.js
@@ -1,3 +1,4 @@
+import { Buffer } from 'buffer';
 import angular from 'angular';
 import _ from 'lodash-es';
 import chardet from 'chardet';
diff --git a/app/kubernetes/views/configurations/create/createConfiguration.html b/app/kubernetes/views/configurations/create/createConfiguration.html
index 24f020645..c3971ad9c 100644
--- a/app/kubernetes/views/configurations/create/createConfiguration.html
+++ b/app/kubernetes/views/configurations/create/createConfiguration.html
@@ -15,8 +15,8 @@
           <form class="form-horizontal" name="kubernetesConfigurationCreationForm" autocomplete="off">
             <!-- name -->
             <div class="form-group">
-              <label for="configuration_name" class="col-sm-1 control-label text-left">Name</label>
-              <div class="col-sm-11">
+              <label for="configuration_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+              <div class="col-sm-8">
                 <input
                   type="text"
                   class="form-control"
@@ -32,16 +32,16 @@
               </div>
             </div>
             <div class="form-group" ng-show="kubernetesConfigurationCreationForm.configuration_name.$invalid || ctrl.state.alreadyExist">
-              <div class="col-sm-12 small text-warning">
+              <div class="col-sm-12 small text-muted">
                 <div ng-messages="kubernetesConfigurationCreationForm.configuration_name.$error">
-                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
-                  <p ng-message="pattern"
-                    ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field must consist of lower case alphanumeric characters, '-' or '.', and contain at most 63
-                    characters, and must start and end with an alphanumeric character.</p
+                  <p ng-message="required" class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
+                  <p ng-message="pattern" class="vertical-center"
+                    ><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon> This field must consist of lower case alphanumeric
+                    characters, '-' or '.', and contain at most 63 characters, and must start and end with an alphanumeric character.</p
                   >
                 </div>
-                <p ng-if="ctrl.state.alreadyExist"
-                  ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A configuration with the same name already exists inside the selected namespace.</p
+                <p ng-if="ctrl.state.alreadyExist" class="vertical-center"
+                  ><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> A configuration with the same name already exists inside the selected namespace.</p
                 >
               </div>
             </div>
@@ -51,8 +51,8 @@
 
             <!-- resource-pool -->
             <div class="form-group" ng-if="ctrl.formValues.ResourcePool">
-              <label for="resource-pool-selector" class="col-sm-1 control-label text-left">Namespace</label>
-              <div class="col-sm-11">
+              <label for="resource-pool-selector" class="col-sm-3 col-lg-2 control-label text-left">Namespace</label>
+              <div class="col-sm-8">
                 <select
                   class="form-control"
                   id="resource-pool-selector"
@@ -64,19 +64,20 @@
               </div>
             </div>
             <div class="form-group" ng-if="ctrl.state.resourcePoolHasQuota && ctrl.resourceQuotaCapacityExceeded()">
-              <div class="col-sm-12 small text-warning">
-                <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
+              <div class="col-sm-12 small text-muted vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                 This namespace has exhausted its resource capacity and you will not be able to deploy the configuration. Contact your administrator to expand the capacity of the
                 namespace.
               </div>
             </div>
             <div class="form-group" ng-if="!ctrl.formValues.ResourcePool">
-              <div class="col-sm-12 small text-muted">
-                <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
+              <div class="col-sm-12 small text-muted vertical-center">
+                <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                 You do not have access to any namespace. Contact your administrator to get access to a namespace.
               </div>
             </div>
             <!-- !resource-pool -->
+
             <div ng-if="ctrl.formValues.ResourcePool">
               <div class="col-sm-12 form-section-title"> Configuration type </div>
 
@@ -126,21 +127,21 @@
                 is-creation="true"
                 is-editor-dirty="ctrl.state.isEditorDirty"
               ></kubernetes-configuration-data>
-
-              <!-- summary -->
-              <kubernetes-summary-view
-                ng-if="!(!kubernetesConfigurationCreationForm.$valid || !ctrl.isFormValid() || ctrl.state.actionInProgress)"
-                form-values="ctrl.formValues"
-              ></kubernetes-summary-view>
             </div>
 
+            <!-- summary -->
+            <kubernetes-summary-view
+              ng-if="!(!kubernetesConfigurationCreationForm.$valid || !ctrl.isFormValid() || ctrl.state.actionInProgress)"
+              form-values="ctrl.formValues"
+            ></kubernetes-summary-view>
+
             <!-- actions -->
             <div class="col-sm-12 form-section-title" style="margin-top: 10px"> Actions </div>
             <div class="form-group">
               <div class="col-sm-12">
                 <button
                   type="button"
-                  class="btn btn-primary btn-sm"
+                  class="btn btn-primary btn-sm !ml-0"
                   ng-disabled="!kubernetesConfigurationCreationForm.$valid || !ctrl.isFormValid() || ctrl.state.actionInProgress || !ctrl.formValues.ResourcePool"
                   ng-click="ctrl.createConfiguration()"
                   button-spinner="ctrl.state.actionInProgress"