+ )}
+ {
+ // This element is used to push icons to the bottom of left navigation when collapsed
+ !isNavOpen ?
', () => {
title: '',
...navLink,
});
- const mockedNavLinks = [
- getMockedNavLink({
- id: 'home',
- title: 'home link',
- }),
- getMockedNavLink({
- id: 'subLink',
- title: 'subLink',
- parentNavLinkId: 'pure',
- }),
- getMockedNavLink({
- id: 'link-in-category',
- title: 'link-in-category',
- category: {
- id: 'category-1',
- label: 'category-1',
- },
- }),
- getMockedNavLink({
- id: 'link-in-category-2',
- title: 'link-in-category-2',
- category: {
- id: 'category-1',
- label: 'category-1',
- },
- }),
- getMockedNavLink({
- id: 'sub-link-in-category',
- title: 'sub-link-in-category',
- parentNavLinkId: 'link-in-category',
- category: {
- id: 'category-1',
- label: 'category-1',
- },
- }),
- ];
const getMockedProps = () => {
return {
- navLinks: mockedNavLinks,
+ homeLink: getMockedNavLink({ id: 'home', title: 'Home', href: '/' }),
navigateToApp: jest.fn(),
logos: getLogos({}, mockBasePath.serverBasePath),
shouldShrinkNavigation: false,
visibleUseCases: [],
+ currentWorkspace$: new BehaviorSubject
(null),
+ setCurrentNavGroup: jest.fn(),
};
};
- it('should render home icon', async () => {
- const { findByTestId } = render();
- await findByTestId('collapsibleNavHome');
- });
- it('should render back icon', async () => {
- const { findByTestId, findByText } = render(
- {
+ const props = {
+ ...getMockedProps(),
+ currentWorkspace$: new BehaviorSubject({ id: 'foo', name: 'foo' }),
+ visibleUseCases: [
+ {
id: 'navGroupFoo',
title: 'navGroupFoo',
description: 'navGroupFoo',
navLinks: [],
- }}
- />
- );
+ },
+ {
+ id: 'navGroupBar',
+ title: 'navGroupBar',
+ description: 'navGroupBar',
+ navLinks: [],
+ },
+ ],
+ currentNavGroup: {
+ id: 'navGroupFoo',
+ title: 'navGroupFoo',
+ description: 'navGroupFoo',
+ navLinks: [],
+ },
+ firstVisibleNavLinkOfAllUseCase: getMockedNavLink({
+ id: 'firstVisibleNavLinkOfAllUseCase',
+ }),
+ };
+ const { findByTestId, findByText, getByTestId } = render();
await findByTestId('collapsibleNavBackButton');
await findByText('Back');
+ fireEvent.click(getByTestId('collapsibleNavBackButton'));
+ expect(props.navigateToApp).toBeCalledWith('firstVisibleNavLinkOfAllUseCase');
+ expect(props.setCurrentNavGroup).toBeCalledWith(ALL_USE_CASE_ID);
});
- it('should render back home icon', async () => {
- const { findByTestId, findByText } = render(
-
- );
- await findByTestId('collapsibleNavBackButton');
- await findByText('Home');
+ it('should render home icon when not in a workspace', async () => {
+ const { findByTestId } = render();
+ await findByTestId('collapsibleNavHome');
});
- it('should render expand icon', async () => {
+ it('should render expand icon when collapsed', async () => {
const { findByTestId } = render(
);
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 9809e3724454..23e2f7e6108c 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
@@ -4,7 +4,8 @@
*/
import React, { useMemo } from 'react';
-import { Logos } from 'opensearch-dashboards/public';
+import useObservable from 'react-use/lib/useObservable';
+import { Logos, WorkspacesStart } from 'opensearch-dashboards/public';
import {
EuiButtonEmpty,
EuiButtonIcon,
@@ -12,64 +13,53 @@ import {
EuiFlexItem,
EuiIcon,
EuiSpacer,
+ EuiText,
} from '@elastic/eui';
import { InternalApplicationStart } from 'src/core/public/application';
import { i18n } from '@osd/i18n';
import { createEuiListItem } from './nav_link';
-import { NavGroupItemInMap } from '../../nav_group';
+import { ChromeNavGroupServiceStartContract, NavGroupItemInMap } from '../../nav_group';
import { ChromeNavLink } from '../../nav_links';
import { ALL_USE_CASE_ID } from '../../../../../core/utils';
export interface CollapsibleNavTopProps {
- navLinks: ChromeNavLink[];
+ homeLink?: ChromeNavLink;
+ firstVisibleNavLinkOfAllUseCase?: ChromeNavLink;
currentNavGroup?: NavGroupItemInMap;
navigateToApp: InternalApplicationStart['navigateToApp'];
logos: Logos;
- onClickBack?: () => void;
onClickShrink?: () => void;
shouldShrinkNavigation: boolean;
visibleUseCases: NavGroupItemInMap[];
+ currentWorkspace$: WorkspacesStart['currentWorkspace$'];
+ setCurrentNavGroup: ChromeNavGroupServiceStartContract['setCurrentNavGroup'];
}
export const CollapsibleNavTop = ({
- navLinks,
currentNavGroup,
navigateToApp,
logos,
- onClickBack,
onClickShrink,
shouldShrinkNavigation,
visibleUseCases,
+ currentWorkspace$,
+ setCurrentNavGroup,
+ homeLink,
+ firstVisibleNavLinkOfAllUseCase,
}: CollapsibleNavTopProps) => {
- const homeLink = useMemo(() => navLinks.find((link) => link.id === 'home'), [navLinks]);
+ const currentWorkspace = useObservable(currentWorkspace$);
- 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;
+ /**
+ * We can ensure that left nav is inside second level once all the following conditions are met:
+ * 1. Inside a workspace
+ * 2. The use case type of current workspace is all use case
+ * 3. current nav group is not all use case
+ */
+ const isInsideSecondLevelOfAllWorkspace =
+ visibleUseCases.length > 1 && !!currentWorkspace && currentNavGroup?.id !== ALL_USE_CASE_ID;
- return !shouldShowBackButton;
- }, [shouldShowBackButton, homeLink, shouldShrinkNavigation]);
+ const shouldShowBackButton = !shouldShrinkNavigation && isInsideSecondLevelOfAllWorkspace;
+ const shouldShowHomeLink = !shouldShrinkNavigation && !shouldShowBackButton;
const homeLinkProps = useMemo(() => {
if (homeLink) {
@@ -90,8 +80,8 @@ export const CollapsibleNavTop = ({
}, [homeLink, navigateToApp]);
return (
-
-
+
+
{shouldShowHomeLink ? (
@@ -103,17 +93,18 @@ export const CollapsibleNavTop = ({
{
+ if (firstVisibleNavLinkOfAllUseCase) {
+ navigateToApp(firstVisibleNavLinkOfAllUseCase.id);
+ }
+ setCurrentNavGroup(ALL_USE_CASE_ID);
+ }}
data-test-subj="collapsibleNavBackButton"
>
- {isOutsideWorkspace
- ? i18n.translate('core.ui.primaryNav.homeButtonLabel', {
- defaultMessage: 'Home',
- })
- : i18n.translate('core.ui.primaryNav.backButtonLabel', {
- defaultMessage: 'Back',
- })}
+ {i18n.translate('core.ui.primaryNav.backButtonLabel', {
+ defaultMessage: 'Back',
+ })}
) : null}
@@ -128,7 +119,16 @@ export const CollapsibleNavTop = ({
/>
-
+ {currentNavGroup?.title && (
+ <>
+
+
+
+ {currentNavGroup?.title}
+
+
+
+ )}