[SIEM][Detection Engine] Add validation for Rule Actions (elastic#63332…

…) (elastic#66753)

x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.test.tsx

@@ -13,7 +13,7 @@ import { useFormFieldMock } from '../../../../common/mock';
 jest.mock('../../../../common/lib/kibana');
 
 describe('RuleActionsField', () => {
- it('should not render ActionForm is no actions are supported', () => {
+ it('should not render ActionForm if no actions are supported', () => {
  (useKibana as jest.Mock).mockReturnValue({
  services: {
  triggers_actions_ui: {

x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.tsx

@@ -4,24 +4,38 @@
  * 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';
 
 import { NOTIFICATION_SUPPORTED_ACTION_TYPES_IDS } from '../../../../../common/constants';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { loadActionTypes } from '../../../../../../triggers_actions_ui/public/application/lib/action_connector_api';
 import { SelectField } from '../../../../shared_imports';
-import { ActionForm, ActionType } from '../../../../../../triggers_actions_ui/public';
+import {
+ ActionForm,
+ ActionType,
+ loadActionTypes,
+} from '../../../../../../triggers_actions_ui/public';
 import { AlertAction } from '../../../../../../alerting/common';
 import { useKibana } from '../../../../common/lib/kibana';
+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,
@@ -31,13 +45,18 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
  application: { capabilities },
  } = useKibana().services;
 
+ const actions: AlertAction[] = useMemo(
+ () => (!isEmpty(field.value) ? (field.value as AlertAction[]) : []),
+ [field.value]
+ );
+
  const setActionIdByIndex = useCallback(
  (id: string, index: number) => {
- const updatedActions = [...(field.value as Array<Partial<AlertAction>>)];
+ const updatedActions = [...(actions as Array<Partial<AlertAction>>)];
  updatedActions[index] = deepMerge(updatedActions[index], { id });
  field.setValue(updatedActions);
  },
- [field]
+ [field.setValue, actions]
  );
 
  const setAlertProperty = useCallback(
@@ -48,11 +67,11 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
  const setActionParamsProperty = useCallback(
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (key: string, value: any, index: number) => {
- const updatedActions = [...(field.value as AlertAction[])];
+ const updatedActions = [...actions];
  updatedActions[index].params[key] = value;
  field.setValue(updatedActions);
  },
- [field]
+ [field.setValue, actions]
  );
 
  useEffect(() => {
@@ -65,23 +84,57 @@ export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables
  })();
  }, []);
 
+ useEffect(() => {
+ if (field.form.isSubmitting || !field.errors.length) {
+ 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,
+ ]);
+
  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}
- docLinks={docLinks}
- capabilities={capabilities}
- />
+ <>
+ {fieldErrors ? (
+ <>
+ <FieldErrorsContainer>
+ <EuiCallOut title={FORM_ERRORS_TITLE} color="danger" iconType="alert">
+ <ReactMarkdown source={fieldErrors} />
+ </EuiCallOut>
+ </FieldErrorsContainer>
+ <EuiSpacer />
+ </>
+ ) : null}
+ <ActionForm
+ actions={actions}
+ docLinks={docLinks}
+ capabilities={capabilities}
+ 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/plugins/siem/public/alerts/components/rules/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/plugins/siem/public/alerts/components/rules/step_rule_actions/index.test.tsx

@@ -9,7 +9,18 @@ import { shallow } from 'enzyme';
 
 import { StepRuleActions } from './index';
 
-jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../../common/lib/kibana', () => ({
+ useKibana: jest.fn().mockReturnValue({
+ services: {
+ application: {
+ getUrlForApp: jest.fn(),
+ },
+ triggers_actions_ui: {
+ actionTypeRegistry: jest.fn(),
+ },
+ },
+ }),
+}));
 
 describe('StepRuleActions', () => {
  it('renders correctly', () => {

x-pack/plugins/siem/public/alerts/components/rules/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';
 
@@ -24,7 +32,7 @@ import {
 } from '../throttle_select_field';
 import { RuleActionsField } from '../rule_actions_field';
 import { useKibana } from '../../../../common/lib/kibana';
-import { schema } from './schema';
+import { getSchema } from './schema';
 import * as I18n from './translations';
 
 interface StepRuleActionsProps extends RuleStepProps {
@@ -42,6 +50,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,
@@ -54,8 +71,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,
@@ -104,6 +125,12 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
  setMyStepData,
  ]);
 
+ const throttleOptions = useMemo(() => {
+ const throttle = myStepData.throttle;
+
+ return getThrottleOptions(throttle);
+ }, [myStepData]);
+
  const throttleFieldComponentProps = useMemo(
  () => ({
  idAria: 'detectionEngineStepRuleActionsThrottle',
@@ -112,7 +139,7 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
  hasNoInitialSelection: false,
  handleChange: updateThrottle,
  euiFieldProps: {
- options: THROTTLE_OPTIONS,
+ options: throttleOptions,
  },
  }),
  [isLoading, updateThrottle]
@@ -126,30 +153,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>