From e84582ce3648883b378a4bb1008f991f15d60810 Mon Sep 17 00:00:00 2001 From: Lu Yu Date: Tue, 26 Mar 2024 09:44:26 -0700 Subject: [PATCH] [Multiple Datasource] Allow top nav menu to mount data source menu for use case when both menus are mounted (#6268) * allow top nav menu to mount data source menu Signed-off-by: Lu Yu * add change log Signed-off-by: Lu Yu * update snapshots Signed-off-by: Lu Yu * update snapshot Signed-off-by: Lu Yu --------- Signed-off-by: Lu Yu --- CHANGELOG.md | 2 + .../dashboard_top_nav.test.tsx.snap | 6 +++ .../navigation/opensearch_dashboards.json | 2 +- .../public/top_nav_menu/top_nav_menu.test.tsx | 40 +++++++++++++++++++ .../public/top_nav_menu/top_nav_menu.tsx | 24 +++++++++-- 5 files changed, 69 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f48ab192f428..071e9879a716 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -67,8 +67,10 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - [Multiple Datasource] Add TLS configuration for multiple data sources ([#6171](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6171)) - [Multiple Datasource] Add multi selectable data source component ([#6211](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6211)) - [Multiple Datasource] Refactor data source menu and interface to allow cleaner selection of component and related configurations ([#6256](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6256)) +- [Multiple Datasource] Allow top nav menu to mount data source menu for use case when both menus are mounted ([#6268](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6268)) - [Workspace] Add create workspace page ([#6179](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6179)) + ### 🐛 Bug Fixes - [Chore] Update deprecated url methods (url.parse(), url.format()) ([#2910](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2910)) diff --git a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap index 262deaaaeaf0..e7e215dfb6bb 100644 --- a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap +++ b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap @@ -952,6 +952,7 @@ exports[`Dashboard top nav render in embed mode 1`] = ` onQuerySubmit={[Function]} onSavedQueryIdChange={[Function]} screenTitle="Dashboard Test Title" + showDataSourceMenu={false} showDatePicker={false} showFilterBar={false} showQueryBar={false} @@ -1919,6 +1920,7 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] = onQuerySubmit={[Function]} onSavedQueryIdChange={[Function]} screenTitle="Dashboard Test Title" + showDataSourceMenu={false} showDatePicker={false} showFilterBar={false} showQueryBar={false} @@ -2886,6 +2888,7 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b onQuerySubmit={[Function]} onSavedQueryIdChange={[Function]} screenTitle="Dashboard Test Title" + showDataSourceMenu={false} showDatePicker={false} showFilterBar={false} showQueryBar={false} @@ -3853,6 +3856,7 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu onQuerySubmit={[Function]} onSavedQueryIdChange={[Function]} screenTitle="Dashboard Test Title" + showDataSourceMenu={false} showDatePicker={false} showFilterBar={false} showQueryBar={false} @@ -4820,6 +4824,7 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be onQuerySubmit={[Function]} onSavedQueryIdChange={[Function]} screenTitle="Dashboard Test Title" + showDataSourceMenu={false} showDatePicker={false} showFilterBar={false} showQueryBar={false} @@ -5786,6 +5791,7 @@ exports[`Dashboard top nav render with all components 1`] = ` onQuerySubmit={[Function]} onSavedQueryIdChange={[Function]} screenTitle="Dashboard Test Title" + showDataSourceMenu={false} showDatePicker={false} showFilterBar={true} showQueryBar={false} diff --git a/src/plugins/navigation/opensearch_dashboards.json b/src/plugins/navigation/opensearch_dashboards.json index e2acd55e376a..304739dca986 100644 --- a/src/plugins/navigation/opensearch_dashboards.json +++ b/src/plugins/navigation/opensearch_dashboards.json @@ -4,5 +4,5 @@ "server": false, "ui": true, "requiredPlugins": ["data"], - "requiredBundles": ["opensearchDashboardsReact"] + "requiredBundles": ["opensearchDashboardsReact", "dataSourceManagement"] } diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx index 5fa97eb0a7d2..7b4269da9636 100644 --- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx +++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx @@ -117,6 +117,46 @@ describe('TopNavMenu', () => { expect(component.find('.myCoolClass').length).toBeTruthy(); }); + it('mounts the data source menu if showDataSourceMenu is true', async () => { + const component = shallowWithIntl( + + ); + + expect(component.find('DataSourceMenu').length).toBe(1); + }); + + it('mounts the data source menu as well as top nav menu', async () => { + const component = shallowWithIntl( + + ); + + expect(component.find('DataSourceMenu').length).toBe(1); + expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(menuItems.length); + }); + describe('when setMenuMountPoint is provided', () => { let portalTarget: HTMLElement; let mountPoint: MountPoint; diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx index 15b6c6bff057..6814d254510f 100644 --- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx +++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx @@ -41,15 +41,18 @@ import { } from '../../../data/public'; import { TopNavMenuData } from './top_nav_menu_data'; import { TopNavMenuItem } from './top_nav_menu_item'; +import { DataSourceMenu, DataSourceMenuProps } from '../../../data_source_management/public'; export type TopNavMenuProps = StatefulSearchBarProps & Omit & { config?: TopNavMenuData[]; + dataSourceMenuConfig?: DataSourceMenuProps; showSearchBar?: boolean; showQueryBar?: boolean; showQueryInput?: boolean; showDatePicker?: boolean; showFilterBar?: boolean; + showDataSourceMenu?: boolean; data?: DataPublicPluginStart; className?: string; /** @@ -83,9 +86,19 @@ export type TopNavMenuProps = StatefulSearchBarProps & **/ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null { - const { config, showSearchBar, ...searchBarProps } = props; + const { + config, + showSearchBar, + showDataSourceMenu, + dataSourceMenuConfig, + ...searchBarProps + } = props; - if ((!config || config.length === 0) && (!showSearchBar || !props.data)) { + if ( + (!config || config.length === 0) && + (!showSearchBar || !props.data) && + (!showDataSourceMenu || !dataSourceMenuConfig) + ) { return null; } @@ -97,16 +110,18 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null { } function renderMenu(className: string): ReactElement | null { - if (!config || config.length === 0) return null; + if ((!config || config.length === 0) && (!showDataSourceMenu || !dataSourceMenuConfig)) + return null; return ( {renderItems()} + {showDataSourceMenu && } ); } function renderSearchBar(): ReactElement | null { - // Validate presense of all required fields + // Validate presence of all required fields if (!showSearchBar || !props.data) return null; const { SearchBar } = props.data.ui; return ; @@ -143,5 +158,6 @@ TopNavMenu.defaultProps = { showQueryInput: true, showDatePicker: true, showFilterBar: true, + showDataSourceMenu: false, screenTitle: '', };