[MD] Add OpenSearch cluster group label to top of options in DataSour…

…ceSelectable dropdown (#6400)

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

CHANGELOG.md

@@ -86,6 +86,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))
 - [Workspace] Filter left nav menu items according to the current workspace ([#6234](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6234))
 - [Multiple Datasource] Refactor data source selector component to include placeholder and add tests ([#6372](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6372))
+- [MD] Add OpenSearch cluster group label to top of single selectable dropdown  ([#6400](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6400))
 
 ### 🐛 Bug Fixes
 

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

@@ -16,6 +16,11 @@ export interface DataSourceOption {
   label?: string;
 }
 
+export interface DataSourceGroupLabelOption extends DataSourceOption {
+  label: string;
+  isGroupLabel: true;
+}
+
 export interface DataSourceBaseConfig {
   fullWidth: boolean;
   disabled?: boolean;

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

@@ -7,11 +7,12 @@ import { ShallowWrapper, shallow, mount } from 'enzyme';
 import { SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
-import { DataSourceSelectable } from './data_source_selectable';
+import { DataSourceSelectable, opensearchClusterGroupLabel } from './data_source_selectable';
 import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
-import { getByRole, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import * as utils from '../utils';
+import { EuiSelectable } from '@elastic/eui';
 
 describe('DataSourceSelectable', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -391,4 +392,43 @@ describe('DataSourceSelectable', () => {
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
     expect(onSelectedDataSource).toHaveBeenCalled();
   });
+
+  it('should render opensearch cluster group label at the top of options, when there are options availiable', async () => {
+    const onSelectedDataSource = jest.fn();
+    component = shallow(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+      />
+    );
+
+    component.instance().componentDidMount!();
+    await nextTick();
+    const optionsProp = component.find(EuiSelectable).prop('options');
+    expect(optionsProp[0]).toEqual(opensearchClusterGroupLabel);
+  });
+
+  it('should not render opensearch cluster group label, when there is no option availiable', async () => {
+    const onSelectedDataSource = jest.fn();
+    spyOn(utils, 'getDefaultDataSource').and.returnValue([]);
+    component = shallow(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+      />
+    );
+
+    component.instance().componentDidMount!();
+    await nextTick();
+    const optionsProp = component.find(EuiSelectable).prop('options');
+    expect(optionsProp).toEqual([]);
+  });
 });

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

@@ -25,7 +25,7 @@ import { getDataSourcesWithFields, getDefaultDataSource, getFilteredDataSources
 import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
-import { DataSourceOption } from '../data_source_menu/types';
+import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -50,6 +50,12 @@ interface SelectedDataSourceOption extends DataSourceOption {
   checked?: string;
 }
 
+export const opensearchClusterGroupLabel: DataSourceGroupLabelOption = {
+  id: 'opensearchClusterGroupLabel',
+  label: 'OpenSearch cluster',
+  isGroupLabel: true,
+};
+
 export class DataSourceSelectable extends React.Component<
   DataSourceSelectableProps,
   DataSourceSelectableState
@@ -207,6 +213,16 @@ export class DataSourceSelectable extends React.Component<
     }
   }
 
+  getOptionsWithGroupLabel = (dataSourceOptions: DataSourceOption[]): DataSourceOption[] => {
+    let optionsWithGroupLabel: DataSourceOption[] = [];
+    if (dataSourceOptions.length === 0) {
+      optionsWithGroupLabel = [];
+    } else {
+      optionsWithGroupLabel = [opensearchClusterGroupLabel, ...dataSourceOptions];
+    }
+    return optionsWithGroupLabel;
+  };
+
   render() {
     const button = (
       <>
@@ -248,7 +264,7 @@ export class DataSourceSelectable extends React.Component<
               searchProps={{
                 placeholder: 'Search',
               }}
-              options={this.state.dataSourceOptions}
+              options={this.getOptionsWithGroupLabel(this.state.dataSourceOptions)}
               onChange={(newOptions) => this.onChange(newOptions)}
               singleSelection={true}
               data-test-subj={'dataSourceSelectable'}