From 912208c5e5caf7178153b5e0247baf3f213bd54e Mon Sep 17 00:00:00 2001
From: "Yuanqi(Ella) Zhu" <zhyuanqi@amazon.com>
Date: Tue, 16 Apr 2024 18:38:21 +0000
Subject: [PATCH] UI change for data source view to enable selectable

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>
---
 CHANGELOG.md                                  |   1 +
 .../data_source_menu/data_source_menu.tsx     |   1 +
 .../data_source_view.test.tsx.snap            | 702 +++++++++++-------
 .../data_source_view/data_source_view.scss    |  13 +
 .../data_source_view.test.tsx                 |   2 +-
 .../data_source_view/data_source_view.tsx     | 143 ++--
 6 files changed, 532 insertions(+), 330 deletions(-)
 create mode 100644 src/plugins/data_source_management/public/components/data_source_view/data_source_view.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77d1fad31e9c..d305f72d2014 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -95,6 +95,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [CSP Handler] Update CSP handler to only query and modify frame ancestors instead of all CSP directives ([#6398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6398))
 - [MD] Add OpenSearch cluster group label to top of single selectable dropdown  ([#6400](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6400))
 - [Multiple Datasource] Add error state to all data source menu components to show error component and consolidate all fetch errors ([#6440](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6440))
+- [Multiple Datasource] UI change for datasource view picker to enable selectable([#6497](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6497))
 - [Workspace] Support workspace in saved objects client in server side. ([#6365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6365))
 - [MD] Add dropdown header to data source single selector ([#6431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6431))
 - [Workspace] Add permission tab to workspace create update page ([#6378](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6378))
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 bc645a0b885f..74e9e2d03b9b 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
@@ -39,6 +39,7 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
         dataSourceFilter={dataSourceFilter}
         onSelectedDataSources={onSelectedDataSources}
         uiSettings={uiSettings}
+        application={application}
       />
     );
   }
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
index f0154f84d7e4..5dd8e6ec2821 100644
--- 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
@@ -1,252 +1,331 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataSourceView Should render successfully when provided datasource has not been filtered out 1`] = `
-<Fragment>
-  <EuiButtonEmpty
-    aria-label="dataSourceViewMenuButton"
-    className="euiHeaderLink"
-    data-test-subj="dataSourceViewContextMenuHeaderLink"
-    disabled={true}
-    iconSide="left"
-    iconType="database"
-    size="s"
-  />
-  <EuiPopover
-    anchorPosition="downLeft"
-    button={
-      <EuiButtonIcon
-        aria-label="Next"
-        display="empty"
-        iconType="iInCircle"
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <React.Fragment>
+      <EuiButtonEmpty
+        aria-label="dataSourceViewButton"
+        className="dataSourceComponentButtonTitle"
+        data-test-subj="dataSourceViewrButton"
+        iconSide="left"
+        iconType="database"
         onClick={[Function]}
+        size="s"
       />
-    }
-    closePopover={[Function]}
-    display="inlineBlock"
-    hasArrow={true}
-    id="dataSourceViewContextMenuPopover"
-    isOpen={false}
-    ownFocus={true}
-    panelPaddingSize="none"
+    </React.Fragment>
+  }
+  closePopover={[Function]}
+  display="inlineBlock"
+  hasArrow={true}
+  id="dataSourceViewPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
+>
+  <EuiContextMenuPanel
+    hasFocus={true}
+    items={Array []}
   >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [
-              Object {
-                "disabled": true,
-                "name": undefined,
-              },
-            ],
-            "title": "Selected data source",
-          },
-        ]
-      }
-      size="m"
-    />
-  </EuiPopover>
-</Fragment>
+    <EuiPanel
+      borderRadius="none"
+      className="dataSourceViewOuiPanel"
+      color="transparent"
+      paddingSize="s"
+    >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={1}
+      />
+    </EuiPanel>
+    <EuiPanel
+      borderRadius="none"
+      color="subdued"
+      paddingSize="xs"
+    >
+      <EuiSelectable
+        compressed={true}
+        data-test-subj="dataSourceView"
+        isPreFiltered={false}
+        options={
+          Array [
+            Object {
+              "checked": "on",
+              "disabled": true,
+              "id": "test1",
+            },
+          ]
+        }
+        renderOption={[Function]}
+        searchable={false}
+        singleSelection={true}
+      >
+        <Component />
+      </EuiSelectable>
+    </EuiPanel>
+  </EuiContextMenuPanel>
+</EuiPopover>
 `;
 
 exports[`DataSourceView Should return error when provided datasource has been filtered out 1`] = `
-<Fragment>
-  <EuiButtonEmpty
-    aria-label="dataSourceViewMenuButton"
-    className="euiHeaderLink"
-    data-test-subj="dataSourceViewContextMenuHeaderLink"
-    disabled={true}
-    iconSide="left"
-    iconType="database"
-    size="s"
-  />
-  <EuiPopover
-    anchorPosition="downLeft"
-    button={
-      <EuiButtonIcon
-        aria-label="Next"
-        display="empty"
-        iconType="iInCircle"
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <React.Fragment>
+      <EuiButtonEmpty
+        aria-label="dataSourceViewButton"
+        className="dataSourceComponentButtonTitle"
+        data-test-subj="dataSourceViewrButton"
+        iconSide="left"
+        iconType="database"
         onClick={[Function]}
-      />
-    }
-    closePopover={[Function]}
-    display="inlineBlock"
-    hasArrow={true}
-    id="dataSourceViewContextMenuPopover"
-    isOpen={false}
-    ownFocus={true}
-    panelPaddingSize="none"
+        size="s"
+      >
+        
+      </EuiButtonEmpty>
+    </React.Fragment>
+  }
+  closePopover={[Function]}
+  display="inlineBlock"
+  hasArrow={true}
+  id="dataSourceViewPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
+>
+  <EuiContextMenuPanel
+    hasFocus={true}
+    items={Array []}
   >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [],
-            "title": "Selected data source",
-          },
-        ]
-      }
-      size="m"
-    />
-  </EuiPopover>
-</Fragment>
+    <EuiPanel
+      borderRadius="none"
+      className="dataSourceViewOuiPanel"
+      color="transparent"
+      paddingSize="s"
+    >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={1}
+      />
+    </EuiPanel>
+    <EuiPanel
+      borderRadius="none"
+      color="subdued"
+      paddingSize="xs"
+    >
+      <EuiSelectable
+        compressed={true}
+        data-test-subj="dataSourceView"
+        isPreFiltered={false}
+        options={Array []}
+        renderOption={[Function]}
+        searchable={false}
+        singleSelection={true}
+      >
+        <Component />
+      </EuiSelectable>
+    </EuiPanel>
+  </EuiContextMenuPanel>
+</EuiPopover>
 `;
 
 exports[`DataSourceView When selected option is local cluster and hide local Cluster is true, should return error 1`] = `
-<Fragment>
-  <EuiButtonEmpty
-    aria-label="dataSourceViewMenuButton"
-    className="euiHeaderLink"
-    data-test-subj="dataSourceViewContextMenuHeaderLink"
-    disabled={true}
-    iconSide="left"
-    iconType="database"
-    size="s"
-  />
-  <EuiPopover
-    anchorPosition="downLeft"
-    button={
-      <EuiButtonIcon
-        aria-label="Next"
-        display="empty"
-        iconType="iInCircle"
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <React.Fragment>
+      <EuiButtonEmpty
+        aria-label="dataSourceViewButton"
+        className="dataSourceComponentButtonTitle"
+        data-test-subj="dataSourceViewrButton"
+        iconSide="left"
+        iconType="database"
         onClick={[Function]}
-      />
-    }
-    closePopover={[Function]}
-    display="inlineBlock"
-    hasArrow={true}
-    id="dataSourceViewContextMenuPopover"
-    isOpen={false}
-    ownFocus={true}
-    panelPaddingSize="none"
+        size="s"
+      >
+        
+      </EuiButtonEmpty>
+    </React.Fragment>
+  }
+  closePopover={[Function]}
+  display="inlineBlock"
+  hasArrow={true}
+  id="dataSourceViewPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
+>
+  <EuiContextMenuPanel
+    hasFocus={true}
+    items={Array []}
   >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [],
-            "title": "Selected data source",
-          },
-        ]
-      }
-      size="m"
-    />
-  </EuiPopover>
-</Fragment>
+    <EuiPanel
+      borderRadius="none"
+      className="dataSourceViewOuiPanel"
+      color="transparent"
+      paddingSize="s"
+    >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={1}
+      />
+    </EuiPanel>
+    <EuiPanel
+      borderRadius="none"
+      color="subdued"
+      paddingSize="xs"
+    >
+      <EuiSelectable
+        compressed={true}
+        data-test-subj="dataSourceView"
+        isPreFiltered={false}
+        options={Array []}
+        renderOption={[Function]}
+        searchable={false}
+        singleSelection={true}
+      >
+        <Component />
+      </EuiSelectable>
+    </EuiPanel>
+  </EuiContextMenuPanel>
+</EuiPopover>
 `;
 
 exports[`DataSourceView should call getDataSourceById when only pass id with no label 1`] = `
