[Multiple Datasource] Add component to show single selected data source in read only mode

CHANGELOG.md

@@ -35,6 +35,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Expose filterfn in datasource menu component to allow filter data sources before rendering in navigation bar ([#6113](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6113))
 - [Workspace] Add delete saved objects by workspace functionality([#6013](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6013))
 - [Workspace] Add a workspace client in workspace plugin ([#6094](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6094))
+- [Multiple Datasource] Add component to show single selected data source in read only mode ([#6125](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6125))
 
 ### 🐛 Bug Fixes
 

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

@@ -21,7 +21,7 @@ describe('DataSourceMenu', () => {
     } as any;
   });
 
-  it('should render normally with local cluster not hidden', () => {
+  it('should render data source selectable only with local cluster not hidden', () => {
     component = shallow(
       <DataSourceMenu
         showDataSourceSelectable={true}
@@ -32,12 +32,13 @@ describe('DataSourceMenu', () => {
         hideLocalCluster={false}
         disableDataSourceSelectable={false}
         className={'myclass'}
+        dataSourceCallBackFunc={jest.fn()}
       />
     );
     expect(component).toMatchSnapshot();
   });
 
-  it('should render normally with local cluster is hidden', () => {
+  it('should render data source selectable only with local cluster is hidden', () => {
     component = shallow(
       <DataSourceMenu
         showDataSourceSelectable={true}
@@ -48,6 +49,19 @@ describe('DataSourceMenu', () => {
         hideLocalCluster={true}
         disableDataSourceSelectable={false}
         className={'myclass'}
+        dataSourceCallBackFunc={jest.fn()}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render data source view only', () => {
+    component = shallow(
+      <DataSourceMenu
+        showDataSourceView={true}
+        appName={'myapp'}
+        fullWidth={true}
+        className={'myclass'}
       />
     );
     expect(component).toMatchSnapshot();

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

@@ -15,15 +15,17 @@ import {
 import { MountPointPortal } from '../../../../opensearch_dashboards_react/public';
 import { DataSourceSelectable } from './data_source_selectable';
 import { DataSourceOption } from '../data_source_selector/data_source_selector';
+import { DataSourceView } from '../data_source_view';
 
 export interface DataSourceMenuProps {
-  showDataSourceSelectable: boolean;
+  showDataSourceSelectable?: boolean;
+  showDataSourceView?: boolean;
   appName: string;
-  savedObjects: SavedObjectsClientContract;
-  notifications: NotificationsStart;
+  savedObjects?: SavedObjectsClientContract;
+  notifications?: NotificationsStart;
   fullWidth: boolean;
-  hideLocalCluster: boolean;
-  dataSourceCallBackFunc: (dataSource: DataSourceOption) => void;
+  hideLocalCluster?: boolean;
+  dataSourceCallBackFunc?: (dataSource: DataSourceOption) => void;
   disableDataSourceSelectable?: boolean;
   className?: string;
   selectedOption?: DataSourceOption[];
@@ -41,35 +43,41 @@ export function DataSourceMenu(props: DataSourceMenuProps): ReactElement | null
     fullWidth,
     hideLocalCluster,
     selectedOption,
+    showDataSourceView,
     filterFn,
   } = props;
 
-  if (!showDataSourceSelectable) {
+  if (!showDataSourceSelectable && !showDataSourceView) {
     return null;
   }
 
-  function renderMenu(className: string): ReactElement | null {
-    if (!showDataSourceSelectable) return null;
+  function renderDataSourceView(className: string): ReactElement | null {
+    if (!showDataSourceView) return null;
     return (
       <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
-        {renderDataSourceSelectable()}
+        <DataSourceView
+          fullWidth={fullWidth}
+          selectedOption={selectedOption && selectedOption.length > 0 ? selectedOption : undefined}
+        />
       </EuiHeaderLinks>
     );
   }
 
-  function renderDataSourceSelectable(): ReactElement | null {
+  function renderDataSourceSelectable(className: string): ReactElement | null {
     if (!showDataSourceSelectable) return null;
     return (
-      <DataSourceSelectable
-        fullWidth={fullWidth}
-        hideLocalCluster={hideLocalCluster}
-        savedObjectsClient={savedObjects}
-        notifications={notifications.toasts}
-        onSelectedDataSource={dataSourceCallBackFunc}
-        disabled={disableDataSourceSelectable || false}
-        selectedOption={selectedOption && selectedOption.length > 0 ? selectedOption : undefined}
-        filterFn={filterFn}
-      />
+      <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
+        <DataSourceSelectable
+          fullWidth={fullWidth}
+          hideLocalCluster={hideLocalCluster || false}
+          savedObjectsClient={savedObjects!}
+          notifications={notifications!.toasts}
+          onSelectedDataSource={dataSourceCallBackFunc!}
+          disabled={disableDataSourceSelectable || false}
+          selectedOption={selectedOption && selectedOption.length > 0 ? selectedOption : undefined}
+          filterFn={filterFn}
+        />
+      </EuiHeaderLinks>
     );
   }
 
@@ -80,12 +88,18 @@ export function DataSourceMenu(props: DataSourceMenuProps): ReactElement | null
       return (
         <>
           <MountPointPortal setMountPoint={setMenuMountPoint}>
-            {renderMenu(menuClassName)}
+            {renderDataSourceSelectable(menuClassName)}
+            {renderDataSourceView(menuClassName)}
           </MountPointPortal>
         </>
       );
     } else {
-      return <>{renderMenu(menuClassName)}</>;
+      return (
+        <>
+          {renderDataSourceSelectable(menuClassName)}
+          {renderDataSourceView(menuClassName)}
+        </>
+      );
     }
   }
 
@@ -94,4 +108,6 @@ export function DataSourceMenu(props: DataSourceMenuProps): ReactElement | null
 
 DataSourceMenu.defaultProps = {
   disableDataSourceSelectable: false,
+  showDataSourceView: false,
+  showDataSourceSelectable: false,
 };

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

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ShallowWrapper, shallow } from 'enzyme';
+import React from 'react';
+import { DataSourceView } from './data_source_view';
+
+describe('DataSourceView', () => {
+  let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+
+  it('should render normally with local cluster not hidden', () => {
+    component = shallow(
+      <DataSourceView fullWidth={false} selectedOption={[{ id: 'test1', label: 'test1' }]} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,109 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiPopover, EuiButtonEmpty, EuiButtonIcon, EuiContextMenu } from '@elastic/eui';
+import { DataSourceOption } from '../data_source_selector/data_source_selector';
+
+interface DataSourceViewProps {
+  fullWidth: boolean;
+  selectedOption?: DataSourceOption[];
+}
+
+interface DataSourceViewState {
+  dataSourceOptions: DataSourceOption[];
+  selectedOption: DataSourceOption[];
+  isPopoverOpen: boolean;
+}
+
+export class DataSourceView extends React.Component<DataSourceViewProps, DataSourceViewState> {
+  private _isMounted: boolean = false;
+
+  constructor(props: DataSourceViewProps) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+      selectedOption: this.props.selectedOption ? this.props.selectedOption : [],
+    };
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  onClick() {
+    this.setState({ ...this.state, isPopoverOpen: !this.state.isPopoverOpen });
+  }
+
+  closePopover() {
+    this.setState({ ...this.state, isPopoverOpen: false });
+  }
+
+  async componentDidMount() {
+    this._isMounted = true;
+  }
+
+  render() {
+    const button = (
+      <EuiButtonIcon
+        iconType="iInCircle"
+        display="empty"
+        aria-label="Next"
+        onClick={this.onClick.bind(this)}
+      />
+    );
+
+    let items = [];
+
+    if (this.props.selectedOption) {
+      items = this.props.selectedOption.map((option) => {
+        return {
+          name: option.label,
+          disabled: true,
+        };
+      });
+    }
+
+    const panels = [
+      {
+        id: 0,
+        title: 'Selected data source',
+        items,
+      },
+    ];
+
+    return (
+      <>
+        <EuiButtonEmpty
+          className="euiHeaderLink"
+          data-test-subj="dataSourceViewContextMenuHeaderLink"
+          aria-label={i18n.translate('dataSourceView.dataSourceOptionsButtonAriaLabel', {
+            defaultMessage: 'dataSourceViewMenuButton',
+          })}
+          iconType="database"
+          iconSide="left"
+          size="s"
+          disabled={true}
+        >
+          {this.props.selectedOption && this.props.selectedOption.length > 0
+            ? this.props.selectedOption[0].label
+            : ''}
+        </EuiButtonEmpty>
+        <EuiPopover
+          id={'dataSourceSViewContextMenuPopover'}
+          button={button}
+          isOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover.bind(this)}
+          panelPaddingSize="none"
+          anchorPosition="downLeft"
+        >
+          <EuiContextMenu initialPanelId={0} panels={panels} />
+        </EuiPopover>
+      </>
+    );
+  }
+}