[Actionable Observability] Consume rules dropdown with fixed tests (#131108)

* consume shareable status dropdown from triggers_actions_ui plugin

* add getRuleStatusDropdown to triggersActionsUiStartMock

* remove unused interval

x-pack/plugins/observability/public/observability_public_plugins_start.mock.ts

@@ -36,6 +36,7 @@ const triggersActionsUiStartMock = {
   createStart() {
     return {
       getAddAlertFlyout: jest.fn(),
+      getRuleStatusDropdown: jest.fn(),
       getRuleTagBadge: jest.fn(),
       ruleTypeRegistry: {
         has: jest.fn(),

x-pack/plugins/observability/public/pages/rules/components/status.tsx

@@ -1,34 +0,0 @@
-/*
- * 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 React, { useMemo } from 'react';
-import { EuiBadge } from '@elastic/eui';
-import { noop } from 'lodash/fp';
-import { StatusProps } from '../types';
-import { statusMap } from '../config';
-import { RULES_CHANGE_STATUS } from '../translations';
-
-export function Status({ type, disabled, onClick }: StatusProps) {
-  const props = useMemo(
-    () => ({
-      color: statusMap[type].color,
-      ...(!disabled ? { onClick } : { onClick: noop }),
-      ...(!disabled ? { iconType: 'arrowDown', iconSide: 'right' as const } : {}),
-      ...(!disabled ? { iconOnClick: onClick } : { iconOnClick: noop }),
-    }),
-    [disabled, onClick, type]
-  );
-  return (
-    <EuiBadge
-      {...props}
-      onClickAriaLabel={RULES_CHANGE_STATUS}
-      iconOnClickAriaLabel={RULES_CHANGE_STATUS}
-    >
-      {statusMap[type].label}
-    </EuiBadge>
-  );
-}

x-pack/plugins/observability/public/pages/rules/components/status_context.tsx

@@ -1,103 +0,0 @@
-/*
- * 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 React, { useState, useCallback, useMemo } from 'react';
-import {
-  EuiPopover,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
-  EuiLoadingSpinner,
-} from '@elastic/eui';
-import { Status } from './status';
-import { RuleStatus, StatusContextProps } from '../types';
-import { statusMap } from '../config';
-
-export function StatusContext({
-  item,
-  disabled = false,
-  onStatusChanged,
-  enableRule,
-  disableRule,
-  muteRule,
-  unMuteRule,
-}: StatusContextProps) {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const togglePopover = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]);
-
-  let currentStatus: RuleStatus;
-  if (item.enabled) {
-    currentStatus = item.muteAll ? RuleStatus.snoozed : RuleStatus.enabled;
-  } else {
-    currentStatus = RuleStatus.disabled;
-  }
-  const popOverButton = useMemo(
-    () => <Status disabled={disabled} type={currentStatus} onClick={togglePopover} />,
-    [disabled, currentStatus, togglePopover]
-  );
-
-  const onContextMenuItemClick = useCallback(
-    async (status: RuleStatus) => {
-      togglePopover();
-      if (currentStatus !== status) {
-        setIsUpdating(true);
-
-        if (status === RuleStatus.enabled) {
-          await enableRule({ ...item, enabled: true });
-          if (item.muteAll) {
-            await unMuteRule({ ...item, muteAll: false });
-          }
-        } else if (status === RuleStatus.disabled) {
-          await disableRule({ ...item, enabled: false });
-        } else if (status === RuleStatus.snoozed) {
-          await muteRule({ ...item, muteAll: true });
-        }
-        setIsUpdating(false);
-        onStatusChanged(status);
-      }
-    },
-    [
-      item,
-      togglePopover,
-      enableRule,
-      disableRule,
-      muteRule,
-      unMuteRule,
-      currentStatus,
-      onStatusChanged,
-    ]
-  );
-
-  const panelItems = useMemo(
-    () =>
-      Object.values(RuleStatus).map((status: RuleStatus) => (
-        <EuiContextMenuItem
-          icon={status === currentStatus ? 'check' : 'empty'}
-          key={status}
-          onClick={() => onContextMenuItemClick(status)}
-          disabled={status === RuleStatus.snoozed && currentStatus === RuleStatus.disabled}
-        >
-          {statusMap[status].label}
-        </EuiContextMenuItem>
-      )),
-    [currentStatus, onContextMenuItemClick]
-  );
-
-  return isUpdating ? (
-    <EuiLoadingSpinner data-test-subj="enableSpinner" size="m" />
-  ) : (
-    <EuiPopover
-      button={popOverButton}
-      closePopover={() => setIsPopoverOpen(false)}
-      anchorPosition="downLeft"
-      isOpen={isPopoverOpen}
-      panelPaddingSize="none"
-    >
-      <EuiContextMenuPanel items={panelItems} />
-    </EuiPopover>
-  );
-}

x-pack/plugins/observability/public/pages/rules/index.tsx

@@ -25,9 +25,9 @@ import {
   RuleTableItem,
   enableRule,
   disableRule,
-  muteRule,
+  snoozeRule,
   useLoadRuleTypes,
-  unmuteRule,
+  unsnoozeRule,
 } from '@kbn/triggers-actions-ui-plugin/public';
 import { RuleExecutionStatus, ALERTS_FEATURE_ID } from '@kbn/alerting-plugin/common';
 import { usePluginContext } from '../../hooks/use_plugin_context';
@@ -38,7 +38,6 @@ import { RulesTable } from './components/rules_table';
 import { Name } from './components/name';
 import { LastResponseFilter } from './components/last_response_filter';
 import { TypeFilter } from './components/type_filter';
-import { StatusContext } from './components/status_context';
 import { ExecutionStatus } from './components/execution_status';
 import { LastRun } from './components/last_run';
 import { EditRuleFlyout } from './components/edit_rule_flyout';
@@ -211,17 +210,17 @@ export function RulesPage() {
         name: STATUS_COLUMN_TITLE,
         sortable: true,
         render: (_enabled: boolean, item: RuleTableItem) => {
-          return (
-            <StatusContext
-              disabled={!item.isEditable || !item.enabledInLicense}
-              item={item}
-              onStatusChanged={() => reload()}
-              enableRule={async () => await enableRule({ http, id: item.id })}
-              disableRule={async () => await disableRule({ http, id: item.id })}
-              muteRule={async () => await muteRule({ http, id: item.id })}
-              unMuteRule={async () => await unmuteRule({ http, id: item.id })}
-            />
-          );
+          return triggersActionsUi.getRuleStatusDropdown({
+            rule: item,
+            enableRule: async () => await enableRule({ http, id: item.id }),
+            disableRule: async () => await disableRule({ http, id: item.id }),
+            onRuleChanged: () => reload(),
+            isEditable: item.isEditable && isRuleTypeEditableInContext(item.ruleTypeId),
+            snoozeRule: async (snoozeEndTime: string | -1) => {
+              await snoozeRule({ http, id: item.id, snoozeEndTime });
+            },
+            unsnoozeRule: async () => await unsnoozeRule({ http, id: item.id }),
+          });
         },
       },
       {