From 5469392ec7f0b4459b0066ec144fb6a2cea1545d Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Tue, 2 Aug 2022 14:21:14 +1200
Subject: [PATCH] feat(ui): config-details-styling EE-3472 (#7367)

* feat(ui): config details EE-3472
---
 app/assets/css/icon.css                       |  5 ++
 .../events-datatable/eventsDatatable.html     |  8 +--
 .../integratedApplicationsDatatable.html      | 12 ++--
 .../kubernetesConfigurationData.html          | 64 ++++++++++---------
 .../yaml-inspector/yamlInspector.html         | 10 +--
 .../configurations/edit/configuration.html    | 31 +++++----
 app/kubernetes/views/summary/summary.html     | 12 +---
 app/kubernetes/views/volumes/edit/volume.html |  6 +-
 8 files changed, 79 insertions(+), 69 deletions(-)

diff --git a/app/assets/css/icon.css b/app/assets/css/icon.css
index cfad287c4..b9df94a56 100644
--- a/app/assets/css/icon.css
+++ b/app/assets/css/icon.css
@@ -126,6 +126,11 @@ pr-icon {
   margin-right: 5px;
 }
 
+.icon-nested-blue > svg {
+  height: 20px;
+  width: 20px;
+}
+
 .icon-container {
   display: flex;
   align-items: center;
diff --git a/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html b/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
index 90ef0ecf8..743861d67 100644
--- a/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
@@ -1,12 +1,10 @@
 <div class="datatable">
   <div class="toolBar">
     <div class="toolBarTitle flex">
-      <div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
-        <pr-icon icon="'rotate-ccw'" size="'sm'" mode="'primary'" feather="true"></pr-icon>
+      <div class="icon-nested-blue flex justify-center items-center">
+        <pr-icon icon="'rotate-ccw'" mode="'primary'" feather="true" class="vertical-center"></pr-icon>
       </div>
-      <span class="vertical-center">
-        {{ $ctrl.titleText }}
-      </span>
+      {{ $ctrl.titleText }}
     </div>
     <div class="searchBar">
       <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
diff --git a/app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html b/app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
index eea51f88a..5ba069edb 100644
--- a/app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
+++ b/app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
@@ -3,14 +3,14 @@
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
         <div class="toolBarTitle vertical-center">
-          <pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue'"></pr-icon>
+          <pr-icon icon="$ctrl.titleIcon" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
           {{ $ctrl.titleText }}
         </div>
-        <div class="searchBar">
+        <div class="searchBar vertical-center">
           <pr-icon icon="'search'" feather="true" class="vertical-center"></pr-icon>
           <input
             type="text"
-            class="searchInput ml-1"
+            class="searchInput"
             ng-model="$ctrl.state.textFilter"
             ng-change="$ctrl.onTextFilterChange()"
             placeholder="Search for an application..."
@@ -20,7 +20,9 @@
         </div>
         <div ng-if="$ctrl.refreshCallback" class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" feather="true" class-name="'!mr-0 !h-4'"></pr-icon>
+            </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -40,7 +42,7 @@
                         <option value="300">5min</option>
                       </select>
                       <span>
-                        <pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
+                        <pr-icon id="refreshRateChange" icon="'check'" feather="true" mode="'success'" size="'sm'"></pr-icon>
                       </span>
                     </div>
                   </div>
diff --git a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
index 15fa9683c..4fb982470 100644
--- a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
+++ b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
@@ -25,10 +25,10 @@
   <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">
-        <pr-icon icon="'plus'" feather="true" class="vertical-center"></pr-icon> Create entry
+        <pr-icon class="vertical-center" icon="'plus'" feather="true"></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">
-        <pr-icon icon="'upload'" feather="true" class="vertical-center"></pr-icon> Create key/value from file
+        <pr-icon class="vertical-center" icon="'upload'" feather="true"></pr-icon> Create key/value from file
       </button>
     </div>
   </div>
@@ -36,7 +36,7 @@
   <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-3 col-lg-2 control-label text-left">Key</label>
-      <div class="col-sm-8">
+      <div class="col-sm-8 col-lg-9">
         <input
           type="text"
           class="form-control"
@@ -47,33 +47,37 @@
           required
           ng-change="$ctrl.onChangeKey(entry)"
         />
-      </div>
-      <div
-        class="col-sm-11 small text-muted"
-        style="margin-top: 5px"
-        ng-show="
-          kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
-          (!entry.Used && $ctrl.state.duplicateKeys[index] !== undefined) ||
-          $ctrl.state.invalidKeys[index]
-        "
-      >
-        <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
-          <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>
-          <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.
+        <div
+          class="small text-muted"
+          style="margin-top: 5px"
+          ng-show="
+            kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
+            (!entry.Used && $ctrl.state.duplicateKeys[index] !== undefined) ||
+            $ctrl.state.invalidKeys[index]
+          "
+        >
+          <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
+            <p ng-message="required" class="vertical-center">
+              <pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.
+            </p>
+          </ng-messages>
+          <div>
+            <p ng-if="$ctrl.state.duplicateKeys[index] !== undefined" class="vertical-center">
+              <pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon>This key is already defined.
+            </p>
+          </div>
+          <p ng-if="$ctrl.state.invalidKeys[index]" class="vertical-center">
+            <pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon> This key is invalid. A valid key must
+            consist of alphanumeric characters, '-', '_' or '.'
           </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 class="col-sm-3 col-lg-2"></div>
     </div>
 
     <div class="form-group" ng-if="$ctrl.formValues.IsSimple && !entry.IsBinary">
       <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Value</label>
-      <div class="col-sm-8">
+      <div class="col-sm-8 col-lg-9">
         <textarea
           class="form-control"
           rows="5"
@@ -82,11 +86,13 @@
           ng-model="$ctrl.formValues.Data[index].Value"
           required
         ></textarea>
-      </div>
-      <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" class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
-        </ng-messages>
+        <div class="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" class="vertical-center"
+              ><pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p
+            >
+          </ng-messages>
+        </div>
       </div>
     </div>
 
@@ -108,7 +114,7 @@
           ng-click="$ctrl.removeEntry(index, entry)"
           data-cy="k8sConfigDetail-removeEntryButton{{ index }}"
         >
-          <pr-icon icon="'trash-2'" feather="true"></pr-icon> Remove entry
+          <pr-icon class="vertical-center" icon="'trash-2'" feather="true"></pr-icon> Remove entry
         </button>
         <span class="small text-muted" ng-if="entry.Used">
           <pr-icon icon="'alert-circle'" feather="true" mode="'primary'"></pr-icon>
diff --git a/app/kubernetes/components/yaml-inspector/yamlInspector.html b/app/kubernetes/components/yaml-inspector/yamlInspector.html
index f02907fdb..cade7d6e6 100644
--- a/app/kubernetes/components/yaml-inspector/yamlInspector.html
+++ b/app/kubernetes/components/yaml-inspector/yamlInspector.html
@@ -1,17 +1,17 @@
 <div>
   <code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor>
-  <div style="margin: 15px">
+  <div class="py-5">
     <span class="btn btn-light btn-sm" ng-click="$ctrl.copyYAML()">
-      <pr-icon icon="'copy'" feather="true"></pr-icon>
+      <pr-icon class="vertical-center" icon="'copy'" feather="true"></pr-icon>
       Copy to clipboard
     </span>
     <span class="btn btn-light btn-sm space-left" ng-click="$ctrl.toggleYAMLInspectorExpansion()">
-      <pr-icon icon="'minus'" size="'sm'" ng-if="$ctrl.expanded" feather="true"></pr-icon>
-      <pr-icon icon="'plus'" size="'sm'" ng-if="!$ctrl.expanded" feather="true"></pr-icon>
+      <pr-icon class="vertical-center" icon="'minus'" size="'sm'" ng-if="$ctrl.expanded" feather="true"></pr-icon>
+      <pr-icon class="vertical-center" icon="'plus'" size="'sm'" ng-if="!$ctrl.expanded" feather="true"></pr-icon>
       {{ $ctrl.expanded ? 'Collapse' : 'Expand' }}
     </span>
     <span id="copyNotificationYAML" style="display: none" class="small vertical-center ml-1">
-      <pr-icon icon="'check'" size="'md'" mode="'success'" feather="true"></pr-icon> copied
+      <pr-icon class="vertical-center" icon="'check'" size="'md'" mode="'success'" feather="true"></pr-icon> copied
     </span>
   </div>
 </div>
diff --git a/app/kubernetes/views/configurations/edit/configuration.html b/app/kubernetes/views/configurations/edit/configuration.html
index 953dc73c0..c2e3d5512 100644
--- a/app/kubernetes/views/configurations/edit/configuration.html
+++ b/app/kubernetes/views/configurations/edit/configuration.html
@@ -3,9 +3,9 @@
   title="'Configuration details'"
   breadcrumbs="[
     { label:'Namespaces', link:'kubernetes.resourcePools' },
-    { 
+    {
       label:ctrl.configuration.Namespace,
-      link: 'kubernetes.resourcePools.resourcePool', 
+      link: 'kubernetes.resourcePools.resourcePool',
       linkParams:{ id: ctrl.configuration.Namespace }
     },
     { label:'ConfigMaps and Secrets', link:'kubernetes.configurations' },
@@ -24,26 +24,29 @@
         <rd-widget-body classes="no-padding">
           <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
             <uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)" data-cy="k8sConfigDetail-configTab">
-              <uib-tab-heading> <i class="fa fa-file-code space-right" aria-hidden="true"></i> Configuration </uib-tab-heading>
+              <uib-tab-heading>
+                <pr-icon icon="'svg-filecode'"></pr-icon>
+                Configuration
+              </uib-tab-heading>
               <div style="padding: 20px">
                 <table class="table" data-cy="k8sConfigDetail-configTable">
                   <tbody>
                     <tr>
-                      <td>Name</td>
-                      <td>
+                      <td class="!pl-0 !border-none w-[40%]">Name</td>
+                      <td class="!border-none">
                         {{ ctrl.configuration.Name }}
                         <span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.configuration.IsRegistrySecret">system</span>
                       </td>
                     </tr>
                     <tr>
-                      <td>Namespace</td>
+                      <td class="!pl-0">Namespace</td>
                       <td>
                         <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.configuration.Namespace })">{{ ctrl.configuration.Namespace }}</a>
                         <span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.isSystemNamespace()">system</span>
                       </td>
                     </tr>
                     <tr>
