From d04747b3095462b718f66126698ed3611c8f76ce Mon Sep 17 00:00:00 2001
From: cmeng <cmenginnz@gmail.com>
Date: Mon, 23 Jan 2023 09:14:06 +1300
Subject: [PATCH] fix(home): EE-4874 homepage ui issues (#8319)

---
 app/assets/ico/heartbeat-down.svg                 |  4 ++++
 app/assets/ico/heartbeat-up.svg                   |  4 ++++
 app/react/components/EdgeIndicator.tsx            |  3 ++-
 app/react/components/Svg.tsx                      |  4 ++++
 app/react/components/datatables/SearchBar.tsx     |  2 +-
 .../WizardEndpointsList.module.css                | 15 +++++++++++----
 6 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/ico/heartbeat-down.svg
 create mode 100644 app/assets/ico/heartbeat-up.svg

diff --git a/app/assets/ico/heartbeat-down.svg b/app/assets/ico/heartbeat-down.svg
new file mode 100644
index 000000000..eafa69da7
--- /dev/null
+++ b/app/assets/ico/heartbeat-down.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.91895 2.19267C6.33456 0.34043 3.69255 -0.157821 1.70745 1.53828C-0.277637 3.23438 -0.557105 6.0702 1.0018 8.07617C2.17927 9.59131 5.52429 12.6331 7.0907 14.0309C7.37867 14.2878 7.52266 14.4164 7.69121 14.4669C7.83757 14.5108 8.00026 14.5108 8.14662 14.4669C8.31517 14.4164 8.45916 14.2878 8.74713 14.0309C10.3135 12.6331 13.6586 9.59131 14.836 8.07617C16.3949 6.0702 16.1496 3.21655 14.1304 1.53828C12.1112 -0.139975 9.50327 0.34043 7.91895 2.19267Z" fill="#D92D20"/>
+<path d="M8.03754 9.71338L8.03754 4.94044M8.03754 9.71338L5.90125 7.57709M8.03754 9.71338L10.1738 7.57709" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/assets/ico/heartbeat-up.svg b/app/assets/ico/heartbeat-up.svg
new file mode 100644
index 000000000..87f7f689d
--- /dev/null
+++ b/app/assets/ico/heartbeat-up.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.91895 2.19267C6.33456 0.34043 3.69255 -0.157821 1.70745 1.53828C-0.277637 3.23438 -0.557105 6.0702 1.0018 8.07617C2.17927 9.59131 5.52429 12.6331 7.0907 14.0309C7.37867 14.2878 7.52266 14.4164 7.69121 14.4669C7.83757 14.5108 8.00026 14.5108 8.14662 14.4669C8.31517 14.4164 8.45916 14.2878 8.74713 14.0309C10.3135 12.6331 13.6586 9.59131 14.836 8.07617C16.3949 6.0702 16.1496 3.21655 14.1304 1.53828C12.1112 -0.139975 9.50327 0.34043 7.91895 2.19267Z" fill="#039855"/>
+<path d="M8.03754 4.94043L8.03754 9.71337M8.03754 4.94043L10.1738 7.07672M8.03754 4.94043L5.90125 7.07672" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/react/components/EdgeIndicator.tsx b/app/react/components/EdgeIndicator.tsx
index ce7197279..7ab2e6753 100644
--- a/app/react/components/EdgeIndicator.tsx
+++ b/app/react/components/EdgeIndicator.tsx
@@ -27,7 +27,7 @@ export function EdgeIndicator({
     return (
       <span role="status" aria-label="edge-status">
         <EnvironmentStatusBadgeItem aria-label="unassociated">
-          <s>associated</s>
+          <span className="whitespace-nowrap">Not associated</span>
         </EnvironmentStatusBadgeItem>
       </span>
     );
@@ -41,6 +41,7 @@ export function EdgeIndicator({
     >
       <EnvironmentStatusBadgeItem
         color={isValid ? 'success' : 'danger'}
+        icon={isValid ? 'svg-heartbeatup' : 'svg-heartbeatdown'}
         aria-label="edge-heartbeat"
       >
         heartbeat
diff --git a/app/react/components/Svg.tsx b/app/react/components/Svg.tsx
index ffac537eb..3bcc3a7b6 100644
--- a/app/react/components/Svg.tsx
+++ b/app/react/components/Svg.tsx
@@ -4,6 +4,8 @@ import darkmode from '@/assets/ico/theme/darkmode.svg?c';
 import lightmode from '@/assets/ico/theme/lightmode.svg?c';
 import highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c';
 // general icons
+import heartbeatup from '@/assets/ico/heartbeat-up.svg?c';
+import heartbeatdown from '@/assets/ico/heartbeat-down.svg?c';
 import checked from '@/assets/ico/checked.svg?c';
 import dataflow from '@/assets/ico/dataflow-1.svg?c';
 import git from '@/assets/ico/git.svg?c';
@@ -44,6 +46,8 @@ import quay from '@/assets/ico/vendor/quay.svg?c';
 const placeholder = Placeholder;
 
 export const SvgIcons = {
+  heartbeatup,
+  heartbeatdown,
   automode,
   darkmode,
   lightmode,
diff --git a/app/react/components/datatables/SearchBar.tsx b/app/react/components/datatables/SearchBar.tsx
index 7370e9d1d..6f27c5e92 100644
--- a/app/react/components/datatables/SearchBar.tsx
+++ b/app/react/components/datatables/SearchBar.tsx
@@ -32,7 +32,7 @@ export function SearchBar({
 
   return (
     <div
-      className={clsx('searchBar items-center flex min-w-[90px]', className)}
+      className={clsx('searchBar items-center flex min-w-[350px]', className)}
     >
       <Search className="searchIcon lucide shrink-0" />
       <input
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.module.css b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.module.css
index 82be4836e..65feb01cc 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.module.css
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.module.css
@@ -1,10 +1,10 @@
 .wizard-list-wrapper {
   display: grid;
-  grid-template-columns: 50px 1fr;
+  grid-template-columns: 50px 1fr 70px;
   grid-template-areas:
-    'image title'
-    'image subtitle'
-    'image type';
+    'image title title'
+    'image subtitle edgeStatus'
+    'image type type';
   border: 1px solid rgb(221, 221, 221);
   border-radius: 5px;
   margin-bottom: 10px;
@@ -13,6 +13,13 @@
   box-shadow: 0 3px 10px -2px rgb(161 170 166 / 20%);
 }
 
+.wizard-list-edge-status {
+  grid-area: edgeStatus;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 .wizard-list-image {
   grid-area: image;
   font-size: 35px;