Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Response Ops] [Rule Form] Add new flyout to rule form library, responsive design and illustration to rule form page #206141

Merged
merged 15 commits into from
Jan 15, 2025
Merged
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
}

/**
Expand Down Expand Up @@ -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 = {},
Expand Down Expand Up @@ -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 />,
},
Expand All @@ -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: (
<>
Expand All @@ -161,7 +172,7 @@ const useCommonRuleFormSteps = ({ touchedSteps, currentStep }: UseRuleFormStepsO
),
},
}),
[ruleDefinitionStatus, canReadConnectors, actionsStatus, ruleDetailsStatus]
[ruleDefinitionStatus, canReadConnectors, actionsStatus, ruleDetailsStatus, shortTitles]
);

const stepOrder: RuleFormStepId[] = useMemo(
Expand Down Expand Up @@ -247,6 +258,7 @@ export const useRuleFormHorizontalSteps: () => RuleFormHorizontalSteps = () => {
const { steps, stepOrder } = useCommonRuleFormSteps({
touchedSteps,
currentStep,
shortTitles: true,
});

// Determine current navigation position
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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} />
)}
Expand Down
Loading
Loading