Extract the button component for datasource picker to avoid duplicate…

… code (#6559) * Extract the button component for datasource picker to avoid duplicate code Signed-off-by: Yuanqi(Ella) Zhu <[email protected]> * Modify the name of popover button Signed-off-by: Yuanqi(Ella) Zhu <[email protected]> --------- Signed-off-by: Yuanqi(Ella) Zhu <[email protected]> (cherry picked from commit b9ac31e) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
opensearch-project · Apr 25, 2024 · e7ad74a · e7ad74a
1 parent bba8135
commit e7ad74a
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 324 deletions.
diff --git a/...nents/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap b/...nents/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
diff --git a/..._management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx b/..._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"