feat: hide expand icon in left navigation

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

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

@@ -187,4 +187,22 @@ describe('Header', () => {
 
     expect(component.find('CollapsibleNavGroupEnabled').exists()).toBeTruthy();
   });
+
+  it('show hide expand icon in top left navigation when workspace enabled + homepage + new navigation enabled', () => {
+    const branding = {
+      useExpandedHeader: false,
+    };
+    const props = {
+      ...mockProps(),
+      branding,
+    };
+    props.application.currentAppId$ = new BehaviorSubject('home');
+    props.application.capabilities = { ...props.application.capabilities };
+    (props.application.capabilities.workspaces as Record<string, unknown>) = {};
+    (props.application.capabilities.workspaces as Record<string, unknown>).enabled = true;
+
+    const component = mountWithIntl(<Header {...props} navGroupEnabled />);
+
+    expect(component.find('.header__toggleNavButtonSection').exists()).toBeFalsy();
+  });
 });

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

@@ -131,9 +131,17 @@ export function Header({
 }: HeaderProps) {
   const isVisible = useObservable(observables.isVisible$, false);
   const isLocked = useObservable(observables.isLocked$, false);
+  const appId = useObservable(application.currentAppId$, '');
   const [isNavOpen, setIsNavOpen] = useState(false);
   const sidecarConfig = useObservable(observables.sidecarConfig$, undefined);
 
+  /**
+   * This is a workaround on 2.16 to hide the navigation items within left navigation
+   * when user is in homepage with workspace enabled + new navigation enabled
+   */
+  const shouldHideExpandIcon =
+    navGroupEnabled && appId === 'home' && application.capabilities.workspaces.enabled;
+
   const sidecarPaddingStyle = useMemo(() => {
     return getOsdSidecarPaddingStyle(sidecarConfig);
   }, [sidecarConfig]);
@@ -198,29 +206,31 @@ export function Header({
 
           <EuiHeader position="fixed" className="primaryHeader" style={sidecarPaddingStyle}>
             <EuiHeaderSection grow={false}>
-              <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">
-                <EuiToolTip
-                  content={i18n.translate('core.ui.primaryNav.menu', {
-                    defaultMessage: 'Menu',
-                  })}
-                  delay="long"
-                  position="bottom"
-                >
-                  <EuiHeaderSectionItemButton
-                    data-test-subj="toggleNavButton"
-                    aria-label={i18n.translate('core.ui.primaryNav.toggleNavAriaLabel', {
-                      defaultMessage: 'Toggle primary navigation',
+              {shouldHideExpandIcon ? null : (
+                <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">
+                  <EuiToolTip
+                    content={i18n.translate('core.ui.primaryNav.menu', {
+                      defaultMessage: 'Menu',
                     })}
-                    onClick={() => setIsNavOpen(!isNavOpen)}
-                    aria-expanded={isNavOpen}
-                    aria-pressed={isNavOpen}
-                    aria-controls={navId}
-                    ref={toggleCollapsibleNavRef}
+                    delay="long"
+                    position="bottom"
                   >
-                    <EuiIcon type="menu" size="m" />
-                  </EuiHeaderSectionItemButton>
-                </EuiToolTip>
-              </EuiHeaderSectionItem>
+                    <EuiHeaderSectionItemButton
+                      data-test-subj="toggleNavButton"
+                      aria-label={i18n.translate('core.ui.primaryNav.toggleNavAriaLabel', {
+                        defaultMessage: 'Toggle primary navigation',
+                      })}
+                      onClick={() => setIsNavOpen(!isNavOpen)}
+                      aria-expanded={isNavOpen}
+                      aria-pressed={isNavOpen}
+                      aria-controls={navId}
+                      ref={toggleCollapsibleNavRef}
+                    >
+                      <EuiIcon type="menu" size="m" />
+                    </EuiHeaderSectionItemButton>
+                  </EuiToolTip>
+                </EuiHeaderSectionItem>
+              )}
 
               <EuiHeaderSectionItem border="right">
                 <HeaderNavControls side="left" navControls$={observables.navControlsLeft$} />
@@ -293,7 +303,7 @@ export function Header({
             id={navId}
             isLocked={isLocked}
             navLinks$={observables.navLinks$}
-            isNavOpen={isNavOpen}
+            isNavOpen={shouldHideExpandIcon ? false : isNavOpen}
             basePath={basePath}
             navigateToApp={application.navigateToApp}
             navigateToUrl={application.navigateToUrl}