[7.x] [SIEM][Detection Engine] Fix StepDescription value in StepRuleActions (#63677) (#66213)

x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/actions_description.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { startCase } from 'lodash/fp';
+import { AlertAction } from '../../../../../../../alerting/common';
+
+const ActionsDescription = ({ actions }: { actions: AlertAction[] }) => {
+  if (!actions.length) return null;
+
+  return (
+    <ul>
+      {actions.map((action, index) => (
+        <li key={index}>{getActionTypeName(action.actionTypeId)}</li>
+      ))}
+    </ul>
+  );
+};
+
+export const buildActionsDescription = (actions: AlertAction[], title: string) => ({
+  title: actions.length ? title : '',
+  description: <ActionsDescription actions={actions} />,
+});
+
+const getActionTypeName = (actionTypeId: AlertAction['actionTypeId']) => {
+  if (!actionTypeId) return '';
+  const actionType = actionTypeId.split('.')[1];
+
+  if (!actionType) return '';
+
+  return startCase(actionType);
+};

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

@@ -34,6 +34,8 @@ import {
 } from './helpers';
 import { useSiemJobs } from '../../../../../components/ml_popover/hooks/use_siem_jobs';
 import { buildMlJobDescription } from './ml_job_description';
+import { buildActionsDescription } from './actions_description';
+import { buildThrottleDescription } from './throttle_description';
 
 const DescriptionListContainer = styled(EuiDescriptionList)`
   &.euiDescriptionList--column .euiDescriptionList__title {
@@ -73,6 +75,15 @@ export const StepRuleDescriptionComponent: React.FC<StepRuleDescriptionProps> =
         ),
       ];
     }
+
+    if (key === 'throttle') {
+      return [...acc, buildThrottleDescription(get(key, data), get([key, 'label'], schema))];
+    }
+
+    if (key === 'actions') {
+      return [...acc, buildActionsDescription(get(key, data), get([key, 'label'], schema))];
+    }
+
     return [...acc, ...buildListItems(data, pick(key, schema), filterManager, indexPatterns)];
   }, []);
 

x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/throttle_description.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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 { find } from 'lodash/fp';
+import { THROTTLE_OPTIONS, DEFAULT_THROTTLE_OPTION } from '../throttle_select_field';
+
+export const buildThrottleDescription = (value = DEFAULT_THROTTLE_OPTION.value, title: string) => {
+  const throttleOption = find(['value', value], THROTTLE_OPTIONS);
+
+  return {
+    title,
+    description: throttleOption ? throttleOption.text : value,
+  };
+};

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

@@ -13,7 +13,11 @@ import { RuleStep, RuleStepProps, ActionsStepRule } from '../../types';
 import { StepRuleDescription } from '../description_step';
 import { Form, UseField, useForm } from '../../../../../shared_imports';
 import { StepContentWrapper } from '../step_content_wrapper';
-import { ThrottleSelectField, THROTTLE_OPTIONS } from '../throttle_select_field';
+import {
+  ThrottleSelectField,
+  THROTTLE_OPTIONS,
+  DEFAULT_THROTTLE_OPTION,
+} from '../throttle_select_field';
 import { RuleActionsField } from '../rule_actions_field';
 import { useKibana } from '../../../../../lib/kibana';
 import { schema } from './schema';
@@ -29,7 +33,7 @@ const stepActionsDefaultValue = {
   isNew: true,
   actions: [],
   kibanaSiemAppUrl: '',
-  throttle: THROTTLE_OPTIONS[0].value,
+  throttle: DEFAULT_THROTTLE_OPTION.value,
 };
 
 const GhostFormField = () => <></>;
@@ -112,7 +116,7 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
 
   return isReadOnlyView && myStepData != null ? (
     <StepContentWrapper addPadding={addPadding}>
-      <StepRuleDescription schema={schema} data={myStepData} />
+      <StepRuleDescription schema={schema} data={myStepData} columns="single" />
     </StepContentWrapper>
   ) : (
     <>

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

@@ -11,9 +11,6 @@ import { i18n } from '@kbn/i18n';
 import { FormSchema } from '../../../../../shared_imports';
 
 export const schema: FormSchema = {
-  actions: {},
-  enabled: {},
-  kibanaSiemAppUrl: {},
   throttle: {
     label: i18n.translate(
       'xpack.siem.detectionEngine.createRule.stepRuleActions.fieldThrottleLabel',
@@ -29,4 +26,14 @@ export const schema: FormSchema = {
       }
     ),
   },
+  actions: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepRuleActions.fieldActionsLabel',
+      {
+        defaultMessage: 'Actions',
+      }
+    ),
+  },
+  enabled: {},
+  kibanaSiemAppUrl: {},
 };

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

@@ -20,6 +20,8 @@ export const THROTTLE_OPTIONS = [
   { value: '7d', text: 'Weekly' },
 ];
 
+export const DEFAULT_THROTTLE_OPTION = THROTTLE_OPTIONS[0];
+
 type ThrottleSelectField = typeof SelectField;
 
 export const ThrottleSelectField: ThrottleSelectField = props => {