Refactor Rules Page

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

@@ -0,0 +1,15 @@
+/*
+ * 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 { useMemo } from 'react';
+import { usePluginContext } from './use_plugin_context';
+
+export function useGetFilteredRuleTypes() {
+  const { observabilityRuleTypeRegistry } = usePluginContext();
+
+  return useMemo(() => observabilityRuleTypeRegistry.list(), [observabilityRuleTypeRegistry]);
+}

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

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
+import React from 'react';
 import { mockCasesContract } from '@kbn/cases-plugin/public/mocks';
 
 const embeddableStartMock = {
@@ -26,13 +26,39 @@ const embeddableStartMock = {
 const triggersActionsUiStartMock = {
   createStart() {
     return {
-      getAddAlertFlyout: jest.fn(),
-      getAlertsSearchBar: jest.fn(),
-      getRuleStatusDropdown: jest.fn(),
-      getRuleTagBadge: jest.fn(),
-      getRuleStatusFilter: jest.fn(),
-      getRuleTagFilter: jest.fn(),
-      getRulesList: jest.fn(),
+      getAddAlertFlyout: jest.fn(() => (
+        <div data-test-subj="add-alerts-flyout">mocked component</div>
+      )),
+      getAlertsSearchBar: jest.fn(() => (
+        <div data-test-subj="alerts-search-bar">mocked component</div>
+      )),
+      getAlertsStateTable: jest.fn(() => (
+        <div data-test-subj="alerts-state-table">mocked component</div>
+      )),
+      getEditAlertFlyout: jest.fn(() => (
+        <div data-test-subj="edit-alert-flyout">mocked component</div>
+      )),
+      getRuleAlertsSummary: jest.fn(() => (
+        <div data-test-subj="rule-alerts-summary">mocked component</div>
+      )),
+      getRuleDefinition: jest.fn(() => (
+        <div data-test-subj="rule-definition">mocked component</div>
+      )),
+      getRuleEventLogList: jest.fn(() => (
+        <div data-test-subj="rule-event-log-list">mocked component</div>
+      )),
+      getRuleStatusDropdown: jest.fn(() => (
+        <div data-test-subj="rule-status-dropdown">mocked component</div>
+      )),
+      getRuleStatusPanel: jest.fn(() => (
+        <div data-test-subj="rule-status-panel">mocked component</div>
+      )),
+      getRuleTagBadge: jest.fn(() => <div data-test-subj="rule-tag-badge">mocked component</div>),
+      getRuleStatusFilter: jest.fn(() => (
+        <div data-test-subj="rule-status-filter">mocked component</div>
+      )),
+      getRuleTagFilter: jest.fn(() => <div data-test-subj="rule-tag-filter">mocked component</div>),
+      getRulesList: jest.fn(() => <div data-test-subj="rules-list">mocked component</div>),
       ruleTypeRegistry: {
         has: jest.fn(),
         register: jest.fn(),

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

@@ -6,11 +6,9 @@
  */
 
 import React from 'react';
-import { mountWithIntl, nextTick } from '@kbn/test-jest-helpers';
-import { act } from 'react-dom/test-utils';
-import { ReactWrapper } from 'enzyme';
+import { render } from '@testing-library/react';
 import { CoreStart } from '@kbn/core/public';
-import { ConfigSchema, ObservabilityPublicPluginsStart } from '../../plugin';
+import { ObservabilityPublicPluginsStart } from '../../plugin';
 import { RulesPage } from '.';
 import { kibanaStartMock } from '../../utils/kibana_react.mock';
 import * as pluginContext from '../../hooks/use_plugin_context';
@@ -34,20 +32,18 @@ jest.mock('@kbn/triggers-actions-ui-plugin/public', () => ({
   useLoadRuleTypes: jest.fn(),
 }));
 
