From 8253e52963a698f39cb63fc8096bcfa3ff67cbe3 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Wed, 11 Sep 2024 19:09:43 +0800
Subject: [PATCH] feat: use workspace color

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../ui/header/collapsible_nav_group_enabled_top.scss   |  3 ---
 .../ui/header/collapsible_nav_group_enabled_top.tsx    | 10 ++++++++--
 2 files changed, 8 insertions(+), 5 deletions(-)
 delete mode 100644 src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss
deleted file mode 100644
index 25f4385775ec..000000000000
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.leftNavTopIcon {
-  color: $euiColorMediumShade;
-}
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 3d1535992a3f..15a41c13d523 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -22,7 +22,13 @@ import { ChromeNavGroupServiceStartContract, NavGroupItemInMap } from '../../nav
 import { ChromeNavLink } from '../../nav_links';
 import { ALL_USE_CASE_ID } from '../../../../../core/utils';
 import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
-import './collapsible_nav_group_enabled_top.scss';
+
+// Reference https://github.com/opensearch-project/oui/blob/main/src/services/color/is_valid_hex.ts
+const validateWorkspaceColor = (color?: string) =>
+  !!color && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
+
+const getValidWorkspaceColor = (color?: string) =>
+  validateWorkspaceColor(color) ? color : undefined;
 
 export interface CollapsibleNavTopProps {
   homeLink?: ChromeNavLink;
@@ -131,8 +137,8 @@ export const CollapsibleNavTop = ({
               <EuiIcon
                 type={icon}
                 size="l"
-                className="leftNavTopIcon"
                 data-test-subj={`collapsibleNavIcon-${icon}`}
+                color={getValidWorkspaceColor(currentWorkspace?.color)}
               />
             </EuiButtonEmpty>
           </EuiFlexItem>