feat(ui): EE-3718 css portainer environments edit (#7318)

app/portainer/components/endpointSecurity/porEndpointSecurity.html

@@ -2,11 +2,13 @@
   <!-- tls-checkbox -->
   <div class="form-group">
     <div class="col-sm-12">
-      <label for="tls" class="control-label text-left">
-        TLS
-        <portainer-tooltip message="'Enable this option if you need to connect to the Docker environment with TLS.'"></portainer-tooltip>
-      </label>
-      <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.formData.TLS" /><i></i> </label>
+      <por-switch-field
+        label="'TLS'"
+        label-class="'col-sm-2'"
+        checked="$ctrl.formData.TLS"
+        on-change="($ctrl.onToggleTLS)"
+        tooltip="'Enable this option if you need to connect to the Docker environment with TLS.'"
+      ></por-switch-field>
     </div>
   </div>
   <!-- !tls-checkbox -->
@@ -75,10 +77,10 @@
       <label class="col-sm-3 col-lg-2 control-label text-left">TLS CA certificate</label>
       <div class="col-sm-9 col-lg-10">
         <button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCACert">Select file</button>
-        <span style="margin-left: 5px">
+        <span class="space-left">
           {{ $ctrl.formData.TLSCACert.name }}
-          <i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSCACert && $ctrl.formData.TLSCACert === $ctrl.endpoint.TLSConfig.TLSCACert" aria-hidden="true"></i>
-          <i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSCACert" aria-hidden="true"></i>
+          <pr-icon icon="'check'" ng-if="$ctrl.formData.TLSCACert && $ctrl.formData.TLSCACert === $ctrl.endpoint.TLSConfig.TLSCACert" mode="'success'" feather="true"></pr-icon>
+          <pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSCACert" mode="'danger'" feather="true"></pr-icon>
         </span>
       </div>
     </div>
@@ -90,10 +92,10 @@
         <label for="tls_cert" class="col-sm-3 col-lg-2 control-label text-left">TLS certificate</label>
         <div class="col-sm-9 col-lg-10">
           <button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCert">Select file</button>
-          <span style="margin-left: 5px">
+          <span class="space-left">
             {{ $ctrl.formData.TLSCert.name }}
-            <i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSCert && $ctrl.formData.TLSCert === $ctrl.endpoint.TLSConfig.TLSCert" aria-hidden="true"></i>
-            <i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSCert" aria-hidden="true"></i>
+            <pr-icon icon="'check'" ng-if="$ctrl.formData.TLSCert && $ctrl.formData.TLSCert === $ctrl.endpoint.TLSConfig.TLSCert" mode="'success'" feather="true"></pr-icon>
+            <pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSCert" mode="'danger'" feather="true"></pr-icon>
           </span>
         </div>
       </div>
@@ -103,10 +105,10 @@
         <label class="col-sm-3 col-lg-2 control-label text-left">TLS key</label>
         <div class="col-sm-9 col-lg-10">
           <button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSKey">Select file</button>
-          <span style="margin-left: 5px">
+          <span class="space-left">
             {{ $ctrl.formData.TLSKey.name }}
-            <i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSKey && $ctrl.formData.TLSKey === $ctrl.endpoint.TLSConfig.TLSKey" aria-hidden="true"></i>
-            <i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSKey" aria-hidden="true"></i>
+            <pr-icon icon="'check'" ng-if="$ctrl.formData.TLSKey && $ctrl.formData.TLSKey === $ctrl.endpoint.TLSConfig.TLSKey" mode="'success'" feather="true"></pr-icon>
+            <pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSKey" mode="'danger'" feather="true"></pr-icon>
           </span>
         </div>
       </div>

app/portainer/components/endpointSecurity/porEndpointSecurityController.js

@@ -1,7 +1,14 @@
 angular.module('portainer.app').controller('porEndpointSecurityController', [
-  function () {
+  '$scope',
+  function ($scope) {
     var ctrl = this;
 
+    ctrl.onToggleTLS = function (newValue) {
+      $scope.$evalAsync(() => {
+        ctrl.formData.TLS = newValue;
+      });
+    };
+
     this.$onInit = $onInit;
     function $onInit() {
       if (ctrl.endpoint) {

app/portainer/views/endpoints/edit/endpoint.html

@@ -4,8 +4,8 @@
   <div ng-if="state.edgeEndpoint">
     <information-panel ng-if="state.edgeAssociated" title-text="Edge information">
       <span class="small text-muted">
-        <p>
-          <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+        <p class="vertical-center">
+          <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
           This Edge environment is associated to an Edge environment {{ state.kubernetesEndpoint ? '(Kubernetes)' : '(Docker)' }}.
         </p>
         <p>
@@ -36,8 +36,8 @@
         <rd-widget-body>
           <div class="col-sm-12 form-section-title">Deploy an agent</div>
           <span class="small text-muted">
-            <p>
-              <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+            <p class="vertical-center">
+              <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
               Refer to the platform related command below to deploy the Edge agent in your remote cluster.
             </p>
             <p>
@@ -55,8 +55,8 @@
 
           <span class="small text-muted">
             <div class="col-sm-12 form-section-title" style="margin-top: 25px"> Join token </div>
-            <p>
-              <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+            <p class="vertical-center">
+              <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
               For those pre-staging the edge agent, use the following join token to associate the Edge agent with this environment.
             </p>
             <p> You can read more about pre-staging in the userguide available <a href="https://downloads.portainer.io/edge_agent_guide.pdf">here.</a> </p>
@@ -64,9 +64,15 @@
               <code>
                 {{ endpoint.EdgeKey }}
               </code>
-              <div style="margin-top: 10px">
-                <span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentKey()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy token</span>
-                <span id="copyNotificationEdgeKey" style="margin-left: 7px; display: none; color: #23ae89"> <i class="fa fa-check" aria-hidden="true"></i> copied </span>
+              <div class="mt-2">
+                <span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentKey()">
+                  <pr-icon icon="'copy'" feather="true"></pr-icon>
+                  Copy token
+                </span>
+                <span id="copyNotificationEdgeKey" class="vertical-center" style="margin-left: 7px; display: none; color: #23ae89">
+                  <pr-icon icon="'check'" feather="true"></pr-icon>
+                  copied
+                </span>
               </div>
             </div>
           </span>
@@ -76,15 +82,15 @@
   </div>
 
   <information-panel ng-if="state.kubernetesEndpoint && (!state.edgeEndpoint || state.edgeAssociated)" title-text="Kubernetes features configuration">
-    <span class="small text-muted">
-      <i class="fa fa-tools blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+    <span class="small text-muted vertical-center">
+      <pr-icon icon="'tool'" mode="'primary'" feather="true"></pr-icon>
       You should configure the features available in this Kubernetes environment in the
       <a ui-sref="kubernetes.cluster.setup({endpointId: endpoint.Id})">Kubernetes configuration</a> view.
     </span>
   </information-panel>
 </div>
 
-<div class="row">
+<div class="row mt-4">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
       <rd-widget-body>

app/react/components/TagSelector/TagSelector.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import _ from 'lodash';
 
 import { TagId } from '@/portainer/tags/types';
+import { Icon } from '@/react/components/Icon';
 import { useCreateTagMutation, useTags } from '@/portainer/tags/queries';
 
 import { Creatable, Select } from '@@/form-components/ReactSelect';
@@ -63,15 +64,17 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
             <button
               type="button"
               title="Remove tag"
-              className={clsx(styles.removeTagBtn, 'space-left', 'tag')}
+              className={clsx(
+                styles.removeTagBtn,
+                'space-left',
+                'tag',
+                'vertical-center'
+              )}
               onClick={() => handleRemove(tag.value)}
               key={tag.value}
             >
               {tag.label}
-              <i
-                className="fa fa-trash-alt white-icon space-left"
-                aria-hidden="true"
-              />
+              <Icon icon="trash-2" feather />
             </button>
           ))}
         </FormControl>

app/react/components/buttons/AddButton.tsx

@@ -27,7 +27,7 @@ export function AddButton({ label, onClick, className, disabled }: Props) {
       onClick={onClick}
       disabled={disabled}
     >
-      <Icon icon="plus" feather className="space-right" />
+      <Icon icon="plus-circle" feather />
       {label}
     </button>
   );

app/react/components/buttons/CopyButton/CopyButton.tsx

@@ -33,14 +33,16 @@ export function CopyButton({
         title="Copy Value"
         type="button"
       >
-        <Icon icon="copy" feather /> {children}
+        <Icon icon="copy" feather />
+        {children}
       </Button>
 
       <span
         className={clsx(
           copiedSuccessfully && styles.fadeout,
           styles.displayText,
-          'space-left'
+          'space-left',
+          'vertical-center'
         )}
       >
         <Icon icon="check" feather />

app/react/components/form-components/InputList/InputList.tsx

@@ -107,7 +107,11 @@ export function InputList<T = DefaultType>({
           return (
             <div
               key={key}
-              className={clsx(styles.itemLine, { [styles.hasError]: !!error })}
+              className={clsx(
+                styles.itemLine,
+                { [styles.hasError]: !!error },
+                'vertical-center'
+              )}
             >
               {Item ? (
                 <Item
@@ -128,7 +132,7 @@ export function InputList<T = DefaultType>({
                 {!readOnly && movable && (
                   <>
                     <Button
-                      size="small"
+                      size="medium"
                       disabled={disabled || index === 0}
                       onClick={() => handleMoveUp(index)}
                       className="vertical-center btn-only-icon"
@@ -136,7 +140,7 @@ export function InputList<T = DefaultType>({
                       <Icon icon="arrow-up" feather />
                     </Button>
                     <Button
-                      size="small"
+                      size="medium"
                       type="button"
                       disabled={disabled || index === value.length - 1}
                       onClick={() => handleMoveDown(index)}
@@ -149,7 +153,7 @@ export function InputList<T = DefaultType>({
                 {!readOnly && (
                   <Button
                     color="dangerlight"
-                    size="small"
+                    size="medium"
                     onClick={() => handleRemoveItem(key, item)}
                     className="vertical-center btn-only-icon"
                   >

app/react/edge/components/EdgeScriptForm/EdgeScriptSettingsFieldset.tsx

@@ -70,6 +70,8 @@ export function EdgeScriptSettingsFieldset({
               setFieldValue('allowSelfSignedCertificates', value)
             }
             label="Allow self-signed certs"
+            labelClass="col-sm-3 col-lg-2"
+            switchValues={{ on: 'Yes', off: 'No' }}
             tooltip="When allowing self-signed certificates the edge agent will ignore the domain validation when connecting to Portainer via HTTPS"
           />
         </div>