Skip to content

[Response-Ops] Rule create/edit form design updates #220704

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.

Sign up for GitHub

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

Merged
justinkambic merged 10 commits into from
May 20, 2025
Merged

[Response-Ops] Rule create/edit form design updates #220704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3ba1888
Impelement design changes for rule create form details update.
justinkambic May 9, 2025
07f071b
Make row/column direction responsive.
justinkambic May 9, 2025
5b589f7
i18n fixup.
justinkambic May 9, 2025
abdfaf2
Simplify.
justinkambic May 9, 2025
00dca54
Remove obsolete code.
justinkambic May 19, 2025
3dc4013
Fix unit tests file.
justinkambic May 19, 2025
be94853
Delete unneeded code.
justinkambic May 19, 2025
2a4570a
Simplify.
justinkambic May 19, 2025
4681951
Fix weird FTR failure.
justinkambic May 20, 2025
affcfc2
Merge branch 'main' into response-ops_rule-create-form-design-updates
justinkambic May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 40 additions & 63 deletions src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,15 @@
*/

import React, { useCallback, useMemo } from 'react';
import { css } from '@emotion/react';
import {
EuiDescribedFormGroup,
EuiFormRow,
EuiFieldText,
EuiComboBox,
EuiComboBoxOptionOption,
EuiText,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
import {
RULE_DETAILS_TITLE,
RULE_DETAILS_DESCRIPTION,
RULE_NAME_INPUT_TITLE,
RULE_TAG_INPUT_TITLE,
RULE_TAG_PLACEHOLDER,
} from '../translations';
import { RULE_NAME_INPUT_TITLE, RULE_TAG_INPUT_TITLE, RULE_TAG_PLACEHOLDER } from '../translations';
import { useRuleFormState, useRuleFormDispatch } from '../hooks';
import { OptionalFieldLabel } from '../optional_field_label';

Expand All @@ -34,17 +27,6 @@ export const RuleDetails = () => {

const { tags = [], name } = formData;

const ruleDetailsContainerCss = css`
@container (max-width: 767px) {
&.euiDescribedFormGroup {
flex-direction: column;
}
&.euiDescribedFormGroup > .euiFlexItem {
width: 100%;
}
}
`;

const tagsOptions = useMemo(() => {
return tags.map((tag: string) => ({ label: tag }));
}, [tags]);
Expand Down Expand Up @@ -89,49 +71,44 @@ export const RuleDetails = () => {
}, [dispatch, tags]);

return (
<EuiDescribedFormGroup
css={ruleDetailsContainerCss}
fullWidth
title={<h3>{RULE_DETAILS_TITLE}</h3>}
description={
<EuiText size="s">
<p>{RULE_DETAILS_DESCRIPTION}</p>
</EuiText>
}
data-test-subj="ruleDetails"
>
<EuiFormRow
fullWidth
label={RULE_NAME_INPUT_TITLE}
isInvalid={!!baseErrors?.name?.length}
error={baseErrors?.name}
>
<EuiFieldText
<EuiFlexGroup>
<EuiFlexItem>
<EuiFormRow
data-test-subj="ruleDetails"
fullWidth
value={name}
placeholder={RULE_NAME_INPUT_TITLE}
onChange={onNameChange}
data-test-subj="ruleDetailsNameInput"
/>
</EuiFormRow>
<EuiFormRow
fullWidth
label={RULE_TAG_INPUT_TITLE}
labelAppend={OptionalFieldLabel}
isInvalid={!!baseErrors?.tags?.length}
error={baseErrors?.tags}
>
<EuiComboBox
label={RULE_NAME_INPUT_TITLE}
isInvalid={!!baseErrors?.name?.length}
error={baseErrors?.name}
>
<EuiFieldText
fullWidth
value={name}
placeholder={RULE_NAME_INPUT_TITLE}
onChange={onNameChange}
data-test-subj="ruleDetailsNameInput"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
fullWidth
noSuggestions
placeholder={RULE_TAG_PLACEHOLDER}
data-test-subj="ruleDetailsTagsInput"
selectedOptions={tagsOptions}
onCreateOption={onAddTag}
onChange={onSetTag}
onBlur={onBlur}
/>
</EuiFormRow>
</EuiDescribedFormGroup>
label={RULE_TAG_INPUT_TITLE}
labelAppend={OptionalFieldLabel}
isInvalid={!!baseErrors?.tags?.length}
error={baseErrors?.tags}
>
<EuiComboBox
fullWidth
noSuggestions
placeholder={RULE_TAG_PLACEHOLDER}
data-test-subj="ruleDetailsTagsInput"
selectedOptions={tagsOptions}
onCreateOption={onAddTag}
onChange={onSetTag}
onBlur={onBlur}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
);
};
11 changes: 0 additions & 11 deletions src/platform/packages/shared/response-ops/rule_form/src/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,17 +255,6 @@ export const ADD_ACTION_DESCRIPTION_TEXT = i18n.translate(
}
);

