[Multiple Datasource] Move data source selectable to its own folder, …

…fix test and a few type errors for data source selectable component (#6287) (#6322)

* Move data source selectable to its own folder and fix test

Signed-off-by: Lu Yu <[email protected]>

* add change log

Signed-off-by: Lu Yu <[email protected]>

* add tests and relocate change log

Signed-off-by: Lu Yu <[email protected]>

* fix snapshots

Signed-off-by: Lu Yu <[email protected]>

---------

Signed-off-by: Lu Yu <[email protected]>
(cherry picked from commit e355297)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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;

src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx → src/plugins/data_source_management/public/components/data_source_selectable/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);
+  });
 });

src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx → 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<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">

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';

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,
         },