-                      <td>Configuration type</td>
+                      <td class="!pl-0">Configuration type</td>
                       <td>
                         {{ ctrl.configuration.Type | kubernetesConfigurationTypeText }}
                       </td>
@@ -54,7 +57,8 @@
             </uib-tab>
             <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)" data-cy="k8sConfigDetail-eventsTab">
               <uib-tab-heading>
-                <i class="fa fa-history space-right" aria-hidden="true"></i> Events
+                <pr-icon icon="'svg-clockrewind'"></pr-icon>
+                Events
                 <div ng-if="ctrl.hasEventWarnings()">
                   <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
                   {{ ctrl.state.eventWarningCount }} warning(s)
@@ -73,8 +77,11 @@
               </kubernetes-events-datatable>
             </uib-tab>
             <uib-tab index="2" ng-if="ctrl.configuration.Yaml" classes="btn-sm" select="ctrl.showEditor()" data-cy="k8sConfigDetail-yamlTab">
-              <uib-tab-heading> <i class="fa fa-code space-right" aria-hidden="true"></i> YAML </uib-tab-heading>
-              <div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
+              <uib-tab-heading>
+                <pr-icon icon="'code'" feather="true"></pr-icon>
+                YAML
+              </uib-tab-heading>
+              <div class="!pt-5 px-5" ng-if="ctrl.state.showEditorTab">
                 <kubernetes-yaml-inspector key="configuration-yaml" data="ctrl.configuration.Yaml"> </kubernetes-yaml-inspector>
               </div>
             </uib-tab>
