For selectable component, remove group label and close popover after selection

CHANGELOG.md

@@ -101,6 +101,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [MD] Add dropdown header to data source single selector ([#6431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6431))
 - [Workspace] Add permission tab to workspace create update page ([#6378](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6378))
 - [Workspace] Hide datasource and advanced settings menu in dashboard management when in workspace. ([#6455](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6455))
+- [Multiple Datasource] Modify selectable picker to remove group label and close popover after selection ([#6515](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6515))
 - [Workspace] Add workspaces filter to saved objects page. ([#6458](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6458))
 
 ### 🐛 Bug Fixes

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

@@ -403,89 +403,4 @@ 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(dataSourceOptionGroupLabel.opensearchCluster);
-  });
-
-  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([]);
-  });
-
-  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' },
-    ]);
-  });
 });

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

@@ -21,7 +21,6 @@ import {
   ToastsStart,
 } from 'opensearch-dashboards/public';
 import {
-  dataSourceOptionGroupLabel,
   getDataSourcesWithFields,
   getDefaultDataSource,
   getFilteredDataSources,
@@ -30,11 +29,7 @@ import {
 import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
-import {
-  DataSourceBaseState,
-  DataSourceGroupLabelOption,
-  DataSourceOption,
-} from '../data_source_menu/types';
+import { DataSourceBaseState, DataSourceOption } from '../data_source_menu/types';
 import { DataSourceErrorMenu } from '../data_source_error_menu';
 import { DataSourceItem } from '../data_source_item';
 import { NoDataSource } from '../no_data_source';
@@ -63,12 +58,6 @@ interface DataSourceSelectableState extends DataSourceBaseState {
   defaultDataSource: string | null;
 }
 
-export const opensearchClusterGroupLabel: DataSourceGroupLabelOption = {
-  id: 'opensearchClusterGroupLabel',
-  label: 'OpenSearch cluster',
-  isGroupLabel: true,
-};
-
 export class DataSourceSelectable extends React.Component<
   DataSourceSelectableProps,
   DataSourceSelectableState
@@ -221,16 +210,14 @@ export class DataSourceSelectable extends React.Component<
 
   onChange(options: DataSourceOption[]) {
     if (!this._isMounted) return;
-    const optionsWithoutGroupLabel = options.filter(
-      (option) => !option.hasOwnProperty('isGroupLabel')
-    );
     const selectedDataSource = options.find(({ checked }) => checked);
 
-    this.setState({ dataSourceOptions: optionsWithoutGroupLabel });
+    this.setState({ dataSourceOptions: options });
 
     if (selectedDataSource) {
       this.setState({
         selectedOption: [selectedDataSource],
+        isPopoverOpen: false,
       });
 
       this.props.onSelectedDataSources([
@@ -239,16 +226,6 @@ export class DataSourceSelectable extends React.Component<
     }
   }
 
-  getOptionsWithGroupLabel = (dataSourceOptions: DataSourceOption[]): DataSourceOption[] => {
-    let optionsWithGroupLabel: DataSourceOption[] = [];
-    if (dataSourceOptions.length === 0) {
-      optionsWithGroupLabel = [];
-    } else {
-      optionsWithGroupLabel = [dataSourceOptionGroupLabel.opensearchCluster, ...dataSourceOptions];
-    }
-    return optionsWithGroupLabel;
-  };
-
   render() {
     if (this.state.showEmptyState) {
       return <NoDataSource />;
@@ -303,7 +280,7 @@ export class DataSourceSelectable extends React.Component<
                 placeholder: 'Search',
                 compressed: true,
               }}
-              options={this.getOptionsWithGroupLabel(this.state.dataSourceOptions)}
+              options={this.state.dataSourceOptions}
               onChange={(newOptions) => this.onChange(newOptions)}
               singleSelection={true}
               data-test-subj={'dataSourceSelectable'}