[SIEM][Detection Engine] Add validation for Rule Actions

x-pack/legacy/plugins/siem/public/mock/test_providers.tsx

@@ -17,6 +17,7 @@ import { Store } from 'redux';
 import { BehaviorSubject } from 'rxjs';
 import { ThemeProvider } from 'styled-components';
 
+import { FieldHook, useForm } from '../shared_imports';
 import { createStore, State } from '../store';
 import { mockGlobalState } from './global_state';
 import { createKibanaContextProviderMock } from './kibana_react';
@@ -91,3 +92,29 @@ const TestProviderWithoutDragAndDropComponent: React.FC<Props> = ({
 );
 
 export const TestProviderWithoutDragAndDrop = React.memo(TestProviderWithoutDragAndDropComponent);
+
+export const useFormFieldMock = (options?: Partial<FieldHook>): FieldHook => {
+  const { form } = useForm();
+
+  return {
+    path: 'path',
+    type: 'type',
+    value: [],
+    isPristine: false,
+    isValidating: false,
+    isValidated: false,
+    isChangingValue: false,
+    form,
+    errors: [],
+    isValid: true,
+    getErrorsMessages: jest.fn(),
+    onChange: jest.fn(),
+    setValue: jest.fn(),
+    setErrors: jest.fn(),
+    clearErrors: jest.fn(),
+    validate: jest.fn(),
+    reset: jest.fn(),
+    __serializeOutput: jest.fn(),
+    ...options,
+  };
+};

x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/index.test.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { RuleActionsField } from './index';
+import { useKibana } from '../../../../../lib/kibana';
+import { useFormFieldMock } from '../../../../../mock';
+jest.mock('../../../../../lib/kibana');
+
+describe('RuleActionsField', () => {
+  it('should not render ActionForm is no actions are supported', () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        triggers_actions_ui: {
+          actionTypeRegistry: {},
+        },
+      },
+    });
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return <RuleActionsField euiFieldProps={{ options: [] }} field={field} />;
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('ActionForm')).toHaveLength(0);
+  });
+});

x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/index.tsx

@@ -4,8 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import { isEmpty } from 'lodash/fp';
+import { EuiSpacer, EuiCallOut } from '@elastic/eui';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import deepMerge from 'deepmerge';
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
 
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { loadActionTypes } from '../../../../../../../../../plugins/triggers_actions_ui/public/application/lib/action_connector_api';
@@ -17,14 +21,22 @@ import {
 import { AlertAction } from '../../../../../../../../../plugins/alerting/common';
 import { useKibana } from '../../../../../lib/kibana';
 import { NOTIFICATION_SUPPORTED_ACTION_TYPES_IDS } from '../../../../../../common/constants';
+import { FORM_ERRORS_TITLE } from './translations';
 
 type ThrottleSelectField = typeof SelectField;
 
 const DEFAULT_ACTION_GROUP_ID = 'default';
 const DEFAULT_ACTION_MESSAGE =
   'Rule {{context.rule.name}} generated {{state.signals_count}} signals';
 
+const FieldErrorsContainer = styled.div`
+  p {
+    margin-bottom: 0;
+  }
+`;
+
 export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables }) => {
+  const [fieldErrors, setFieldErrors] = useState<string | null>(null);
   const [supportedActionTypes, setSupportedActionTypes] = useState<ActionType[] | undefined>();
   const {
     http,
@@ -66,21 +78,60 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
     })();
   }, []);
 
+  useEffect(() => {
+    if (field.form.isSubmitting) {
+      return setFieldErrors(null);
+    }
+    if (
+      field.form.isSubmitted &&
+      !field.form.isSubmitting &&
+      field.form.isValid === false &&
+      field.errors.length
+    ) {
+      const errorsString = field.errors.map(({ message }) => message).join('\n');
+      return setFieldErrors(errorsString);
+    }
+  }, [
+    field.form.isSubmitted,
+    field.form.isSubmitting,
+    field.isChangingValue,
+    field.form.isValid,
+    field.errors,
+    setFieldErrors,
+  ]);
+
+  const actions: AlertAction[] = useMemo(
+    () => (!isEmpty(field.value) ? (field.value as AlertAction[]) : []),
+    [field.value]
+  );
+
   if (!supportedActionTypes) return <></>;
 
   return (
-    <ActionForm
-      actions={field.value as AlertAction[]}
-      messageVariables={messageVariables}
-      defaultActionGroupId={DEFAULT_ACTION_GROUP_ID}
-      setActionIdByIndex={setActionIdByIndex}
-      setAlertProperty={setAlertProperty}
-      setActionParamsProperty={setActionParamsProperty}
-      http={http}
-      actionTypeRegistry={actionTypeRegistry}
-      actionTypes={supportedActionTypes}
-      defaultActionMessage={DEFAULT_ACTION_MESSAGE}
-      toastNotifications={notifications.toasts}
-    />
+    <>
+      {fieldErrors ? (
+        <>
+          <FieldErrorsContainer>
+            <EuiCallOut title={FORM_ERRORS_TITLE} color="danger" iconType="alert">
+              <ReactMarkdown source={fieldErrors} />
+            </EuiCallOut>
+          </FieldErrorsContainer>
+          <EuiSpacer />
+        </>
+      ) : null}
+      <ActionForm
+        actions={actions}
+        messageVariables={messageVariables}
+        defaultActionGroupId={DEFAULT_ACTION_GROUP_ID}
+        setActionIdByIndex={setActionIdByIndex}
+        setAlertProperty={setAlertProperty}
+        setActionParamsProperty={setActionParamsProperty}
+        http={http}
+        actionTypeRegistry={actionTypeRegistry}
+        actionTypes={supportedActionTypes}
+        defaultActionMessage={DEFAULT_ACTION_MESSAGE}
+        toastNotifications={notifications.toasts}
+      />
+    </>
   );
 };

