Refactor read-only component to cover more edge cases

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>

examples/multiple_data_source_examples/public/components/data_source_view_example.tsx

@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   EuiBasicTable,
   EuiPageBody,
@@ -34,8 +34,11 @@ export const DataSourceViewExample = ({
   dataSourceEnabled,
   setActionMenu,
   dataSourceManagement,
+  notifications,
+  savedObjects,
 }: DataSourceViewExampleProps) => {
   const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu<DataSourceViewConfig>();
+  const [selectedDataSources, setSelectedDataSources] = useState<string[]>([]);
   const data: ComponentProp[] = [
     {
       name: 'savedObjects',
@@ -68,19 +71,31 @@ export const DataSourceViewExample = ({
     },
   ];
 
+  const renderDataSourceComponent = useMemo(() => {
+    return (
+      <DataSourceMenu
+        setMenuMountPoint={setActionMenu}
+        componentType={'DataSourceView'}
+        componentConfig={{
+          notifications,
+          savedObjects: savedObjects.client,
+          fullWidth: false,
+          activeOption: [{ id: '' }],
+          dataSourceFilter: (ds) => {
+            return true;
+          },
+          onSelectedDataSources: (ds) => {
+            setSelectedDataSources(ds);
+          },
+        }}
+      />
+    );
+  }, [setActionMenu, notifications, savedObjects]);
+
   return (
     <EuiPageBody component="main">
       <EuiPageHeader>
-        {dataSourceEnabled && (
-          <DataSourceMenu
-            setMenuMountPoint={setActionMenu}
-            componentType={'DataSourceView'}
-            componentConfig={{
-              fullWidth: false,
-              activeOption: [{ id: 'example id', label: 'example data source' }],
-            }}
-          />
-        )}
+        {dataSourceEnabled && renderDataSourceComponent}
         <EuiPageHeaderSection>
           <EuiTitle size="l">
             <h1>Data Source View Example</h1>

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

@@ -22,13 +22,24 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
   const { componentType, componentConfig, uiSettings, hideLocalCluster } = props;
 
   function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null {
-    const { activeOption, fullWidth, savedObjects, notifications } = config;
+    const {
+      activeOption,
+      fullWidth,
+      savedObjects,
+      notifications,
+      dataSourceFilter,
+      onSelectedDataSources,
+    } = config;
     return (
       <DataSourceView
         fullWidth={fullWidth}
         selectedOption={activeOption}
         savedObjectsClient={savedObjects}
         notifications={notifications?.toasts}
+        hideLocalCluster={hideLocalCluster || false}
+        dataSourceFilter={dataSourceFilter}
+        onSelectedDataSources={onSelectedDataSources}
+        uiSettings={uiSettings}
       />
     );
   }

src/plugins/data_source_management/public/components/data_source_menu/types.ts

@@ -44,9 +44,11 @@ export const DataSourceComponentType = {
 export type DataSourceComponentType = typeof DataSourceComponentType[keyof typeof DataSourceComponentType];
 
 export interface DataSourceViewConfig extends DataSourceBaseConfig {
+  onSelectedDataSources: (dataSources: DataSourceOption[]) => void;
   activeOption: DataSourceOption[];
   savedObjects?: SavedObjectsClientContract;
   notifications?: NotificationsStart;
+  dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
 }
 
 export interface DataSourceAggregatedViewConfig extends DataSourceBaseConfig {