[Multiple Datasource] Add data source selection service to support st…

…oring and getting selected data source updates (#6827) (#6875)

* add data source selection service



* export generateComponentId in util



* update tests and type



* update tests



* update bind in components



* Changeset file for PR #6827 created/updated

* test: add tests for service



* move dataSourceSelection out of componoent props



* update service class name



* use getter to replace dataSourceSelection props



* add fallback for getter



* test: add selection test case for component



---------




(cherry picked from commit e2c0df2)

Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Lu Yu <nluyu@amazon.com>

changelogs/fragments/6827.yml

@@ -0,0 +1,2 @@
+feat:
+- Add data source selection service to support storing and getting selected data source updates ([#6827](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6827))

examples/multiple_data_source_examples/public/components/data_source_view_example.tsx

@@ -18,6 +18,7 @@ import { CoreStart, MountPoint } from 'opensearch-dashboards/public';
 import {
   DataSourceManagementPluginSetup,
   DataSourceViewConfig,
+  DataSourceSelectionService,
 } from 'src/plugins/data_source_management/public';
 import { ComponentProp } from './types';
 import { COLUMNS } from './constants';
@@ -88,6 +89,7 @@ export const DataSourceViewExample = ({
             setSelectedDataSources(ds);
           },
         }}
+        dataSourceSelection={new DataSourceSelectionService()}
       />
     );
   }, [setActionMenu, notifications, savedObjects]);

src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx

@@ -28,13 +28,15 @@ import {
   NO_COMPATIBLE_DATASOURCES_MESSAGE,
   NO_DATASOURCES_CONNECTED_MESSAGE,
 } from '../constants';
