Revert "consume shareable status dropdown from triggers_actions_ui plugin (#130656)"

This reverts commit 1a1adb9e35.

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

@@ -0,0 +1,34 @@
+/*
+ * 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

@@ -0,0 +1,103 @@
+/*
+ * 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,
-  snoozeRule,
+  muteRule,
   useLoadRuleTypes,
-  unsnoozeRule,
+  unmuteRule,
 } 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,6 +38,7 @@ 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';
@@ -192,17 +193,17 @@ export function RulesPage() {
         name: STATUS_COLUMN_TITLE,
         sortable: true,
         render: (_enabled: boolean, item: RuleTableItem) => {
-          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, interval: string | null) => {
-              await snoozeRule({ http, id: item.id, snoozeEndTime });
-            },
-            unsnoozeRule: async () => await unsnoozeRule({ http, id: item.id }),
-          });
+          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 })}
+            />
+          );
         },
       },
       {