x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/translations.tsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const FORM_ERRORS_TITLE = i18n.translate(
+  'xpack.siem.detectionEngine.createRule.ruleActionsField.ruleActionsFormErrorsTitle',
+  {
+    defaultMessage: 'Please fix issues listed below',
+  }
+);

x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/index.tsx

@@ -4,7 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiHorizontalRule, EuiFlexGroup, EuiFlexItem, EuiButton, EuiSpacer } from '@elastic/eui';
+import {
+  EuiHorizontalRule,
+  EuiForm,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiSpacer,
+} from '@elastic/eui';
+import { findIndex } from 'lodash/fp';
 import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import deepEqual from 'fast-deep-equal';
 
@@ -16,7 +24,7 @@ import { StepContentWrapper } from '../step_content_wrapper';
 import { ThrottleSelectField, THROTTLE_OPTIONS } from '../throttle_select_field';
 import { RuleActionsField } from '../rule_actions_field';
 import { useKibana } from '../../../../../lib/kibana';
-import { schema } from './schema';
+import { getSchema } from './schema';
 import * as I18n from './translations';
 
 interface StepRuleActionsProps extends RuleStepProps {
@@ -34,6 +42,15 @@ const stepActionsDefaultValue = {
 
 const GhostFormField = () => <></>;
 
+const getThrottleOptions = (throttle?: string | null) => {
+  // Add support for throttle options set by the API
+  if (throttle && findIndex(['value', throttle], THROTTLE_OPTIONS) < 0) {
+    return [...THROTTLE_OPTIONS, { value: throttle, text: throttle }];
+  }
+
+  return THROTTLE_OPTIONS;
+};
+
 const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
   addPadding = false,
   defaultValues,
@@ -46,8 +63,12 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
 }) => {
   const [myStepData, setMyStepData] = useState<ActionsStepRule>(stepActionsDefaultValue);
   const {
-    services: { application },
+    services: {
+      application,
+      triggers_actions_ui: { actionTypeRegistry },
+    },
   } = useKibana();
+  const schema = useMemo(() => getSchema({ actionTypeRegistry }), [actionTypeRegistry]);
 
   const { form } = useForm({
     defaultValue: myStepData,
@@ -96,6 +117,12 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
     setMyStepData,
   ]);
 
+  const throttleOptions = useMemo(() => {
+    const throttle = myStepData.throttle;
+
+    return getThrottleOptions(throttle);
+  }, [myStepData]);
+
   const throttleFieldComponentProps = useMemo(
     () => ({
       idAria: 'detectionEngineStepRuleActionsThrottle',
@@ -104,7 +131,7 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
       hasNoInitialSelection: false,
       handleChange: updateThrottle,
       euiFieldProps: {
-        options: THROTTLE_OPTIONS,
+        options: throttleOptions,
       },
     }),
     [isLoading, updateThrottle]
@@ -118,30 +145,39 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
     <>
       <StepContentWrapper addPadding={!isUpdateView}>
         <Form form={form} data-test-subj="stepRuleActions">
-          <UseField
-            path="throttle"
-            component={ThrottleSelectField}
-            componentProps={throttleFieldComponentProps}
-          />
-          {myStepData.throttle !== stepActionsDefaultValue.throttle && (
-            <>
-              <EuiSpacer />
+          <EuiForm>
+            <UseField
+              path="throttle"
+              component={ThrottleSelectField}
+              componentProps={throttleFieldComponentProps}
+            />
+            {myStepData.throttle !== stepActionsDefaultValue.throttle ? (
+              <>
+                <EuiSpacer />
+
+                <UseField
+                  path="actions"
+                  defaultValue={myStepData.actions}
+                  component={RuleActionsField}
+                  componentProps={{
+                    messageVariables: actionMessageParams,
+                  }}
+                />
+                <UseField
+                  path="kibanaSiemAppUrl"
+                  defaultValue={kibanaAbsoluteUrl}
+                  component={GhostFormField}
+                />
+              </>
+            ) : (
               <UseField
                 path="actions"
                 defaultValue={myStepData.actions}
-                component={RuleActionsField}
-                componentProps={{
-                  messageVariables: actionMessageParams,
-                }}
-              />
-              <UseField
-                path="kibanaSiemAppUrl"
-                defaultValue={kibanaAbsoluteUrl}
                 component={GhostFormField}
               />
-            </>
-          )}
-          <UseField path="enabled" defaultValue={myStepData.enabled} component={GhostFormField} />
+            )}
+            <UseField path="enabled" defaultValue={myStepData.enabled} component={GhostFormField} />
+          </EuiForm>
         </Form>
       </StepContentWrapper>