Extract the button component for datasource picker to avoid duplicate…

… code (opensearch-project#6559) (opensearch-project#6645)

* 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>
(cherry picked from commit b9ac31e)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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"