[Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id

CHANGELOG.md

@@ -73,6 +73,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add workspace list page ([#6182](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6182))
 - [Workspace] Add workspaces column to saved objects page ([#6225](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6225))
 - [Multiple Datasource] Add multi data source support to sample vega visualizations ([#6218](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6218))
+- [Multiple Datasource] Fetch data source title for DataSourceView when only id is provided ([#6315](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6315)
 - [Workspace] Add permission control logic ([#6052](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6052))
 
 ### 🐛 Bug Fixes

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

@@ -59,7 +59,58 @@ describe('DataSourceMenu', () => {
     component = shallow(
       <DataSourceMenu
         componentType={DataSourceComponentType.DataSourceView}
-        componentConfig={{ fullWidth: true, hideLocalCluster: true }}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          savedObjects: client,
+          notifications,
+        }}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render data source view if not pass saved object or notification', () => {
+    component = shallow(
+      <DataSourceMenu
+        componentType={DataSourceComponentType.DataSourceView}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          notifications,
+        }}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('can render data source view when provide activeOption', () => {
+    component = shallow(
+      <DataSourceMenu
+        componentType={DataSourceComponentType.DataSourceView}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          savedObjects: client,
+          notifications,
+          activeOption: [{ id: 'test', label: 'test-label' }],
+        }}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('can render data source view when only pass id in the activeOption', () => {
+    component = shallow(
+      <DataSourceMenu
+        componentType={DataSourceComponentType.DataSourceView}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          savedObjects: client,
+          notifications,
+          activeOption: [{ id: 'test' }],
+        }}
       />
     );
     expect(component).toMatchSnapshot();

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

@@ -22,11 +22,13 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
   const { componentType, componentConfig } = props;
 
   function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null {
-    const { activeOption, fullWidth } = config;
+    const { activeOption, fullWidth, savedObjects, notifications } = config;
     return (
       <DataSourceView
-        selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined}
         fullWidth={fullWidth}
+        selectedOption={activeOption}
+        savedObjectsClient={savedObjects}
+        notifications={notifications?.toasts}
       />
     );
   }