Refactor Rule Details page

x-pack/plugins/observability/public/hooks/use_get_rule_type_definition_from_rule_type.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { useLoadRuleTypes } from '@kbn/triggers-actions-ui-plugin/public';
+import { useGetFilteredRuleTypes } from './use_get_filtered_rule_types';
+
+interface UseGetRuleTypeDefinitionFromRuleTypeProps {
+  ruleTypeId: string | undefined;
+}
+
+export function useGetRuleTypeDefinitionFromRuleType({
+  ruleTypeId,
+}: UseGetRuleTypeDefinitionFromRuleTypeProps) {
+  const filteredRuleTypes = useGetFilteredRuleTypes();
+
+  const { ruleTypes } = useLoadRuleTypes({
+    filteredRuleTypes,
+  });
+
+  return ruleTypes.find(({ id }) => id === ruleTypeId);
+}

x-pack/plugins/observability/public/pages/rule_details/components/delete_modal_confirmation.tsx

@@ -6,115 +6,98 @@
  */
 
 import { EuiConfirmModal } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import { bulkDeleteRules } from '@kbn/triggers-actions-ui-plugin/public';
 import { i18n } from '@kbn/i18n';
-import type {
-  BulkOperationAttributes,
-  BulkOperationResponse,
-} from '@kbn/triggers-actions-ui-plugin/public';
 import { useKibana } from '../../../utils/kibana_react';
 
