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

…selection

Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>

CHANGELOG.md

@@ -100,6 +100,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.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'}