From 78e7f9df44dfc140b798e27f634da1b2948e5329 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 16 Apr 2020 12:59:57 -0700
Subject: [PATCH] going back to EuiButtonEmpty to be able to use isLoading

---
 .../components/alert_quick_edit_buttons.scss  |   4 -
 .../components/alert_quick_edit_buttons.tsx   | 127 ++++++++++--------
 2 files changed, 68 insertions(+), 63 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss
index 6535a044e0277..72de1d58488ed 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss
@@ -1,7 +1,3 @@
 .actBulkActionPopover__deleteAll {
   color: $euiColorDanger;
-
-  .euiContextMenu__itemLayout {
-    align-items: baseline;
-  }
 }
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx
index 361452acade67..149ebb9f931f5 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx
@@ -5,9 +5,9 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import React, { useState } from 'react';
+import React, { useState, Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 
 import { Alert } from '../../../../types';
 import { useAppDependencies } from '../../../app_context';
@@ -148,74 +148,83 @@ export const AlertQuickEditButtons: React.FunctionComponent<ComponentOpts> = ({
   }
 
   return (
-    <EuiContextMenuPanel hasFocus={false}>
+    <EuiFlexGroup direction="column" gutterSize="none">
       {!allAlertsMuted && (
-        <EuiContextMenuItem
-          onClick={onmMuteAllClick}
-          isLoading={isMutingAlerts}
-          isDisabled={isPerformingAction}
-          data-test-subj="muteAll"
-        >
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.muteAllTitle"
-            defaultMessage="Mute"
-          />
-        </EuiContextMenuItem>
+        <EuiFlexItem>
+          <EuiButtonEmpty
+            onClick={onmMuteAllClick}
+            isLoading={isMutingAlerts}
+            isDisabled={isPerformingAction}
+            data-test-subj="muteAll"
+          >
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.muteAllTitle"
+              defaultMessage="Mute"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
       )}
       {allAlertsMuted && (
-        <EuiContextMenuItem
-          onClick={onUnmuteAllClick}
-          isLoading={isUnmutingAlerts}
-          isDisabled={isPerformingAction}
-          data-test-subj="unmuteAll"
-        >
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.unmuteAllTitle"
-            defaultMessage="Unmute"
-          />
-        </EuiContextMenuItem>
+        <EuiFlexItem>
+          <EuiButtonEmpty
+            onClick={onUnmuteAllClick}
+            isLoading={isUnmutingAlerts}
+            isDisabled={isPerformingAction}
+            data-test-subj="unmuteAll"
+          >
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.unmuteAllTitle"
+              defaultMessage="Unmute"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
       )}
       {allAlertsDisabled && (
-        <EuiContextMenuItem
-          onClick={onEnableAllClick}
-          isLoading={isEnablingAlerts}
-          isDisabled={isPerformingAction}
-          data-test-subj="enableAll"
-        >
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.enableAllTitle"
-            defaultMessage="Enable"
-          />
-        </EuiContextMenuItem>
+        <EuiFlexItem>
+          <EuiButtonEmpty
+            onClick={onEnableAllClick}
+            isLoading={isEnablingAlerts}
+            isDisabled={isPerformingAction}
+            data-test-subj="enableAll"
+          >
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.enableAllTitle"
+              defaultMessage="Enable"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
       )}
       {!allAlertsDisabled && (
-        <EuiContextMenuItem
-          onClick={onDisableAllClick}
-          isLoading={isDisablingAlerts}
+        <EuiFlexItem>
+          <EuiButtonEmpty
+            onClick={onDisableAllClick}
+            isLoading={isDisablingAlerts}
+            isDisabled={isPerformingAction}
+            data-test-subj="disableAll"
+          >
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.disableAllTitle"
+              defaultMessage="Disable"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem>
+        <EuiButtonEmpty
+          onClick={deleteSelectedItems}
+          isLoading={isDeletingAlerts}
+          icon="trash"
           isDisabled={isPerformingAction}
-          data-test-subj="disableAll"
+          data-test-subj="deleteAll"
+          className="actBulkActionPopover__deleteAll"
         >
           <FormattedMessage
-            id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.disableAllTitle"
-            defaultMessage="Disable"
+            id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.deleteAllTitle"
+            defaultMessage="Delete"
           />
-        </EuiContextMenuItem>
-      )}
-
-      <EuiContextMenuItem
-        onClick={deleteSelectedItems}
-        isLoading={isDeletingAlerts}
-        icon="trash"
-        isDisabled={isPerformingAction}
-        data-test-subj="deleteAll"
-        className="actBulkActionPopover__deleteAll"
-      >
-        <FormattedMessage
-          id="xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.deleteAllTitle"
-          defaultMessage="Delete"
-        />
-      </EuiContextMenuItem>
-    </EuiContextMenuPanel>
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };