[8.x] [Response Ops] [Rule Form] Add new flyout to rule form library,…

… responsive design and illustration to rule form page (#206141) (#206816) # Backport This will backport the following commits from `main` to `8.x`: - [[Response Ops] [Rule Form] Add new flyout to rule form library, responsive design and illustration to rule form page (#206141)](#206141)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Zacqary Adam Xeper <[email protected]>
elastic · Jan 15, 2025 · 6892364 · 6892364
1 parent 45d0507
commit 6892364
Show file tree

Hide file tree

Showing 16 changed files with 1,818 additions and 39 deletions.
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/hooks/use_rule_form_steps.test.tsx b/src/platform/packages/shared/response-ops/rule_form/src/hooks/use_rule_form_steps.test.tsx
@@ -14,6 +14,8 @@ import {
   RULE_FORM_PAGE_RULE_DEFINITION_TITLE,
   RULE_FORM_PAGE_RULE_ACTIONS_TITLE,
   RULE_FORM_PAGE_RULE_DETAILS_TITLE,
+  RULE_FORM_PAGE_RULE_DEFINITION_TITLE_SHORT,
+  RULE_FORM_PAGE_RULE_DETAILS_TITLE_SHORT,
 } from '../translations';
 import { RuleFormData } from '../types';
 import { EuiSteps, EuiStepsHorizontal } from '@elastic/eui';
@@ -145,9 +147,9 @@ describe('useRuleFormHorizontalSteps', () => {
 
     render(<TestComponent />);
 
-    expect(screen.getByText(RULE_FORM_PAGE_RULE_DEFINITION_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(RULE_FORM_PAGE_RULE_DEFINITION_TITLE_SHORT)).toBeInTheDocument();
     expect(screen.getByText(RULE_FORM_PAGE_RULE_ACTIONS_TITLE)).toBeInTheDocument();
-    expect(screen.getByText(RULE_FORM_PAGE_RULE_DETAILS_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(RULE_FORM_PAGE_RULE_DETAILS_TITLE_SHORT)).toBeInTheDocument();
   });
 
   test('tracks current step successfully', async () => {

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
@@ -18,6 +18,8 @@ import {
   RULE_FORM_PAGE_RULE_ACTIONS_TITLE,
   RULE_FORM_PAGE_RULE_DEFINITION_TITLE,
   RULE_FORM_PAGE_RULE_DETAILS_TITLE,
+  RULE_FORM_PAGE_RULE_DEFINITION_TITLE_SHORT,
+  RULE_FORM_PAGE_RULE_DETAILS_TITLE_SHORT,
 } from '../translations';
 import { hasActionsError, hasActionsParamsErrors, hasParamsErrors } from '../validation';
 import { RuleFormStepId } from '../constants';
@@ -27,6 +29,7 @@ interface UseRuleFormStepsOptions {
   touchedSteps: Record<RuleFormStepId, boolean>;
   /* Used to track the current step in horizontal steps, not used for vertical steps */
   currentStep?: RuleFormStepId;
+  shortTitles?: boolean;
 }
 
 /**
@@ -69,7 +72,11 @@ const getStepStatus = ({
 };
 
 // Create a common hook for both horizontal and vertical steps
-const useCommonRuleFormSteps = ({ touchedSteps, currentStep }: UseRuleFormStepsOptions) => {
+const useCommonRuleFormSteps = ({
+  touchedSteps,
+  currentStep,
+  shortTitles,
+}: UseRuleFormStepsOptions) => {
   const {
     plugins: { application },
     baseErrors = {},
@@ -132,7 +139,9 @@ const useCommonRuleFormSteps = ({ touchedSteps, currentStep }: UseRuleFormStepsO
   const steps = useMemo(
     () => ({
       [RuleFormStepId.DEFINITION]: {
-        title: RULE_FORM_PAGE_RULE_DEFINITION_TITLE,
+        title: shortTitles
+          ? RULE_FORM_PAGE_RULE_DEFINITION_TITLE_SHORT
+          : RULE_FORM_PAGE_RULE_DEFINITION_TITLE,
         status: ruleDefinitionStatus,
         children: <RuleDefinition />,
       },
@@ -150,7 +159,9 @@ const useCommonRuleFormSteps = ({ touchedSteps, currentStep }: UseRuleFormStepsO
           }
         : null,
       [RuleFormStepId.DETAILS]: {
-        title: RULE_FORM_PAGE_RULE_DETAILS_TITLE,
+        title: shortTitles
+          ? RULE_FORM_PAGE_RULE_DETAILS_TITLE_SHORT
+          : RULE_FORM_PAGE_RULE_DETAILS_TITLE,
         status: ruleDetailsStatus,
         children: (
           <>
@@ -161,7 +172,7 @@ const useCommonRuleFormSteps = ({ touchedSteps, currentStep }: UseRuleFormStepsO
         ),
       },
     }),
-    [ruleDefinitionStatus, canReadConnectors, actionsStatus, ruleDetailsStatus]
+    [ruleDefinitionStatus, canReadConnectors, actionsStatus, ruleDetailsStatus, shortTitles]
   );
 
   const stepOrder: RuleFormStepId[] = useMemo(
@@ -247,6 +258,7 @@ export const useRuleFormHorizontalSteps: () => RuleFormHorizontalSteps = () => {
   const { steps, stepOrder } = useCommonRuleFormSteps({
     touchedSteps,
     currentStep,
+    shortTitles: true,
   });
 
   // Determine current navigation position

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
@@ -7,22 +7,41 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
-import { EuiButton, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { v4 as uuidv4 } from 'uuid';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiImage, EuiSpacer, EuiText } from '@elastic/eui';
 import { RuleSystemAction } from '@kbn/alerting-types';
 import { ActionConnector } from '@kbn/alerts-ui-shared';
-import { ADD_ACTION_TEXT } from '../translations';
-import { RuleActionsConnectorsModal } from './rule_actions_connectors_modal';
-import { useRuleFormDispatch, useRuleFormState } from '../hooks';
+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 {
+  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';
-import { getDefaultParams } from '../utils';
+
+const useRuleActionsIllustration = () => {
+  const [imageData, setImageData] = useState('');
+  useEffectOnce(() => {
+    const fetchImage = async () => {
+      const image = await import('./rule_actions_illustration.svg');
+      setImageData(image.default);
+    };
+    fetchImage();
+  });
+  return imageData;
+};
 
 export const RuleActions = () => {
   const [isConnectorModalOpen, setIsConnectorModalOpen] = useState<boolean>(false);
+  const ruleActionsIllustration = useRuleActionsIllustration();
 
   const {
     formData: { actions, consumer },
@@ -92,6 +111,8 @@ export const RuleActions = () => {
     return selectedRuleType.producer;
   }, [consumer, multiConsumerSelection, selectedRuleType]);
 
+  const hasActions = actions.length > 0;
+
   return (
     <>
       <EuiFlexGroup data-test-subj="ruleActions" direction="column">
@@ -120,15 +141,49 @@ export const RuleActions = () => {
           );
         })}
       </EuiFlexGroup>
+      {!hasActions && (
+        <EuiFlexGroup justifyContent="center">
+          <EuiFlexGroup
+            alignItems="center"
+            direction="column"
+            gutterSize="m"
+            style={{ maxWidth: 356 }}
+          >
+            <EuiImage
+              alt="Rule actions illustration"
+              width={198}
+              height={180}
+              url={ruleActionsIllustration}
+            />
+            <EuiFlexItem>
+              <EuiText textAlign="center">
+                <h3>{ADD_ACTION_HEADER}</h3>
+              </EuiText>
+              <EuiText size="s" textAlign="center" color="subdued">
+                {ADD_ACTION_OPTIONAL_TEXT}
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText size="s" textAlign="center" color="subdued">
+                {ADD_ACTION_DESCRIPTION_TEXT}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexGroup>
+      )}
       <EuiSpacer />
-      <EuiButton
-        data-test-subj="ruleActionsAddActionButton"
-        iconType="push"
-        iconSide="left"
-        onClick={onModalOpen}
-      >
-        {ADD_ACTION_TEXT}
-      </EuiButton>
+      <EuiFlexGroup justifyContent={!hasActions ? 'center' : 'flexStart'}>
+        <EuiFlexItem grow={0}>
+          <EuiButton
+            data-test-subj="ruleActionsAddActionButton"
+            iconType="push"
+            iconSide="left"
+            onClick={onModalOpen}
+          >
+            {ADD_ACTION_TEXT}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       {isConnectorModalOpen && (
         <RuleActionsConnectorsModal onClose={onModalClose} onSelectConnector={onSelectConnector} />
       )}