[MD] Add dropdown header to Data source single selector (#6431) (#6494)

(cherry picked from commit a1c8b8c)

Signed-off-by: Zhongnan Su <[email protected]>

src/plugins/data_source_management/opensearch_dashboards.json

@@ -5,6 +5,6 @@
   "ui": true,
   "requiredPlugins": ["management", "dataSource", "indexPatternManagement"],
   "optionalPlugins": [],
-  "requiredBundles": ["opensearchDashboardsReact", "dataSource"],
+  "requiredBundles": ["opensearchDashboardsReact", "dataSource", "opensearchDashboardsUtils"],
   "extraPublicDirs": ["public/components/utils"]
 }

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

@@ -5,18 +5,29 @@
 
 import { createDataSourceMenu } from './create_data_source_menu';
 import { MountPoint, SavedObjectsClientContract } from '../../../../../core/public';
-import { coreMock, notificationServiceMock } from '../../../../../core/public/mocks';
+import {
+  applicationServiceMock,
+  coreMock,
+  notificationServiceMock,
+} from '../../../../../core/public/mocks';
 import React from 'react';
-import { act, getByText, render } from '@testing-library/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', () => {
   let client: SavedObjectsClientContract;
   const notifications = notificationServiceMock.createStartContract();
   const { uiSettings } = coreMock.createSetup();
 
+  beforeAll(() => {
+    jest
+      .spyOn(utils, 'getApplication')
+      .mockImplementation(() => applicationServiceMock.createStartContract());
+  });
+
   beforeEach(() => {
     client = {
       find: jest.fn().mockResolvedValue([]),

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

@@ -10,11 +10,13 @@ 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';
 
 export function createDataSourceMenu<T>(
   uiSettings: IUiSettingsClient,
   dataSourcePluginSetup: DataSourcePluginSetup
 ) {
+  const application = getApplication();
   return (props: DataSourceMenuProps<T>) => {
     const { hideLocalCluster } = dataSourcePluginSetup;
     if (props.setMenuMountPoint) {
@@ -25,13 +27,19 @@ export function createDataSourceMenu<T>(
               {...props}
               uiSettings={uiSettings}
               hideLocalCluster={hideLocalCluster}
+              application={application}
             />
           </EuiHeaderLinks>
         </MountPointPortal>
       );
     }
     return (
-      <DataSourceMenu {...props} uiSettings={uiSettings} hideLocalCluster={hideLocalCluster} />
+      <DataSourceMenu
+        {...props}
+        uiSettings={uiSettings}
+        hideLocalCluster={hideLocalCluster}
+        application={application}
+      />
     );
   };
 }

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

@@ -19,8 +19,7 @@ import {
 import { DataSourceSelectable } from '../data_source_selectable';
 
 export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement | null {
-  const { componentType, componentConfig, uiSettings, hideLocalCluster } = props;
-
+  const { componentType, componentConfig, uiSettings, hideLocalCluster, application } = props;
   function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null {
     const {
       activeOption,
@@ -81,6 +80,7 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
         hideLocalCluster={hideLocalCluster || false}
         fullWidth={fullWidth}
         uiSettings={uiSettings}
+        application={application}
       />
     );
   }

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

@@ -8,6 +8,7 @@ import {
   SavedObjectsClientContract,
   SavedObject,
   IUiSettingsClient,
+  ApplicationStart,
 } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 
@@ -32,6 +33,7 @@ export interface DataSourceMenuProps<T = any> {
   componentConfig: T;
   hideLocalCluster?: boolean;
   uiSettings?: IUiSettingsClient;
+  application?: ApplicationStart;
   setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
 }
 

src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx

@@ -7,12 +7,13 @@ import { ShallowWrapper, shallow, mount } from 'enzyme';
 import { SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
-import { DataSourceSelectable, opensearchClusterGroupLabel } from './data_source_selectable';
+import { DataSourceSelectable } from './data_source_selectable';
 import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
 import { render } from '@testing-library/react';
 import * as utils from '../utils';
 import { EuiSelectable } from '@elastic/eui';
+import { dataSourceOptionGroupLabel } from '../utils';
 
 describe('DataSourceSelectable', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -409,7 +410,7 @@ describe('DataSourceSelectable', () => {
     component.instance().componentDidMount!();
     await nextTick();
     const optionsProp = component.find(EuiSelectable).prop('options');
-    expect(optionsProp[0]).toEqual(opensearchClusterGroupLabel);
+    expect(optionsProp[0]).toEqual(dataSourceOptionGroupLabel.opensearchCluster);
   });
 
   it('should not render opensearch cluster group label, when there is no option availiable', async () => {
@@ -431,4 +432,50 @@ describe('DataSourceSelectable', () => {
     const optionsProp = component.find(EuiSelectable).prop('options');
     expect(optionsProp).toEqual([]);
   });
+
+  it('should render group lablel normally after onChange', async () => {
+    const onSelectedDataSource = jest.fn();
+    component = shallow(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={true}
+        fullWidth={false}
+        selectedOption={[{ id: 'test1', label: 'test1' }]}
+      />
+    );
+    const componentInstance = component.instance();
+
+    componentInstance.componentDidMount!();
+    await nextTick();
+    const optionsPropBefore = component.find(EuiSelectable).prop('options');
+    expect(optionsPropBefore).toEqual([
+      dataSourceOptionGroupLabel.opensearchCluster,
+      {
+        id: 'test1',
+        label: 'test1',
+        checked: 'on',
+      },
+      {
+        id: 'test2',
+        label: 'test2',
+      },
+      {
+        id: 'test3',
+        label: 'test3',
+      },
+    ]);
+    componentInstance.onChange([
+      dataSourceOptionGroupLabel.opensearchCluster,
+      { id: 'test2', label: 'test2', checked: 'on' },
+    ]);
+    await nextTick();
+    const optionsPropAfter = component.find(EuiSelectable).prop('options');
+    expect(optionsPropAfter).toEqual([
+      dataSourceOptionGroupLabel.opensearchCluster,
+      { id: 'test2', label: 'test2', checked: 'on' },
+    ]);
+  });
 });