Skip to content

Commit

Permalink
Reduce number of options, update tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikitaindik
nikitaindik committed Dec 10, 2024
1 parent e5d13cd commit 5a455a9
Show file tree
Hide file tree
Showing 10 changed files with 275 additions and 124 deletions.
64 changes: 11 additions & 53 deletions ...ment/components/rule_details/three_way_diff/comparison_side/comparison_side_help_info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,7 @@ import React from 'react';
import useToggle from 'react-use/lib/useToggle';
import { EuiPopover, EuiText, EuiButtonIcon } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import { TITLE } from './translations';
import {
BASE_VERSION,
CURRENT_VERSION,
FINAL_VERSION,
TARGET_VERSION,
} from './versions_picker/translations';

/**
* Theme doesn't expose width variables. Using provided size variables will require
Expand All @@ -27,7 +20,11 @@ import {
*/
const POPOVER_WIDTH = 320;

export function ComparisonSideHelpInfo(): JSX.Element {
interface ComparisonSideHelpInfoProps {
options: Array<{ value: string; text: string; title: string }>;
}

export function ComparisonSideHelpInfo({ options }: ComparisonSideHelpInfoProps): JSX.Element {
const [isPopoverOpen, togglePopover] = useToggle(false);

const button = (
Expand All @@ -43,25 +40,18 @@ export function ComparisonSideHelpInfo(): JSX.Element {
<EuiText style={{ width: POPOVER_WIDTH }} size="s">
<FormattedMessage
id="xpack.securitySolution.detectionEngine.rules.upgradeRules.comparisonSide.upgradeHelpText"
defaultMessage="{title} shows field's JSON diff between prebuilt rule field versions affecting the rule update process. {versions}"
defaultMessage="The {title} lets you compare the values of a field across different versions of a rule: {versions} Differences are shown as JSON, with red lines showing what was removed, green lines showing additions, and bold text highlighting changes. Use {title} to review and understand changes across versions."
values={{
title: <strong>{TITLE}</strong>,
versions: (
<>
<br />
<ul>
<li>
<strong>{BASE_VERSION}</strong> {'-'} {BASE_VERSION_EXPLANATION}
</li>
<li>
<strong>{CURRENT_VERSION}</strong> {'-'} {CURRENT_VERSION_EXPLANATION}
</li>
<li>
<strong>{TARGET_VERSION}</strong> {'-'} {TARGET_VERSION_EXPLANATION}
</li>
<li>
<strong>{FINAL_VERSION}</strong> {'-'} {FINAL_VERSION_EXPLANATION}
</li>
{options.map((option) => (
<li>
<strong>{option.text}</strong> {'-'} {option.title}
</li>
))}
</ul>
</>
),
Expand All @@ -71,35 +61,3 @@ export function ComparisonSideHelpInfo(): JSX.Element {
</EuiPopover>
);
}

const BASE_VERSION_EXPLANATION = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.baseVersionExplanation',
{
defaultMessage: 'version originally installed from Elastic prebuilt rules package',
}
);

const CURRENT_VERSION_EXPLANATION = (
<FormattedMessage
id="xpack.securitySolution.detectionEngine.rules.upgradeRules.currentVersionExplanation"
defaultMessage="current version including modification made after prebuilt rule installation. With lack of modifications it matches with {base}."
values={{
base: <strong>{BASE_VERSION}</strong>,
}}
/>
);

const TARGET_VERSION_EXPLANATION = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.targetVersionExplanation',
{
defaultMessage: 'version coming from a new version of Elastic prebuilt rules package',
}
);

const FINAL_VERSION_EXPLANATION = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.finalVersionExplanation',
{
defaultMessage:
'version used to the update the rule. Initial value is suggested by the diff algorithm.',
}
);
13 changes: 6 additions & 7 deletions ...nagement/components/rule_details/three_way_diff/comparison_side/field_comparison_side.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
import React, { useState } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
import { VersionsPicker } from './versions_picker/versions_picker';
import type { Version } from './versions_picker/constants';
import { SelectedVersions } from './versions_picker/constants';
import type { Version, SelectedVersions } from './versions_picker/constants';
import { getOptionsForDiffOutcome } from './versions_picker/constants';
import { FieldUpgradeSideHeader } from '../field_upgrade_side_header';
import { useFieldUpgradeContext } from '../rule_upgrade/field_upgrade_context';
import { pickFieldValueForVersion } from './utils';
Expand All @@ -22,9 +22,8 @@ export function FieldComparisonSide(): JSX.Element {
const { fieldName, fieldDiff, finalDiffableRule } = useFieldUpgradeContext();
const resolvedValue = finalDiffableRule[fieldName];

const [selectedVersions, setSelectedVersions] = useState<SelectedVersions>(
SelectedVersions.CurrentFinal
);
const options = getOptionsForDiffOutcome(fieldDiff, resolvedValue);
const [selectedVersions, setSelectedVersions] = useState<SelectedVersions>(options[0].value);

const [oldVersionType, newVersionType] = selectedVersions.split('_') as [Version, Version];

Expand All @@ -42,13 +41,13 @@ export function FieldComparisonSide(): JSX.Element {
<EuiTitle size="xxs">
<h3>
{i18n.TITLE}
<ComparisonSideHelpInfo />
<ComparisonSideHelpInfo options={options} />
</h3>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<VersionsPicker
hasBaseVersion={fieldDiff.has_base_version}
options={options}
selectedVersions={selectedVersions}
onChange={setSelectedVersions}
/>
Expand Down
73 changes: 73 additions & 0 deletions ...ne/rule_management/components/rule_details/three_way_diff/comparison_side/translations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

import { i18n } from '@kbn/i18n';
import { FINAL_UPDATE } from '../field_final_side/components/translations';

export const TITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.comparisonSide.title',
Expand All @@ -20,3 +21,75 @@ export const NO_CHANGES = i18n.translate(
defaultMessage: 'No changes',
}
);

export const UPDATE_FROM_ELASTIC_TITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.updateFromElasticTitle',
{
defaultMessage: 'Update from Elastic',
}
);

export const UPDATE_FROM_ELASTIC_EXPLANATION = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.updateFromElasticExplanation',
{
defaultMessage: 'view the changes in Elastic’s latest update',
}
);

export const MY_CHANGES_TITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myChangesTitle',
{
defaultMessage: 'My changes',
}
);

