[Backport 2.x] [navigation]fix: redirect user to home in global when workspace is enabled

changelogs/fragments/7551.yml

@@ -0,0 +1,2 @@
+fix:
+- [navigation]feat: redirect user to home in global when workspace is enabled ([#7551](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7551))

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

@@ -198,6 +198,14 @@ export function CollapsibleNavGroupEnabled({
   const navGroupsMap = useObservable(observables.navGroupsMap$, {});
   const currentNavGroup = useObservable(observables.currentNavGroup$, undefined);
 
+  const visibleUseCases = useMemo(
+    () =>
+      Object.values(navGroupsMap).filter(
+        (group) => group.type === undefined && group.status !== NavGroupStatus.Hidden
+      ),
+    [navGroupsMap]
+  );
+
   const navLinksForRender: ChromeNavLink[] = useMemo(() => {
     if (currentNavGroup && currentNavGroup.id !== ALL_USE_CASE_ID) {
       return fulfillRegistrationLinksToChromeNavLinks(
@@ -206,10 +214,6 @@ export function CollapsibleNavGroupEnabled({
       );
     }
 
-    const visibleUseCases = Object.values(navGroupsMap).filter(
-      (group) => group.type === undefined && group.status !== NavGroupStatus.Hidden
-    );
-
     if (visibleUseCases.length === 1) {
       return fulfillRegistrationLinksToChromeNavLinks(
         navGroupsMap[visibleUseCases[0].id].navLinks || [],
@@ -269,7 +273,7 @@ export function CollapsibleNavGroupEnabled({
       });
 
     return fulfillRegistrationLinksToChromeNavLinks(navLinksForAll, navLinks);
-  }, [navLinks, navGroupsMap, currentNavGroup]);
+  }, [navLinks, navGroupsMap, currentNavGroup, visibleUseCases]);
 
   const width = useMemo(() => {
     if (!isNavOpen) {
@@ -332,13 +336,13 @@ export function CollapsibleNavGroupEnabled({
               <>
                 <CollapsibleNavTop
                   navLinks={navLinks}
-                  navGroupsMap={navGroupsMap}
                   navigateToApp={navigateToApp}
                   logos={logos}
                   onClickBack={() => setCurrentNavGroup(undefined)}
                   currentNavGroup={currentNavGroup}
                   shouldShrinkNavigation={!isNavOpen}
                   onClickShrink={closeNav}
+                  visibleUseCases={visibleUseCases}
                 />
                 <NavGroups
                   navLinks={navLinksForRender}

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

@@ -63,9 +63,9 @@ describe('<CollapsibleNavTop />', () => {
     return {
       navLinks: mockedNavLinks,
       navigateToApp: jest.fn(),
-      navGroupsMap: {},
       logos: getLogos({}, mockBasePath.serverBasePath),
       shouldShrinkNavigation: false,
+      visibleUseCases: [],
     };
   };
   it('should render home icon', async () => {
@@ -74,23 +74,23 @@ describe('<CollapsibleNavTop />', () => {
   });
 
   it('should render back icon', async () => {
-    const { findByTestId } = render(
+    const { findByTestId, findByText } = render(
       <CollapsibleNavTop
         {...getMockedProps()}
-        navGroupsMap={{
-          navGroupFoo: {
+        visibleUseCases={[
+          {
             id: 'navGroupFoo',
             title: 'navGroupFoo',
             description: 'navGroupFoo',
             navLinks: [],
           },
-          navGroupBar: {
+          {
             id: 'navGroupBar',
             title: 'navGroupBar',
             description: 'navGroupBar',
             navLinks: [],
           },
-        }}
+        ]}
         currentNavGroup={{
           id: 'navGroupFoo',
           title: 'navGroupFoo',
@@ -100,6 +100,37 @@ describe('<CollapsibleNavTop />', () => {
       />
     );
     await findByTestId('collapsibleNavBackButton');
+    await findByText('Back');
+  });
+
+  it('should render back home icon', async () => {
+    const { findByTestId, findByText } = render(
+      <CollapsibleNavTop
+        {...getMockedProps()}
+        visibleUseCases={[
+          {
+            id: 'navGroupFoo',
+            title: 'navGroupFoo',
+            description: 'navGroupFoo',
+            navLinks: [],
+          },
+          {
+            id: 'navGroupBar',
+            title: 'navGroupBar',
+            description: 'navGroupBar',
+            navLinks: [],
+          },
+        ]}
+        currentNavGroup={{
+          id: 'global',
+          title: 'navGroupFoo',
+          description: 'navGroupFoo',
+          navLinks: [],
+        }}
+      />
+    );
+    await findByTestId('collapsibleNavBackButton');
+    await findByText('Home');
   });
 
   it('should render expand icon', async () => {

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

@@ -22,46 +22,59 @@
 
 export interface CollapsibleNavTopProps {
   navLinks: ChromeNavLink[];
-  navGroupsMap: Record<string, NavGroupItemInMap>;
   currentNavGroup?: NavGroupItemInMap;
   navigateToApp: InternalApplicationStart['navigateToApp'];
   logos: Logos;
   onClickBack?: () => void;
   onClickShrink?: () => void;
   shouldShrinkNavigation: boolean;
+  visibleUseCases: NavGroupItemInMap[];
 }
 
 export const CollapsibleNavTop = ({
   navLinks,
-  navGroupsMap,
   currentNavGroup,
   navigateToApp,
   logos,
   onClickBack,
   onClickShrink,
   shouldShrinkNavigation,
+  visibleUseCases,
 }: CollapsibleNavTopProps) => {
   const homeLink = useMemo(() => navLinks.find((link) => link.id === 'home'), [navLinks]);
 
-  const shouldShowBackButton = useMemo(
-    () =>
-      currentNavGroup?.id !== ALL_USE_CASE_ID &&
-      !shouldShrinkNavigation &&
-      Object.values(navGroupsMap).filter((item) => !item.type).length > 1 &&
-      currentNavGroup,
-    [navGroupsMap, currentNavGroup, shouldShrinkNavigation]
+  const isOutsideWorkspace = useMemo(
+    () => !visibleUseCases.find((useCase) => useCase.id === currentNavGroup?.id),
+    [currentNavGroup, visibleUseCases]
   );
 
+  const shouldShowBackButton = useMemo(() => {
+    if (!currentNavGroup || currentNavGroup.id === ALL_USE_CASE_ID || shouldShrinkNavigation) {
+      return false;
+    }
+
+    // It means user is in a specific type of workspace
+    if (visibleUseCases.length <= 1) {
+      return false;
+    }
+
+    if (isOutsideWorkspace) {
+      return true;
+    }
+
+    return visibleUseCases.length > 1;
+  }, [visibleUseCases, currentNavGroup, shouldShrinkNavigation, isOutsideWorkspace]);
+
   const shouldShowHomeLink = useMemo(() => {
     if (!homeLink || shouldShrinkNavigation) return false;
 
     return !shouldShowBackButton;
   }, [shouldShowBackButton, homeLink, shouldShrinkNavigation]);
 
   const homeLinkProps = useMemo(() => {
-    if (shouldShowHomeLink) {
+    if (homeLink) {
       const propsForHomeIcon = createEuiListItem({
-        link: homeLink as ChromeNavLink,
+        link: homeLink,
         appId: 'home',
         dataTestSubj: 'collapsibleNavHome',
         navigateToApp,
@@ -74,7 +87,7 @@
     }
 
     return {};
-  }, [shouldShowHomeLink, homeLink, navigateToApp]);
+  }, [homeLink, navigateToApp]);
 
   return (
     <div className="side-naivgation-top">
@@ -91,13 +104,17 @@
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
               size="l"
-              onClick={onClickBack}
+              onClick={isOutsideWorkspace ? homeLinkProps.onClick : onClickBack}
               data-test-subj="collapsibleNavBackButton"
             >
               <EuiIcon type="arrowLeft" />
-              {i18n.translate('core.ui.primaryNav.backButtonLabel', {
-                defaultMessage: 'Back',
-              })}
+              {isOutsideWorkspace
+                ? i18n.translate('core.ui.primaryNav.homeButtonLabel', {
+                    defaultMessage: 'Home',
+                  })
+                : i18n.translate('core.ui.primaryNav.backButtonLabel', {
+                    defaultMessage: 'Back',
+                  })}
             </EuiButtonEmpty>
           </EuiFlexItem>
         ) : null}

src/plugins/dev_tools/public/dev_tools_icon.test.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { DevToolsIcon } from './dev_tools_icon';
+import { coreMock } from '../../../core/public/mocks';
+import { DEFAULT_NAV_GROUPS } from '../../../core/public';
+
+describe('<DevToolsIcon />', () => {
+  it('should call chrome.navGroup.setCurrentNavGroup and application.navigateToApp methods from core service when click', () => {
+    const coreStartMock = coreMock.createStart();
+    const { container } = render(<DevToolsIcon core={coreStartMock} appId="foo" />);
+    const component = container.children[0];
+    fireEvent.click(component);
+    expect(coreStartMock.chrome.navGroup.setCurrentNavGroup).toBeCalledWith(
+      DEFAULT_NAV_GROUPS.dataAdministration.id
+    );
+    expect(coreStartMock.application.navigateToApp).toBeCalledWith('foo');
+  });
+});

src/plugins/dev_tools/public/dev_tools_icon.tsx

@@ -6,13 +6,20 @@
 import React from 'react';
 import { EuiButtonIcon } from '@elastic/eui';
 import { CoreStart } from 'opensearch-dashboards/public';
+import { DEFAULT_NAV_GROUPS } from '../../../core/public';
 
 export function DevToolsIcon({ core, appId }: { core: CoreStart; appId: string }) {
   return (
     <EuiButtonIcon
       aria-label="go-to-dev-tools"
       iconType="consoleApp"
-      onClick={() => core.application.navigateToApp(appId)}
+      onClick={() => {
+        /**
+         * This is a workaround in 2.16, once devTools being refactor to a drawer, we can remove the setCurrentNavGroup line.
+         */
+        core.chrome.navGroup.setCurrentNavGroup(DEFAULT_NAV_GROUPS.dataAdministration.id);
+        core.application.navigateToApp(appId);
+      }}
     />
   );
 }