@@ -109,7 +116,7 @@
               <div class="col-sm-12">
                 <button
                   type="button"
-                  class="btn btn-primary btn-sm"
+                  class="btn btn-primary btn-sm !ml-0"
                   ng-disabled="!ctrl.isFormValid() || !kubernetesConfigurationCreationForm.$valid || ctrl.state.actionInProgress"
                   ng-click="ctrl.updateConfiguration()"
                   button-spinner="ctrl.state.actionInProgress"
@@ -159,7 +166,7 @@
         order-by="Name"
         refresh-callback="ctrl.getApplications"
         title-text="Applications using this configuration"
-        title-icon="fa-laptop-code"
+        title-icon="svg-laptopcode"
       >
       </kubernetes-integrated-applications-datatable>
     </div>
diff --git a/app/kubernetes/views/summary/summary.html b/app/kubernetes/views/summary/summary.html
index f62cd25f2..eabf3aaab 100644
--- a/app/kubernetes/views/summary/summary.html
+++ b/app/kubernetes/views/summary/summary.html
@@ -1,14 +1,6 @@
-<div
-  class="col-xs-12 form-section-title interactive"
-  ng-click="$ctrl.toggleSummary()"
-  style="display: flex; justify-content: space-between"
-  ng-if="$ctrl.state.resources.length > 0"
->
+<div class="flex justify-start form-section-title interactive" ng-click="$ctrl.toggleSummary()" ng-if="$ctrl.state.resources.length > 0">
+  <pr-icon icon="$ctrl.state.expandedTemplate ? 'chevron-down' : 'chevron-right'" feather="true" class="!mr-1 vertical-center pb-1"></pr-icon>
   Summary
-  <span class="small space-left">
-    <a ng-if="!$ctrl.state.expandedTemplate"><pr-icon icon="'chevron-down'" feather="true"></pr-icon> expand</a>
-    <a ng-if="$ctrl.state.expandedTemplate"><pr-icon icon="'chevron-up'" feather="true"></pr-icon> collapse</a>
-  </span>
 </div>
 
 <div class="form-group" ng-if="$ctrl.state.expandedTemplate">
diff --git a/app/kubernetes/views/volumes/edit/volume.html b/app/kubernetes/views/volumes/edit/volume.html
index 97e803753..e4f69976a 100644
--- a/app/kubernetes/views/volumes/edit/volume.html
+++ b/app/kubernetes/views/volumes/edit/volume.html
@@ -3,9 +3,9 @@
   title="'Volume details'"
   breadcrumbs="[
     { label:'Namespaces', link:'kubernetes.resourcePools' },
-    { 
+    {
       label:ctrl.volume.ResourcePool.Namespace.Name,
-      link: 'kubernetes.resourcePools.resourcePool', 
+      link: 'kubernetes.resourcePools.resourcePool',
       linkParams:{ id: ctrl.volume.ResourcePool.Namespace.Name }
     },
     { label:'Volumes', link:'kubernetes.volumes' },
@@ -181,7 +181,7 @@
         order-by="Name"
         refresh-callback="ctrl.getVolume"
         title-text="Applications using this volume"
-        title-icon="code"
+        title-icon="svg-laptopcode"
       >
       </kubernetes-integrated-applications-datatable>
     </div>