From e35529778c271616aa96356b6d8a240ad2cbce75 Mon Sep 17 00:00:00 2001 From: Lu Yu Date: Tue, 2 Apr 2024 11:02:15 -0700 Subject: [PATCH] [Multiple Datasource] Move data source selectable to its own folder, fix test and a few type errors for data source selectable component (#6287) * Move data source selectable to its own folder and fix test Signed-off-by: Lu Yu * add change log Signed-off-by: Lu Yu * add tests and relocate change log Signed-off-by: Lu Yu * fix snapshots Signed-off-by: Lu Yu --------- Signed-off-by: Lu Yu --- CHANGELOG.md | 1 + .../create_data_source_menu.test.tsx.snap | 3 + .../data_source_menu/data_source_menu.tsx | 4 +- .../data_source_selectable.test.tsx.snap | 7 +- .../data_source_selectable.test.tsx | 66 ++++++++++++++++++- .../data_source_selectable.tsx | 31 ++++++--- .../data_source_selectable/index.ts | 5 ++ .../data_source_selector.test.tsx.snap | 8 +-- .../data_source_management/public/mocks.ts | 2 +- 9 files changed, 107 insertions(+), 20 deletions(-) rename src/plugins/data_source_management/public/components/{data_source_menu => data_source_selectable}/__snapshots__/data_source_selectable.test.tsx.snap (97%) rename src/plugins/data_source_management/public/components/{data_source_menu => data_source_selectable}/data_source_selectable.test.tsx (65%) rename src/plugins/data_source_management/public/components/{data_source_menu => data_source_selectable}/data_source_selectable.tsx (86%) create mode 100644 src/plugins/data_source_management/public/components/data_source_selectable/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 89299cd00193..feb112b52768 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -124,6 +124,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### 🪛 Refactoring - Remove unused Sass in `tile_map` plugin ([#4110](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4110)) +- [Multiple Datasource] Move data source selectable to its own folder, fix test and a few type errors for data source selectable component ([#6287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6287)) ### 🔩 Tests diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap index cb7e4410472c..c462fe38e73a 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap @@ -7,6 +7,7 @@ Object {
(props: DataSourceMenuProps): ReactElement | null { const { componentType, componentConfig } = props; diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__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 similarity index 97% rename from src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap rename to src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap index 56c0e85d0219..2cb8dff8a94d 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/__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 @@ -20,6 +20,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = ` } closePopover={[Function]} + data-test-subj="dataSourceSelectableContextMenuPopover" display="inlineBlock" hasArrow={true} id="dataSourceSelectableContextMenuPopover" @@ -51,7 +52,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = ` }, Object { "id": "test2", - "label": "test3", + "label": "test2", }, Object { "id": "test3", @@ -94,6 +95,7 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde } closePopover={[Function]} + data-test-subj="dataSourceSelectableContextMenuPopover" display="inlineBlock" hasArrow={true} id="dataSourceSelectableContextMenuPopover" @@ -153,6 +155,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd } closePopover={[Function]} + data-test-subj="dataSourceSelectableContextMenuPopover" display="inlineBlock" hasArrow={true} id="dataSourceSelectableContextMenuPopover" @@ -199,6 +202,7 @@ Object {
{ ds.attributes.auth.type !== AuthType.NoAuth} /> ); + + await nextTick(); + const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink'); button.click(); + + expect(container.getByTestId('dataSourceSelectableContextMenuPopover')).toBeVisible(); expect(container).toMatchSnapshot(); }); + + it('should callback if changed state', async () => { + const onSelectedDataSource = jest.fn(); + const container = mount( + ds.attributes.auth.type !== AuthType.NoAuth} + /> + ); + await nextTick(); + + const containerInstance = container.instance(); + + containerInstance.onChange([{ id: 'test2', label: 'test2' }]); + expect(onSelectedDataSource).toBeCalledTimes(0); + expect(containerInstance.state).toEqual({ + dataSourceOptions: [ + { + id: 'test2', + label: 'test2', + }, + ], + isPopoverOpen: false, + selectedOption: [ + { + id: '', + label: 'Local cluster', + }, + ], + }); + + containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]); + expect(containerInstance.state).toEqual({ + dataSourceOptions: [ + { + checked: 'on', + id: 'test2', + label: 'test2', + }, + ], + isPopoverOpen: false, + selectedOption: [ + { + checked: 'on', + id: 'test2', + label: 'test2', + }, + ], + }); + expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]); + expect(onSelectedDataSource).toBeCalledTimes(1); + }); }); diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx similarity index 86% rename from src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx rename to src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx index b2c8cdbe9db0..e0fccf9aa226 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx +++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx @@ -6,7 +6,6 @@ import React from 'react'; import { i18n } from '@osd/i18n'; import { - EuiIcon, EuiPopover, EuiContextMenuPanel, EuiPanel, @@ -19,7 +18,7 @@ import { getDataSourcesWithFields } from '../utils'; import { LocalCluster } from '../data_source_selector/data_source_selector'; import { SavedObject } from '../../../../../core/public'; import { DataSourceAttributes } from '../../types'; -import { DataSourceOption } from './types'; +import { DataSourceOption } from '../data_source_menu/types'; interface DataSourceSelectableProps { savedObjectsClient: SavedObjectsClientContract; @@ -33,9 +32,13 @@ interface DataSourceSelectableProps { } interface DataSourceSelectableState { - dataSourceOptions: DataSourceOption[]; - selectedOption: DataSourceOption[]; + dataSourceOptions: SelectedDataSourceOption[]; isPopoverOpen: boolean; + selectedOption?: SelectedDataSourceOption[]; +} + +interface SelectedDataSourceOption extends DataSourceOption { + checked?: boolean; } export class DataSourceSelectable extends React.Component< @@ -48,6 +51,7 @@ export class DataSourceSelectable extends React.Component< super(props); this.state = { + dataSourceOptions: [], isPopoverOpen: false, selectedOption: this.props.selectedOption ? this.props.selectedOption @@ -76,7 +80,7 @@ export class DataSourceSelectable extends React.Component< getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type']) .then((fetchedDataSources) => { if (fetchedDataSources?.length) { - let filteredDataSources = []; + let filteredDataSources: Array> = []; if (this.props.dataSourceFilter) { filteredDataSources = fetchedDataSources.filter((ds) => this.props.dataSourceFilter!(ds) @@ -113,15 +117,21 @@ export class DataSourceSelectable extends React.Component< }); } - onChange(options) { + onChange(options: SelectedDataSourceOption[]) { if (!this._isMounted) return; const selectedDataSource = options.find(({ checked }) => checked); - this.setState({ - selectedOption: [selectedDataSource], - }); + this.setState({ dataSourceOptions: options }); + + if (selectedDataSource) { + this.setState({ + selectedOption: [selectedDataSource], + }); - this.props.onSelectedDataSources([selectedDataSource]); + this.props.onSelectedDataSources([ + { id: selectedDataSource.id!, label: selectedDataSource.label }, + ]); + } } render() { @@ -155,6 +165,7 @@ export class DataSourceSelectable extends React.Component< closePopover={this.closePopover.bind(this)} panelPaddingSize="none" anchorPosition="downLeft" + data-test-subj={'dataSourceSelectableContextMenuPopover'} > diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/index.ts b/src/plugins/data_source_management/public/components/data_source_selectable/index.ts new file mode 100644 index 000000000000..5ddc2d2ba751 --- /dev/null +++ b/src/plugins/data_source_management/public/components/data_source_selectable/index.ts @@ -0,0 +1,5 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +export { DataSourceSelectable } from './data_source_selectable'; diff --git a/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap index 2b8e3eba860d..7306d202ff7b 100644 --- a/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap @@ -82,7 +82,7 @@ exports[`DataSourceSelector: check dataSource options should always place local }, Object { "id": "test2", - "label": "test3", + "label": "test2", }, Object { "id": "test3", @@ -127,7 +127,7 @@ exports[`DataSourceSelector: check dataSource options should filter options if c }, Object { "id": "test2", - "label": "test3", + "label": "test2", }, Object { "id": "test3", @@ -176,7 +176,7 @@ exports[`DataSourceSelector: check dataSource options should hide prepend if rem }, Object { "id": "test2", - "label": "test3", + "label": "test2", }, Object { "id": "test3", @@ -247,7 +247,7 @@ exports[`DataSourceSelector: check dataSource options should show custom placeho }, Object { "id": "test2", - "label": "test3", + "label": "test2", }, Object { "id": "test3", diff --git a/src/plugins/data_source_management/public/mocks.ts b/src/plugins/data_source_management/public/mocks.ts index d04fc2a362d3..13ccbf4e8f26 100644 --- a/src/plugins/data_source_management/public/mocks.ts +++ b/src/plugins/data_source_management/public/mocks.ts @@ -141,7 +141,7 @@ export const getDataSourcesWithFieldsResponse = { type: 'data-source', description: 'test datasource2', attributes: { - title: 'test3', + title: 'test2', auth: { type: AuthType.UsernamePasswordType, },