From bbcf76d2de48749b0e8a60f8e46818b76f404f06 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Thu, 25 Jul 2024 00:36:40 +0800 Subject: [PATCH] feat: use a new component to render toggerNavSection Signed-off-by: SuZhou-Joe --- .../header/__snapshots__/header.test.tsx.snap | 550 +++++++++++++----- .../header/collapsible_nav_group_enabled.tsx | 20 +- .../public/chrome/ui/header/header.test.tsx | 18 - src/core/public/chrome/ui/header/header.tsx | 46 +- .../header/home_toggle_nav_section.test.tsx | 47 ++ .../ui/header/home_toggle_nav_section.tsx | 85 +++ 6 files changed, 562 insertions(+), 204 deletions(-) create mode 100644 src/core/public/chrome/ui/header/home_toggle_nav_section.test.tsx create mode 100644 src/core/public/chrome/ui/header/home_toggle_nav_section.tsx diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index 9f90cbb1f585..322553baa168 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -3127,111 +3127,236 @@ exports[`Header handles visibility and lock changes 1`] = `
- + + + + +
+ + @@ -8961,111 +9086,236 @@ exports[`Header renders condensed header 1`] = `
- + + + + +
+ + diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx index ea5510ad5994..b9bdc66baa0c 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx @@ -39,6 +39,7 @@ import { import { ALL_USE_CASE_ID, DEFAULT_APP_CATEGORIES } from '../../../../../core/utils'; import { CollapsibleNavTop } from './collapsible_nav_group_enabled_top'; import { HeaderNavControls } from './header_nav_controls'; +import { useHideHomeToggleNavSection } from './home_toggle_nav_section'; export interface CollapsibleNavGroupEnabledProps { appId$: InternalApplicationStart['currentAppId$']; @@ -177,7 +178,7 @@ export function CollapsibleNavGroupEnabled({ basePath, id, isLocked, - isNavOpen, + isNavOpen: isNavOpenProps, storage = window.localStorage, onIsLockedUpdate, closeNav, @@ -192,6 +193,23 @@ export function CollapsibleNavGroupEnabled({ const appId = useObservable(observables.appId$, ''); const navGroupsMap = useObservable(observables.navGroupsMap$, {}); const currentNavGroup = useObservable(observables.currentNavGroup$, 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 shouldHideHomeToggleNavSection = useHideHomeToggleNavSection({ + currentAppId$: observables.appId$, + navGroupEnabled: true, + workspaceEnabled: capabilities.workspaces.enabled, + }); + + const isNavOpen = useMemo(() => { + if (shouldHideHomeToggleNavSection) { + return false; + } + + return isNavOpenProps; + }, [shouldHideHomeToggleNavSection, isNavOpenProps]); const navLinksForRender: ChromeNavLink[] = useMemo(() => { if (currentNavGroup && currentNavGroup.id !== ALL_USE_CASE_ID) { diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx index bef0f152c6a4..4e3539f2e53b 100644 --- a/src/core/public/chrome/ui/header/header.test.tsx +++ b/src/core/public/chrome/ui/header/header.test.tsx @@ -187,22 +187,4 @@ 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) = {}; - (props.application.capabilities.workspaces as Record).enabled = true; - - const component = mountWithIntl(
); - - expect(component.find('.header__toggleNavButtonSection').exists()).toBeFalsy(); - }); }); diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 9c4ae18d4a39..39b3d14af7f5 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -33,13 +33,10 @@ import { EuiHeaderProps, EuiHeaderSection, EuiHeaderSectionItem, - EuiHeaderSectionItemButton, EuiHideFor, - EuiIcon, EuiShowFor, htmlIdGenerator, } from '@elastic/eui'; -import { i18n } from '@osd/i18n'; import classnames from 'classnames'; import React, { createRef, useMemo, useState } from 'react'; import useObservable from 'react-use/lib/useObservable'; @@ -74,6 +71,7 @@ import { CollapsibleNavGroupEnabled } from './collapsible_nav_group_enabled'; import { ChromeNavGroupServiceStartContract, NavGroupItemInMap } from '../../nav_group'; import { RecentItems } from './recent_items'; import { WorkspaceObject } from '../../../../public/workspace'; +import { HomeToggleNavSection } from './home_toggle_nav_section'; export interface HeaderProps { opensearchDashboardsVersion: string; @@ -130,17 +128,9 @@ 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]); @@ -205,29 +195,15 @@ export function Header({ - {shouldHideExpandIcon ? null : ( - - setIsNavOpen(!isNavOpen)} - aria-expanded={isNavOpen} - aria-pressed={isNavOpen} - aria-controls={navId} - ref={toggleCollapsibleNavRef} - > - - - - )} + @@ -300,7 +276,7 @@ export function Header({ id={navId} isLocked={isLocked} navLinks$={observables.navLinks$} - isNavOpen={shouldHideExpandIcon ? false : isNavOpen} + isNavOpen={isNavOpen} basePath={basePath} navigateToApp={application.navigateToApp} navigateToUrl={application.navigateToUrl} diff --git a/src/core/public/chrome/ui/header/home_toggle_nav_section.test.tsx b/src/core/public/chrome/ui/header/home_toggle_nav_section.test.tsx new file mode 100644 index 000000000000..4b6ed7f73bc5 --- /dev/null +++ b/src/core/public/chrome/ui/header/home_toggle_nav_section.test.tsx @@ -0,0 +1,47 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { createRef } from 'react'; +import { HomeToggleNavSection, Props } from './home_toggle_nav_section'; +import { BehaviorSubject } from 'rxjs'; +import { mountWithIntl } from 'test_utils/enzyme_helpers'; + +function mockProps(): Props { + const toggleCollapsibleNavRef = createRef< + HTMLButtonElement & { + euiAnimate: () => void; + } + >(); + + return { + isNavOpen: true, + setIsNavOpen: jest.fn(), + navId: '', + toggleCollapsibleNavRef, + currentAppId$: new BehaviorSubject(''), + navGroupEnabled: false, + workspaceEnabled: false, + }; +} + +describe('', () => { + it('should render normally', () => { + const props = mockProps(); + + const component = mountWithIntl(); + expect(component.find('.header__toggleNavButtonSection').exists()).toBeTruthy(); + }); + + it('show return null when workspace enabled + homepage + new navigation enabled', () => { + const props = mockProps(); + + props.currentAppId$ = new BehaviorSubject('home'); + + const component = mountWithIntl( + + ); + expect(component.find('.header__toggleNavButtonSection').exists()).toBeFalsy(); + }); +}); diff --git a/src/core/public/chrome/ui/header/home_toggle_nav_section.tsx b/src/core/public/chrome/ui/header/home_toggle_nav_section.tsx new file mode 100644 index 000000000000..0c1b951fb246 --- /dev/null +++ b/src/core/public/chrome/ui/header/home_toggle_nav_section.tsx @@ -0,0 +1,85 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiHeaderSectionItem, EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui'; +import { i18n } from '@osd/i18n'; +import { Observable } from 'rxjs'; +import useObservable from 'react-use/lib/useObservable'; + +export interface Props { + isNavOpen: boolean; + setIsNavOpen: React.Dispatch>; + navId: string; + toggleCollapsibleNavRef: React.RefObject< + HTMLButtonElement & { + euiAnimate: () => void; + } + >; + currentAppId$: Observable; + navGroupEnabled: boolean; + workspaceEnabled: boolean; +} + +export const useHideHomeToggleNavSection = ({ + currentAppId$, + navGroupEnabled, + workspaceEnabled, +}: { + currentAppId$: Props['currentAppId$']; + navGroupEnabled: boolean; + workspaceEnabled: boolean; +}) => { + const appId = useObservable(currentAppId$, ''); + return navGroupEnabled && appId === 'home' && workspaceEnabled; +}; + +export const HomeToggleNavSection = ({ + setIsNavOpen, + isNavOpen, + navId, + toggleCollapsibleNavRef, + currentAppId$, + navGroupEnabled, + workspaceEnabled, +}: Props) => { + /** + * 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 shouldHideHomeToggleNavSection = useHideHomeToggleNavSection({ + currentAppId$, + navGroupEnabled, + workspaceEnabled, + }); + + if (shouldHideHomeToggleNavSection) { + return null; + } + + return ( + + setIsNavOpen(!isNavOpen)} + aria-expanded={isNavOpen} + aria-pressed={isNavOpen} + aria-controls={navId} + ref={toggleCollapsibleNavRef} + > + + + + ); +};