From df6de4e23c89b99e07bc6faae4f1f67a81568e14 Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Tue, 12 Mar 2024 20:22:36 -0700
Subject: [PATCH] [Multiple Datasource] Add component to show single selected
 data source in read only mode (#6125)

* add component to show selected data source in read only mode

Signed-off-by: Lu Yu <nluyu@amazon.com>

* add change log

Signed-off-by: Lu Yu <nluyu@amazon.com>

* fix typo and remove unused fields

Signed-off-by: Lu Yu <nluyu@amazon.com>

* fix snapshot

Signed-off-by: Lu Yu <nluyu@amazon.com>

---------

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 CHANGELOG.md                                  |  1 +
 .../data_source_menu.test.tsx.snap            | 20 +++-
 .../data_source_menu.test.tsx                 | 18 +++-
 .../data_source_menu/data_source_menu.tsx     | 60 +++++++-----
 .../data_source_view.test.tsx.snap            | 54 ++++++++++
 .../data_source_view.test.tsx                 | 19 ++++
 .../data_source_view/data_source_view.tsx     | 98 +++++++++++++++++++
 .../components/data_source_view/index.ts      |  6 ++
 8 files changed, 250 insertions(+), 26 deletions(-)
 create mode 100644 src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
 create mode 100644 src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx
 create mode 100644 src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
 create mode 100644 src/plugins/data_source_management/public/components/data_source_view/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f9e5e4d2ed3..fe283b39b41a 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
index 19f1e1c660d2..a55591a5df26 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DataSourceMenu should render normally with local cluster is hidden 1`] = `
+exports[`DataSourceMenu should render data source selectable only with local cluster is hidden 1`] = `
 <Fragment>
   <EuiHeaderLinks
     className="osdTopNavMenu myclass"
@@ -23,6 +23,7 @@ exports[`DataSourceMenu should render normally with local cluster is hidden 1`]
           "remove": [MockFunction],
         }
       }
+      onSelectedDataSource={[MockFunction]}
       savedObjectsClient={
         Object {
           "find": [MockFunction],
@@ -33,7 +34,7 @@ exports[`DataSourceMenu should render normally with local cluster is hidden 1`]
 </Fragment>
 `;
 
-exports[`DataSourceMenu should render normally with local cluster not hidden 1`] = `
+exports[`DataSourceMenu should render data source selectable only with local cluster not hidden 1`] = `
 <Fragment>
   <EuiHeaderLinks
     className="osdTopNavMenu myclass"
@@ -56,6 +57,7 @@ exports[`DataSourceMenu should render normally with local cluster not hidden 1`]
           "remove": [MockFunction],
         }
       }
+      onSelectedDataSource={[MockFunction]}
       savedObjectsClient={
         Object {
           "find": [MockFunction],
@@ -65,3 +67,17 @@ exports[`DataSourceMenu should render normally with local cluster not hidden 1`]
   </EuiHeaderLinks>
 </Fragment>
 `;
+
+exports[`DataSourceMenu should render data source view only 1`] = `
+<Fragment>
+  <EuiHeaderLinks
+    className="osdTopNavMenu myclass"
+    data-test-subj="top-nav"
+    gutterSize="xs"
+  >
+    <DataSourceView
+      fullWidth={true}
+    />
+  </EuiHeaderLinks>
+</Fragment>
+`;
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx
index 2653346ec879..71fc940d0981 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx
+++ b/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();
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
index 54c7642207d0..185cc63a7981 100644
--- 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
@@ -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,
 };
diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
new file mode 100644
index 000000000000..29f64c4293e6
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataSourceView should render normally with local cluster not hidden 1`] = `
+<Fragment>
+  <EuiButtonEmpty
+    aria-label="dataSourceViewMenuButton"
+    className="euiHeaderLink"
+    data-test-subj="dataSourceViewContextMenuHeaderLink"
+    disabled={true}
+    iconSide="left"
+    iconType="database"
+    size="s"
+  >
+    test1
+  </EuiButtonEmpty>
+  <EuiPopover
+    anchorPosition="downLeft"
+    button={
+      <EuiButtonIcon
+        aria-label="Next"
+        display="empty"
+        iconType="iInCircle"
+        onClick={[Function]}
+      />
+    }
+    closePopover={[Function]}
+    display="inlineBlock"
+    hasArrow={true}
+    id="dataSourceViewContextMenuPopover"
+    isOpen={false}
+    ownFocus={true}
+    panelPaddingSize="none"
+  >
+    <EuiContextMenu
+      initialPanelId={0}
+      panels={
+        Array [
+          Object {
+            "id": 0,
+            "items": Array [
+              Object {
+                "disabled": true,
+                "name": "test1",
+              },
+            ],
+            "title": "Selected data source",
+          },
+        ]
+      }
+      size="m"
+    />
+  </EuiPopover>
+</Fragment>
+`;
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx
new file mode 100644
index 000000000000..f7022a308a0a
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
new file mode 100644
index 000000000000..068842ef26a6
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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 {
+  selectedOption: DataSourceOption[];
+  isPopoverOpen: boolean;
+}
+
+export class DataSourceView extends React.Component<DataSourceViewProps, DataSourceViewState> {
+  constructor(props: DataSourceViewProps) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+      selectedOption: this.props.selectedOption ? this.props.selectedOption : [],
+    };
+  }
+
+  onClick() {
+    this.setState({ ...this.state, isPopoverOpen: !this.state.isPopoverOpen });
+  }
+
+  closePopover() {
+    this.setState({ ...this.state, isPopoverOpen: false });
+  }
+
+  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={'dataSourceViewContextMenuPopover'}
+          button={button}
+          isOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover.bind(this)}
+          panelPaddingSize="none"
+          anchorPosition="downLeft"
+        >
+          <EuiContextMenu initialPanelId={0} panels={panels} />
+        </EuiPopover>
+      </>
+    );
+  }
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_view/index.ts b/src/plugins/data_source_management/public/components/data_source_view/index.ts
new file mode 100644
index 000000000000..2d7c5e8ba828
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_view/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { DataSourceView } from './data_source_view';