From 11bac23bcc82f29635b2bedbed1dd279edda5cc2 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Mon, 29 Jul 2024 17:59:48 +0800 Subject: [PATCH 1/8] feat: redirect user to home when in global Signed-off-by: SuZhou-Joe --- .../header/collapsible_nav_group_enabled.tsx | 20 +++++--- ...collapsible_nav_group_enabled_top.test.tsx | 47 +++++++++++++++--- .../collapsible_nav_group_enabled_top.tsx | 49 +++++++++++++------ .../dev_tools/public/dev_tools_icon.test.tsx | 23 +++++++++ .../dev_tools/public/dev_tools_icon.tsx | 6 ++- 5 files changed, 114 insertions(+), 31 deletions(-) create mode 100644 src/plugins/dev_tools/public/dev_tools_icon.test.tsx 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 342cee5f273d..9226bf537d43 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 @@ -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,15 @@ export function CollapsibleNavGroupEnabled({ <> setCurrentNavGroup(undefined)} + onClickBack={() => { + setCurrentNavGroup(undefined); + }} currentNavGroup={currentNavGroup} shouldShrinkNavigation={!isNavOpen} onClickShrink={closeNav} + visibleUseCases={visibleUseCases} /> ', () => { const getMockedNavLink = ( @@ -63,9 +64,10 @@ describe('', () => { return { navLinks: mockedNavLinks, navigateToApp: jest.fn(), - navGroupsMap: {}, logos: getLogos({}, mockBasePath.serverBasePath), shouldShrinkNavigation: false, + visibleUseCases: [], + capabilities: coreStartMock.application.capabilities, }; }; it('should render home icon', async () => { @@ -74,23 +76,23 @@ describe('', () => { }); it('should render back icon', async () => { - const { findByTestId } = render( + const { findByTestId, findByText } = render( ', () => { /> ); await findByTestId('collapsibleNavBackButton'); + await findByText('Back'); + }); + + it('should render back home icon', async () => { + const { findByTestId, findByText } = render( + + ); + await findByTestId('collapsibleNavBackButton'); + await findByText('Home'); }); it('should render expand icon', async () => { 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 568290da727b..dde8e3a20ba8 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 @@ -22,36 +22,49 @@ import { ALL_USE_CASE_ID } from '../../../../../core/utils'; export interface CollapsibleNavTopProps { navLinks: ChromeNavLink[]; - navGroupsMap: Record; 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 isInGlobalWorkspace = 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 (isInGlobalWorkspace) { + return true; + } + + return visibleUseCases.length > 1; + }, [visibleUseCases, currentNavGroup, shouldShrinkNavigation, isInGlobalWorkspace]); + const shouldShowHomeLink = useMemo(() => { if (!homeLink || shouldShrinkNavigation) return false; @@ -59,9 +72,9 @@ export const CollapsibleNavTop = ({ }, [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 @@ export const CollapsibleNavTop = ({ } return {}; - }, [shouldShowHomeLink, homeLink, navigateToApp]); + }, [homeLink, navigateToApp]); return (
@@ -91,13 +104,17 @@ export const CollapsibleNavTop = ({ - {i18n.translate('core.ui.primaryNav.backButtonLabel', { - defaultMessage: 'Back', - })} + {isInGlobalWorkspace + ? i18n.translate('core.ui.primaryNav.homeButtonLabel', { + defaultMessage: 'Home', + }) + : i18n.translate('core.ui.primaryNav.backButtonLabel', { + defaultMessage: 'Back', + })} ) : null} diff --git a/src/plugins/dev_tools/public/dev_tools_icon.test.tsx b/src/plugins/dev_tools/public/dev_tools_icon.test.tsx new file mode 100644 index 000000000000..911cfcfa64dc --- /dev/null +++ b/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('', () => { + it('should call some methods from core service when click', () => { + const coreStartMock = coreMock.createStart(); + const { container } = render(); + 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'); + }); +}); diff --git a/src/plugins/dev_tools/public/dev_tools_icon.tsx b/src/plugins/dev_tools/public/dev_tools_icon.tsx index 933b7af0037f..7b43b2ea3cb6 100644 --- a/src/plugins/dev_tools/public/dev_tools_icon.tsx +++ b/src/plugins/dev_tools/public/dev_tools_icon.tsx @@ -6,13 +6,17 @@ 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 ( core.application.navigateToApp(appId)} + onClick={() => { + core.chrome.navGroup.setCurrentNavGroup(DEFAULT_NAV_GROUPS.dataAdministration.id); + core.application.navigateToApp(appId); + }} /> ); } From 053f62e147e28d5623a6b4c1cee2289f984e6600 Mon Sep 17 00:00:00 2001 From: "opensearch-changeset-bot[bot]" <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Date: Mon, 29 Jul 2024 10:28:29 +0000 Subject: [PATCH 2/8] Changeset file for PR #7551 created/updated --- changelogs/fragments/7551.yml | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 changelogs/fragments/7551.yml diff --git a/changelogs/fragments/7551.yml b/changelogs/fragments/7551.yml new file mode 100644 index 000000000000..4468c56fa621 --- /dev/null +++ b/changelogs/fragments/7551.yml @@ -0,0 +1,2 @@ +feat: +- [navigation]feat: redirect user to home in global when workspace is enabled ([#7551](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7551)) \ No newline at end of file From 0c3aa9f248cc110ca786cd5b23eb9d2a3963331f Mon Sep 17 00:00:00 2001 From: "opensearch-changeset-bot[bot]" <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Date: Mon, 29 Jul 2024 10:29:56 +0000 Subject: [PATCH 3/8] Changeset file for PR #7551 created/updated --- changelogs/fragments/7551.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelogs/fragments/7551.yml b/changelogs/fragments/7551.yml index 4468c56fa621..0f5db1a9f3c9 100644 --- a/changelogs/fragments/7551.yml +++ b/changelogs/fragments/7551.yml @@ -1,2 +1,2 @@ -feat: +fix: - [navigation]feat: redirect user to home in global when workspace is enabled ([#7551](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7551)) \ No newline at end of file From 8798bf7a8519f93f76064d8f4206f78859ac62a5 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Mon, 29 Jul 2024 18:32:47 +0800 Subject: [PATCH 4/8] feat: add some comment Signed-off-by: SuZhou-Joe --- src/plugins/dev_tools/public/dev_tools_icon.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/plugins/dev_tools/public/dev_tools_icon.tsx b/src/plugins/dev_tools/public/dev_tools_icon.tsx index 7b43b2ea3cb6..bb67c6d82820 100644 --- a/src/plugins/dev_tools/public/dev_tools_icon.tsx +++ b/src/plugins/dev_tools/public/dev_tools_icon.tsx @@ -14,6 +14,9 @@ export function DevToolsIcon({ core, appId }: { core: CoreStart; appId: string } aria-label="go-to-dev-tools" iconType="consoleApp" onClick={() => { + /** + * This is a workaround before devTools refactor as a drawer in 2.16. + */ core.chrome.navGroup.setCurrentNavGroup(DEFAULT_NAV_GROUPS.dataAdministration.id); core.application.navigateToApp(appId); }} From d43fdac005116a3c08b2c912ae0cd1309008cfe1 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Mon, 29 Jul 2024 18:39:06 +0800 Subject: [PATCH 5/8] feat: remove useless change Signed-off-by: SuZhou-Joe --- .../public/chrome/ui/header/collapsible_nav_group_enabled.tsx | 4 +--- .../ui/header/collapsible_nav_group_enabled_top.test.tsx | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) 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 9226bf537d43..c0d2a87635ed 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 @@ -338,9 +338,7 @@ export function CollapsibleNavGroupEnabled({ navLinks={navLinks} navigateToApp={navigateToApp} logos={logos} - onClickBack={() => { - setCurrentNavGroup(undefined); - }} + onClickBack={() => setCurrentNavGroup(undefined)} currentNavGroup={currentNavGroup} shouldShrinkNavigation={!isNavOpen} onClickShrink={closeNav} diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.test.tsx index 9e9ecbd9c61b..168f0ede150f 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.test.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.test.tsx @@ -7,12 +7,11 @@ import React from 'react'; import { render } from '@testing-library/react'; import { ChromeNavLink } from '../../nav_links'; import { ChromeRegistrationNavLink } from '../../nav_group'; -import { coreMock, httpServiceMock } from '../../../mocks'; +import { httpServiceMock } from '../../../mocks'; import { getLogos } from '../../../../common'; import { CollapsibleNavTop } from './collapsible_nav_group_enabled_top'; const mockBasePath = httpServiceMock.createSetupContract({ basePath: '/test' }).basePath; -const coreStartMock = coreMock.createStart(); describe('', () => { const getMockedNavLink = ( @@ -67,7 +66,6 @@ describe('', () => { logos: getLogos({}, mockBasePath.serverBasePath), shouldShrinkNavigation: false, visibleUseCases: [], - capabilities: coreStartMock.application.capabilities, }; }; it('should render home icon', async () => { From 00da116b265d779a374d61339c49b53ecd7514ea Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Tue, 30 Jul 2024 05:38:15 +0800 Subject: [PATCH 6/8] feat: optimize comment Signed-off-by: SuZhou-Joe --- src/plugins/dev_tools/public/dev_tools_icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/dev_tools/public/dev_tools_icon.tsx b/src/plugins/dev_tools/public/dev_tools_icon.tsx index bb67c6d82820..b58ef03473a6 100644 --- a/src/plugins/dev_tools/public/dev_tools_icon.tsx +++ b/src/plugins/dev_tools/public/dev_tools_icon.tsx @@ -15,7 +15,7 @@ export function DevToolsIcon({ core, appId }: { core: CoreStart; appId: string } iconType="consoleApp" onClick={() => { /** - * This is a workaround before devTools refactor as a drawer in 2.16. + * 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); From dd669d911873cea6d4bf2f314fdfbc03561928b0 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Tue, 30 Jul 2024 18:00:17 +0800 Subject: [PATCH 7/8] feat: optimize description and variable naming Signed-off-by: SuZhou-Joe --- .../chrome/ui/header/collapsible_nav_group_enabled_top.tsx | 6 +++--- src/plugins/dev_tools/public/dev_tools_icon.test.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) 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 dde8e3a20ba8..8bcb890b812c 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 @@ -43,7 +43,7 @@ export const CollapsibleNavTop = ({ }: CollapsibleNavTopProps) => { const homeLink = useMemo(() => navLinks.find((link) => link.id === 'home'), [navLinks]); - const isInGlobalWorkspace = useMemo( + const isOutsideWorkspace = useMemo( () => !visibleUseCases.find((useCase) => useCase.id === currentNavGroup?.id), [currentNavGroup, visibleUseCases] ); @@ -58,12 +58,12 @@ export const CollapsibleNavTop = ({ return false; } - if (isInGlobalWorkspace) { + if (isOutsideWorkspace) { return true; } return visibleUseCases.length > 1; - }, [visibleUseCases, currentNavGroup, shouldShrinkNavigation, isInGlobalWorkspace]); + }, [visibleUseCases, currentNavGroup, shouldShrinkNavigation, isOutsideWorkspace]); const shouldShowHomeLink = useMemo(() => { if (!homeLink || shouldShrinkNavigation) return false; diff --git a/src/plugins/dev_tools/public/dev_tools_icon.test.tsx b/src/plugins/dev_tools/public/dev_tools_icon.test.tsx index 911cfcfa64dc..47d9a621600f 100644 --- a/src/plugins/dev_tools/public/dev_tools_icon.test.tsx +++ b/src/plugins/dev_tools/public/dev_tools_icon.test.tsx @@ -10,7 +10,7 @@ import { coreMock } from '../../../core/public/mocks'; import { DEFAULT_NAV_GROUPS } from '../../../core/public'; describe('', () => { - it('should call some methods from core service when click', () => { + it('should call chrome.navGroup.setCurrentNavGroup and application.navigateToApp methods from core service when click', () => { const coreStartMock = coreMock.createStart(); const { container } = render(); const component = container.children[0]; From 30b375babaec1318e4d9284b9118101527fad051 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Tue, 30 Jul 2024 18:14:36 +0800 Subject: [PATCH 8/8] feat: update Signed-off-by: SuZhou-Joe --- .../chrome/ui/header/collapsible_nav_group_enabled_top.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 8bcb890b812c..396d78a1024a 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 @@ -104,11 +104,11 @@ export const CollapsibleNavTop = ({ - {isInGlobalWorkspace + {isOutsideWorkspace ? i18n.translate('core.ui.primaryNav.homeButtonLabel', { defaultMessage: 'Home', })