From b349245c8141de6f4e38d1e4ac5fe2029817a016 Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <yuliia.naumenko@elastic.com>
Date: Tue, 6 Jul 2021 18:15:59 +0300
Subject: [PATCH] changed columns styles due to the mockup

---
 .../sections/alert_form/alert_edit.tsx        |   1 +
 .../components/alert_status_filter.tsx        |   4 +-
 .../alerts_list/components/alerts_list.scss   |  26 ++
 .../alerts_list/components/alerts_list.tsx    | 272 ++++++++++++++----
 .../components/collapsed_item_actions.scss    |   4 +-
 .../components/collapsed_item_actions_new.tsx | 148 ++++++++++
 6 files changed, 390 insertions(+), 65 deletions(-)
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions_new.tsx

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
index bf6f0ef43b8200..ad727566957dee 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
@@ -133,6 +133,7 @@ export const AlertEdit = ({
         aria-labelledby="flyoutAlertEditTitle"
         size="m"
         maxWidth={620}
+        ownFocus={false}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s" data-test-subj="editAlertFlyoutTitle">
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx
index 38343116825dda..aca111df97e34d 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx
@@ -95,13 +95,13 @@ export const AlertStatusFilter: React.FunctionComponent<AlertStatusFilterProps>
 export function getHealthColor(status: AlertExecutionStatuses) {
   switch (status) {
     case 'active':
-      return 'primary';
+      return 'success';
     case 'error':
       return 'danger';
     case 'ok':
       return 'subdued';
     case 'pending':
-      return 'success';
+      return 'accent';
     default:
       return 'warning';
   }
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss
index fda7d6aa0b6228..f45f0102285014 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss
@@ -5,3 +5,29 @@
     color: $euiColorDarkShade;
   }
 }
+
+.alertSidebarItem {
+  &:hover,
+  &:focus-within,
+  &[class*='-isActive'] {
+    .alertSidebarItem__action {
+      opacity: 1;
+    }
+  }
+}
+
+/**
+ * 1. Only visually hide the action, so that it's still accessible to screen readers.
+ * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
+ */
+.alertSidebarItem__action {
+  opacity: 0; /* 1 */
+
+  &.alertSidebarItem__mobile {
+    opacity: 1;
+  }
+
+  &:focus {
+    opacity: 1; /* 2 */
+  }
+}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
index 16a2b4fae8cbf1..cf41fe344919e4 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -31,15 +31,17 @@ import {
   EuiTableSortingType,
   EuiSwitch,
   EuiIcon,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 
 import { isEmpty } from 'lodash';
+import moment from 'moment';
 import { ActionType, Alert, AlertTableItem, AlertTypeIndex, Pagination } from '../../../../types';
-import { AlertAdd } from '../../alert_form';
+import { AlertAdd, AlertEdit } from '../../alert_form';
 import { BulkOperationPopover } from '../../common/components/bulk_operation_popover';
 import { AlertQuickEditButtonsWithApi as AlertQuickEditButtons } from '../../common/components/alert_quick_edit_buttons';
-import { CollapsedItemActionsWithApi as CollapsedItemActions } from './collapsed_item_actions';
+import { CollapsedItemActionsWithApi as CollapsedItemActions } from './collapsed_item_actions_new';
 import { TypeFilter } from './type_filter';
 import { ActionTypeFilter } from './action_type_filter';
 import { AlertStatusFilter, getHealthColor } from './alert_status_filter';
@@ -50,6 +52,8 @@ import {
   disableAlert,
   enableAlert,
   deleteAlerts,
+  unmuteAlert,
+  muteAlert,
 } from '../../../lib/alert_api';
 import { loadActionTypes } from '../../../lib/action_connector_api';
 import { hasExecuteActionsCapability } from '../../../lib/capabilities';
@@ -107,6 +111,9 @@ export const AlertsList: React.FunctionComponent = () => {
   const [alertStatusesFilter, setAlertStatusesFilter] = useState<string[]>([]);
   const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
   const [dismissAlertErrors, setDismissAlertErrors] = useState<boolean>(false);
+  const [editFlyoutVisible, setEditFlyoutVisibility] = useState<boolean>(false);
+  const [currentRuleToEdit, setCurrentRuleToEdit] = useState<AlertTableItem | null>(null);
+
   const [sort, setSort] = useState<EuiTableSortingType<AlertTableItem>['sort']>({
     field: 'name',
     direction: 'asc',
@@ -136,6 +143,10 @@ export const AlertsList: React.FunctionComponent = () => {
     totalItemCount: 0,
   });
   const [alertsToDelete, setAlertsToDelete] = useState<string[]>([]);
+  const onRuleEdit = (ruleItem: AlertTableItem) => {
+    setEditFlyoutVisibility(true);
+    setCurrentRuleToEdit(ruleItem);
+  };
 
   useEffect(() => {
     loadAlertsData();
@@ -174,15 +185,14 @@ export const AlertsList: React.FunctionComponent = () => {
     (async () => {
       try {
         const result = await loadActionTypes({ http });
-        setActionTypes(
-          result
-            .filter(
-              // TODO: Remove "DEFAULT_HIDDEN_ACTION_TYPES" when cases connector is available across Kibana.
-              // Issue: https://github.com/elastic/kibana/issues/82502.
-              ({ id }) => actionTypeRegistry.has(id) && !DEFAULT_HIDDEN_ACTION_TYPES.includes(id)
-            )
-            .sort((a, b) => a.name.localeCompare(b.name))
-        );
+        const sortedResult = result
+          .filter(
+            // TODO: Remove "DEFAULT_HIDDEN_ACTION_TYPES" when cases connector is available across Kibana.
+            // Issue: https://github.com/elastic/kibana/issues/82502.
+            ({ id }) => actionTypeRegistry.has(id) && !DEFAULT_HIDDEN_ACTION_TYPES.includes(id)
+          )
+          .sort((a, b) => a.name.localeCompare(b.name));
+        setActionTypes(sortedResult);
       } catch (e) {
         toasts.addDanger({
           title: i18n.translate(
@@ -325,31 +335,34 @@ export const AlertsList: React.FunctionComponent = () => {
   const alertsTableColumns = [
     {
       name: '',
-      width: '100px',
+      width: '120px',
       render(item: AlertTableItem) {
+        let isEnabled = !!item.enabled;
         return (
           <EuiSwitch
             name="disable"
             disabled={!item.isEditable || !item.enabledInLicense}
             compressed
-            checked={item.enabled}
+            checked={isEnabled}
             data-test-subj="disableSwitch"
             onChange={async () => {
-              const enabled = !item.enabled;
+              const enabled = item.enabled;
               asyncScheduler.schedule(async () => {
                 if (enabled) {
                   await disableAlert({ http, id: item.id });
+                  isEnabled = false;
                 } else {
                   await enableAlert({ http, id: item.id });
+                  isEnabled = true;
                 }
                 loadAlertsData();
               }, 10);
-              // setIsDisabled(!item.enabled);
             }}
             label={!item.enabled ? disabledLabel : enabledLabel}
           />
         );
       },
+      'data-test-subj': 'alertsTableCell-enabled',
     },
     {
       field: 'name',
@@ -359,7 +372,7 @@ export const AlertsList: React.FunctionComponent = () => {
       ),
       sortable: true,
       truncateText: true,
-      width: '35%',
+      width: '30%',
       'data-test-subj': 'alertsTableCell-name',
       render: (name: string, alert: AlertTableItem) => {
         const ruleType = alertTypesState.data.get(alert.alertTypeId);
@@ -399,12 +412,33 @@ export const AlertsList: React.FunctionComponent = () => {
       ),
       sortable: true,
       truncateText: false,
-      width: '150px',
+      width: '120px',
       'data-test-subj': 'alertsTableCell-status',
-      render: (executionStatus: AlertExecutionStatus, item: AlertTableItem) => {
+      render: (_executionStatus: AlertExecutionStatus, item: AlertTableItem) => {
         return renderAlertExecutionStatus(item.executionStatus, item);
       },
     },
+    {
+      field: 'lastUpdated',
+      width: '100px',
+      name: i18n.translate(
+        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.lastUpdatedTitle',
+        { defaultMessage: 'Last updated' }
+      ),
+      render: (_count: number, item: AlertTableItem) => {
+        const today = moment(Date.now());
+        const updatedAt = moment(item.updatedAt);
+        const lastUpdatedMin = today.diff(updatedAt, 'minutes');
+        const lastUpdatedSec = today.diff(updatedAt, 'seconds');
+        return (
+          <EuiText size="s" key={item.id}>
+            {lastUpdatedMin === 0 ? `${lastUpdatedSec}s ago` : `${lastUpdatedMin}m ago`}
+          </EuiText>
+        );
+      },
+      sortable: true,
+      'data-test-subj': 'alertsTableCell-lastUpdated',
+    },
     {
       field: 'alertType',
       name: i18n.translate(
@@ -413,6 +447,9 @@ export const AlertsList: React.FunctionComponent = () => {
       ),
       sortable: false,
       truncateText: true,
+      render: (_count: number, item: AlertTableItem) => (
+        <EuiBadge color="default">{item.alertType}</EuiBadge>
+      ),
       'data-test-subj': 'alertsTableCell-alertType',
     },
     {
@@ -423,64 +460,166 @@ export const AlertsList: React.FunctionComponent = () => {
       ),
       sortable: false,
       'data-test-subj': 'alertsTableCell-tagsText',
+      render: (_count: number, item: AlertTableItem) => (
+        <div className="eui-textTruncate" title={item.tagsText}>
+          {item.tagsText}
+        </div>
+      ),
     },
     {
-      field: 'schedule',
+      field: 'schedule.interval',
+      width: '15%',
       name: i18n.translate(
         'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.scheduleTitle',
         { defaultMessage: 'Schedule' }
       ),
-      render: (count: number, item: AlertTableItem) => {
+      render: (interval: number, item: AlertTableItem) => {
         return (
-          <>
-            <EuiIcon type="clock" />
-            <FormattedMessage
-              id="xpack.triggersActionsUI.sections.alertsList.fixLicenseLink"
-              defaultMessage="10m"
-            />
-          </>
-        );
-      },
-      sortable: false,
-      'data-test-subj': 'alertsTableCell-actionsCount',
-    },
-    {
-      field: 'actionsCount',
-      name: i18n.translate(
-        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsCount',
-        { defaultMessage: 'Actions' }
-      ),
-      render: (count: number, item: AlertTableItem) => {
-        return (
-          <EuiBadge color="hollow" key={item.id}>
-            {count}
-          </EuiBadge>
+          <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+            <EuiFlexItem>
+              <EuiText size="s">
+                <EuiIcon color="subdued" type="clock" />
+                &nbsp;
+                {interval}
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <div>
+                <EuiText
+                  size="s"
+                  title={i18n.translate(
+                    'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsCountTooltip',
+                    { defaultMessage: 'Number of actions attached to the rule' }
+                  )}
+                >
+                  <EuiIcon color="subdued" type="bolt" />
+                  &nbsp;
+                  {item.actionsCount}
+                </EuiText>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              {item.muteAll ? (
+                <div>
+                  <EuiToolTip
+                    position="bottom"
+                    content={
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.unmuteButtonTooltip"
+                        defaultMessage="Unmute"
+                      />
+                    }
+                  >
+                    <EuiButtonIcon
+                      color={'danger'}
+                      onClick={async () => {
+                        asyncScheduler.schedule(async () => {
+                          await unmuteAlert({ http, id: item.id });
+                          loadAlertsData();
+                        }, 10);
+                      }}
+                      iconType={'eyeClosed'}
+                      aria-label={'unmute'}
+                    />
+                  </EuiToolTip>
+                </div>
+              ) : (
+                <div className="alertSidebarItem">
+                  <EuiToolTip
+                    position="bottom"
+                    content={
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.muteButtonTooltip"
+                        defaultMessage="Mute"
+                      />
+                    }
+                  >
+                    <EuiButtonIcon
+                      color={'primary'}
+                      className="alertSidebarItem__action"
+                      onClick={async () => {
+                        asyncScheduler.schedule(async () => {
+                          await muteAlert({ http, id: item.id });
+                          loadAlertsData();
+                        }, 10);
+                      }}
+                      iconType={'eye'}
+                      aria-label={'mute'}
+                    />
+                  </EuiToolTip>
+                </div>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
         );
       },
       sortable: false,
-      'data-test-subj': 'alertsTableCell-actionsCount',
-    },
-    {
-      field: 'schedule.interval',
-      name: i18n.translate(
-        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.intervalTitle',
-        { defaultMessage: 'Runs every' }
-      ),
-      sortable: false,
       truncateText: false,
       'data-test-subj': 'alertsTableCell-interval',
     },
     {
       name: '',
-      width: '40px',
+      width: '10%',
       render(item: AlertTableItem) {
         return (
-          <CollapsedItemActions
-            key={item.id}
-            item={item}
-            onAlertChanged={() => loadAlertsData()}
-            setAlertsToDelete={setAlertsToDelete}
-          />
+          <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s">
+            <EuiFlexItem grow={false} className="alertSidebarItem">
+              <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+                <EuiFlexItem grow={false}>
+                  <EuiToolTip
+                    position="bottom"
+                    content={
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.editButtonTooltip"
+                        defaultMessage="Edit"
+                      />
+                    }
+                  >
+                    <EuiButtonIcon
+                      color={'primary'}
+                      className="alertSidebarItem__action"
+                      onClick={() => onRuleEdit(item)}
+                      iconType={'pencil'}
+                      aria-label={'mute'}
+                    />
+                  </EuiToolTip>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiToolTip
+                    position="bottom"
+                    content={
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.deleteButtonTooltip"
+                        defaultMessage="Delete"
+                      />
+                    }
+                  >
+                    <EuiButtonIcon
+                      color={'danger'}
+                      className="alertSidebarItem__action"
+                      onClick={async () => {
+                        asyncScheduler.schedule(async () => {
+                          await muteAlert({ http, id: item.id });
+                          loadAlertsData();
+                        }, 10);
+                      }}
+                      iconType={'trash'}
+                      aria-label={'mute'}
+                    />
+                  </EuiToolTip>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <CollapsedItemActions
+                key={item.id}
+                item={item}
+                onAlertChanged={() => loadAlertsData()}
+                setAlertsToDelete={setAlertsToDelete}
+                onEditAlert={() => onRuleEdit(item)}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
         );
       },
     },
@@ -683,7 +822,7 @@ export const AlertsList: React.FunctionComponent = () => {
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiHealth color="primary" data-test-subj="totalActiveAlertsCount">
+          <EuiHealth color="success" data-test-subj="totalActiveAlertsCount">
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertsList.totalStausesActiveDescription"
               defaultMessage="Active: {totalStausesActive}"
@@ -712,7 +851,7 @@ export const AlertsList: React.FunctionComponent = () => {
           </EuiHealth>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiHealth color="success" data-test-subj="totalPendingAlertsCount">
+          <EuiHealth color="accent" data-test-subj="totalPendingAlertsCount">
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertsList.totalStausesPendingDescription"
               defaultMessage="Pending: {totalStausesPending}"
@@ -864,6 +1003,17 @@ export const AlertsList: React.FunctionComponent = () => {
           onSave={loadAlertsData}
         />
       )}
+      {editFlyoutVisible && currentRuleToEdit && (
+        <AlertEdit
+          initialAlert={currentRuleToEdit}
+          onClose={() => {
+            setEditFlyoutVisibility(false);
+          }}
+          actionTypeRegistry={actionTypeRegistry}
+          alertTypeRegistry={alertTypeRegistry}
+          onSave={loadAlertsData}
+        />
+      )}
     </section>
   );
 };
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss
index 774d1566f2a635..0a75ff243ad20b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss
@@ -8,7 +8,7 @@
   padding: $euiSizeM;
 }
 
-.actCollapsedItemActions__delete {
+.actCollapsedItemActions {
   display: flex;
 
   .actCollapsedItemActions__deleteIcon {
@@ -16,7 +16,7 @@
     text-align: center;
   }
 
-  .actCollapsedItemActions__deleteLabel {
+  .actCollapsedItemActions__Label {
     padding-left: $euiSizeS;
     padding-top: $euiSizeXS * .5;
   }
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions_new.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions_new.tsx
new file mode 100644
index 00000000000000..dec1f7b90c3400
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions_new.tsx
@@ -0,0 +1,148 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { asyncScheduler } from 'rxjs';
+import React, { useEffect, useState } from 'react';
+import { EuiButtonIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+
+import { AlertTableItem } from '../../../../types';
+import {
+  ComponentOpts as BulkOperationsComponentOpts,
+  withBulkAlertOperations,
+} from '../../common/components/with_bulk_alert_api_operations';
+import './collapsed_item_actions.scss';
+
+export type ComponentOpts = {
+  item: AlertTableItem;
+  onAlertChanged: () => void;
+  setAlertsToDelete: React.Dispatch<React.SetStateAction<string[]>>;
+  onEditAlert: (item: AlertTableItem) => void;
+} & BulkOperationsComponentOpts;
+
+export const CollapsedItemActions: React.FunctionComponent<ComponentOpts> = ({
+  item,
+  onAlertChanged,
+  disableAlert,
+  enableAlert,
+  unmuteAlert,
+  muteAlert,
+  setAlertsToDelete,
+  onEditAlert,
+}: ComponentOpts) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(!item.enabled);
+  const [isMuted, setIsMuted] = useState<boolean>(item.muteAll);
+  useEffect(() => {
+    setIsDisabled(!item.enabled);
+    setIsMuted(item.muteAll);
+  }, [item.enabled, item.muteAll]);
+
+  const button = (
+    <EuiButtonIcon
+      disabled={!item.isEditable}
+      iconType="boxesHorizontal"
+      onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+      aria-label={i18n.translate(
+        'xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.popoverButtonTitle',
+        { defaultMessage: 'Actions' }
+      )}
+    />
+  );
+
+  const panels = [
+    {
+      id: 0,
+      hasFocus: false,
+      items: [
+        {
+          disabled: !(item.isEditable && !isDisabled) || !item.enabledInLicense,
+          'data-test-subj': 'muteSwitch',
+          onClick: async () => {
+            const muteAll = isMuted;
+            asyncScheduler.schedule(async () => {
+              if (muteAll) {
+                await unmuteAlert({ ...item, muteAll });
+              } else {
+                await muteAlert({ ...item, muteAll });
+              }
+              onAlertChanged();
+            }, 10);
+            setIsMuted(!isMuted);
+          },
+          name: isMuted
+            ? i18n.translate(
+                'xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.unmuteTitle',
+                { defaultMessage: 'Unmute' }
+              )
+            : i18n.translate(
+                'xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteTitle',
+                { defaultMessage: 'Mute' }
+              ),
+        },
+        {
+          disabled: !item.isEditable || !item.enabledInLicense,
+          'data-test-subj': 'disableSwitch',
+          onClick: async () => {
+            const enabled = !isDisabled;
+            asyncScheduler.schedule(async () => {
+              if (enabled) {
+                await disableAlert({ ...item, enabled });
+              } else {
+                await enableAlert({ ...item, enabled });
+              }
+              onAlertChanged();
+            }, 10);
+            setIsDisabled(!isDisabled);
+          },
+          name: isDisabled
+            ? i18n.translate(
+                'xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.enableTitle',
+                { defaultMessage: 'Enable' }
+              )
+            : i18n.translate(
+                'xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.disableTitle',
+                { defaultMessage: 'Disable' }
+              ),
+        },
+        {
+          disabled: !item.isEditable,
+          'data-test-subj': 'editAlert',
+          onClick: () => onEditAlert(item),
+          name: i18n.translate(
+            'xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.editTitle',
+            { defaultMessage: 'Edit rule' }
+          ),
+        },
+        {
+          disabled: !item.isEditable,
+          'data-test-subj': 'deleteAlert',
+          onClick: () => setAlertsToDelete([item.id]),
+          name: i18n.translate(
+            'xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.deleteTitle',
+            { defaultMessage: 'Delete rule' }
+          ),
+        },
+      ],
+    },
+  ];
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={() => setIsPopoverOpen(false)}
+      ownFocus
+      panelPaddingSize="none"
+      data-test-subj="collapsedItemActions"
+    >
+      <EuiContextMenu initialPanelId={0} panels={panels} />
+    </EuiPopover>
+  );
+};
+
+export const CollapsedItemActionsWithApi = withBulkAlertOperations(CollapsedItemActions);