export const MY_CHANGES_EXPLANATION = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myChangesExplanation',
{
defaultMessage: `view what you have changed in your installed rule and in the {finalUpdateSectionLabel} section`,
values: {
finalUpdateSectionLabel: FINAL_UPDATE,
},
}
);

export const MY_CHANGES_FINAL_UPDATE_ONLY_EXPLANATION = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myChangesFinalUpdateOnlyExplanation',
{
defaultMessage: `view the changes you made in the {finalUpdateSectionLabel} section`,
values: {
finalUpdateSectionLabel: FINAL_UPDATE,
},
}
);

export const MERGED_CHANGES_TITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.mergedChangesTitle',
{
defaultMessage: 'My changes merged with Elastic’s',
}
);

export const MERGED_CHANGES_EXPLANATION = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.mergedChangesExplanation',
{
defaultMessage: 'view an update suggestion that combines your changes with Elastic’s',
}
);

export const MY_CUSTOMIZATION_TITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myCustomizationTitle',
{
defaultMessage: 'My customization',
}
);

export const MY_CUSTOMIZATION_EXPLANATION = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myCustomizationExplanation',
{
defaultMessage: `view what you have changed in your installed rule. Doesn’t include changes made in the {finalUpdateSectionLabel} section.`,
values: {
finalUpdateSectionLabel: FINAL_UPDATE,
},
}
);
158 changes: 124 additions & 34 deletions ...ement/components/rule_details/three_way_diff/comparison_side/versions_picker/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,13 @@
* 2.0.
*/

import type { EuiSelectOption } from '@elastic/eui';
import * as i18n from './translations';
import { isEqual } from 'lodash';
import type { ThreeWayDiff } from '../../../../../../../../common/api/detection_engine';
import {
ThreeWayDiffConflict,
ThreeWayDiffOutcome,
} from '../../../../../../../../common/api/detection_engine';
import * as i18n from '../translations';

