[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 <nluyu@amazon.com> * add change log Signed-off-by: Lu Yu <nluyu@amazon.com> * add tests and relocate change log Signed-off-by: Lu Yu <nluyu@amazon.com> * fix snapshots Signed-off-by: Lu Yu <nluyu@amazon.com> --------- Signed-off-by: Lu Yu <nluyu@amazon.com>
opensearch-project · Apr 2, 2024 · e355297 · e355297
1 parent 8810f08
commit e355297
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 20 deletions.
diff --git 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/...nt/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/...nt/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
@@ -5,10 +5,9 @@
 
 import React, { ReactElement } from 'react';
 
-import { DataSourceSelectable } from './data_source_selectable';
 import { DataSourceAggregatedView } from '../data_source_aggregated_view';
 import { DataSourceView } from '../data_source_view';
-import { DataSourceMultiSelectable } from '../data_source_multi_selectable/data_source_multi_selectable';
+import { DataSourceMultiSelectable } from '../data_source_multi_selectable';
 import {
   DataSourceAggregatedViewConfig,
   DataSourceComponentType,
@@ -17,6 +16,7 @@ import {
   DataSourceSelectableConfig,
   DataSourceViewConfig,
 } from './types';
+import { DataSourceSelectable } from '../data_source_selectable';
 
 export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement | null {
   const { componentType, componentConfig } = props;

diff --git a/...ts__/data_source_selectable.test.tsx.snap → ...ts__/data_source_selectable.test.tsx.snap b/...ts__/data_source_selectable.test.tsx.snap → ...ts__/data_source_selectable.test.tsx.snap
diff --git a/...urce_menu/data_source_selectable.test.tsx → ...electable/data_source_selectable.test.tsx b/...urce_menu/data_source_selectable.test.tsx → ...electable/data_source_selectable.test.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ShallowWrapper, shallow } from 'enzyme';
+import { ShallowWrapper, shallow, mount } from 'enzyme';
 import { SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
@@ -90,15 +90,77 @@ describe('DataSourceSelectable', () => {
       <DataSourceSelectable
         savedObjectsClient={client}
         notifications={toasts}
-        onSelectedDataSource={onSelectedDataSource}
+        onSelectedDataSources={onSelectedDataSource}
         disabled={false}
         hideLocalCluster={false}
         fullWidth={false}
         dataSourceFilter={(ds) => 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(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        dataSourceFilter={(ds) => 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/...ta_source_menu/data_source_selectable.tsx → ...rce_selectable/data_source_selectable.tsx b/...ta_source_menu/data_source_selectable.tsx → ...rce_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<SavedObject<DataSourceAttributes>> = [];
           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'}
       >
         <EuiContextMenuPanel>
           <EuiPanel color="transparent" paddingSize="s">

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
@@ -0,0 +1,5 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export { DataSourceSelectable } from './data_source_selectable';
diff --git a/...t/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap b/...t/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap
diff --git 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,
         },