[8.x] [ResponseOps] [Rule Form] Move rule form steps to hook with pro…

…gress tracking (#205944) (#206346) # Backport This will backport the following commits from `main` to `8.x`: - [[ResponseOps] [Rule Form] Move rule form steps to hook with progress tracking (#205944)](#205944)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Zacqary Adam Xeper <[email protected]>
elastic · Jan 10, 2025 · 399a186 · 399a186
1 parent b305ce8
commit 399a186
Show file tree

Hide file tree

Showing 6 changed files with 534 additions and 86 deletions.
diff --git a/packages/response-ops/rule_form/src/constants/index.ts b/packages/response-ops/rule_form/src/constants/index.ts
@@ -74,3 +74,9 @@ export const DEFAULT_VALID_CONSUMERS: RuleCreationValidConsumer[] = [
 
 export const CREATE_RULE_ROUTE = '/rule/create/:ruleTypeId' as const;
 export const EDIT_RULE_ROUTE = '/rule/edit/:id' as const;
+
+export enum RuleFormStepId {
+  DEFINITION = 'rule-definition',
+  ACTIONS = 'rule-actions',
+  DETAILS = 'rule-details',
+}
diff --git a/packages/response-ops/rule_form/src/hooks/index.ts b/packages/response-ops/rule_form/src/hooks/index.ts
@@ -9,3 +9,4 @@
 
 export * from './use_rule_form_dispatch';
 export * from './use_rule_form_state';
+export * from './use_rule_form_steps';
diff --git a/packages/response-ops/rule_form/src/hooks/use_rule_form_steps.test.tsx b/packages/response-ops/rule_form/src/hooks/use_rule_form_steps.test.tsx
@@ -0,0 +1,196 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { useRuleFormHorizontalSteps, useRuleFormSteps } from './use_rule_form_steps';
+import {
+  RULE_FORM_PAGE_RULE_DEFINITION_TITLE,
+  RULE_FORM_PAGE_RULE_ACTIONS_TITLE,
+  RULE_FORM_PAGE_RULE_DETAILS_TITLE,
+} from '../translations';
+import { RuleFormData } from '../types';
+import { EuiSteps, EuiStepsHorizontal } from '@elastic/eui';
+
+jest.mock('../rule_definition', () => ({
+  RuleDefinition: () => <div />,
+}));
+
+jest.mock('../rule_actions', () => ({
+  RuleActions: () => <div />,
+}));
+
+jest.mock('../rule_details', () => ({
+  RuleDetails: () => <div />,
+}));
+
+jest.mock('./use_rule_form_state', () => ({
+  useRuleFormState: jest.fn(),
+}));
+
+const { useRuleFormState } = jest.requireMock('./use_rule_form_state');
+
+const navigateToUrl = jest.fn();
+
+const formDataMock: RuleFormData = {
+  params: {
+    aggType: 'count',
+    termSize: 5,
+    thresholdComparator: '>',
+    timeWindowSize: 5,
+    timeWindowUnit: 'm',
+    groupBy: 'all',
+    threshold: [1000],
+    index: ['.kibana'],
+    timeField: 'alert.executionStatus.lastExecutionDate',
+  },
+  actions: [],
+  consumer: 'stackAlerts',
+  schedule: { interval: '1m' },
+  tags: [],
+  name: 'test',
+  notifyWhen: 'onActionGroupChange',
+  alertDelay: {
+    active: 10,
+  },
+};
+
+const ruleFormStateMock = {
+  plugins: {
+    application: {
+      navigateToUrl,
+      capabilities: {
+        actions: {
+          show: true,
+          save: true,
+          execute: true,
+        },
+      },
+    },
+  },
+  baseErrors: {},
+  paramsErrors: {},
+  multiConsumerSelection: 'logs',
+  formData: formDataMock,
+  connectors: [],
+  connectorTypes: [],
+  aadTemplateFields: [],
+};
+
+describe('useRuleFormSteps', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders correctly', () => {
+    useRuleFormState.mockReturnValue(ruleFormStateMock);
+
+    const TestComponent = () => {
+      const { steps } = useRuleFormSteps();
+
+      return <EuiSteps steps={steps} />;
+    };
+
+    render(<TestComponent />);
+
+    expect(screen.getByText(RULE_FORM_PAGE_RULE_DEFINITION_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(RULE_FORM_PAGE_RULE_ACTIONS_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(RULE_FORM_PAGE_RULE_DETAILS_TITLE)).toBeInTheDocument();
+  });
+
+  test('renders initial errors as incomplete, then danger when the corresponding step blurs', async () => {
+    useRuleFormState.mockReturnValue({
+      ...ruleFormStateMock,
+      baseErrors: {
+        interval: ['Interval is required'],
+        alertDelay: ['Alert delay is required'],
+      },
+    });
+
+    const TestComponent = () => {
+      const { steps } = useRuleFormSteps();
+
+      return <EuiSteps steps={steps} />;
+    };
+
+    render(<TestComponent />);
+
+    // Use screen reader text for testing
+    expect(await screen.getByText('Step 1 is incomplete')).toBeInTheDocument();
+    const step1 = screen.getByTestId('ruleFormStep-rule-definition-reportOnBlur');
+    await fireEvent.blur(step1!);
+    expect(await screen.getByText('Step 1 has errors')).toBeInTheDocument();
+  });
+});
+
+describe('useRuleFormHorizontalSteps', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders correctly', () => {
+    useRuleFormState.mockReturnValue(ruleFormStateMock);
+
+    const TestComponent = () => {
+      const { steps } = useRuleFormHorizontalSteps();
+
+      return <EuiStepsHorizontal steps={steps} />;
+    };
+
+    render(<TestComponent />);
+
+    expect(screen.getByText(RULE_FORM_PAGE_RULE_DEFINITION_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(RULE_FORM_PAGE_RULE_ACTIONS_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(RULE_FORM_PAGE_RULE_DETAILS_TITLE)).toBeInTheDocument();
+  });
+
+  test('tracks current step successfully', async () => {
+    useRuleFormState.mockReturnValue(ruleFormStateMock);
+
+    const TestComponent = () => {
+      const { steps, goToNextStep, goToPreviousStep } = useRuleFormHorizontalSteps();
+
+      return (
+        <>
+          <EuiStepsHorizontal steps={steps} />
+          <button onClick={goToNextStep}>Next</button>
+          <button onClick={goToPreviousStep}>Previous</button>
+        </>
+      );
+    };
+
+    render(<TestComponent />);
+
+    expect(await screen.getByText('Current step is 1')).toBeInTheDocument();
+
+    const nextButton = screen.getByText('Next');
+    const previousButton = screen.getByText('Previous');
+
+    fireEvent.click(nextButton);
+    fireEvent.click(nextButton);
+
+    expect(await screen.getByText('Current step is 3')).toBeInTheDocument();
+
+    fireEvent.click(nextButton);
+
+    expect(await screen.getByText('Current step is 3')).toBeInTheDocument();
+
+    fireEvent.click(previousButton);
+
+    expect(await screen.getByText('Current step is 2')).toBeInTheDocument();
+
+    fireEvent.click(previousButton);
+
+    expect(await screen.getByText('Current step is 1')).toBeInTheDocument();
+
+    fireEvent.click(previousButton);
+
+    expect(await screen.getByText('Current step is 1')).toBeInTheDocument();
+  });
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,4 @@

		export * from './use_rule_form_dispatch';
		export * from './use_rule_form_state';
		export * from './use_rule_form_steps';