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

…nsearch-project#6211) * add multi selectable data source component Signed-off-by: Lu Yu <[email protected]> * update change log Signed-off-by: Lu Yu <[email protected]> * add tests Signed-off-by: Lu Yu <[email protected]> * add more test Signed-off-by: Lu Yu <[email protected]> * refactor to add config Signed-off-by: Lu Yu <[email protected]> * fix typo Signed-off-by: Lu Yu <[email protected]> * update snapshot Signed-off-by: Lu Yu <[email protected]> * add missing interface Signed-off-by: Lu Yu <[email protected]> --------- Signed-off-by: Lu Yu <[email protected]>
BionIT · Apr 2, 2024 · 290a778 · 290a778
1 parent e0c3664
commit 290a778
Show file tree

Hide file tree

Showing 16 changed files with 1,494 additions and 0 deletions.
diff --git a/...anagement/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap b/...anagement/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
diff --git a/...ent/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap b/...ent/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap
diff --git a/...ugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx b/...ugins/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();
+  });
 });
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
@@ -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;
     }