Refactor Rule Detail 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/hooks/use_is_rule_editable.test.ts

@@ -0,0 +1,137 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { Capabilities } from '@kbn/core-capabilities-common';
+import { Rule, RuleAction, RuleType, RuleTypeModel } from '@kbn/triggers-actions-ui-plugin/public';
+import { RecursiveReadonly } from '@kbn/utility-types';
+
+import { useIsRuleEditable, UseIsRuleEditableProps } from './use_is_rule_editable';
+import { TypeRegistry } from '@kbn/triggers-actions-ui-plugin/public/application/type_registry';
+
+const mockConsumer = 'mock-consumerId';
+const mockRuleTypeId = 'mock-ruleTypeId';
+
+const ruleTypeRegistry = new TypeRegistry<RuleTypeModel>();
+ruleTypeRegistry.register({
+  id: mockRuleTypeId,
+  requiresAppContext: false,
+  actions: [],
+} as unknown as RuleTypeModel);
+
+const renderUseIsRuleEditableHook = (props: UseIsRuleEditableProps) => {
+  return renderHook(() => useIsRuleEditable({ ...props }));
+};
+
+const capabilities = {
+  actions: {
+    execute: true,
+  },
+} as unknown as RecursiveReadonly<Capabilities>;
+
+const rule = {
+  consumer: mockConsumer,
+  actions: [],
+  ruleTypeId: mockRuleTypeId,
+} as unknown as Rule;
+
+const ruleType = {
+  authorizedConsumers: {
+    [mockConsumer]: {
+      all: true,
+    },
+  },
+} as unknown as RuleType;
+
+describe('useIsRuleEditable', () => {
+  it('should return false if there is no rule', () => {
+    const {
+      result: { current: isRuleEditable },
+    } = renderUseIsRuleEditableHook({
+      capabilities,
+      rule: undefined,
+      ruleType,
+      ruleTypeRegistry,
+    });
+
+    expect(isRuleEditable).toBe(false);
+  });
+
+  it('should return false if the authorized consumers object of the rule type does not contain the particular rule being passed', () => {
+    const {
+      result: { current: isRuleEditable },
+    } = renderUseIsRuleEditableHook({
+      capabilities,
+      rule,
+      ruleType: {
+        authorizedConsumers: {},
+      } as unknown as RuleType,
+      ruleTypeRegistry,
+    });
+    expect(isRuleEditable).toBe(false);
+  });
+
+  it('should return false if the authorized consumers object of the rule type has the id for the particular rule, but all is not set to true', () => {
+    const {
+      result: { current: isRuleEditable },
+    } = renderUseIsRuleEditableHook({
+      capabilities,
+      rule,
+      ruleType: {
+        authorizedConsumers: {
+          [mockConsumer]: {
+            all: false,
+          },
+        },
+      } as unknown as RuleType,
+      ruleTypeRegistry,
+    });
+    expect(isRuleEditable).toBe(false);
+  });
+
+  it('should return false if the rule has actions to perform but the execute capability is false ', () => {
+    const {
+      result: { current: isRuleEditable },
+    } = renderUseIsRuleEditableHook({
+      capabilities: {
+        actions: {
+          execute: false,
+        },
+      } as unknown as RecursiveReadonly<Capabilities>,
+      rule: {
+        ...rule,
+        actions: ['123'] as unknown as RuleAction[],
+      },
+      ruleType,
+      ruleTypeRegistry,
+    });
+    expect(isRuleEditable).toBe(false);
+  });
+
+  it('should return false if the rule is not registered in the rule registry', () => {
+    const {
+      result: { current: isRuleEditable },
+    } = renderUseIsRuleEditableHook({
+      capabilities,
+      rule,
+      ruleType,
+      ruleTypeRegistry: new TypeRegistry<RuleTypeModel>(),
+    });
+    expect(isRuleEditable).toBe(false);
+  });
+
+  it('it should return true if all conditions are met', () => {
+    const {
+      result: { current: isRuleEditable },
+    } = renderUseIsRuleEditableHook({
+      capabilities,
+      rule,
+      ruleType,
+      ruleTypeRegistry,
+    });
+    expect(isRuleEditable).toBe(true);
+  });
+});

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

