-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Security Solution] Add upgrade prebuilt rule flyout layout details (#…
…195166) **Addresses:** #171520 **Design:** [Figma](https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU/%5B8.7%5D-%5BRules%5D-Rule-Immutability%2FCustomization?type=design&node-id=3903%3A88369&mode=design&t=rMjxtGjBNKbCjedE-1) (internal) ## Summary This PR extends prebuilt rule flyout layout with design details including field state, rule state callout and little UI fixes. ## Screenshots <img width="1287" alt="image" src="https://github.com/user-attachments/assets/74846530-7874-4958-9f4f-e4477027591b"> <img width="1279" alt="image" src="https://github.com/user-attachments/assets/cf87fd84-f041-4142-b051-d9d7dd846733"> <img width="1276" alt="image" src="https://github.com/user-attachments/assets/d6f3c9e5-d837-43b6-8728-d8a23095ed2c">
- Loading branch information
Showing
28 changed files
with
504 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
...ment/components/rule_details/three_way_diff/comparison_side/comparison_side_help_info.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { useToggle } from 'react-use'; | ||
| import { EuiPopover, EuiText, EuiButtonIcon } from '@elastic/eui'; | ||
| import { FormattedMessage } from '@kbn/i18n-react'; | ||
|
|
||
| /** | ||
| * Theme doesn't expose width variables. Using provided size variables will require | ||
| * multiplying it by another magic constant. | ||
| * | ||
| * 320px width looks | ||
| * like a [commonly used width in EUI](https://github.com/search?q=repo%3Aelastic%2Feui%20320&type=code). | ||
| */ | ||
| const POPOVER_WIDTH = 320; | ||
|
|
||
| export function ComparisonSideHelpInfo(): JSX.Element { | ||
| const [isPopoverOpen, togglePopover] = useToggle(false); | ||
|
|
||
| const button = ( | ||
| <EuiButtonIcon | ||
| iconType="questionInCircle" | ||
| onClick={togglePopover} | ||
| aria-label="Open help popover" | ||
| /> | ||
| ); | ||
|
|
||
| return ( | ||
| <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={togglePopover}> | ||
| <EuiText style={{ width: POPOVER_WIDTH }} size="s"> | ||
| <FormattedMessage | ||
| id="xpack.securitySolution.detectionEngine.rules.upgradeRules.upgradeHelpText" | ||
| defaultMessage="Choose field values used in the upgraded rule. " | ||
| /> | ||
| </EuiText> | ||
| </EuiPopover> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
...e_details/three_way_diff/components/field_upgrade_state_info/field_upgrade_state_info.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { EuiIcon, EuiText } from '@elastic/eui'; | ||
| import { FieldUpgradeState } from '../../../../../model/prebuilt_rule_upgrade'; | ||
| import * as i18n from './translations'; | ||
|
|
||
| interface FieldUpgradeStateInfoProps { | ||
| state: FieldUpgradeState; | ||
| } | ||
|
|
||
| export function FieldUpgradeStateInfo({ state }: FieldUpgradeStateInfoProps): JSX.Element { | ||
| switch (state) { | ||
| case FieldUpgradeState.Accepted: | ||
| return ( | ||
| <> | ||
| <EuiText color="success" size="xs"> | ||
| <EuiIcon type="checkInCircleFilled" /> | ||
| <strong>{i18n.UPDATE_ACCEPTED}</strong> | ||
| {i18n.SEPARATOR} | ||
| {i18n.UPDATE_ACCEPTED_DESCRIPTION} | ||
| </EuiText> | ||
| </> | ||
| ); | ||
|
|
||
| case FieldUpgradeState.SolvableConflict: | ||
| return ( | ||
| <> | ||
| <EuiText color="warning" size="xs"> | ||
| <EuiIcon type="warning" /> | ||
| <strong>{i18n.SOLVABLE_CONFLICT}</strong> | ||
| {i18n.SEPARATOR} | ||
| {i18n.SOLVABLE_CONFLICT_DESCRIPTION} | ||
| </EuiText> | ||
| </> | ||
| ); | ||
|
|
||
| case FieldUpgradeState.NonSolvableConflict: | ||
| return ( | ||
| <> | ||
| <EuiText color="danger" size="xs"> | ||
| <EuiIcon type="warning" /> | ||
| <strong>{i18n.NON_SOLVABLE_CONFLICT}</strong> | ||
| {i18n.SEPARATOR} | ||
| {i18n.NON_SOLVABLE_CONFLICT_DESCRIPTION} | ||
| </EuiText> | ||
| </> | ||
| ); | ||
| } | ||
| } |
8 changes: 8 additions & 0 deletions
8
...ement/components/rule_details/three_way_diff/components/field_upgrade_state_info/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| export * from './field_upgrade_state_info'; |
60 changes: 60 additions & 0 deletions
60
...mponents/rule_details/three_way_diff/components/field_upgrade_state_info/translations.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { i18n } from '@kbn/i18n'; | ||
|
|
||
| export const UPDATE_ACCEPTED = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.upgradeRules.fieldUpgradeState.updateAccepted', | ||
| { | ||
| defaultMessage: 'Update accepted', | ||
| } | ||
| ); | ||
|
|
||
| export const UPDATE_ACCEPTED_DESCRIPTION = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.upgradeRules.fieldUpgradeState.updateAcceptedDescription', | ||
| { | ||
| defaultMessage: | ||
| 'You can still make changes, please review/accept all other conflicts before updating the rule.', | ||
| } | ||
| ); | ||
|
|
||
| export const SOLVABLE_CONFLICT = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.upgradeRules.fieldUpgradeState.solvableConflict', | ||
| { | ||
| defaultMessage: 'Solved conflict', | ||
| } | ||
| ); | ||
|
|
||
| export const SOLVABLE_CONFLICT_DESCRIPTION = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.upgradeRules.fieldUpgradeState.solvableConflictDescription', | ||
| { | ||
| defaultMessage: | ||
| 'We have suggested an update for this modified field, please review before accepting.', | ||
| } | ||
| ); | ||
|
|
||
| export const NON_SOLVABLE_CONFLICT = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.upgradeRules.fieldUpgradeState.nonSolvableConflict', | ||
| { | ||
| defaultMessage: 'Solved conflict', | ||
| } | ||
| ); | ||
|
|
||
| export const NON_SOLVABLE_CONFLICT_DESCRIPTION = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.upgradeRules.fieldUpgradeState.nonSolvableConflictDescription', | ||
| { | ||
| defaultMessage: | ||
| 'We have suggested an update for this modified field, please review before accepting.', | ||
| } | ||
| ); | ||
|
|
||
| export const SEPARATOR = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.upgradeRules.fieldUpgradeState.separator', | ||
| { | ||
| defaultMessage: ' - ', | ||
| } | ||
| ); |
8 changes: 8 additions & 0 deletions
8
...anagement/components/rule_details/three_way_diff/components/rule_upgrade_callout/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| export * from './rule_upgrade_callout'; |
71 changes: 71 additions & 0 deletions
71
...ents/rule_details/three_way_diff/components/rule_upgrade_callout/rule_upgrade_callout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React, { useMemo } from 'react'; | ||
| import { EuiCallOut } from '@elastic/eui'; | ||
| import type { RuleUpgradeState } from '../../../../../model/prebuilt_rule_upgrade'; | ||
| import { FieldUpgradeState } from '../../../../../model/prebuilt_rule_upgrade'; | ||
| import * as i18n from './translations'; | ||
|
|
||
| interface RuleUpgradeCalloutProps { | ||
| ruleUpgradeState: RuleUpgradeState; | ||
| } | ||
|
|
||
| export function RuleUpgradeCallout({ ruleUpgradeState }: RuleUpgradeCalloutProps): JSX.Element { | ||
| const fieldsUpgradeState = ruleUpgradeState.fieldsUpgradeState; | ||
| const { numOfNonSolvableConflicts, numOfSolvableConflicts } = useMemo(() => { | ||
| let numOfFieldsWithNonSolvableConflicts = 0; | ||
| let numOfFieldsWithSolvableConflicts = 0; | ||
|
|
||
| for (const fieldName of Object.keys(fieldsUpgradeState)) { | ||
| if (fieldsUpgradeState[fieldName] === FieldUpgradeState.NonSolvableConflict) { | ||
| numOfFieldsWithNonSolvableConflicts++; | ||
| } | ||
|
|
||
| if (fieldsUpgradeState[fieldName] === FieldUpgradeState.SolvableConflict) { | ||
| numOfFieldsWithSolvableConflicts++; | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| numOfNonSolvableConflicts: numOfFieldsWithNonSolvableConflicts, | ||
| numOfSolvableConflicts: numOfFieldsWithSolvableConflicts, | ||
| }; | ||
| }, [fieldsUpgradeState]); | ||
|
|
||
| if (numOfNonSolvableConflicts > 0) { | ||
| return ( | ||
| <EuiCallOut | ||
| title={i18n.RULE_HAS_NON_SOLVABLE_CONFLICTS(numOfNonSolvableConflicts)} | ||
| iconType="warning" | ||
| color="danger" | ||
| size="s" | ||
| > | ||
| <p>{i18n.RULE_HAS_NON_SOLVABLE_CONFLICTS_DESCRIPTION}</p> | ||
| </EuiCallOut> | ||
| ); | ||
| } | ||
|
|
||
| if (numOfSolvableConflicts > 0) { | ||
| return ( | ||
| <EuiCallOut | ||
| title={i18n.RULE_HAS_SOLVABLE_CONFLICTS(numOfSolvableConflicts)} | ||
| iconType="warning" | ||
| color="warning" | ||
| size="s" | ||
| > | ||
| <p>{i18n.RULE_HAS_SOLVABLE_CONFLICTS_DESCRIPTION}</p> | ||
| </EuiCallOut> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <EuiCallOut title={i18n.RULE_IS_READY_FOR_UPGRADE} iconType="warning" color="success" size="s"> | ||
| <p>{i18n.RULE_IS_READY_FOR_UPGRADE_DESCRIPTION}</p> | ||
| </EuiCallOut> | ||
| ); | ||
| } |
Oops, something went wrong.