[Multiple Datasource] Allow top nav menu to mount data source menu fo…

…r use case when both menus are mounted (#6268)

* allow top nav menu to mount data source menu

Signed-off-by: Lu Yu <nluyu@amazon.com>

* add change log

Signed-off-by: Lu Yu <nluyu@amazon.com>

* update snapshots

Signed-off-by: Lu Yu <nluyu@amazon.com>

* update snapshot

Signed-off-by: Lu Yu <nluyu@amazon.com>

---------

Signed-off-by: Lu Yu <nluyu@amazon.com>

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))

src/plugins/navigation/opensearch_dashboards.json

@@ -4,5 +4,5 @@
   "server": false,
   "ui": true,
   "requiredPlugins": ["data"],
-  "requiredBundles": ["opensearchDashboardsReact"]
+  "requiredBundles": ["opensearchDashboardsReact", "dataSourceManagement"]
 }

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(
+      <TopNavMenu
+        appName={'test'}
+        showDataSourceMenu={true}
+        dataSourceMenuConfig={{
+          componentType: 'DataSourceView',
+          componentConfig: {
+            hideLocalCluster: true,
+            fullWidth: true,
+            activeOption: [{ label: 'what', id: '1' }],
+          },
+        }}
+      />
+    );
+
+    expect(component.find('DataSourceMenu').length).toBe(1);
+  });
+
+  it('mounts the data source menu as well as top nav menu', async () => {
+    const component = shallowWithIntl(
+      <TopNavMenu
+        appName={'test'}
+        showDataSourceMenu={true}
+        config={menuItems}
+        dataSourceMenuConfig={{
+          componentType: 'DataSourceView',
+          componentConfig: {
+            hideLocalCluster: true,
+            fullWidth: true,
+            activeOption: [{ label: 'what', id: '1' }],
+          },
+        }}
+      />
+    );
+
+    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;

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<SearchBarProps, 'opensearchDashboards' | 'intl' | 'timeHistory'> & {
     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 (
       <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
         {renderItems()}
+        {showDataSourceMenu && <DataSourceMenu {...dataSourceMenuConfig!} />}
       </EuiHeaderLinks>
     );
   }
 
   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 <SearchBar {...searchBarProps} />;
@@ -143,5 +158,6 @@ TopNavMenu.defaultProps = {
   showQueryInput: true,
   showDatePicker: true,
   showFilterBar: true,
+  showDataSourceMenu: false,
   screenTitle: '',
 };