[Multiple Datasource] Add multi selectable data source component (#6211…

…) (#6318)

* add multi selectable data source component



* update change log



* add tests



* add more test



* refactor to add config



* fix typo



* update snapshot



* add missing interface



---------

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

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

@@ -94,4 +94,18 @@ describe('DataSourceMenu', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('should render data source multi select component', () => {
+    const container = render(
+      <DataSourceMenu
+        showDataSourceMultiSelectable={true}
+        appName={'myapp'}
+        fullWidth={true}
+        className={'myclass'}
+        savedObjects={client}
+        notifications={notifications}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

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

@@ -8,10 +8,12 @@ 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 {
   DataSourceAggregatedViewConfig,
   DataSourceComponentType,
   DataSourceMenuProps,
+  DataSourceMultiSelectableConfig,
   DataSourceSelectableConfig,
   DataSourceViewConfig,
 } from './types';
@@ -29,6 +31,27 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
     );
   }
 
+  function renderDataSourceMultiSelectable(
+    config: DataSourceMultiSelectableConfig
+  ): ReactElement | null {
+    const {
+      fullWidth,
+      hideLocalCluster,
+      savedObjects,
+      notifications,
+      onSelectedDataSources,
+    } = config;
+    return (
+      <DataSourceMultiSelectable
+        fullWidth={fullWidth}
+        hideLocalCluster={hideLocalCluster || false}
+        savedObjectsClient={savedObjects!}
+        notifications={notifications!.toasts}
+        onSelectedDataSources={onSelectedDataSources!}
+      />
+    );
+  }
+
   function renderDataSourceSelectable(config: DataSourceSelectableConfig): ReactElement | null {
     const {
       onSelectedDataSources,
@@ -87,6 +110,8 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
         return renderDataSourceSelectable(componentConfig as DataSourceSelectableConfig);
       case DataSourceComponentType.DataSourceView:
         return renderDataSourceView(componentConfig as DataSourceViewConfig);
+      case DataSourceComponentType.DataSourceMultiSelectable:
+        return renderDataSourceMultiSelectable(componentConfig as DataSourceMultiSelectableConfig);
       default:
         return null;
     }