-const config = {
-  unsafe: {
-    alertDetails: {
-      apm: { enabled: false },
-      logs: { enabled: false },
-      metrics: { enabled: false },
-      uptime: { enabled: false },
-    },
-  },
-} as ConfigSchema;
-
 jest.spyOn(pluginContext, 'usePluginContext').mockImplementation(() => ({
   appMountParameters: {} as AppMountParameters,
-  config,
+  config: {
+    unsafe: {
+      alertDetails: {
+        apm: { enabled: false },
+        logs: { enabled: false },
+        metrics: { enabled: false },
+        uptime: { enabled: false },
+      },
+    },
+  },
   observabilityRuleTypeRegistry: createObservabilityRuleTypeRegistryMock(),
   ObservabilityPageTemplate: KibanaPageTemplate,
   kibanaFeatures: [],
@@ -58,9 +54,8 @@ jest.spyOn(pluginContext, 'usePluginContext').mockImplementation(() => ({
 const { useLoadRuleTypes } = jest.requireMock('@kbn/triggers-actions-ui-plugin/public');
 
 describe('RulesPage with all capabilities', () => {
-  let wrapper: ReactWrapper<any>;
   async function setup() {
-    const mockedRuleTypeIndex = new Map(
+    const ruleTypeIndex = new Map(
       Object.entries({
         '1': {
           enabledInLicense: true,
@@ -79,6 +74,7 @@ describe('RulesPage with all capabilities', () => {
         },
       })
     );
+
     const ruleTypes = [
       {
         id: 'test_rule_type',
@@ -96,51 +92,34 @@ describe('RulesPage with all capabilities', () => {
         ruleTaskTimeout: '1m',
       },
     ];
+
     useLoadRuleTypes.mockReturnValue({
       ruleTypes,
-      ruleTypeIndex: mockedRuleTypeIndex,
-    });
-    wrapper = mountWithIntl(<RulesPage />);
-    await act(async () => {
-      await nextTick();
-      wrapper.update();
+      ruleTypeIndex,
     });
+
+    return render(<RulesPage />);
   }
 
-  it('renders table of rules', async () => {
-    await setup();
-    const getRulesList = mockUseKibanaReturnValue.services.triggersActionsUi.getRulesList;
-    expect(getRulesList).toHaveBeenCalled();
-    expect(getRulesList).toHaveBeenCalledWith(
-      expect.objectContaining({
-        showActionFilter: false,
-        showCreateRuleButton: false,
-        ruleDetailsRoute: 'alerts/rules/:ruleId',
-        filteredRuleTypes: ['ruleType1', 'ruleType2'],
-        rulesListKey: 'observability_rulesListColumns',
-        visibleColumns: [
-          'ruleName',
-          'ruleExecutionStatusLastDate',
-          'ruleSnoozeNotify',
-          'ruleExecutionStatus',
-          'ruleExecutionState',
-        ],
-      })
-    );
+  it('should render a page template', async () => {
+    const wrapper = await setup();
+    expect(wrapper.getByTestId('rulesPage')).toBeInTheDocument();
   });
 
-  it('renders a create rule button that is not disabled', async () => {
-    await setup();
-    expect(wrapper.find('[data-test-subj="createRuleButton"]').hostNodes().prop('disabled')).toBe(
-      false
-    );
+  it('should render a RuleList ', async () => {
+    const wrapper = await setup();
+    expect(wrapper.getByTestId('rules-list')).toBeInTheDocument();
+  });
+
+  it('renders a create rule button which is not disabled', async () => {
+    const wrapper = await setup();
+    expect(wrapper.getByTestId('createRuleButton')).not.toBeDisabled();
   });
 });
 
 describe('RulesPage with show only capability', () => {
-  let wrapper: ReactWrapper<any>;
   async function setup() {
-    const mockedRuleTypeIndex = new Map(
+    const ruleTypeIndex = new Map(
       Object.entries({
         '1': {
           enabledInLicense: true,
@@ -159,6 +138,7 @@ describe('RulesPage with show only capability', () => {
         },
       })
     );
+
     const ruleTypes = [
       {
         id: 'test_rule_type',
@@ -176,16 +156,13 @@ describe('RulesPage with show only capability', () => {
         ruleTaskTimeout: '1m',
       },
     ];
-    useLoadRuleTypes.mockReturnValue({ ruleTypes, ruleTypeIndex: mockedRuleTypeIndex });
+    useLoadRuleTypes.mockReturnValue({ ruleTypes, ruleTypeIndex });
 
-    wrapper = mountWithIntl(<RulesPage />);
+    return render(<RulesPage />);
   }
 
-  it('renders a create rule button that is disabled', async () => {
-    await setup();
-
-    expect(wrapper.find('[data-test-subj="createRuleButton"]').hostNodes().prop('disabled')).toBe(
-      true
-    );
+  it('renders a create rule button which is not disabled', async () => {
+    const wrapper = await setup();
+    expect(wrapper.getByTestId('createRuleButton')).toBeDisabled();
   });
 });