From d2efc747dd76b06efa4145ca06a060d01a6ae018 Mon Sep 17 00:00:00 2001
From: "Yuanqi(Ella) Zhu" <zhyuanqi@amazon.com>
Date: Fri, 19 Apr 2024 18:52:55 +0000
Subject: [PATCH] Extract the button component for datasource picker to avoid
 duplicate code

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>
---
 CHANGELOG.md                                  |   1 +
 .../data_source_aggregated_view.test.tsx.snap | 162 ++++--------------
 .../data_source_aggregated_view.tsx           |  21 +--
 .../create_data_source_menu.test.tsx.snap     |  18 +-
 .../data_source_menu.test.tsx.snap            |  12 +-
 .../data_source_selectable.test.tsx.snap      |  65 +++----
 .../data_source_selectable.test.tsx           |  12 +-
 .../data_source_selectable.tsx                |  35 ++--
 .../data_source_view.test.tsx.snap            |  48 ++----
 .../data_source_view/data_source_view.tsx     |  29 +---
 .../popover_button/popover_button.test.tsx    |  29 ++++
 .../popover_button/popover_button.tsx         |  33 ++++
 12 files changed, 183 insertions(+), 282 deletions(-)
 create mode 100644 src/plugins/data_source_management/public/components/popover_button/popover_button.test.tsx
 create mode 100644 src/plugins/data_source_management/public/components/popover_button/popover_button.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c395cad4054f..a77ee9fae023 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -104,6 +104,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add permission tab to workspace create update page ([#6378](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6378))
 - [Workspace] Hide datasource and advanced settings menu in dashboard management when in workspace. ([#6455](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6455))
 - [Multiple Datasource] Modify selectable picker to remove group label and close popover after selection ([#6515](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6515))
+- [Multiple Datasource] Extract the button component for datasource picker to avoid duplicate code ([#6559](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6559))
 - [Workspace] Add workspaces filter to saved objects page. ([#6458](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6458))
 
 ### 🐛 Bug Fixes
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
index 57ba243a476b..7c799c8d99bc 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
@@ -5,14 +5,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -142,14 +137,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -285,14 +275,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -416,14 +401,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -553,14 +533,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -690,14 +665,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -833,14 +803,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -964,14 +929,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1101,14 +1061,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1201,14 +1156,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1301,14 +1251,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1401,14 +1346,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1501,14 +1441,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1601,14 +1536,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1701,14 +1631,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1801,14 +1726,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1901,14 +1821,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -2001,14 +1916,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
index 16b63d36d912..b9bb61a46efb 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
@@ -28,6 +28,7 @@ import { DataSourceOption } from '../data_source_menu/types';
 import { DataSourceItem } from '../data_source_item';
 import { DataSourceDropDownHeader } from '../drop_down_header';
 import './data_source_aggregated_view.scss';
+import { PopoverButton } from '../popover_button/popover_button';
 
 interface DataSourceAggregatedViewProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -135,19 +136,6 @@ export class DataSourceAggregatedView extends React.Component<
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
     }
-    const button = (
-      <EuiButtonEmpty
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        aria-label={i18n.translate('dataSourceAggregatedView.dataSourceOptionsButtonAriaLabel', {
-          defaultMessage: 'dataSourceAggregatedViewMenuButton',
-        })}
-        iconType="database"
-        iconSide="left"
-        size="s"
-        onClick={this.onDataSourcesClick.bind(this)}
-      />
-    );
 
     let items: DataSourceOptionDisplay[] = [];
 
@@ -196,7 +184,12 @@ export class DataSourceAggregatedView extends React.Component<
       <>
         <EuiPopover
           id={'dataSourceSViewContextMenuPopover'}
-          button={button}
+          button={
+            <PopoverButton
+              className={'dataSourceAggregatedView'}
+              onClick={this.onDataSourcesClick.bind(this)}
+            />
+          }
           isOpen={this.state.isPopoverOpen}
           closePopover={this.closePopover.bind(this)}
           panelPaddingSize="none"
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
index c705db9194b0..7ebf4e5a5f80 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
@@ -103,9 +103,9 @@ Object {
           class="euiPopover__anchor"
         >
           <button
-            aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-            data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+            aria-label="dataSourceSelectableButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+            data-test-subj="dataSourceSelectableButton"
             type="button"
           >
             <span
@@ -135,9 +135,9 @@ Object {
         class="euiPopover__anchor"
       >
         <button
-          aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+          aria-label="dataSourceSelectableButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+          data-test-subj="dataSourceSelectableButton"
           type="button"
         >
           <span
@@ -232,9 +232,9 @@ Object {
               class="euiPopover__anchor"
             >
               <button
-                aria-label="dataSourceMenuButton"
-                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-                data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+                aria-label="dataSourceSelectableButton"
+                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+                data-test-subj="dataSourceSelectableButton"
                 type="button"
               >
                 <span
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 3ec264b888ff..4dc6ce29141a 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
@@ -76,9 +76,9 @@ Object {
           class="euiPopover__anchor"
         >
           <button
-            aria-label="dataSourceAggregatedViewMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
-            data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+            aria-label="dataSourceAggregatedViewButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+            data-test-subj="dataSourceAggregatedViewButton"
             type="button"
           >
             <span
@@ -107,9 +107,9 @@ Object {
         class="euiPopover__anchor"
       >
         <button
-          aria-label="dataSourceAggregatedViewMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
-          data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+          aria-label="dataSourceAggregatedViewButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+          data-test-subj="dataSourceAggregatedViewButton"
           type="button"
         >
           <span
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index b3abb935afee..2ed4037a8712 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -4,20 +4,11 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceMenuButton"
-        className="euiHeaderLink dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-        disabled={false}
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      >
-        Local cluster
-      </EuiButtonEmpty>
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceSelectable"
+      label="Local cluster"
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   data-test-subj="dataSourceSelectableContextMenuPopover"
@@ -84,18 +75,11 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceMenuButton"
-        className="euiHeaderLink dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-        disabled={false}
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      />
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceSelectable"
+      label=""
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   data-test-subj="dataSourceSelectableContextMenuPopover"
@@ -146,18 +130,11 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceMenuButton"
-        className="euiHeaderLink dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-        disabled={false}
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      />
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceSelectable"
+      label=""
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   data-test-subj="dataSourceSelectableContextMenuPopover"
@@ -218,9 +195,9 @@ Object {
           class="euiPopover__anchor"
         >
           <button
-            aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-            data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+            aria-label="dataSourceSelectableButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+            data-test-subj="dataSourceSelectableButton"
             type="button"
           >
             <span
@@ -389,9 +366,9 @@ Object {
         class="euiPopover__anchor"
       >
         <button
-          aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+          aria-label="dataSourceSelectableButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+          data-test-subj="dataSourceSelectableButton"
           type="button"
         >
           <span
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
index 63a67964a6ad..fff531a1ae76 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -12,8 +12,6 @@ import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
 import { render } from '@testing-library/react';
 import * as utils from '../utils';
-import { EuiSelectable } from '@elastic/eui';
-import { dataSourceOptionGroupLabel } from '../utils';
 
 describe('DataSourceSelectable', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -103,7 +101,7 @@ describe('DataSourceSelectable', () => {
 
     await nextTick();
 
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     button.click();
 
     expect(container.getByTestId('dataSourceSelectableContextMenuPopover')).toBeVisible();
@@ -192,7 +190,7 @@ describe('DataSourceSelectable', () => {
     );
 
     await nextTick();
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     expect(button).toHaveTextContent('test2');
   });
 
@@ -211,7 +209,7 @@ describe('DataSourceSelectable', () => {
       />
     );
     await nextTick();
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     expect(button).toHaveTextContent('test2');
   });
 
@@ -230,7 +228,7 @@ describe('DataSourceSelectable', () => {
       />
     );
     await nextTick();
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     expect(button).toHaveTextContent('');
     expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
   });
@@ -250,7 +248,7 @@ describe('DataSourceSelectable', () => {
       />
     );
     await nextTick();
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     expect(button).toHaveTextContent('');
     expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
   });
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index c1aafb0b2a30..a9b9cd63d367 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -36,6 +36,7 @@ import './data_source_selectable.scss';
 import { DataSourceDropDownHeader } from '../drop_down_header';
 import '../button_title.scss';
 import './data_source_selectable.scss';
+import { PopoverButton } from '../popover_button/popover_button';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -237,32 +238,24 @@ export class DataSourceSelectable extends React.Component<
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
     }
-    const button = (
-      <>
-        <EuiButtonEmpty
-          className={'euiHeaderLink dataSourceComponentButtonTitle'}
-          onClick={this.onClick.bind(this)}
-          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-          aria-label={i18n.translate('dataSourceSelectable.dataSourceOptionsButtonAriaLabel', {
-            defaultMessage: 'dataSourceMenuButton',
-          })}
-          iconType="database"
-          iconSide="left"
-          size="s"
-          disabled={this.props.disabled || false}
-        >
-          {this.state.selectedOption &&
-            this.state.selectedOption.length > 0 &&
-            this.state.selectedOption[0]?.label}
-        </EuiButtonEmpty>
-      </>
-    );
+
+    const label =
+      (this.state.selectedOption &&
+        this.state.selectedOption.length > 0 &&
+        this.state.selectedOption[0]?.label) ||
+      '';
 
     return (
       <EuiPopover
         initialFocus={'.euiSelectableSearch'}
         id={'dataSourceSelectableContextMenuPopover'}
-        button={button}
+        button={
+          <PopoverButton
+            className={'dataSourceSelectable'}
+            label={label}
+            onClick={this.onClick.bind(this)}
+          />
+        }
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
         panelPaddingSize="none"
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 efe373e7d825..c0d5f19a3249 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
@@ -4,17 +4,10 @@ exports[`DataSourceView Should render successfully when provided datasource has
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceViewButton"
-        className="dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceViewButton"
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      />
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceView"
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   display="inlineBlock"
@@ -77,17 +70,10 @@ exports[`DataSourceView should call getDataSourceById when only pass id with no
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceViewButton"
-        className="dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceViewButton"
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      />
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceView"
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   display="inlineBlock"
@@ -140,19 +126,11 @@ exports[`DataSourceView should render normally with local cluster not hidden 1`]
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceViewButton"
-        className="dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceViewButton"
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      >
-        test1
-      </EuiButtonEmpty>
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceView"
+      label="test1"
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   display="inlineBlock"
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 75596b215b08..8f194069f55d 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
@@ -30,6 +30,7 @@ import { DataSourceItem } from '../data_source_item';
 import { LocalCluster } from '../constants';
 import { NoDataSource } from '../no_data_source';
 import './data_source_view.scss';
+import { PopoverButton } from '../popover_button/popover_button';
 
 interface DataSourceViewProps {
   fullWidth: boolean;
@@ -156,7 +157,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
     }
-    const label = this.state.selectedOption.length > 0 ? this.state.selectedOption[0].label : '';
+    const label = this.state.selectedOption.length > 0 ? this.state.selectedOption[0].label! : '';
     const options =
       this.state.selectedOption.length > 0
         ? this.state.selectedOption.map((option) => ({
@@ -166,28 +167,16 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
           }))
         : [];
 
-    const button = (
-      <>
-        <EuiButtonEmpty
-          className="dataSourceComponentButtonTitle"
-          data-test-subj="dataSourceViewButton"
-          onClick={this.onClick.bind(this)}
-          aria-label={i18n.translate('dataSourceView.dataSourceOptionsViewAriaLabel', {
-            defaultMessage: 'dataSourceViewButton',
-          })}
-          iconType="database"
-          iconSide="left"
-          size="s"
-        >
-          {label}
-        </EuiButtonEmpty>
-      </>
-    );
-
     return (
       <EuiPopover
         id={'dataSourceViewPopover'}
-        button={button}
+        button={
+          <PopoverButton
+            className={'dataSourceView'}
+            label={label}
+            onClick={this.onClick.bind(this)}
+          />
+        }
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
         panelPaddingSize="none"
diff --git a/src/plugins/data_source_management/public/components/popover_button/popover_button.test.tsx b/src/plugins/data_source_management/public/components/popover_button/popover_button.test.tsx
new file mode 100644
index 000000000000..7622ef7f47a3
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/popover_button/popover_button.test.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { PopoverButton } from './popover_button';
+
+describe('Test on PopoverButton', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('renders without crashing', () => {
+    shallow(<PopoverButton className="random" label="button-name" onClick={jest.fn()} />);
+  });
+
+  it('renders the label correctly', () => {
+    const label = 'Test Label';
+    const component = mount(<PopoverButton className="random" label={label} onClick={jest.fn()} />);
+    expect(component.find('EuiButtonEmpty').text()).toBe(label);
+  });
+
+  it('calls onClick when button is clicked', () => {
+    const component = mount(<PopoverButton className="random" onClick={jest.fn()} />);
+    component.find('.dataSourceComponentButtonTitle').first().simulate('click');
+    expect(component.find('EuiButtonEmpty').text()).toBe('');
+  });
+});
diff --git a/src/plugins/data_source_management/public/components/popover_button/popover_button.tsx b/src/plugins/data_source_management/public/components/popover_button/popover_button.tsx
new file mode 100644
index 000000000000..a15f81e2e7e1
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/popover_button/popover_button.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+interface PopoverButtonProps {
+  className: string;
+  label?: string;
+  onClick: () => void;
+}
+
+export const PopoverButton: React.FC<PopoverButtonProps> = ({ className, label, onClick }) => {
+  return (
+    <>
+      <EuiButtonEmpty
+        className={`dataSourceComponentButtonTitle`}
+        data-test-subj={`${className}Button`}
+        onClick={onClick}
+        aria-label={i18n.translate(`${className}.dataSourceOptionsViewAriaLabel`, {
+          defaultMessage: `${className}Button`,
+        })}
+        iconType="database"
+        iconSide="left"
+        size="s"
+      >
+        {label ? label : null}
+      </EuiButtonEmpty>
+    </>
+  );
+};