-<Fragment>
-  <EuiButtonEmpty
-    aria-label="dataSourceViewMenuButton"
-    className="euiHeaderLink"
-    data-test-subj="dataSourceViewContextMenuHeaderLink"
-    disabled={true}
-    iconSide="left"
-    iconType="database"
-    size="s"
-  />
-  <EuiPopover
-    anchorPosition="downLeft"
-    button={
-      <EuiButtonIcon
-        aria-label="Next"
-        display="empty"
-        iconType="iInCircle"
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <React.Fragment>
+      <EuiButtonEmpty
+        aria-label="dataSourceViewButton"
+        className="dataSourceComponentButtonTitle"
+        data-test-subj="dataSourceViewrButton"
+        iconSide="left"
+        iconType="database"
         onClick={[Function]}
+        size="s"
       />
-    }
-    closePopover={[Function]}
-    display="inlineBlock"
-    hasArrow={true}
-    id="dataSourceViewContextMenuPopover"
-    isOpen={false}
-    ownFocus={true}
-    panelPaddingSize="none"
+    </React.Fragment>
+  }
+  closePopover={[Function]}
+  display="inlineBlock"
+  hasArrow={true}
+  id="dataSourceViewPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
+>
+  <EuiContextMenuPanel
+    hasFocus={true}
+    items={Array []}
   >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [
-              Object {
-                "disabled": true,
-                "name": undefined,
-              },
-            ],
-            "title": "Selected data source",
-          },
-        ]
-      }
-      size="m"
-    />
-  </EuiPopover>
-</Fragment>
+    <EuiPanel
+      borderRadius="none"
+      className="dataSourceViewOuiPanel"
+      color="transparent"
+      paddingSize="s"
+    >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={1}
+      />
+    </EuiPanel>
+    <EuiPanel
+      borderRadius="none"
+      color="subdued"
+      paddingSize="xs"
+    >
+      <EuiSelectable
+        compressed={true}
+        data-test-subj="dataSourceView"
+        isPreFiltered={false}
+        options={
+          Array [
+            Object {
+              "checked": "on",
+              "disabled": true,
+              "id": "test1",
+            },
+          ]
+        }
+        renderOption={[Function]}
+        searchable={false}
+        singleSelection={true}
+      >
+        <Component />
+      </EuiSelectable>
+    </EuiPanel>
+  </EuiContextMenuPanel>
+</EuiPopover>
 `;
 
 exports[`DataSourceView should call notification warning when there is data source fetch error 1`] = `<DataSourceErrorMenu />`;
 
 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"
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <React.Fragment>
+      <EuiButtonEmpty
+        aria-label="dataSourceViewButton"
+        className="dataSourceComponentButtonTitle"
+        data-test-subj="dataSourceViewrButton"
+        iconSide="left"
+        iconType="database"
         onClick={[Function]}
-      />
-    }
-    closePopover={[Function]}
-    display="inlineBlock"
-    hasArrow={true}
-    id="dataSourceViewContextMenuPopover"
-    isOpen={false}
-    ownFocus={true}
-    panelPaddingSize="none"
+        size="s"
+      >
+        test1
+      </EuiButtonEmpty>
+    </React.Fragment>
+  }
+  closePopover={[Function]}
+  display="inlineBlock"
+  hasArrow={true}
+  id="dataSourceViewPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
+>
+  <EuiContextMenuPanel
+    hasFocus={true}
+    items={Array []}
   >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [
-              Object {
-                "disabled": true,
-                "name": "test1",
-              },
-            ],
-            "title": "Selected data source",
-          },
-        ]
-      }
-      size="m"
-    />
-  </EuiPopover>
-</Fragment>
+    <EuiPanel
+      borderRadius="none"
+      className="dataSourceViewOuiPanel"
+      color="transparent"
+      paddingSize="s"
+    >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={1}
+      />
+    </EuiPanel>
+    <EuiPanel
+      borderRadius="none"
+      color="subdued"
+      paddingSize="xs"
+    >
+      <EuiSelectable
+        compressed={true}
+        data-test-subj="dataSourceView"
+        isPreFiltered={false}
+        options={
+          Array [
+            Object {
+              "checked": "on",
+              "disabled": true,
+              "id": "test1",
+              "label": "test1",
+            },
+          ]
+        }
+        renderOption={[Function]}
+        searchable={false}
+        singleSelection={true}
+      >
+        <Component />
+      </EuiSelectable>
+    </EuiPanel>
+  </EuiContextMenuPanel>
+</EuiPopover>
 `;
 
 exports[`DataSourceView should show popover when click on button 1`] = `
@@ -254,88 +333,159 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <button
-        aria-label="dataSourceViewMenuButton"
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
-        data-test-subj="dataSourceViewContextMenuHeaderLink"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButtonEmpty__content"
-        >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="database"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          />
-        </span>
-      </button>
       <div
         class="euiPopover euiPopover--anchorDownLeft"
-        id="dataSourceViewContextMenuPopover"
+        id="dataSourceViewPopover"
       >
         <div
           class="euiPopover__anchor"
         >
           <button
-            aria-label="Next"
-            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+            aria-label="dataSourceViewButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+            data-test-subj="dataSourceViewrButton"
             type="button"
           >
             <span
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              color="inherit"
-              data-euiicon-type="iInCircle"
-            />
+              class="euiButtonContent euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                color="inherit"
+                data-euiicon-type="database"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              />
+            </span>
           </button>
         </div>
       </div>
     </div>
+    <div>
+      <div
+        data-eui="EuiFocusTrap"
+      >
+        <div
+          aria-describedby="generated-id"
+          aria-live="off"
+          aria-modal="true"
+          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom"
+          role="dialog"
+          style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+          tabindex="0"
+        >
+          <div
+            class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
+            style="left: 10px; top: 0px;"
+          />
+          <p
+            class="euiScreenReaderOnly"
+            id="generated-id"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
+          <div>
+            <div
+              class="euiContextMenuPanel"
+              tabindex="-1"
+            >
+              <div>
+                <div>
+                  <div
+                    class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow dataSourceViewOuiPanel"
+                  >
+                    <div
+                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiTitle euiTitle--xxxsmall"
+                    >
+                      <div
+                        class="euiFlexItem"
+                      >
+                        DATA SOURCE
+                         (
+                        1
+                        )
+                      </div>
+                      <div
+                        class="dataSourceDropDownHeaderInvisibleFocusable"
+                        tabindex="0"
+                      />
+                      <div
+                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <button
+                          class="euiLink euiLink--primary"
+                          type="button"
+                        >
+                          Manage
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="euiPanel euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder"
+                  >
+                    <div
+                      class="euiSelectable"
+                      data-test-subj="dataSourceView"
+                    >
+                      <div
+                        class="euiSelectableList"
+                      >
+                        <div
+                          style="overflow: visible; width: 0px;"
+                        />
+                        <div
+                          class="resize-triggers"
+                        >
+                          <div
+                            class="expand-trigger"
+                          >
+                            <div
+                              style="width: 1px; height: 1px;"
+                            />
+                          </div>
+                          <div
+                            class="contract-trigger"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </body>,
   "container": <div>
-    <button
-      aria-label="dataSourceViewMenuButton"
-      class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
-      data-test-subj="dataSourceViewContextMenuHeaderLink"
-      disabled=""
-      type="button"
-    >
-      <span
-        class="euiButtonContent euiButtonEmpty__content"
-      >
-        <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="database"
-        />
-        <span
-          class="euiButtonEmpty__text"
-        />
-      </span>
-    </button>
     <div
       class="euiPopover euiPopover--anchorDownLeft"
-      id="dataSourceViewContextMenuPopover"
+      id="dataSourceViewPopover"
     >
       <div
         class="euiPopover__anchor"
       >
         <button
-          aria-label="Next"
-          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+          aria-label="dataSourceViewButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+          data-test-subj="dataSourceViewrButton"
           type="button"
         >
           <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="iInCircle"
-          />
+            class="euiButtonContent euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            />
+          </span>
         </button>
       </div>
     </div>
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.scss b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.scss
new file mode 100644
index 000000000000..03235cd38537
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.scss
@@ -0,0 +1,13 @@
+.dataSourceViewOuiPanel {
+  width: 300px;
+}
+
+.dataSourceViewOuiFlexGroup {
+  .dataSourceViewOuiFlexItem {
+    color: grey;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+  }
+}
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
index a518fee29b78..d527ce8503ba 100644
--- 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
@@ -132,7 +132,7 @@ describe('DataSourceView', () => {
         fullWidth={false}
       />
     );
-    const button = await container.findByTestId('dataSourceViewContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceViewrButton');
     button.click();
     expect(container).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
index 420bb5927145..7fd99471a8c7 100644
--- 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
@@ -5,18 +5,30 @@
 
 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 {
+  EuiPopover,
+  EuiButtonEmpty,
+  EuiContextMenuPanel,
+  EuiPanel,
+  EuiSelectable,
+} from '@elastic/eui';
+import {
+  SavedObjectsClientContract,
+  ToastsStart,
+  ApplicationStart,
+} from 'opensearch-dashboards/public';
 import { IUiSettingsClient } from 'src/core/public';
 import { DataSourceBaseState, DataSourceOption } from '../data_source_menu/types';
-import { MenuPanelItem } from '../../types';
 import { DataSourceErrorMenu } from '../data_source_error_menu';
 import {
   getDataSourceById,
   handleDataSourceFetchError,
   handleNoAvailableDataSourceError,
 } from '../utils';
+import { DataSourceDropDownHeader } from '../drop_down_header';
+import { DataSourceItem } from '../data_source_item';
 import { LocalCluster } from '../constants';
+import './data_source_view.scss';
 
 interface DataSourceViewProps {
   fullWidth: boolean;
@@ -25,6 +37,7 @@ interface DataSourceViewProps {
   savedObjectsClient?: SavedObjectsClientContract;
   notifications?: ToastsStart;
   uiSettings?: IUiSettingsClient;
+  application?: ApplicationStart;
   dataSourceFilter?: (dataSource: any) => boolean;
   onSelectedDataSources?: (dataSources: DataSourceOption[]) => void;
 }
@@ -32,6 +45,7 @@ interface DataSourceViewProps {
 interface DataSourceViewState extends DataSourceBaseState {
   selectedOption: DataSourceOption[];
   isPopoverOpen: boolean;
+  defaultDataSource: string | null;
 }
 
 export class DataSourceView extends React.Component<DataSourceViewProps, DataSourceViewState> {
@@ -44,6 +58,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
       isPopoverOpen: false,
       selectedOption: this.props.selectedOption ? this.props.selectedOption : [],
       showError: false,
+      defaultDataSource: null,
     };
   }
 
@@ -57,9 +72,11 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     const option = selectedOption[0];
     const optionId = option.id;
 
+    const defaultDataSource = this.props.uiSettings?.get('defaultDataSource', null) ?? null;
     if (optionId === '' && !this.props.hideLocalCluster) {
       this.setState({
         selectedOption: [LocalCluster],
+        defaultDataSource,
       });
       if (this.props.onSelectedDataSources) {
         this.props.onSelectedDataSources([LocalCluster]);
@@ -74,6 +91,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     ) {
       this.setState({
         selectedOption: [],
+        defaultDataSource,
       });
       if (this.props.onSelectedDataSources) {
         this.props.onSelectedDataSources([]);
@@ -91,14 +109,23 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
         if (!this._isMounted) return;
         this.setState({
           selectedOption: [{ id: optionId, label: selectedDataSource.title }],
+          defaultDataSource,
         });
         if (this.props.onSelectedDataSources) {
           this.props.onSelectedDataSources([{ id: optionId, label: selectedDataSource.title }]);
         }
       } catch (error) {
-        handleDataSourceFetchError(this.onError.bind(this), this.props.notifications!);
+        handleDataSourceFetchError(
+          this.onError.bind(this),
+          this.props.notifications!,
+          this.props.onSelectedDataSources
+        );
       }
     } else if (this.props.onSelectedDataSources) {
+      this.setState({
+        ...this.state,
+        defaultDataSource,
+      });
       this.props.onSelectedDataSources([option]);
     }
   }
@@ -115,70 +142,80 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     this.setState({ ...this.state, isPopoverOpen: false });
   }
 
-  getPanels() {
-    let items: MenuPanelItem[] = [];
-    if (this.state.selectedOption) {
-      items = this.state.selectedOption.map((option) => {
-        return {
-          name: option.label,
-          disabled: true,
-        };
-      });
-    }
-
-    const panels = [
-      {
-        id: 0,
-        title: 'Selected data source',
-        items,
-      },
-    ];
-
-    return { panels };
-  }
-
   render() {
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
     }
-    const { panels } = this.getPanels();
+    const label = this.state.selectedOption.length > 0 ? this.state.selectedOption[0].label : '';
+    const options =
+      this.state.selectedOption.length > 0
+        ? this.state.selectedOption.map((option) => ({
+            ...option,
+            checked: 'on',
+            disabled: true,
+          }))
+        : [];
 
     const button = (
-      <EuiButtonIcon
-        iconType="iInCircle"
-        display="empty"
-        aria-label="Next"
-        onClick={this.onClick.bind(this)}
-      />
-    );
-    return (
       <>
         <EuiButtonEmpty
-          className="euiHeaderLink"
-          data-test-subj="dataSourceViewContextMenuHeaderLink"
-          aria-label={i18n.translate('dataSourceView.dataSourceOptionsButtonAriaLabel', {
-            defaultMessage: 'dataSourceViewMenuButton',
+          className="dataSourceComponentButtonTitle"
+          data-test-subj="dataSourceViewrButton"
+          onClick={this.onClick.bind(this)}
+          aria-label={i18n.translate('dataSourceView.dataSourceOptionsViewAriaLabel', {
+            defaultMessage: 'dataSourceViewButton',
           })}
           iconType="database"
           iconSide="left"
           size="s"
-          disabled={true}
         >
-          {this.state.selectedOption && this.state.selectedOption.length > 0
-            ? this.state.selectedOption[0].label
-            : ''}
+          {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>
       </>
     );
+
+    return (
+      <EuiPopover
+        id={'dataSourceViewPopover'}
+        button={button}
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover.bind(this)}
+        panelPaddingSize="none"
+        anchorPosition="downLeft"
+      >
+        <EuiContextMenuPanel>
+          <EuiPanel
+            className={'dataSourceViewOuiPanel'}
+            borderRadius="none"
+            color="transparent"
+            paddingSize="s"
+          >
+            {
+              <DataSourceDropDownHeader
+                totalDataSourceCount={1}
+                application={this.props.application}
+              />
+            }
+          </EuiPanel>
+          <EuiPanel color="subdued" paddingSize="xs" borderRadius="none">
+            <EuiSelectable
+              options={options}
+              singleSelection={true}
+              data-test-subj={'dataSourceView'}
+              compressed={true}
+              renderOption={(option) => (
+                <DataSourceItem
+                  option={option}
+                  defaultDataSource={this.state.defaultDataSource}
+                  className={'dataSourceView'}
+                />
+              )}
+            >
+              {(list) => list}
+            </EuiSelectable>
+          </EuiPanel>
+        </EuiContextMenuPanel>
+      </EuiPopover>
+    );
   }
 }