From ac6296b86d2b2bbb954d2774528454b6322cd63a Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Wed, 27 Jul 2022 13:05:25 +1200
Subject: [PATCH] feat(ui): portainer settings page ui EE-3566 (#7259)

* settings page ui change
---
 .../react/components/switch-field.ts          |   1 +
 .../ssl-certificate/ssl-certificate.html      |  26 ++--
 app/portainer/views/settings/options.tsx      |  20 +++
 app/portainer/views/settings/settings.html    | 118 +++++++++---------
 .../views/settings/settingsController.js      |   8 +-
 .../SwitchField/SwitchField.tsx               |   6 +-
 6 files changed, 104 insertions(+), 75 deletions(-)
 create mode 100644 app/portainer/views/settings/options.tsx

diff --git a/app/portainer/react/components/switch-field.ts b/app/portainer/react/components/switch-field.ts
index 3c8a0ea0f..aa33f278c 100644
--- a/app/portainer/react/components/switch-field.ts
+++ b/app/portainer/react/components/switch-field.ts
@@ -8,6 +8,7 @@ export const switchField = r2a(SwitchField, [
   'label',
   'name',
   'labelClass',
+  'fieldClass',
   'dataCy',
   'disabled',
   'onChange',
diff --git a/app/portainer/settings/general/ssl-certificate/ssl-certificate.html b/app/portainer/settings/general/ssl-certificate/ssl-certificate.html
index 4af607819..08b37c7eb 100644
--- a/app/portainer/settings/general/ssl-certificate/ssl-certificate.html
+++ b/app/portainer/settings/general/ssl-certificate/ssl-certificate.html
@@ -1,22 +1,27 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-key" title-text="SSL certificate"></rd-widget-header>
+      <rd-widget-header icon="key" feather-icon="true" title-text="SSL certificate"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal" name="$ctrl.sslForm">
           <span class="small">
-            <p class="text-muted">
-              <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
+            <p class="text-muted vertical-center">
+              <pr-icon icon="'alert-circle'" feather="true" class-name="'icon-warning =vertical-center'"></pr-icon>
               Forcing HTTPs only will cause Portainer to stop listening on the HTTP port. Any edge agent environment that is using HTTP will no longer be available.
             </p>
           </span>
-
-          <por-switch-field checked="$ctrl.formValues.forceHTTPS" label="'Force HTTPS only'" on-change="($ctrl.onChangeForceHTTPS)"></por-switch-field>
-
-          <hr />
+          <div class="form-group">
+            <por-switch-field
+              checked="$ctrl.formValues.forceHTTPS"
+              label="'Force HTTPS only'"
+              on-change="($ctrl.onChangeForceHTTPS)"
+              field-class="'col-sm-12'"
+              label-class="'col-sm-2'"
+            ></por-switch-field>
+          </div>
 
           <div class="form-group">
-            <span class="col-sm-12"> Provide a new SSL Certificate to replace the existing one that is used for HTTPS connections. </span>
+            <span class="col-sm-12 control-label"> Provide a new SSL Certificate to replace the existing one that is used for HTTPS connections. </span>
           </div>
 
           <div class="form-group">
@@ -28,7 +33,7 @@
               <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.certFile" ngf-pattern="$ctrl.certFilePattern" name="certFile"> Select file </button>
               <span style="margin-left: 5px">
                 {{ $ctrl.formValues.certFile.name }}
-                <i class="fa fa-times red-icon" ng-if="!$ctrl.formValues.certFile" aria-hidden="true"></i>
+                <pr-icon icon="'x-circle'" feather="true" class-name="'icon-danger'" ng-if="!$ctrl.formValues.certFile"></pr-icon>
               </span>
             </div>
           </div>
@@ -49,7 +54,7 @@
               <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.keyFile" ngf-pattern="$ctrl.keyFilePattern" name="keyFile"> Select file </button>
               <span style="margin-left: 5px">
                 {{ $ctrl.formValues.keyFile.name }}
-                <i class="fa fa-times red-icon" ng-if="!$ctrl.formValues.keyFile" aria-hidden="true"></i>
+                <pr-icon icon="'x-circle'" feather="true" class-name="'icon-danger'" ng-if="!$ctrl.formValues.keyFile"></pr-icon>
               </span>
             </div>
           </div>
@@ -61,7 +66,6 @@
             </div>
           </div>
 
-          <hr />
           <div class="form-group">
             <div class="col-sm-12">
               <button
diff --git a/app/portainer/views/settings/options.tsx b/app/portainer/views/settings/options.tsx
new file mode 100644
index 000000000..c52a4a29b
--- /dev/null
+++ b/app/portainer/views/settings/options.tsx
@@ -0,0 +1,20 @@
+import { FeatureId } from '@/portainer/feature-flags/enums';
+
+export const options = [
+  {
+    id: 'backup_file',
+    icon: 'download',
+    featherIcon: true,
+    label: 'Download backup file',
+    value: 'file',
+  },
+  {
+    id: 'backup_s3',
+    icon: 'upload',
+    featherIcon: true,
+    label: 'Store in S3',
+    description: 'Define a cron schedule',
+    value: 's3',
+    feature: FeatureId.S3_BACKUP_SETTING,
+  },
+];
diff --git a/app/portainer/views/settings/settings.html b/app/portainer/views/settings/settings.html
index 12ac3b10b..2b1f27f32 100644
--- a/app/portainer/views/settings/settings.html
+++ b/app/portainer/views/settings/settings.html
@@ -3,28 +3,28 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-cogs" title-text="Application settings"></rd-widget-header>
+      <rd-widget-header icon="settings" feather-icon="true" title-text="Application settings"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
           <!-- snapshot-interval -->
           <div class="form-group">
             <label for="snapshot_interval" class="col-sm-2 control-label text-left">Snapshot interval</label>
-            <div class="col-sm-10">
+            <div class="col-sm-8">
               <input type="text" class="form-control" ng-model="settings.SnapshotInterval" id="snapshot_interval" placeholder="e.g. 15m" />
             </div>
           </div>
           <!-- !snapshot-interval -->
           <!-- logo -->
           <div class="form-group">
-            <div class="col-sm-12">
-              <por-switch-field
-                label="'Use custom logo'"
-                checked="formValues.customLogo"
-                name="'toggle_logo'"
-                disabled="state.isDemo"
-                on-change="(onToggleCustomLogo)"
-              ></por-switch-field>
-            </div>
+            <por-switch-field
+              label="'Use custom logo'"
+              checked="formValues.customLogo"
+              name="'toggle_logo'"
+              disabled="state.isDemo"
+              on-change="(onToggleCustomLogo)"
+              field-class="'col-sm-12'"
+              label-class="'col-sm-2'"
+            ></por-switch-field>
             <div class="col-sm-12" ng-if="state.isDemo" style="margin-top: 10px">
               <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
             </div>
@@ -35,8 +35,8 @@
               <span class="col-sm-12 text-muted small"> You can specify the URL to your logo here. For an optimal display, logo dimensions should be 155px by 55px. </span>
             </div>
             <div class="form-group">
-              <label for="logo_url" class="col-sm-1 control-label text-left"> URL </label>
-              <div class="col-sm-11">
+              <label for="logo_url" class="col-sm-2 control-label text-left"> URL </label>
+              <div class="col-sm-8">
                 <input type="text" class="form-control" ng-model="settings.LogoURL" id="logo_url" placeholder="https://mycompany.com/logo.png" />
               </div>
             </div>
@@ -44,15 +44,15 @@
           <!-- !logo -->
 
           <div class="form-group">
-            <div class="col-sm-12">
-              <por-switch-field
-                label="'Allow the collection of anonymous statistics'"
-                checked="formValues.enableTelemetry"
-                name="'toggle_enableTelemetry'"
-                on-change="(onToggleEnableTelemetry)"
-                disabled="state.isDemo"
-              ></por-switch-field>
-            </div>
+            <por-switch-field
+              label="'Allow the collection of anonymous statistics'"
+              checked="formValues.enableTelemetry"
+              name="'toggle_enableTelemetry'"
+              on-change="(onToggleEnableTelemetry)"
+              disabled="state.isDemo"
+              field-class="'col-sm-12'"
+              label-class="'col-sm-2'"
+            ></por-switch-field>
             <div class="col-sm-12" ng-if="state.isDemo" style="margin-top: 10px">
               <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
             </div>
@@ -71,8 +71,8 @@
               </span>
             </div>
             <div class="form-group">
-              <label for="templates_url" class="col-sm-1 control-label text-left"> URL </label>
-              <div class="col-sm-11">
+              <label for="templates_url" class="col-sm-2 control-label text-left"> URL </label>
+              <div class="col-sm-8">
                 <input
                   type="text"
                   class="form-control"
@@ -96,8 +96,8 @@
               </span>
             </div>
             <div class="form-group">
-              <label for="helmrepository_url" class="col-sm-1 control-label text-left"> URL </label>
-              <div class="col-sm-11">
+              <label for="helmrepository_url" class="col-sm-2 control-label text-left"> URL </label>
+              <div class="col-sm-8">
                 <input type="text" class="form-control" ng-model="settings.HelmRepositoryURL" id="helmrepository_url" placeholder="https://charts.bitnami.com/bitnami" />
               </div>
             </div>
@@ -108,7 +108,7 @@
           <div class="col-sm-12 form-section-title"> Kubernetes </div>
           <div class="form-group">
             <label for="kubeconfig_expiry" class="col-sm-2 control-label text-left"> Kubeconfig expiry </label>
-            <div class="col-sm-10">
+            <div class="col-sm-8">
               <select
                 id="kubeconfig_expiry"
                 class="form-control"
@@ -146,7 +146,7 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-tags" title-text="Hidden containers"></rd-widget-header>
+      <rd-widget-header icon="box" feather-icon="true" title-text="Hidden containers"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal" ng-submit="addFilteredContainerLabel()" name="addTagForm">
           <div class="form-group">
@@ -157,12 +157,12 @@
             <div class="col-sm-11 col-md-4">
               <input type="text" required class="form-control" id="header_name" name="label_name" ng-model="formValues.labelName" placeholder="e.g. com.example.foo" />
             </div>
-            <label for="header_value" class="col-sm-1 margin-sm-top control-label text-left">Value</label>
-            <div class="col-sm-11 col-md-4 margin-sm-top">
+            <label for="header_value" class="col-sm-1 control-label text-left">Value</label>
+            <div class="col-sm-11 col-md-4">
               <input type="text" class="form-control" id="header_value" ng-model="formValues.labelValue" placeholder="e.g. bar" />
             </div>
-            <div class="col-sm-12 col-md-2 margin-sm-top">
-              <button type="submit" class="btn btn-primary btn-sm" ng-disabled="!formValues.labelName"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add filter</button>
+            <div class="col-sm-12 col-md-2">
+              <button type="submit" class="btn btn-primary btn-sm" ng-disabled="!formValues.labelName"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add filter</button>
             </div>
           </div>
           <div class="form-group">
@@ -205,24 +205,23 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-download" title-text="Backup Portainer"></rd-widget-header>
+      <rd-widget-header icon="download" feather-icon="true" title-text="Backup Portainer"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal" ng-submit="backupPortainer()" name="backupPortainerForm">
           <div class="col-sm-12 form-section-title"> Backup configuration </div>
           <box-selector options="backupOptions" value="formValues.backupFormType" on-change="(onBackupOptionsChange)" radio-name="'backupOptions'"></box-selector>
           <div ng-if="formValues.backupFormType === BACKUP_FORM_TYPES.S3">
             <!-- Schedule automatic backups -->
-            <div class="form-group">
-              <div class="col-sm-12">
-                <por-switch-field
-                  label="'Schedule automatic backups'"
-                  name="'s3-backup-setting'"
-                  feature-id="s3BackupFeatureId"
-                  checked="formValues.scheduleAutomaticBackups"
-                  label-class="'col-sm-2'"
-                  on-change="(onToggleAutoBackups)"
-                ></por-switch-field>
-              </div>
+            <div class="form-group mt-3">
+              <por-switch-field
+                label="'Schedule automatic backups'"
+                name="'s3-backup-setting'"
+                feature-id="s3BackupFeatureId"
+                checked="formValues.scheduleAutomaticBackups"
+                field-class="'col-sm-12'"
+                label-class="'col-sm-2'"
+                on-change="(onToggleAutoBackups)"
+              ></por-switch-field>
             </div>
             <!-- !Schedule automatic backups -->
             <!-- Cron rule  -->
@@ -321,18 +320,24 @@
             <div class="col-sm-12 form-section-title"> Security settings </div>
             <!-- Password protect S3 -->
             <div class="form-group">
-              <label for="password_protect" class="col-sm-1 control-label text-left">Password protect</label>
-              <div class="col-sm-1">
-                <label class="switch" data-cy="settings-s3PasswordToggle">
-                  <input type="checkbox" id="password_protect_s3" name="password_protect_s3" ng-model="formValues.passwordProtectS3" disabled />
-                  <i></i>
+              <label for="password_protect" class="col-sm-2 control-label text-left">Password protect</label>
+              <div class="col-sm-8">
+                <label class="switch">
+                  <input
+                    type="checkbox"
+                    id="password_protect_s3"
+                    name="password_protect_s3"
+                    ng-model="formValues.passwordProtectS3"
+                    data-cy="settings-passwordProtectToggleS3"
+                    disabled
+                  /><span class="slider round"></span>
                 </label>
               </div>
             </div>
             <!-- !Password protect S3 -->
             <!-- Password S3 -->
             <div class="form-group" ng-if="formValues.passwordProtectS3">
-              <label for="password" class="col-sm-1 control-label text-left">Password</label>
+              <label for="password" class="col-sm-2 control-label text-left">Password</label>
               <div class="col-sm-3">
                 <input type="password" class="form-control" ng-model="formValues.passwordS3" id="password_S3" name="password_S3" required data-cy="settings-backups3pw" />
               </div>
@@ -340,7 +345,7 @@
             <div class="form-group col-md-12" ng-show="backupPortainerForm.password_S3.$invalid">
               <div class="small text-warning">
                 <div ng-messages="backupPortainerForm.password_S3.$error">
-                  <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                  <p ng-message="required"> <pr-icon icon="'alert-triangle'" feather="true"></pr-icon> This field is required.</p>
                 </div>
               </div>
             </div>
@@ -381,11 +386,10 @@
             <div class="col-sm-12 form-section-title"> Security settings </div>
             <!-- Password protect -->
             <div class="form-group">
-              <label for="password_protect" class="col-sm-1 control-label text-left">Password protect</label>
-              <div class="col-sm-1">
+              <label for="password_protect" class="col-sm-2 control-label text-left">Password protect</label>
+              <div class="col-sm-2">
                 <label class="switch" data-cy="settings-passwordProtectLocal">
-                  <input type="checkbox" id="password_protect" name="password_protect" ng-model="formValues.passwordProtect" />
-                  <i></i>
+                  <input type="checkbox" id="password_protect" name="password_protect" ng-model="formValues.passwordProtect" /><span class="slider round"></span>
                 </label>
               </div>
             </div>
@@ -393,7 +397,7 @@
 
             <!-- Password -->
             <div class="form-group" ng-if="formValues.passwordProtect">
-              <label for="password" class="col-sm-1 control-label text-left">Password</label>
+              <label for="password" class="col-sm-2 control-label text-left">Password</label>
               <div class="col-sm-3">
                 <input type="password" class="form-control" ng-model="formValues.password" id="password" name="password" required data-cy="settings-backupLocalPassword" />
               </div>
@@ -401,7 +405,7 @@
             <div class="form-group col-md-12" ng-show="backupPortainerForm.password.$invalid">
               <div class="small text-warning">
                 <div ng-messages="backupPortainerForm.password.$error">
-                  <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                  <p ng-message="required"> <pr-icon icon="'alert-triangle'" feather="true"></pr-icon> This field is required.</p>
                 </div>
               </div>
             </div>
diff --git a/app/portainer/views/settings/settingsController.js b/app/portainer/views/settings/settingsController.js
index 4206642f1..13ee6a71c 100644
--- a/app/portainer/views/settings/settingsController.js
+++ b/app/portainer/views/settings/settingsController.js
@@ -1,7 +1,7 @@
 import angular from 'angular';
 
-import { buildOption } from '@/portainer/components/BoxSelector';
 import { FeatureId } from '@/portainer/feature-flags/enums';
+import { options } from './options';
 
 angular.module('portainer.app').controller('SettingsController', [
   '$scope',
@@ -14,10 +14,8 @@ angular.module('portainer.app').controller('SettingsController', [
   'Blob',
   function ($scope, $state, Notifications, SettingsService, StateManager, BackupService, FileSaver) {
     $scope.s3BackupFeatureId = FeatureId.S3_BACKUP_SETTING;
-    $scope.backupOptions = [
-      buildOption('backup_file', 'fa fa-download', 'Download backup file', '', 'file'),
-      buildOption('backup_s3', 'fa fa-upload', 'Store in S3', 'Define a cron schedule', 's3', FeatureId.S3_BACKUP_SETTING),
-    ];
+
+    $scope.backupOptions = options;
 
     $scope.state = {
       isDemo: false,
diff --git a/app/react/components/form-components/SwitchField/SwitchField.tsx b/app/react/components/form-components/SwitchField/SwitchField.tsx
index 1072eef98..87d88d154 100644
--- a/app/react/components/form-components/SwitchField/SwitchField.tsx
+++ b/app/react/components/form-components/SwitchField/SwitchField.tsx
@@ -16,6 +16,7 @@ export interface Props {
   tooltip?: string;
   labelClass?: string;
   switchClass?: string;
+  fieldClass?: string;
   dataCy?: string;
   disabled?: boolean;
   featureId?: FeatureId;
@@ -31,6 +32,7 @@ export function SwitchField({
   label,
   name,
   labelClass,
+  fieldClass,
   dataCy,
   disabled,
   onChange,
@@ -41,10 +43,10 @@ export function SwitchField({
   const toggleName = name ? `toggle_${name}` : '';
 
   return (
-    <label className={styles.root}>
+    <label className={clsx(styles.root, fieldClass)}>
       <span
         className={clsx(
-          'control-label text-left space-right',
+          'text-left space-right control-label',
           styles.label,
           labelClass
         )}