[8.x] [Response Ops] [Rule Form] Add Show Request and Add Action scre…

…ens to flyout (#206154) (#207903) # Backport This will backport the following commits from `main` to `8.x`: - [[Response Ops] [Rule Form] Add Show Request and Add Action screens to flyout (#206154)](#206154)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Zacqary Adam Xeper <[email protected]>
elastic · Jan 22, 2025 · ae8be0d · ae8be0d
1 parent 14b5722
commit ae8be0d
Show file tree

Hide file tree

Showing 26 changed files with 1,124 additions and 647 deletions.
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/hooks/index.ts b/src/platform/packages/shared/response-ops/rule_form/src/hooks/index.ts
@@ -10,3 +10,4 @@
 export * from './use_rule_form_dispatch';
 export * from './use_rule_form_state';
 export * from './use_rule_form_steps';
+export * from './use_rule_form_screen_context';
diff --git a/...platform/packages/shared/response-ops/rule_form/src/hooks/use_rule_form_screen_context.ts b/...platform/packages/shared/response-ops/rule_form/src/hooks/use_rule_form_screen_context.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", 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 { useContext } from 'react';
+import { RuleFormScreenContext } from '../rule_form_screen_context';
+
+export const useRuleFormScreenContext = () => {
+  return useContext(RuleFormScreenContext);
+};
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/hooks/use_rule_form_steps.tsx b/src/platform/packages/shared/response-ops/rule_form/src/hooks/use_rule_form_steps.tsx
@@ -149,27 +149,15 @@ const useCommonRuleFormSteps = ({
         ? {
             title: RULE_FORM_PAGE_RULE_ACTIONS_TITLE,
             status: actionsStatus,
-            children: (
-              <>
-                <RuleActions />
-                <EuiSpacer />
-                <EuiHorizontalRule margin="none" />
-              </>
-            ),
+            children: <RuleActions />,
           }
         : null,
       [RuleFormStepId.DETAILS]: {
         title: shortTitles
           ? RULE_FORM_PAGE_RULE_DETAILS_TITLE_SHORT
           : RULE_FORM_PAGE_RULE_DETAILS_TITLE,
         status: ruleDetailsStatus,
-        children: (
-          <>
-            <RuleDetails />
-            <EuiSpacer />
-            <EuiHorizontalRule margin="none" />
-          </>
-        ),
+        children: <RuleDetails />,
       },
     }),
     [ruleDefinitionStatus, canReadConnectors, actionsStatus, ruleDetailsStatus, shortTitles]
@@ -210,7 +198,7 @@ export const useRuleFormSteps: () => RuleFormVerticalSteps = () => {
 
   const mappedSteps = useMemo(() => {
     return stepOrder
-      .map((stepId) => {
+      .map((stepId, index) => {
         const step = steps[stepId];
         return step
           ? {
@@ -227,6 +215,12 @@ export const useRuleFormSteps: () => RuleFormVerticalSteps = () => {
                   stepId={stepId}
                 >
                   {step.children}
+                  {index > 0 && (
+                    <>
+                      <EuiSpacer />
+                      <EuiHorizontalRule margin="none" />
+                    </>
+                  )}
                 </ReportOnBlur>
               ),
             }
@@ -246,8 +240,10 @@ interface RuleFormHorizontalSteps {
   hasNextStep: boolean;
   hasPreviousStep: boolean;
 }
-export const useRuleFormHorizontalSteps: () => RuleFormHorizontalSteps = () => {
-  const [currentStep, setCurrentStep] = useState<RuleFormStepId>(STEP_ORDER[0]);
+export const useRuleFormHorizontalSteps: (
+  initialStep?: RuleFormStepId
+) => RuleFormHorizontalSteps = (initialStep = STEP_ORDER[0]) => {
+  const [currentStep, setCurrentStep] = useState<RuleFormStepId>(initialStep);
   const [touchedSteps, setTouchedSteps] = useState<Record<RuleFormStepId, boolean>>(
     STEP_ORDER.reduce(
       (result, stepId) => ({ ...result, [stepId]: false }),

diff --git a/src/platform/packages/shared/response-ops/rule_form/src/request_code_block/index.ts b/src/platform/packages/shared/response-ops/rule_form/src/request_code_block/index.ts
@@ -0,0 +1,10 @@
+/*
+ * 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".
+ */
+
+export * from './request_code_block';
diff --git a/...form/packages/shared/response-ops/rule_form/src/request_code_block/request_code_block.tsx b/...form/packages/shared/response-ops/rule_form/src/request_code_block/request_code_block.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 { omit, pick } from 'lodash';
+import React, { useMemo } from 'react';
+import { EuiCodeBlock } from '@elastic/eui';
+import {
+  CreateRuleBody,
+  UPDATE_FIELDS_WITH_ACTIONS,
+  UpdateRuleBody,
+  transformCreateRuleBody,
+  transformUpdateRuleBody,
+} from '../common/apis';
+import { BASE_ALERTING_API_PATH } from '../constants';
+import { useRuleFormState } from '../hooks';
+import { SHOW_REQUEST_MODAL_ERROR } from '../translations';
+import { RuleFormData } from '../types';
+
+const stringifyBodyRequest = ({
+  formData,
+  isEdit,
+}: {
+  formData: RuleFormData;
+  isEdit: boolean;
+}): string => {
+  try {
+    const request = isEdit
+      ? transformUpdateRuleBody(pick(formData, UPDATE_FIELDS_WITH_ACTIONS) as UpdateRuleBody)
+      : transformCreateRuleBody(omit(formData, 'id') as CreateRuleBody);
+    return JSON.stringify(request, null, 2);
+  } catch {
+    return SHOW_REQUEST_MODAL_ERROR;
+  }
+};
+
+interface RequestCodeBlockProps {
+  isEdit: boolean;
+  'data-test-subj'?: string;
+}
+export const RequestCodeBlock = (props: RequestCodeBlockProps) => {
+  const { isEdit, 'data-test-subj': dataTestSubj } = props;
+  const { formData, id, multiConsumerSelection } = useRuleFormState();
+
+  const formattedRequest = useMemo(() => {
+    return stringifyBodyRequest({
+      formData: {
+        ...formData,
+        ...(multiConsumerSelection ? { consumer: multiConsumerSelection } : {}),
+      },
+      isEdit,
+    });
+  }, [formData, isEdit, multiConsumerSelection]);
+
+  return (
+    <EuiCodeBlock language="json" isCopyable data-test-subj={dataTestSubj}>
+      {`${isEdit ? 'PUT' : 'POST'} kbn:${BASE_ALERTING_API_PATH}/rule${
+        isEdit ? `/${id}` : ''
+      }\n${formattedRequest}`}
+    </EuiCodeBlock>
+  );
+};
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions.test.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions.test.tsx
@@ -28,6 +28,7 @@ const http = httpServiceMock.createStartContract();
 jest.mock('../hooks', () => ({
   useRuleFormState: jest.fn(),
   useRuleFormDispatch: jest.fn(),
+  useRuleFormScreenContext: jest.fn(),
 }));
 
 jest.mock('./rule_actions_system_actions_item', () => ({
@@ -94,7 +95,8 @@ const mockValidate = jest.fn().mockResolvedValue({
   errors: {},
 });
 
-const { useRuleFormState, useRuleFormDispatch } = jest.requireMock('../hooks');
+const { useRuleFormState, useRuleFormDispatch, useRuleFormScreenContext } =
+  jest.requireMock('../hooks');
 const { useLoadConnectors, useLoadConnectorTypes, useLoadRuleTypeAadTemplateField } =
   jest.requireMock('../common/hooks');
 
@@ -109,6 +111,7 @@ const mockActions = [getAction('1'), getAction('2')];
 const mockSystemActions = [getSystemAction('3')];
 
 const mockOnChange = jest.fn();
+const mockSetIsConnectorsScreenVisible = jest.fn();
 
 describe('ruleActions', () => {
   beforeEach(() => {
@@ -167,6 +170,9 @@ describe('ruleActions', () => {
       aadTemplateFields: [],
     });
     useRuleFormDispatch.mockReturnValue(mockOnChange);
+    useRuleFormScreenContext.mockReturnValue({
+      setIsConnectorsScreenVisible: mockSetIsConnectorsScreenVisible,
+    });
   });
 
   afterEach(() => {
@@ -216,29 +222,7 @@ describe('ruleActions', () => {
     render(<RuleActions />);
 
     await userEvent.click(screen.getByTestId('ruleActionsAddActionButton'));
-    expect(screen.getByText('RuleActionsConnectorsModal')).toBeInTheDocument();
-  });
-
-  test('should call onSelectConnector with the correct parameters', async () => {
-    render(<RuleActions />);
-
-    await userEvent.click(screen.getByTestId('ruleActionsAddActionButton'));
-    expect(screen.getByText('RuleActionsConnectorsModal')).toBeInTheDocument();
-
-    await userEvent.click(screen.getByText('select connector'));
-    expect(mockOnChange).toHaveBeenCalledWith({
-      payload: {
-        actionTypeId: 'actionType-1',
-        frequency: { notifyWhen: 'onActionGroupChange', summary: false, throttle: null },
-        group: 'test',
-        id: 'connector-1',
-        params: { key: 'value' },
-        uuid: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
-      },
-      type: 'addAction',
-    });
-
-    expect(screen.queryByText('RuleActionsConnectorsModal')).not.toBeInTheDocument();
+    expect(mockSetIsConnectorsScreenVisible).toHaveBeenCalledWith(true);
   });
 
   test('should use the rule producer ID if it is not a multi-consumer rule', async () => {

diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions.tsx
@@ -9,21 +9,17 @@
 
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiImage, EuiSpacer, EuiText } from '@elastic/eui';
 import { RuleSystemAction } from '@kbn/alerting-types';
-import { ActionConnector } from '@kbn/alerts-ui-shared';
 import React, { useCallback, useMemo, useState } from 'react';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
-import { v4 as uuidv4 } from 'uuid';
-import { RuleAction, RuleFormParamsErrors } from '../common/types';
-import { DEFAULT_FREQUENCY, MULTI_CONSUMER_RULE_TYPE_IDS } from '../constants';
-import { useRuleFormDispatch, useRuleFormState } from '../hooks';
+import { RuleAction } from '../common/types';
+import { MULTI_CONSUMER_RULE_TYPE_IDS } from '../constants';
+import { useRuleFormState, useRuleFormScreenContext } from '../hooks';
 import {
   ADD_ACTION_DESCRIPTION_TEXT,
   ADD_ACTION_HEADER,
   ADD_ACTION_OPTIONAL_TEXT,
   ADD_ACTION_TEXT,
 } from '../translations';
-import { getDefaultParams } from '../utils';
-import { RuleActionsConnectorsModal } from './rule_actions_connectors_modal';
 import { RuleActionsItem } from './rule_actions_item';
 import { RuleActionsSystemActionsItem } from './rule_actions_system_actions_item';
 
@@ -40,69 +36,19 @@ const useRuleActionsIllustration = () => {
 };
 
 export const RuleActions = () => {
-  const [isConnectorModalOpen, setIsConnectorModalOpen] = useState<boolean>(false);
   const ruleActionsIllustration = useRuleActionsIllustration();
+  const { setIsConnectorsScreenVisible } = useRuleFormScreenContext();
 
   const {
     formData: { actions, consumer },
-    plugins: { actionTypeRegistry },
     multiConsumerSelection,
     selectedRuleType,
     connectorTypes,
   } = useRuleFormState();
 
-  const dispatch = useRuleFormDispatch();
-
   const onModalOpen = useCallback(() => {
-    setIsConnectorModalOpen(true);
-  }, []);
-
-  const onModalClose = useCallback(() => {
-    setIsConnectorModalOpen(false);
-  }, []);
-
-  const onSelectConnector = useCallback(
-    async (connector: ActionConnector) => {
-      const { id, actionTypeId } = connector;
-      const uuid = uuidv4();
-      const group = selectedRuleType.defaultActionGroupId;
-      const actionTypeModel = actionTypeRegistry.get(actionTypeId);
-
-      const params =
-        getDefaultParams({
-          group,
-          ruleType: selectedRuleType,
-          actionTypeModel,
-        }) || {};
-
-      dispatch({
-        type: 'addAction',
-        payload: {
-          id,
-          actionTypeId,
-          uuid,
-          params,
-          group,
-          frequency: DEFAULT_FREQUENCY,
-        },
-      });
-
-      const res: { errors: RuleFormParamsErrors } = await actionTypeRegistry
-        .get(actionTypeId)
-        ?.validateParams(params);
-
-      dispatch({
-        type: 'setActionParamsError',
-        payload: {
-          uuid,
-          errors: res.errors,
-        },
-      });
-
-      onModalClose();
-    },
-    [dispatch, onModalClose, selectedRuleType, actionTypeRegistry]
-  );
+    setIsConnectorsScreenVisible(true);
+  }, [setIsConnectorsScreenVisible]);
 
   const producerId = useMemo(() => {
     if (MULTI_CONSUMER_RULE_TYPE_IDS.includes(selectedRuleType.id)) {
@@ -184,9 +130,6 @@ export const RuleActions = () => {
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {isConnectorModalOpen && (
-        <RuleActionsConnectorsModal onClose={onModalClose} onSelectConnector={onSelectConnector} />
-      )}
     </>
   );
 };