-export function DeleteModalConfirmation({
-  idsToDelete,
-  apiDeleteCall,
-  onDeleted,
-  onCancel,
-  onErrors,
-  singleTitle,
-  multipleTitle,
-  setIsLoadingState,
-}: {
-  idsToDelete: string[];
-  apiDeleteCall: ({ ids, http }: BulkOperationAttributes) => Promise<BulkOperationResponse>;
-  onDeleted: () => void;
+interface DeleteConfirmationPropsModal {
+  ruleIdToDelete: string | undefined;
+  title: string;
   onCancel: () => void;
-  onErrors: () => void;
-  singleTitle: string;
-  multipleTitle: string;
-  setIsLoadingState: (isLoading: boolean) => void;
-}) {
-  const [deleteModalFlyoutVisible, setDeleteModalVisibility] = useState<boolean>(false);
-
-  useEffect(() => {
-    setDeleteModalVisibility(idsToDelete.length > 0);
-  }, [idsToDelete]);
+  onDeleted: () => void;
+  onDeleting: () => void;
+}
 
+export function DeleteConfirmationModal({
+  ruleIdToDelete,
+  title,
+  onCancel,
+  onDeleted,
+  onDeleting,
+}: DeleteConfirmationPropsModal) {
   const {
     http,
     notifications: { toasts },
   } = useKibana().services;
-  const numIdsToDelete = idsToDelete.length;
-  if (!deleteModalFlyoutVisible) {
-    return null;
-  }
 
-  return (
+  const [isVisible, setIsVisible] = useState(Boolean(ruleIdToDelete));
+
+  return isVisible ? (
     <EuiConfirmModal
       buttonColor="danger"
       data-test-subj="deleteIdsConfirmation"
-      title={confirmButtonText(numIdsToDelete, singleTitle, multipleTitle)}
-      onCancel={() => {
-        setDeleteModalVisibility(false);
-        onCancel();
-      }}
+      title={i18n.translate('xpack.observability.rules.deleteConfirmationModal.descriptionText', {
+        defaultMessage: "You can't recover {title} after deleting.",
+        values: { title },
+      })}
+      cancelButtonText={i18n.translate(
+        'xpack.observability.rules.deleteConfirmationModal.cancelButtonLabel',
+        {
+          defaultMessage: 'Cancel',
+        }
+      )}
+      confirmButtonText={i18n.translate(
+        'xpack.observability.rules.deleteConfirmationModal.deleteButtonLabel',
+        {
+          defaultMessage: 'Delete {title}',
+          values: { title },
+        }
+      )}
+      onCancel={onCancel}
       onConfirm={async () => {
-        setDeleteModalVisibility(false);
-        setIsLoadingState(true);
-        const { total, errors } = await apiDeleteCall({ ids: idsToDelete, http });
-        setIsLoadingState(false);
+        if (ruleIdToDelete) {
+          setIsVisible(false);
 
-        const numErrors = errors.length;
-        const numSuccesses = total - numErrors;
+          onDeleting();
 
-        if (numSuccesses > 0) {
-          toasts.addSuccess(deleteSuccessText(numSuccesses, singleTitle, multipleTitle));
-        }
+          const { errors, rules } = await bulkDeleteRules({ ids: [ruleIdToDelete], http });
+
+          const hasSucceeded = Boolean(rules.length);
+          const hasErrored = Boolean(errors.length);
+
+          if (hasSucceeded) {
+            toasts.addSuccess(
+              i18n.translate(
+                'xpack.observability.rules.deleteConfirmationModal.successNotification.descriptionText',
+                {
+                  defaultMessage: 'Deleted {title}',
+                  values: { title },
+                }
+              )
+            );
+          }
+
+          if (hasErrored) {
+            toasts.addDanger(
+              i18n.translate(
+                'xpack.observability.rules.deleteConfirmationModal.errorNotification.descriptionText',
+                {
+                  defaultMessage: 'Failed to delete {title}',
+                  values: { title },
+                }
+              )
+            );
+          }
 
-        if (numErrors > 0) {
-          toasts.addDanger(deleteErrorText(numErrors, singleTitle, multipleTitle));
-          await onErrors();
+          onDeleted();
         }
-        await onDeleted();
       }}
-      cancelButtonText={cancelButtonText}
-      confirmButtonText={confirmButtonText(numIdsToDelete, singleTitle, multipleTitle)}
     >
-      {confirmModalText(numIdsToDelete, singleTitle, multipleTitle)}
+      {i18n.translate('xpack.observability.rules.deleteConfirmationModal.descriptionText', {
+        defaultMessage: "You can't recover {title} after deleting.",
+        values: { title },
+      })}
     </EuiConfirmModal>
-  );
+  ) : null;
 }
-
-const confirmModalText = (numIdsToDelete: number, singleTitle: string, multipleTitle: string) =>
-  i18n.translate('xpack.observability.rules.deleteSelectedIdsConfirmModal.descriptionText', {
-    defaultMessage:
-      "You can't recover {numIdsToDelete, plural, one {a deleted {singleTitle}} other {deleted {multipleTitle}}}.",
-    values: { numIdsToDelete, singleTitle, multipleTitle },
-  });
-
-const confirmButtonText = (numIdsToDelete: number, singleTitle: string, multipleTitle: string) =>
-  i18n.translate('xpack.observability.rules.deleteSelectedIdsConfirmModal.deleteButtonLabel', {
-    defaultMessage:
-      'Delete {numIdsToDelete, plural, one {{singleTitle}} other {# {multipleTitle}}} ',
-    values: { numIdsToDelete, singleTitle, multipleTitle },
-  });
-
-const cancelButtonText = i18n.translate(
-  'xpack.observability.rules.deleteSelectedIdsConfirmModal.cancelButtonLabel',
-  {
-    defaultMessage: 'Cancel',
-  }
-);
-
-const deleteSuccessText = (numSuccesses: number, singleTitle: string, multipleTitle: string) =>
-  i18n.translate('xpack.observability.rules.deleteSelectedIdsSuccessNotification.descriptionText', {
-    defaultMessage:
-      'Deleted {numSuccesses, number} {numSuccesses, plural, one {{singleTitle}} other {{multipleTitle}}}',
-    values: { numSuccesses, singleTitle, multipleTitle },
-  });
-
-const deleteErrorText = (numErrors: number, singleTitle: string, multipleTitle: string) =>
-  i18n.translate('xpack.observability.rules.deleteSelectedIdsErrorNotification.descriptionText', {
-    defaultMessage:
-      'Failed to delete {numErrors, number} {numErrors, plural, one {{singleTitle}} other {{multipleTitle}}}',
-    values: { numErrors, singleTitle, multipleTitle },
-  });

x-pack/plugins/observability/public/pages/rule_details/components/header_actions.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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 } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface HeaderActionsProps {
+  loading: boolean;
+
+  onDeleteRule: () => void;
+  onEditRule: () => void;
+}
+
+export function HeaderActions({ loading, onDeleteRule, onEditRule }: HeaderActionsProps) {
+  const [isRuleEditPopoverOpen, setIsRuleEditPopoverOpen] = useState(false);
+
+  const togglePopover = () => setIsRuleEditPopoverOpen(!isRuleEditPopoverOpen);
+
+  const handleClosePopover = () => setIsRuleEditPopoverOpen(false);
+
+  const handleEditRule = () => {
+    setIsRuleEditPopoverOpen(false);
+
+    onEditRule();
+  };
+
+  const handleRemoveRule = () => {
+    setIsRuleEditPopoverOpen(false);
+
+    onDeleteRule();
+  };
+
+  return (
+    <EuiFlexGroup direction="rowReverse" alignItems="flexStart">
+      <EuiFlexItem>
+        <EuiPopover
+          id="contextRuleEditMenu"
+          isOpen={isRuleEditPopoverOpen}
+          closePopover={handleClosePopover}
+          button={
+            <EuiButton
+              fill
+              iconSide="right"
+              onClick={togglePopover}
+              iconType="arrowDown"
+              data-test-subj="actions"
+            >
+              {i18n.translate('xpack.observability.ruleDetails.actionsButtonLabel', {
+                defaultMessage: 'Actions',
+              })}
+            </EuiButton>
+          }
+        >
+          <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="s">
+            <EuiButtonEmpty
+              data-test-subj="editRuleButton"
+              size="s"
+              iconType="pencil"
+              onClick={handleEditRule}
+            >
+              <EuiText size="s">
+                {i18n.translate('xpack.observability.ruleDetails.editRule', {
+                  defaultMessage: 'Edit rule',
+                })}
+              </EuiText>
+            </EuiButtonEmpty>
+            <EuiButtonEmpty
+              size="s"
+              iconType="trash"
+              color="danger"
+              onClick={handleRemoveRule}
+              data-test-subj="deleteRuleButton"
+            >
+              <EuiText size="s">
+                {i18n.translate('xpack.observability.ruleDetails.deleteRule', {
+                  defaultMessage: 'Delete rule',
+                })}
+              </EuiText>
+            </EuiButtonEmpty>
+          </EuiFlexGroup>
+        </EuiPopover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}