+import { DataSourceSelectionService } from '../../service/data_source_selection_service';
 
 describe('DataSourceAggregatedView: read all view (displayAllCompatibleDataSources is set to true)', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
   let client: SavedObjectsClientContract;
   const { toasts } = notificationServiceMock.createStartContract();
   const uiSettings = uiSettingsServiceMock.createStartContract();
   const application = applicationServiceMock.createStartContract();
+  const dataSourceSelection = new DataSourceSelectionService();
   const nextTick = () => new Promise((res) => process.nextTick(res));
 
   beforeEach(() => {
@@ -44,6 +46,7 @@ describe('DataSourceAggregatedView: read all view (displayAllCompatibleDataSourc
     mockResponseForSavedObjectsCalls(client, 'find', getDataSourcesWithFieldsResponse);
     mockUiSettingsCalls(uiSettings, 'get', 'test1');
     jest.spyOn(utils, 'getApplication').mockReturnValue(application);
+    jest.spyOn(utils, 'getDataSourceSelection').mockReturnValue(dataSourceSelection);
   });
 
   it.each([
@@ -163,6 +166,7 @@ describe('DataSourceAggregatedView: read active view (displayAllCompatibleDataSo
   let client: SavedObjectsClientContract;
   const { toasts } = notificationServiceMock.createStartContract();
   const uiSettings = uiSettingsServiceMock.createStartContract();
+  const dataSourceSelection = new DataSourceSelectionService();
   const nextTick = () => new Promise((res) => process.nextTick(res));
 
   beforeEach(() => {
@@ -171,6 +175,7 @@ describe('DataSourceAggregatedView: read active view (displayAllCompatibleDataSo
     } as any;
     mockResponseForSavedObjectsCalls(client, 'find', getDataSourcesWithFieldsResponse);
     mockUiSettingsCalls(uiSettings, 'get', 'test1');
+    jest.spyOn(utils, 'getDataSourceSelection').mockReturnValue(dataSourceSelection);
   });
 
   it.each([
@@ -284,6 +289,7 @@ describe('DataSourceAggregatedView empty state test with local cluster hiding',
   const { toasts } = notificationServiceMock.createStartContract();
   const uiSettings = uiSettingsServiceMock.createStartContract();
   const application = applicationServiceMock.createStartContract();
+  const dataSourceSelection = new DataSourceSelectionService();
   const nextTick = () => new Promise((res) => process.nextTick(res));
 
   beforeEach(() => {
@@ -293,6 +299,7 @@ describe('DataSourceAggregatedView empty state test with local cluster hiding',
     mockResponseForSavedObjectsCalls(client, 'find', {});
     mockUiSettingsCalls(uiSettings, 'get', 'test1');
     jest.spyOn(utils, 'getApplication').mockReturnValue(application);
+    jest.spyOn(utils, 'getDataSourceSelection').mockReturnValue(dataSourceSelection);
   });
 
   afterEach(() => {
@@ -369,6 +376,7 @@ describe('DataSourceAggregatedView empty state test due to filter out with local
   const { toasts } = notificationServiceMock.createStartContract();
   const uiSettings = uiSettingsServiceMock.createStartContract();
   const application = applicationServiceMock.createStartContract();
+  const dataSourceSelection = new DataSourceSelectionService();
   const nextTick = () => new Promise((res) => process.nextTick(res));
 
   beforeEach(() => {
@@ -378,6 +386,7 @@ describe('DataSourceAggregatedView empty state test due to filter out with local
     mockResponseForSavedObjectsCalls(client, 'find', getDataSourcesWithFieldsResponse);
     mockUiSettingsCalls(uiSettings, 'get', 'test1');
     jest.spyOn(utils, 'getApplication').mockReturnValue(application);
+    jest.spyOn(utils, 'getDataSourceSelection').mockReturnValue(dataSourceSelection);
   });
 
   afterEach(() => {
@@ -439,6 +448,7 @@ describe('DataSourceAggregatedView error state test no matter hide local cluster
   const { toasts } = notificationServiceMock.createStartContract();
   const uiSettings = uiSettingsServiceMock.createStartContract();
   const application = applicationServiceMock.createStartContract();
+  const dataSourceSelection = new DataSourceSelectionService();
   const nextTick = () => new Promise((res) => process.nextTick(res));
 
   beforeEach(() => {
@@ -448,6 +458,7 @@ describe('DataSourceAggregatedView error state test no matter hide local cluster
     mockErrorResponseForSavedObjectsCalls(client, 'find');
     mockUiSettingsCalls(uiSettings, 'get', 'test1');
     jest.spyOn(utils, 'getApplication').mockReturnValue(application);
+    jest.spyOn(utils, 'getDataSourceSelection').mockReturnValue(dataSourceSelection);
   });
 
   afterEach(() => {
@@ -514,6 +525,7 @@ describe('DataSourceAggregatedView error state test no matter hide local cluster
 describe('DataSourceAggregatedView warning messages', () => {
   const client = {} as any;
   const uiSettings = uiSettingsServiceMock.createStartContract();
+  const dataSourceSelection = new DataSourceSelectionService();
   const nextTick = () => new Promise((res) => process.nextTick(res));
   let toasts: IToasts;
   const noDataSourcesConnectedMessage = `${NO_DATASOURCES_CONNECTED_MESSAGE} ${CONNECT_DATASOURCES_MESSAGE}`;
@@ -522,6 +534,7 @@ describe('DataSourceAggregatedView warning messages', () => {
   beforeEach(() => {
     toasts = notificationServiceMock.createStartContract().toasts;
     mockUiSettingsCalls(uiSettings, 'get', 'test1');
+    jest.spyOn(utils, 'getDataSourceSelection').mockReturnValue(dataSourceSelection);
   });
 
   it.each([
@@ -571,3 +584,47 @@ describe('DataSourceAggregatedView warning messages', () => {
     }
   );
 });
+
+describe('DataSourceAggregatedView: dataSourceSelection)', () => {
+  let client: SavedObjectsClientContract;
+  const { toasts } = notificationServiceMock.createStartContract();
+  const uiSettings = uiSettingsServiceMock.createStartContract();
+  const dataSourceSelection = new DataSourceSelectionService();
+  dataSourceSelection.selectDataSource = jest.fn();
+  const nextTick = () => new Promise((res) => process.nextTick(res));
+  const activeDataSourceIds = ['test1', 'test2'];
+  const selectedOptions = [
+    { checked: 'on', disabled: true, id: 'test1', label: 'test1' },
+    { checked: 'on', disabled: true, id: 'test2', label: 'test2' },
+  ];
+  const componentId = 'component-id';
+  beforeEach(() => {
+    client = {
+      find: jest.fn().mockResolvedValue([]),
+    } as any;
+    mockResponseForSavedObjectsCalls(client, 'find', getDataSourcesWithFieldsResponse);
+    mockUiSettingsCalls(uiSettings, 'get', 'test1');
+    jest.spyOn(utils, 'getDataSourceSelection').mockReturnValue(dataSourceSelection);
+    jest.spyOn(utils, 'generateComponentId').mockReturnValue(componentId);
+  });
+
+  it('should render normally and call selectDataSource', async () => {
+    const component = shallow(
+      <DataSourceAggregatedView
+        fullWidth={false}
+        hideLocalCluster={false}
+        savedObjectsClient={client}
+        notifications={toasts}
+        displayAllCompatibleDataSources={false}
+        activeDataSourceIds={activeDataSourceIds}
+        uiSettings={uiSettings}
+      />
+    );
+
+    // Should render normally
+    expect(component).toMatchSnapshot();
+    await nextTick();
+
+    expect(dataSourceSelection.selectDataSource).toHaveBeenCalledWith(componentId, selectedOptions);
+  });
+});

src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx

@@ -16,6 +16,8 @@ import {
   getDataSourcesWithFields,
   handleDataSourceFetchError,
   handleNoAvailableDataSourceError,
+  generateComponentId,
+  getDataSourceSelection,
 } from '../utils';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
@@ -46,6 +48,7 @@ interface DataSourceAggregatedViewState extends DataSourceBaseState {
   switchChecked: boolean;
   defaultDataSource: string | null;
   incompatibleDataSourcesExist: boolean;
+  componentId: string;
 }
 
 interface DataSourceOptionDisplay extends DataSourceOption {
@@ -70,11 +73,13 @@ export class DataSourceAggregatedView extends React.Component<
       switchChecked: false,
       defaultDataSource: null,
       incompatibleDataSourcesExist: false,
+      componentId: generateComponentId(),
     };
   }
 
   componentWillUnmount() {
     this._isMounted = false;
+    getDataSourceSelection().remove(this.state.componentId);
   }
 
   onDataSourcesClick() {
@@ -188,7 +193,11 @@ export class DataSourceAggregatedView extends React.Component<
       });
     }
 
-    const numSelectedItems = items.filter((item) => item.checked === 'on').length;
+    const selectedItems = items.filter((item) => item.checked === 'on');
+    // For read-only cases, also need to set default selected result.
+    getDataSourceSelection().selectDataSource(this.state.componentId, selectedItems);
+
+    const numSelectedItems = selectedItems.length;
 
     const titleComponent = (
       <DataSourceDropDownHeader

src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx

@@ -15,11 +15,13 @@ import { act, render } from '@testing-library/react';
 import { DataSourceComponentType, DataSourceSelectableConfig } from './types';
 import { ReactWrapper } from 'enzyme';
 import * as utils from '../utils';
+import { DataSourceSelectionService } from '../../service/data_source_selection_service';
 
 describe('create data source menu', () => {
   let client: SavedObjectsClientContract;
   const notifications = notificationServiceMock.createStartContract();
   const { uiSettings } = coreMock.createSetup();
+  const dataSourceSelection = new DataSourceSelectionService();
 
   beforeAll(() => {
     jest
@@ -47,6 +49,8 @@ describe('create data source menu', () => {
     spyOn(utils, 'getApplication').and.returnValue({ id: 'test2' });
     spyOn(utils, 'getUiSettings').and.returnValue(uiSettings);
     spyOn(utils, 'getHideLocalCluster').and.returnValue({ enabled: true });
+    spyOn(utils, 'getDataSourceSelection').and.returnValue(dataSourceSelection);
+
     const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>();
 
     const component = render(<TestComponent {...props} />);
@@ -74,6 +78,7 @@ describe('create data source menu', () => {
     spyOn(utils, 'getApplication').and.returnValue({ id: 'test2' });
     spyOn(utils, 'getUiSettings').and.returnValue(uiSettings);
     spyOn(utils, 'getHideLocalCluster').and.returnValue({ enabled: true });
+    spyOn(utils, 'getDataSourceSelection').and.returnValue(dataSourceSelection);
     const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>();
     await act(async () => {
       component = render(<TestComponent {...props} />);
@@ -98,6 +103,7 @@ describe('when setMenuMountPoint is provided', () => {
   let client: SavedObjectsClientContract;
   const notifications = notificationServiceMock.createStartContract();
   const { uiSettings } = coreMock.createSetup();
+  const dataSourceSelection = new DataSourceSelectionService();
 
   const refresh = () => {
     new Promise(async (resolve) => {
@@ -141,6 +147,7 @@ describe('when setMenuMountPoint is provided', () => {
     spyOn(utils, 'getApplication').and.returnValue({ id: 'test2' });
     spyOn(utils, 'getUiSettings').and.returnValue(uiSettings);
     spyOn(utils, 'getHideLocalCluster').and.returnValue({ enabled: true });
+    spyOn(utils, 'getDataSourceSelection').and.returnValue(dataSourceSelection);
 
     const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>();
     const component = render(<TestComponent {...props} />);

src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx

@@ -14,7 +14,9 @@ export function createDataSourceMenu<T>() {
   const application = getApplication();
   const uiSettings = getUiSettings();
   const hideLocalCluster = getHideLocalCluster().enabled;
-  return (props: DataSourceMenuProps<T>) => {
+  return (
+    props: Omit<DataSourceMenuProps<T>, 'uiSettings' | 'hideLocalCluster' | 'application'>
+  ) => {
     if (props.setMenuMountPoint) {
       return (
         <MountPointPortal setMountPoint={props.setMenuMountPoint}>