Extract the button component for datasource picker to avoid duplicate…

… code (opensearch-project#6559)

* Extract the button component for datasource picker to avoid duplicate code

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>

* Modify the name of popover button

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>

---------

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>

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

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

@@ -4,15 +4,7 @@
  */
 
 import React from 'react';
-import {
-  EuiButtonEmpty,
-  EuiContextMenuPanel,
-  EuiPanel,
-  EuiPopover,
-  EuiSelectable,
-  EuiSwitch,
-} from '@elastic/eui';
-import { i18n } from '@osd/i18n';
+import { EuiContextMenuPanel, EuiPanel, EuiPopover, EuiSelectable, EuiSwitch } from '@elastic/eui';
 import {
   ApplicationStart,
   IUiSettingsClient,
@@ -34,6 +26,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 { DataSourceMenuPopoverButton } from '../popover_button/popover_button';
 
 interface DataSourceAggregatedViewProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -155,19 +148,6 @@ export class DataSourceAggregatedView extends React.Component<
     if (this.state.showError) {
       return <DataSourceErrorMenu application={this.props.application} />;
     }
-    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[] = [];
 
@@ -216,7 +196,12 @@ export class DataSourceAggregatedView extends React.Component<
       <>
         <EuiPopover
           id={'dataSourceSViewContextMenuPopover'}
-          button={button}
+          button={
+            <DataSourceMenuPopoverButton
+              className={'dataSourceAggregatedView'}
+              onClick={this.onDataSourcesClick.bind(this)}
+            />
+          }
           isOpen={this.state.isPopoverOpen}
           closePopover={this.closePopover.bind(this)}
           panelPaddingSize="none"