[Response Ops] [Rule Form] Add Show Request and Add Action screens to flyout

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';

src/platform/packages/shared/response-ops/rule_form/src/hooks/use_on_select_connector.ts

@@ -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 { ActionConnector } from '@kbn/alerts-ui-shared';
+import { useCallback } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { useRuleFormDispatch, useRuleFormState } from '.';
+import { RuleFormParamsErrors } from '../common/types';
+import { DEFAULT_FREQUENCY } from '../constants';
+import { getDefaultParams } from '../utils';
+
+export const useOnSelectConnector = ({ onClose }: { onClose: () => void }) => {
+  const {
+    plugins: { actionTypeRegistry },
+    selectedRuleType,
+  } = useRuleFormState();
+
+  const dispatch = useRuleFormDispatch();
+  return 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,
+        },
+      });
+
+      onClose();
+    },
+    [dispatch, onClose, selectedRuleType, actionTypeRegistry]
+  );
+};

src/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);
+};

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 }),

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';

src/platform/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>
+  );
+};

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 () => {