Skip to content

Commit

Permalink
[Security Solution] Add upgrade prebuilt rule flyout layout details (#…
Browse files Browse the repository at this point in the history
…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
maximpn authored Oct 10, 2024
1 parent c920033 commit 4d54cfe
Show file tree
Hide file tree
Showing 28 changed files with 504 additions and 59 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

import React, { useState } from 'react';
import { EuiFlexGroup, EuiTitle } from '@elastic/eui';
import { VersionsPicker } from '../versions_picker/versions_picker';
import type { Version } from '../versions_picker/constants';
import { SelectedVersions } from '../versions_picker/constants';
Expand All @@ -17,6 +18,8 @@ import type {
import { getSubfieldChanges } from './get_subfield_changes';
import { SubfieldChanges } from './subfield_changes';
import { SideHeader } from '../components/side_header';
import { ComparisonSideHelpInfo } from './comparison_side_help_info';
import * as i18n from './translations';

interface ComparisonSideProps<FieldName extends keyof DiffableAllFields> {
fieldName: FieldName;
Expand All @@ -43,11 +46,19 @@ export function ComparisonSide<FieldName extends keyof DiffableAllFields>({
return (
<>
<SideHeader>
<VersionsPicker
hasBaseVersion={fieldThreeWayDiff.has_base_version}
selectedVersions={selectedVersions}
onChange={setSelectedVersions}
/>
<EuiFlexGroup direction="row" alignItems="center">
<EuiTitle size="xxs">
<h3>
{i18n.TITLE}
<ComparisonSideHelpInfo />
</h3>
</EuiTitle>
<VersionsPicker
hasBaseVersion={fieldThreeWayDiff.has_base_version}
selectedVersions={selectedVersions}
onChange={setSelectedVersions}
/>
</EuiFlexGroup>
</SideHeader>
<SubfieldChanges fieldName={fieldName} subfieldChanges={subfieldChanges} />
</>
Expand Down
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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@

import { i18n } from '@kbn/i18n';

export const TITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.comparisonSide.title',
{
defaultMessage: 'Diff view',
}
);

export const NO_CHANGES = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.comparisonSide.noChangesLabel',
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,21 @@ import type {
ThreeWayDiff,
} from '../../../../../../../common/api/detection_engine';
import { ThreeWayDiffConflict } from '../../../../../../../common/api/detection_engine';
import type { FieldUpgradeState } from '../../../../model/prebuilt_rule_upgrade';
import { ComparisonSide } from '../comparison_side/comparison_side';
import { FinalSide } from '../final_side/final_side';
import { FieldUpgradeConflictsResolverHeader } from './field_upgrade_conflicts_resolver_header';

interface FieldUpgradeConflictsResolverProps<FieldName extends keyof RuleFieldsDiff> {
fieldName: FieldName;
fieldUpgradeState: FieldUpgradeState;
fieldThreeWayDiff: RuleFieldsDiff[FieldName];
finalDiffableRule: DiffableRule;
}

export function FieldUpgradeConflictsResolver<FieldName extends keyof RuleFieldsDiff>({
fieldName,
fieldUpgradeState,
fieldThreeWayDiff,
finalDiffableRule,
}: FieldUpgradeConflictsResolverProps<FieldName>): JSX.Element {
Expand All @@ -37,7 +40,12 @@ export function FieldUpgradeConflictsResolver<FieldName extends keyof RuleFields
return (
<>
<SplitAccordion
header={<FieldUpgradeConflictsResolverHeader fieldName={fieldName} />}
header={
<FieldUpgradeConflictsResolverHeader
fieldName={fieldName}
fieldUpgradeState={fieldUpgradeState}
/>
}
initialIsOpen={hasConflict}
data-test-subj="ruleUpgradePerFieldDiff"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,27 @@

import React from 'react';
import { camelCase, startCase } from 'lodash';
import { EuiTitle } from '@elastic/eui';
import { EuiFlexGroup, EuiTitle } from '@elastic/eui';
import { fieldToDisplayNameMap } from '../../diff_components/translations';
import type { FieldUpgradeState } from '../../../../model/prebuilt_rule_upgrade';
import { FieldUpgradeStateInfo } from './field_upgrade_state_info';

interface FieldUpgradeConflictsResolverHeaderProps {
fieldName: string;
fieldUpgradeState: FieldUpgradeState;
}

export function FieldUpgradeConflictsResolverHeader({
fieldName,
fieldUpgradeState,
}: FieldUpgradeConflictsResolverHeaderProps): JSX.Element {
return (
<EuiTitle data-test-subj="ruleUpgradeFieldDiffLabel" size="xs">
<h5>{fieldToDisplayNameMap[fieldName] ?? startCase(camelCase(fieldName))}</h5>
</EuiTitle>
<EuiFlexGroup direction="row" alignItems="center">
<EuiTitle data-test-subj="ruleUpgradeFieldDiffLabel" size="xs">
<h5>{fieldToDisplayNameMap[fieldName] ?? startCase(camelCase(fieldName))}</h5>
</EuiTitle>

<FieldUpgradeStateInfo state={fieldUpgradeState} />
</EuiFlexGroup>
);
}
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" />
&nbsp;<strong>{i18n.UPDATE_ACCEPTED}</strong>
{i18n.SEPARATOR}
{i18n.UPDATE_ACCEPTED_DESCRIPTION}
</EuiText>
</>
);

case FieldUpgradeState.SolvableConflict:
return (
<>
<EuiText color="warning" size="xs">
<EuiIcon type="warning" />
&nbsp;<strong>{i18n.SOLVABLE_CONFLICT}</strong>
{i18n.SEPARATOR}
{i18n.SOLVABLE_CONFLICT_DESCRIPTION}
</EuiText>
</>
);

case FieldUpgradeState.NonSolvableConflict:
return (
<>
<EuiText color="danger" size="xs">
<EuiIcon type="warning" />
&nbsp;<strong>{i18n.NON_SOLVABLE_CONFLICT}</strong>
{i18n.SEPARATOR}
{i18n.NON_SOLVABLE_CONFLICT_DESCRIPTION}
</EuiText>
</>
);
}
}
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';
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: ' - ',
}
);
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';
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>
);
}
Loading

0 comments on commit 4d54cfe

Please sign in to comment.