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

CHANGELOG.md

@@ -83,6 +83,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][MD]Fix schema for test connection to separate validation based on auth type ([#5997](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5997))
 - [Discover] Enable 'Back to Top' Feature in Discover for scrolling to top ([#6008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6008))
 - [Discover] Fix lazy loading of the legacy table from getting stuck ([#6041](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6041))
+- [MDS] Add data source query to fetch missing lable for DataSourceView ([#6315](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6315))
 - [BUG][Discover] Allow saved sort from search embeddable to load in Dashboard ([#5934](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5934))
 - [osd/std] Add additional recovery from false-positives in handling of long numerals ([#5956](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5956), [#6245](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6245))
 - [osd/std] Add fallback mechanism when recovery from false-positives in handling of long numerals fails ([#6253](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6253))

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}
+        savedObjectsClient={savedObjects!}
+        notifications={notifications!.toasts}
         fullWidth={fullWidth}
+        selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined}
       />
     );
   }

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

@@ -6,14 +6,59 @@
 import { ShallowWrapper, shallow } from 'enzyme';
 import React from 'react';
 import { DataSourceView } from './data_source_view';
+import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
+import { notificationServiceMock } from '../../../../../core/public/mocks';
+import { getSingleDataSourceResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
+import { render } from '@testing-library/react';
 
 describe('DataSourceView', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  let client: SavedObjectsClientContract;
+  const { toasts } = notificationServiceMock.createStartContract();
+
+  beforeEach(() => {
+    client = {
+      get: jest.fn().mockResolvedValue([]),
+    } as any;
+    mockResponseForSavedObjectsCalls(client, 'get', getSingleDataSourceResponse);
+  });
 
   it('should render normally with local cluster not hidden', () => {
     component = shallow(
-      <DataSourceView fullWidth={false} selectedOption={[{ id: 'test1', label: 'test1' }]} />
+      <DataSourceView
+        savedObjectsClient={client}
+        notifications={toasts}
+        fullWidth={false}
+        selectedOption={[{ id: 'test1', label: 'test1' }]}
+      />
+    );
+    expect(component).toMatchSnapshot();
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+  it('should show popover when click on button', async () => {
+    const container = render(
+      <DataSourceView
+        savedObjectsClient={client}
+        notifications={toasts}
+        fullWidth={false}
+        selectedOption={[{ id: 'test1', label: 'test1' }]}
+      />
+    );
+    const button = await container.findByTestId('dataSourceViewContextMenuHeaderLink');
+    button.click();
+    expect(container).toMatchSnapshot();
+  });
+  it('should call getDataSourceById when only pass id no label', async () => {
+    component = shallow(
+      <DataSourceView
+        savedObjectsClient={client}
+        notifications={toasts}
+        fullWidth={false}
+        selectedOption={[{ id: 'test1' }]}
+      />
     );
     expect(component).toMatchSnapshot();
+    expect(client.get).toBeCalledWith('data-source', 'test1');
+    expect(toasts.addWarning).toBeCalledTimes(0);
   });
 });

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

@@ -6,9 +6,13 @@
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiPopover, EuiButtonEmpty, EuiButtonIcon, EuiContextMenu } from '@elastic/eui';
+import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
 import { DataSourceOption } from '../data_source_menu/types';
+import { getDataSourceById } from '../utils';
 
 interface DataSourceViewProps {
+  savedObjectsClient: SavedObjectsClientContract;
+  notifications: ToastsStart;
   fullWidth: boolean;
   selectedOption?: DataSourceOption[];
 }
@@ -19,6 +23,8 @@
 }
 
 export class DataSourceView extends React.Component<DataSourceViewProps, DataSourceViewState> {
+  private _isMounted: boolean = false;
+
   constructor(props: DataSourceViewProps) {
     super(props);
 
@@ -28,6 +34,32 @@
     };
   }
 
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  async componentDidMount() {
+    this._isMounted = true;
+    const selectedOption = this.props.selectedOption;
+    if (selectedOption && selectedOption.length === 1) {
+      if (selectedOption[0].id && !selectedOption[0].label) {
+        const title = (await getDataSourceById(selectedOption[0].id, this.props.savedObjectsClient))
+          .title;
+        if (!title) {
+          this.props.notifications.addWarning(
+            i18n.translate('dataSource.fetchDataSourceError', {
+              defaultMessage: `Invalid selectedOption: ${selectedOption[0].id}`,
+            })
+          );
+        } else {
+          if (!this._isMounted) return;
+          this.setState({
+            selectedOption: [{ id: selectedOption[0].id, label: title }],
+          });
+        }
+      }
+    }
+  }
+
   onClick() {
     this.setState({ ...this.state, isPopoverOpen: !this.state.isPopoverOpen });
   }
@@ -46,10 +78,10 @@
       />
     );
 
-    let items = [];
+    let items: Array<{ name: string | undefined; disabled: boolean }> = [];
 
-    if (this.props.selectedOption) {
-      items = this.props.selectedOption.map((option) => {
+    if (this.state.selectedOption) {
+      items = this.state.selectedOption.map((option) => {
         return {
           name: option.label,
           disabled: true,
@@ -78,8 +110,8 @@
           size="s"
           disabled={true}
         >
-          {this.props.selectedOption && this.props.selectedOption.length > 0
-            ? this.props.selectedOption[0].label
+          {this.state.selectedOption && this.state.selectedOption.length > 0
+            ? this.state.selectedOption[0].label
             : ''}
         </EuiButtonEmpty>
         <EuiPopover