@@ -0,0 +1,50 @@
+/*
+ * 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 { Capabilities } from '@kbn/core-capabilities-common';
+import { Rule, RuleType, RuleTypeModel } from '@kbn/triggers-actions-ui-plugin/public';
+import { TypeRegistry } from '@kbn/triggers-actions-ui-plugin/public/application/type_registry';
+import { RecursiveReadonly } from '@kbn/utility-types';
+
+export interface UseIsRuleEditableProps {
+  capabilities: RecursiveReadonly<Capabilities>;
+  rule: Rule | undefined;
+  ruleType: RuleType<string, string> | undefined;
+  ruleTypeRegistry: TypeRegistry<RuleTypeModel<any>>;
+}
+
+export function useIsRuleEditable({
+  capabilities,
+  rule,
+  ruleType,
+  ruleTypeRegistry,
+}: UseIsRuleEditableProps): boolean {
+  if (!rule) {
+    return false;
+  }
+
+  // If the authorized consumers object of the rule type does not contain the rule
+  // being passed, the rule is not editable
+  if (!ruleType?.authorizedConsumers[rule.consumer]?.all) {
+    return false;
+  }
+
+  //  If there are no capabilities to execute actions and the rule has 1 or more
+  // actions to perform, the rule is not editable.
+  if (!capabilities.actions?.execute && rule.actions.length !== 0) {
+    return false;
+  }
+
+  try {
+    // If the rule has been registered in the ruleTypeRegistry and requiresAppContext
+    // is set to false, it means the rule is editable.
+    // Wrapped in try-catch as ruleTypeRegistry will throw an Error if the rule is not registered
+    return ruleTypeRegistry.get(rule.ruleTypeId).requiresAppContext === false;
+  } catch (e) {
+    return false;
+  }
+}

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

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
 import { EuiLoadingSpinnerSize } from '@elastic/eui/src/components/loading/loading_spinner';
 
 interface Props {
@@ -18,7 +17,9 @@ export function CenterJustifiedSpinner({ size }: Props) {
   return (
     <EuiFlexGroup data-test-subj="centerJustifiedSpinner" justifyContent="center">
       <EuiFlexItem grow={false}>
-        <EuiLoadingSpinner size={size || 'xl'} />
+        <EuiSpacer size="xxl" />
+        <EuiLoadingSpinner size={size || 'xxl'} />
+        <EuiSpacer size="xxl" />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

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

@@ -0,0 +1,123 @@
+/*
+ * 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 { EuiConfirmModal } from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { HttpSetup } from '@kbn/core/public';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../utils/kibana_react';
+
+interface DeleteConfirmationPropsModal {
+  apiDeleteCall: ({
+    ids,
+    http,
+  }: {
+    ids: string[];
+    http: HttpSetup;
+  }) => Promise<{ successes: string[]; errors: string[] }>;
+  idToDelete: string | undefined;
+  title: string;
+  onCancel: () => void;
+  onDeleted: () => void;
+  onDeleting: () => void;
+  onErrors: () => void;
+}
+
+export function DeleteConfirmationModal({
+  apiDeleteCall,
+  idToDelete,
+  title,
+  onCancel,
+  onDeleted,
+  onDeleting,
+  onErrors,
+}: DeleteConfirmationPropsModal) {
+  const {
+    http,
+    notifications: { toasts },
+  } = useKibana().services;
+
+  const [deleteModalFlyoutVisible, setDeleteModalVisibility] = useState<boolean>(false);
+
+  useEffect(() => {
+    setDeleteModalVisibility(Boolean(idToDelete));
+  }, [idToDelete]);
+
+  if (!deleteModalFlyoutVisible) {
+    return null;
+  }
+
+  return (
+    <EuiConfirmModal
+      buttonColor="danger"
+      data-test-subj="deleteIdsConfirmation"
+      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={() => {
+        setDeleteModalVisibility(false);
+        onCancel();
+      }}
+      onConfirm={async () => {
+        if (idToDelete) {
+          setDeleteModalVisibility(false);
+          onDeleting();
+          const { successes, errors } = await apiDeleteCall({ ids: [idToDelete], http });
+
+          const hasSucceeded = Boolean(successes.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 },
+                }
+              )
+            );
+            onErrors();
+          }
+
+          onDeleted();
+        }
+      }}
+    >
+      {i18n.translate('xpack.observability.rules.deleteConfirmationModal.descriptionText', {
+        defaultMessage: "You can't recover {title} after deleting.",
+        values: { title },
+      })}
+    </EuiConfirmModal>
+  );
+}