export const RULE_DETAILS_TITLE = i18n.translate('responseOpsRuleForm.ruleForm.ruleDetails.title', {
defaultMessage: 'Rule name and tags',
});

export const RULE_DETAILS_DESCRIPTION = i18n.translate(
'responseOpsRuleForm.ruleForm.ruleDetails.description',
{
defaultMessage: 'Define a name and tags for your rule.',
}
);

export const RULE_NAME_INPUT_TITLE = i18n.translate(
'responseOpsRuleForm.ruleForm.ruleDetails.ruleNameInputTitle',
{
Expand Down
2 changes: 0 additions & 2 deletions x-pack/platform/plugins/private/translations/translations/fr-FR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6660,12 +6660,10 @@
"responseOpsRuleForm.ruleForm.ruleDefinition.scopeTitle": "Portée de la règle",
"responseOpsRuleForm.ruleForm.ruleDefinitionTitle": "Définition de la règle",
"responseOpsRuleForm.ruleForm.ruleDefinitionTitleShort": "Définition",
"responseOpsRuleForm.ruleForm.ruleDetails.description": "Définissez un nom et des balises pour votre règle.",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleNameInputButtonAriaLabel": "Enregistrer le nom de la règle",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleNameInputTitle": "Nom de règle",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleTagsInputTitle": "Balises",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleTagsPlaceholder": "Ajouter des balises",
"responseOpsRuleForm.ruleForm.ruleDetails.title": "Nom et balises de la règle",
"responseOpsRuleForm.ruleForm.ruleDetailsTitle": "Détails de la règle",
"responseOpsRuleForm.ruleForm.ruleDetailsTitleShort": "Détails",
"responseOpsRuleForm.ruleForm.ruleFlyoutFooter.backText": "Retour",
Expand Down
2 changes: 0 additions & 2 deletions x-pack/platform/plugins/private/translations/translations/ja-JP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6654,12 +6654,10 @@
"responseOpsRuleForm.ruleForm.ruleDefinition.scopeTitle": "ルール範囲",
"responseOpsRuleForm.ruleForm.ruleDefinitionTitle": "ルール検知",
"responseOpsRuleForm.ruleForm.ruleDefinitionTitleShort": "定義",
"responseOpsRuleForm.ruleForm.ruleDetails.description": "ルールの名前とタグを定義します。",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleNameInputButtonAriaLabel": "ルール名を保存",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleNameInputTitle": "ルール名",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleTagsInputTitle": "タグ",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleTagsPlaceholder": "タグを追加",
"responseOpsRuleForm.ruleForm.ruleDetails.title": "ルールの名前とタグ",
"responseOpsRuleForm.ruleForm.ruleDetailsTitle": "ルール詳細",
"responseOpsRuleForm.ruleForm.ruleDetailsTitleShort": "詳細",
"responseOpsRuleForm.ruleForm.ruleFlyoutFooter.backText": "戻る",
Expand Down
2 changes: 0 additions & 2 deletions x-pack/platform/plugins/private/translations/translations/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6664,12 +6664,10 @@
"responseOpsRuleForm.ruleForm.ruleDefinition.scopeTitle": "规则范围",
"responseOpsRuleForm.ruleForm.ruleDefinitionTitle": "规则定义",
"responseOpsRuleForm.ruleForm.ruleDefinitionTitleShort": "定义",
"responseOpsRuleForm.ruleForm.ruleDetails.description": "为您的规则定义名称和标签。",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleNameInputButtonAriaLabel": "保存规则名称",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleNameInputTitle": "规则名称",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleTagsInputTitle": "标签",
"responseOpsRuleForm.ruleForm.ruleDetails.ruleTagsPlaceholder": "添加标签",
"responseOpsRuleForm.ruleForm.ruleDetails.title": "规则名称和标签",
"responseOpsRuleForm.ruleForm.ruleDetailsTitle": "规则详情",
"responseOpsRuleForm.ruleForm.ruleDetailsTitleShort": "详情",
"responseOpsRuleForm.ruleForm.ruleFlyoutFooter.backText": "返回",
Expand Down
19 changes: 18 additions & 1 deletion x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alert_create_flyout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,24 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
// add webhook connector 2
await testSubjects.click('ruleActionsAddActionButton');
await testSubjects.existOrFail('ruleActionsConnectorsModal');
await find.clickByButtonText(webhookConnectorName);

/*
* there is a naming overload between the card button text on the modal, and the button text on the
* action accordion rendered behind the modal. We select the cards and filter for the one we want,
* and then pick up the button by role.
*/
const modalCards = await find.allByCssSelector(
'[data-test-subj="ruleActionsConnectorsModalCard"]'
);
const webhookCard = modalCards.find(async (card) => {
return (await card.getAttribute('innerText'))?.indexOf(webhookConnectorName) !== -1;
});
if (!webhookCard) {
throw new Error('Webhook connector card not found');
}
const cardButton = await webhookCard.findByCssSelector('button');
await cardButton.click();

await find.setValueByClass('kibanaCodeEditor', 'myUniqueKey1');

await find.clickByCssSelector(
Expand Down