[Multiple Datasource] Pass data source menu to top nav via function i…

…nstead of using component (#6594) (#6601)

* change top nav to use interface to render data source menu



* change value



---------


(cherry picked from commit b7b27aa)

Signed-off-by: Lu Yu <nluyu@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx

@@ -14,7 +14,6 @@ import React from 'react';
 import { act, render } from '@testing-library/react';
 import { DataSourceComponentType, DataSourceSelectableConfig } from './types';
 import { ReactWrapper } from 'enzyme';
-import { mockDataSourcePluginSetupWithShowLocalCluster } from '../../mocks';
 import * as utils from '../utils';
 
 describe('create data source menu', () => {
@@ -44,10 +43,11 @@ describe('create data source menu', () => {
         notifications,
       },
     };
-    const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>(
-      uiSettings,
-      mockDataSourcePluginSetupWithShowLocalCluster
-    );
+
+    spyOn(utils, 'getApplication').and.returnValue({ id: 'test2' });
+    spyOn(utils, 'getUiSettings').and.returnValue(uiSettings);
+    spyOn(utils, 'getHideLocalCluster').and.returnValue({ enabled: true });
+    const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>();
 
     const component = render(<TestComponent {...props} />);
     expect(component).toMatchSnapshot();
@@ -71,10 +71,10 @@ describe('create data source menu', () => {
         notifications,
       },
     };
-    const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>(
-      uiSettings,
-      mockDataSourcePluginSetupWithShowLocalCluster
-    );
+    spyOn(utils, 'getApplication').and.returnValue({ id: 'test2' });
+    spyOn(utils, 'getUiSettings').and.returnValue(uiSettings);
+    spyOn(utils, 'getHideLocalCluster').and.returnValue({ enabled: true });
+    const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>();
     await act(async () => {
       component = render(<TestComponent {...props} />);
     });
@@ -137,10 +137,12 @@ describe('when setMenuMountPoint is provided', () => {
         notifications,
       },
     };
-    const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>(
-      uiSettings,
-      mockDataSourcePluginSetupWithShowLocalCluster
-    );
+
+    spyOn(utils, 'getApplication').and.returnValue({ id: 'test2' });
+    spyOn(utils, 'getUiSettings').and.returnValue(uiSettings);
+    spyOn(utils, 'getHideLocalCluster').and.returnValue({ enabled: true });
+
+    const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>();
     const component = render(<TestComponent {...props} />);
     act(() => {
       mountPoint(portalTarget);

src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx

@@ -5,20 +5,16 @@
 
 import React from 'react';
 import { EuiHeaderLinks } from '@elastic/eui';
-import { IUiSettingsClient } from 'src/core/public';
-import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { DataSourceMenu } from './data_source_menu';
 import { DataSourceMenuProps } from './types';
 import { MountPointPortal } from '../../../../opensearch_dashboards_react/public';
-import { getApplication } from '../utils';
+import { getApplication, getHideLocalCluster, getUiSettings } from '../utils';
 
-export function createDataSourceMenu<T>(
-  uiSettings: IUiSettingsClient,
-  dataSourcePluginSetup: DataSourcePluginSetup
-) {
+export function createDataSourceMenu<T>() {
   const application = getApplication();
+  const uiSettings = getUiSettings();
+  const hideLocalCluster = getHideLocalCluster().enabled;
   return (props: DataSourceMenuProps<T>) => {
-    const { hideLocalCluster } = dataSourcePluginSetup;
     if (props.setMenuMountPoint) {
       return (
         <MountPointPortal setMountPoint={props.setMenuMountPoint}>

src/plugins/data_source_management/public/components/data_source_menu/index.ts

@@ -4,6 +4,7 @@
  */
 
 export { DataSourceMenu } from './data_source_menu';
+export { createDataSourceMenu } from './create_data_source_menu';
 export {
   DataSourceSelectableConfig,
   DataSourceAggregatedViewConfig,

src/plugins/data_source_management/public/components/utils.ts

@@ -10,6 +10,7 @@ import {
   IUiSettingsClient,
   ToastsStart,
   ApplicationStart,
+  CoreStart,
 } from 'src/core/public';
 import { deepFreeze } from '@osd/std';
 import {
@@ -307,3 +308,14 @@ export const dataSourceOptionGroupLabel = deepFreeze<Readonly<DataSourceOptionGr
 });
 
 export const [getApplication, setApplication] = createGetterSetter<ApplicationStart>('Application');
+export const [getUiSettings, setUiSettings] = createGetterSetter<CoreStart['uiSettings']>(
+  'UiSettings'
+);
+
+export interface HideLocalCluster {
+  enabled: boolean;
+}
+
+export const [getHideLocalCluster, setHideLocalCluster] = createGetterSetter<HideLocalCluster>(
+  'HideLocalCluster'
+);

src/plugins/data_source_management/public/index.ts

@@ -22,4 +22,5 @@ export {
   DataSourceViewConfig,
   DataSourceMenuProps,
   DataSourceMultiSelectableConfig,
+  createDataSourceMenu,
 } from './components/data_source_menu';

src/plugins/data_source_management/public/plugin.ts

@@ -21,7 +21,7 @@ import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod
 import { DataSourceSelectorProps } from './components/data_source_selector/data_source_selector';
 import { createDataSourceMenu } from './components/data_source_menu/create_data_source_menu';
 import { DataSourceMenuProps } from './components/data_source_menu';
-import { setApplication } from './components/utils';
+import { setApplication, setHideLocalCluster, setUiSettings } from './components/utils';
 
 export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
@@ -101,11 +101,14 @@ export class DataSourceManagementPlugin
       registerAuthenticationMethod(sigV4AuthMethod);
     }
 
+    setHideLocalCluster({ enabled: dataSource.hideLocalCluster });
+    setUiSettings(uiSettings);
+
     return {
       registerAuthenticationMethod,
       ui: {
         DataSourceSelector: createDataSourceSelector(uiSettings, dataSource),
-        getDataSourceMenu: <T>() => createDataSourceMenu<T>(uiSettings, dataSource),
+        getDataSourceMenu: <T>() => createDataSourceMenu<T>(),
       },
     };
   }

src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx

@@ -35,6 +35,7 @@ import { MountPoint } from 'opensearch-dashboards/public';
 import { TopNavMenu } from './top_nav_menu';
 import { TopNavMenuData } from './top_nav_menu_data';
 import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
+import * as testUtils from '../../../data_source_management/public/components/utils';
 
 const dataShim = {
   ui: {
@@ -118,6 +119,9 @@ describe('TopNavMenu', () => {
   });
 
   it('mounts the data source menu if showDataSourceMenu is true', async () => {
+    spyOn(testUtils, 'getApplication').and.returnValue({ id: 'test2' });
+    spyOn(testUtils, 'getUiSettings').and.returnValue({ id: 'test2' });
+    spyOn(testUtils, 'getHideLocalCluster').and.returnValue(true);
     const component = shallowWithIntl(
       <TopNavMenu
         appName={'test'}
@@ -133,10 +137,14 @@ describe('TopNavMenu', () => {
       />
     );
 
-    expect(component.find('DataSourceMenu').length).toBe(1);
+    expect(component).toMatchSnapshot();
   });
 
   it('mounts the data source menu as well as top nav menu', async () => {
+    spyOn(testUtils, 'getApplication').and.returnValue({ id: 'test2' });
+    spyOn(testUtils, 'getUiSettings').and.returnValue({ id: 'test2' });
+    spyOn(testUtils, 'getHideLocalCluster').and.returnValue(true);
+
     const component = shallowWithIntl(
       <TopNavMenu
         appName={'test'}
@@ -153,7 +161,7 @@ describe('TopNavMenu', () => {
       />
     );
 
-    expect(component.find('DataSourceMenu').length).toBe(1);
+    expect(component).toMatchSnapshot();
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(menuItems.length);
   });
 

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx

@@ -41,7 +41,7 @@ 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';
+import { DataSourceMenuProps, createDataSourceMenu } from '../../../data_source_management/public';
 
 export type TopNavMenuProps = StatefulSearchBarProps &
   Omit<SearchBarProps, 'opensearchDashboards' | 'intl' | 'timeHistory'> & {
@@ -115,11 +115,17 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
     return (
       <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
         {renderItems()}
-        {showDataSourceMenu && <DataSourceMenu {...dataSourceMenuConfig!} />}
+        {renderDataSourceMenu()}
       </EuiHeaderLinks>
     );
   }
 
+  function renderDataSourceMenu(): ReactElement | null {
+    if (!showDataSourceMenu) return null;
+    const DataSourceMenu = createDataSourceMenu();
+    return <DataSourceMenu {...dataSourceMenuConfig!} />;
+  }
+
   function renderSearchBar(): ReactElement | null {
     // Validate presence of all required fields
     if (!showSearchBar || !props.data) return null;