export enum Version {
Base = 'base',
Expand All @@ -24,35 +29,120 @@ export enum SelectedVersions {
TargetFinal = 'target_final',
}

export const CURRENT_OPTIONS: EuiSelectOption[] = [
{
value: SelectedVersions.CurrentFinal,
text: i18n.VERSION1_VS_VERSION2(i18n.CURRENT_VERSION, i18n.FINAL_VERSION),
},
{
value: SelectedVersions.CurrentTarget,
text: i18n.VERSION1_VS_VERSION2(i18n.CURRENT_VERSION, i18n.TARGET_VERSION),
},
];

export const TARGET_OPTIONS: EuiSelectOption[] = [
{
value: SelectedVersions.TargetFinal,
text: i18n.VERSION1_VS_VERSION2(i18n.TARGET_VERSION, i18n.FINAL_VERSION),
},
];

export const BASE_OPTIONS: EuiSelectOption[] = [
{
value: SelectedVersions.BaseFinal,
text: i18n.VERSION1_VS_VERSION2(i18n.BASE_VERSION, i18n.FINAL_VERSION),
},
{
value: SelectedVersions.BaseTarget,
text: i18n.VERSION1_VS_VERSION2(i18n.BASE_VERSION, i18n.TARGET_VERSION),
},
{
value: SelectedVersions.BaseCurrent,
text: i18n.VERSION1_VS_VERSION2(i18n.BASE_VERSION, i18n.CURRENT_VERSION),
},
];
export const getOptionsForDiffOutcome = (
fieldDiff: ThreeWayDiff<unknown>,
resolvedValue: unknown
): Array<{ value: SelectedVersions; text: string; title: string }> => {
switch (fieldDiff.diff_outcome) {
case ThreeWayDiffOutcome.StockValueCanUpdate: {
const hasUserChangedResolvedValue = !isEqual(fieldDiff.merged_version, resolvedValue);

const options = [
{
value: SelectedVersions.CurrentTarget,
text: i18n.UPDATE_FROM_ELASTIC_TITLE,
title: i18n.UPDATE_FROM_ELASTIC_EXPLANATION,
},
];

if (hasUserChangedResolvedValue) {
options.push({
value: SelectedVersions.CurrentFinal,
text: i18n.MY_CHANGES_TITLE,
title: i18n.MY_CHANGES_FINAL_UPDATE_ONLY_EXPLANATION,
});
}

return options;
}
case ThreeWayDiffOutcome.CustomizedValueNoUpdate:
return [
{
value: SelectedVersions.BaseFinal,
text: i18n.MY_CHANGES_TITLE,
title: i18n.MY_CHANGES_EXPLANATION,
},
];
case ThreeWayDiffOutcome.CustomizedValueSameUpdate:
return [
{
value: SelectedVersions.BaseFinal,
text: i18n.MY_CHANGES_TITLE,
title: i18n.MY_CHANGES_EXPLANATION,
},
{
value: SelectedVersions.BaseTarget,
text: i18n.UPDATE_FROM_ELASTIC_TITLE,
title: i18n.UPDATE_FROM_ELASTIC_EXPLANATION,
},
];
case ThreeWayDiffOutcome.CustomizedValueCanUpdate: {
const hasUserChangedResolvedValue = !isEqual(fieldDiff.merged_version, resolvedValue);

if (fieldDiff.conflict === ThreeWayDiffConflict.SOLVABLE) {
return [
{
value: SelectedVersions.BaseFinal,
text: hasUserChangedResolvedValue ? i18n.MY_CHANGES_TITLE : i18n.MERGED_CHANGES_TITLE,
title: hasUserChangedResolvedValue
? i18n.MY_CHANGES_FINAL_UPDATE_ONLY_EXPLANATION
: i18n.MERGED_CHANGES_EXPLANATION,
},
{
value: SelectedVersions.BaseTarget,
text: i18n.UPDATE_FROM_ELASTIC_TITLE,
title: i18n.UPDATE_FROM_ELASTIC_EXPLANATION,
},
{
value: SelectedVersions.BaseCurrent,
text: i18n.MY_CUSTOMIZATION_TITLE,
title: i18n.MY_CUSTOMIZATION_EXPLANATION,
},
];
}

if (fieldDiff.conflict === ThreeWayDiffConflict.NON_SOLVABLE) {
return [
{
value: SelectedVersions.BaseFinal,
text: i18n.MY_CHANGES_TITLE,
title: i18n.MY_CHANGES_EXPLANATION,
},
{
value: SelectedVersions.BaseTarget,
text: i18n.UPDATE_FROM_ELASTIC_TITLE,
title: i18n.UPDATE_FROM_ELASTIC_EXPLANATION,
},
{
value: SelectedVersions.BaseCurrent,
text: i18n.MY_CUSTOMIZATION_TITLE,
title: i18n.MY_CUSTOMIZATION_EXPLANATION,
},
];
}
}
case ThreeWayDiffOutcome.MissingBaseCanUpdate: {
const hasUserChangedResolvedValue = !isEqual(fieldDiff.merged_version, resolvedValue);

const options = [
{
value: SelectedVersions.CurrentTarget,
text: i18n.UPDATE_FROM_ELASTIC_TITLE,
title: i18n.UPDATE_FROM_ELASTIC_EXPLANATION,
},
];

if (hasUserChangedResolvedValue) {
options.push({
value: SelectedVersions.CurrentFinal,
text: i18n.MY_CHANGES_TITLE,
title: i18n.MY_CHANGES_FINAL_UPDATE_ONLY_EXPLANATION,
});
}

return options;
}
default:
return [];
}
};
Loading

0 comments on commit 5a455a9

Please sign in to comment.