feat: optimize code based on comments

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

src/core/public/chrome/nav_group/nav_group_service.ts

@@ -141,6 +141,8 @@ export class ChromeNavGroupService {
 
     // Append all the links that do not have use case info to keep backward compatible
     const linkIdsWithNavGroupInfo = Object.values(navGroupsMap).reduce((accumulator, navGroup) => {
+      // Nav groups without type will be regarded as use case,
+      // we should transform use cases to a category and append links with `showInAllNavGroup: true` under the category
       if (!navGroup.type) {
         // Append use case section into left navigation
         const categoryInfo = {
@@ -362,7 +364,9 @@ export class ChromeNavGroupService {
           });
         };
         if (visibleUseCases.length === 1) {
-          // It means we are in a workspace, we should only use the visible use cases
+          // The length will be 1 if inside a workspace
+          // as workspace plugin will register a filter to only make the selected nav group visible.
+          // In order to tell which nav group we are in, we should use the only visible use case if the visibleUseCases.length equals 1.
           visibleUseCases.forEach((navGroup) => mapAppIdToNavGroup(navGroup));
         } else {
           // Nav group of Hidden status should be filtered out when counting navGroups the currentApp belongs to

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss

@@ -1,8 +1,11 @@
+@import "./variables";
+
 .context-nav-wrapper {
   border: none !important;
   border-top-right-radius: $euiSizeL;
   border-bottom-right-radius: $euiSizeL;
-  background-color: $euiColorLightShade;
+  background-color: $ouiSideNavBackgroundColorTemp;
+  overflow: hidden;
 
   .nav-link-item {
     padding: $euiSizeS;

src/core/public/chrome/ui/header/collapsible_nav_groups.tsx

@@ -116,6 +116,9 @@ export function NavGroups({
          */
         href: undefined,
         onClick: undefined,
+        /**
+         * The data-test-subj has to be undefined because we render the element with the attribute in CollapsibleNavGroupsLabel
+         */
         'data-test-subj': undefined,
         className: classNames(props.className, 'nav-link-parent-item'),
         name: (

src/core/public/chrome/ui/header/variables.scss

@@ -0,0 +1 @@
+$ouiSideNavBackgroundColorTemp: lightOrDarkTheme(#ebe4df, #001c28); /* stylelint-disable-line */ 

src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss

@@ -0,0 +1,5 @@
+@import "../../../../../core/public/chrome/ui/header/variables";
+
+.workspaceNameLabel {
+  background-color: $ouiSideNavBackgroundColorTemp;
+}

src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx

@@ -25,6 +25,7 @@ import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
 import { WorkspaceUseCase } from '../../types';
 import { validateWorkspaceColor } from '../../../common/utils';
 import { WorkspacePickerContent } from '../workspace_picker_content/workspace_picker_content';
+import './workspace_selector.scss';
 
 const createWorkspaceButton = i18n.translate('workspace.menu.button.createWorkspace', {
   defaultMessage: 'Create workspace',
@@ -82,13 +83,13 @@ export const WorkspaceSelector = ({ coreStart, registeredUseCases$ }: Props) =>
           padding: '0 5px',
         }}
       >
-        <small>
+        <small className="workspaceNameLabel">
           {i18n.translate('workspace.left.nav.selector.label', {
             defaultMessage: 'WORKSPACE',
           })}
         </small>
       </EuiText>
-      <EuiPanel paddingSize="s" borderRadius="m">
+      <EuiPanel paddingSize="s" borderRadius="m" color="transparent" hasBorder>
         <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="s" justifyContent="flexStart">