From 65c050dc87ac810ccb005723a2f9274bbcdef818 Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Wed, 3 Aug 2022 11:15:00 +1200
Subject: [PATCH] feat(ui): ui change for edge compute settings EE-3800 (#7365)

* added style to edge compute under settings
---
 .../AutomaticEdgeEnvCreation.tsx                      |  2 +-
 .../EdgeComputeSettings/EdgeComputeSettings.tsx       |  6 +++---
 .../settings/edge-compute/SettingsFDO/SettingsFDO.tsx |  4 ++--
 .../edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx  |  3 ++-
 app/react/components/form-components/FormError.tsx    | 11 +++++++----
 .../components/form-components/SwitchField/Switch.css |  4 ++++
 6 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx b/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
index 11ebd9603..c8f4c2cac 100644
--- a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
+++ b/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
@@ -42,7 +42,7 @@ export function AutomaticEdgeEnvCreation() {
   return (
     <Widget>
       <WidgetTitle
-        icon="fa-laptop"
+        icon="svg-laptop"
         title="Automatic Edge Environment Creation"
       />
       <WidgetBody>
diff --git a/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx b/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
index 6ca15b7ba..b021f73c6 100644
--- a/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
+++ b/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
@@ -32,7 +32,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
   return (
     <div className="row">
       <Widget>
-        <WidgetTitle icon="fa-laptop" title="Edge Compute settings" />
+        <WidgetTitle icon="svg-laptop" title="Edge Compute settings" />
         <WidgetBody>
           <Formik
             initialValues={settings}
@@ -58,7 +58,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                 <FormControl
                   inputId="edge_enable"
                   label="Enable Edge Compute features"
-                  size="medium"
+                  size="small"
                   errors={errors.EnableEdgeComputeFeatures}
                 >
                   <Switch
@@ -80,7 +80,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                 <FormControl
                   inputId="edge_enforce_id"
                   label="Enforce use of Portainer generated Edge ID"
-                  size="medium"
+                  size="small"
                   tooltip="This setting only applies to manually created environments."
                   errors={errors.EnforceEdgeID}
                 >
diff --git a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx b/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx
index 952b496d7..bc549cca0 100644
--- a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx
+++ b/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx
@@ -48,7 +48,7 @@ export function SettingsFDO({ settings, onSubmit }: Props) {
   return (
     <div className="row">
       <Widget>
-        <WidgetTitle icon="fa-laptop" title="FDO" />
+        <WidgetTitle icon="svg-laptop" title="FDO" />
         <WidgetBody>
           <Formik
             initialValues={initialValues}
@@ -71,7 +71,7 @@ export function SettingsFDO({ settings, onSubmit }: Props) {
                 <FormControl
                   inputId="edge_enableFDO"
                   label="Enable FDO Management Service"
-                  size="medium"
+                  size="small"
                   errors={errors.enabled}
                 >
                   <Switch
diff --git a/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx b/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx
index 891a168d5..10b5c00ba 100644
--- a/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx
+++ b/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx
@@ -93,7 +93,7 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
   return (
     <div className="row">
       <Widget>
-        <WidgetTitle icon="fa-laptop" title="Intel OpenAMT" />
+        <WidgetTitle icon="svg-laptop" title="Intel OpenAMT" />
         <WidgetBody>
           <Formik
             initialValues={initialValues}
@@ -117,6 +117,7 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
                   inputId="edge_enableOpenAMT"
                   label="Enable OpenAMT"
                   errors={errors.enabled}
+                  size="small"
                 >
                   <Switch
                     id="edge_enableOpenAMT"
diff --git a/app/react/components/form-components/FormError.tsx b/app/react/components/form-components/FormError.tsx
index 95221e026..04467d1b7 100644
--- a/app/react/components/form-components/FormError.tsx
+++ b/app/react/components/form-components/FormError.tsx
@@ -1,11 +1,14 @@
 import { PropsWithChildren } from 'react';
 
+import { Icon } from '@@/Icon';
+
 export function FormError({ children }: PropsWithChildren<unknown>) {
   return (
-    <div className="small text-warning">
-      <i
-        className="fa fa-exclamation-triangle space-right"
-        aria-hidden="true"
+    <div className="small text-warning vertical-center">
+      <Icon
+        icon="alert-triangle"
+        feather
+        className="icon icon-sm icon-warning"
       />
       {children}
     </div>
diff --git a/app/react/components/form-components/SwitchField/Switch.css b/app/react/components/form-components/SwitchField/Switch.css
index c09420285..838998008 100644
--- a/app/react/components/form-components/SwitchField/Switch.css
+++ b/app/react/components/form-components/SwitchField/Switch.css
@@ -66,3 +66,7 @@
   background-color: var(--BE-only);
   box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px var(--BE-only);
 }
+
+.switch input[type='checkbox']:disabled + .slider {
+  cursor: not-allowed;
+}