From 523daa0984b709461763c0988662da70b1c4bfe8 Mon Sep 17 00:00:00 2001 From: "Yuanqi(Ella) Zhu" Date: Wed, 17 Apr 2024 20:19:12 +0000 Subject: [PATCH] For selectable component, remove group label and close popover after selection Signed-off-by: Yuanqi(Ella) Zhu --- CHANGELOG.md | 1 + .../data_source_selectable.test.tsx.snap | 5 -- .../data_source_selectable.test.tsx | 85 ------------------- .../data_source_selectable.tsx | 31 +------ 4 files changed, 5 insertions(+), 117 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c6b3ecdcec69..344a3345b76d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap index 8089f79d5487..79d158ee3be5 100644 --- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap @@ -54,11 +54,6 @@ exports[`DataSourceSelectable should filter options if configured 1`] = ` onChange={[Function]} options={ Array [ - Object { - "id": "opensearchClusterGroupLabel", - "isGroupLabel": true, - "label": "OpenSearch cluster", - }, Object { "checked": "on", "id": "", diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx index 1ced7e3872c1..37f84bb9c142 100644 --- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx +++ b/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( - - ); - - 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( - - ); - - 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( - - ); - 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' }, - ]); - }); }); diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx index ec4af533c5df..6586e7bbdcd5 100644 --- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx +++ b/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 ; @@ -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'}