From 5f33ce332cfa6213fcccb60c3a09d6d0be02f86d Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Sun, 14 Jul 2024 17:41:37 +0200 Subject: [PATCH 1/3] Add `VersionPicker` component --- .../versions_picker/constants.ts | 50 ++++++++++++++++ .../versions_picker/translations.ts | 57 +++++++++++++++++++ .../versions_picker.stories.tsx | 47 +++++++++++++++ .../versions_picker/versions_picker.tsx | 46 +++++++++++++++ 4 files changed, 200 insertions(+) create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/constants.ts create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/translations.ts create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.stories.tsx create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.tsx diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/constants.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/constants.ts new file mode 100644 index 0000000000000..1a12f08bc73a9 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/constants.ts @@ -0,0 +1,50 @@ +/* + * 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 * as i18n from './translations'; + +export enum SelectedVersions { + BaseTarget = 'base_target', + BaseCurrent = 'base_current', + BaseFinal = 'base_final', + CurrentTarget = 'current_target', + CurrentFinal = 'current_final', + TargetFinal = 'target_final', +} + +export const BASE_OPTIONS = [ + { + value: SelectedVersions.BaseTarget, + text: i18n.BASE_VS_TARGET, + }, + { + value: SelectedVersions.BaseCurrent, + text: i18n.BASE_VS_CURRENT, + }, + { + value: SelectedVersions.BaseFinal, + text: i18n.BASE_VS_FINAL, + }, +]; + +export const CURRENT_OPTIONS = [ + { + value: SelectedVersions.CurrentTarget, + text: i18n.CURRENT_VS_TARGET, + }, + { + value: SelectedVersions.CurrentFinal, + text: i18n.CURRENT_VS_FINAL, + }, +]; + +export const TARGET_OPTIONS = [ + { + value: SelectedVersions.TargetFinal, + text: i18n.TARGET_VS_FINAL, + }, +]; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/translations.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/translations.ts new file mode 100644 index 0000000000000..15699edc206e7 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/translations.ts @@ -0,0 +1,57 @@ +/* + * 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 BASE_VS_TARGET = i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versionsPicker.baseVsTargetLabel', + { + defaultMessage: 'Base vs Target', + } +); + +export const BASE_VS_CURRENT = i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versionsPicker.baseVsCurrentLabel', + { + defaultMessage: 'Base vs Current', + } +); + +export const BASE_VS_FINAL = i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versionsPicker.baseVsFinalLabel', + { + defaultMessage: 'Base vs Final', + } +); + +export const CURRENT_VS_TARGET = i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versionsPicker.currentVsTargetLabel', + { + defaultMessage: 'Current vs Target', + } +); + +export const CURRENT_VS_FINAL = i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versionsPicker.currentVsFinalLabel', + { + defaultMessage: 'Current vs Final', + } +); + +export const TARGET_VS_FINAL = i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versionsPicker.targetVsFinalLabel', + { + defaultMessage: 'Target vs Final', + } +); + +export const VERSION_PICKER_ARIA_LABEL = i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versionsPicker.ariaLabel', + { + defaultMessage: 'Select versions to compare', + } +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.stories.tsx new file mode 100644 index 0000000000000..48fe0ad0c75e2 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.stories.tsx @@ -0,0 +1,47 @@ +/* + * 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, { useState } from 'react'; +import type { Story } from '@storybook/react'; +import { VersionsPicker } from './versions_picker'; +import { SelectedVersions } from './constants'; + +export default { + component: VersionsPicker, + title: 'ThreeWayDiff/VersionsPicker', + argTypes: { + hasBaseVersion: { + control: 'boolean', + description: 'Indicates whether the base version of a field is available', + defaultValue: true, + }, + }, +}; + +const Template: Story<{ hasBaseVersion: boolean }> = (args) => { + const [selectedVersions, setSelectedVersions] = useState( + SelectedVersions.BaseTarget + ); + + return ( + + ); +}; + +export const Default = Template.bind({}); +Default.args = { + hasBaseVersion: true, +}; + +export const NoBaseVersion = Template.bind({}); +NoBaseVersion.args = { + hasBaseVersion: false, +}; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.tsx new file mode 100644 index 0000000000000..fd0ff57b70515 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.tsx @@ -0,0 +1,46 @@ +/* + * 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, { useCallback, useMemo } from 'react'; +import { EuiSelect } from '@elastic/eui'; +import type { EuiSelectOption } from '@elastic/eui'; +import { BASE_OPTIONS, CURRENT_OPTIONS, TARGET_OPTIONS } from './constants'; +import type { SelectedVersions } from './constants'; +import * as i18n from './translations'; + +interface VersionsPickerProps { + hasBaseVersion: boolean; + selectedVersions: SelectedVersions; + onChange: (pickedVersions: SelectedVersions) => void; +} + +export function VersionsPicker({ + hasBaseVersion, + selectedVersions, + onChange, +}: VersionsPickerProps) { + const options: EuiSelectOption[] = useMemo( + () => [...(hasBaseVersion ? BASE_OPTIONS : []), ...CURRENT_OPTIONS, ...TARGET_OPTIONS], + [hasBaseVersion] + ); + + const handleChange = useCallback( + (changeEvent) => { + onChange(changeEvent.target.value as SelectedVersions); + }, + [onChange] + ); + + return ( + + ); +} From 3e05fbb915a6995462e7cae7015fbbed6a264967 Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Fri, 19 Jul 2024 17:08:30 +0200 Subject: [PATCH 2/3] Reorder the options, set "Current vs Final" as default --- .../versions_picker/constants.ts | 35 ++++++++++--------- .../versions_picker/versions_picker.tsx | 7 ++-- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/constants.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/constants.ts index 1a12f08bc73a9..ca8b0c75e1727 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/constants.ts +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/constants.ts @@ -5,6 +5,7 @@ * 2.0. */ +import type { EuiSelectOption } from '@elastic/eui'; import * as i18n from './translations'; export enum SelectedVersions { @@ -16,35 +17,35 @@ export enum SelectedVersions { TargetFinal = 'target_final', } -export const BASE_OPTIONS = [ +export const CURRENT_OPTIONS: EuiSelectOption[] = [ { - value: SelectedVersions.BaseTarget, - text: i18n.BASE_VS_TARGET, + value: SelectedVersions.CurrentFinal, + text: i18n.CURRENT_VS_FINAL, }, { - value: SelectedVersions.BaseCurrent, - text: i18n.BASE_VS_CURRENT, + value: SelectedVersions.CurrentTarget, + text: i18n.CURRENT_VS_TARGET, }, +]; + +export const TARGET_OPTIONS: EuiSelectOption[] = [ { - value: SelectedVersions.BaseFinal, - text: i18n.BASE_VS_FINAL, + value: SelectedVersions.TargetFinal, + text: i18n.TARGET_VS_FINAL, }, ]; -export const CURRENT_OPTIONS = [ +export const BASE_OPTIONS: EuiSelectOption[] = [ { - value: SelectedVersions.CurrentTarget, - text: i18n.CURRENT_VS_TARGET, + value: SelectedVersions.BaseFinal, + text: i18n.BASE_VS_FINAL, }, { - value: SelectedVersions.CurrentFinal, - text: i18n.CURRENT_VS_FINAL, + value: SelectedVersions.BaseTarget, + text: i18n.BASE_VS_TARGET, }, -]; - -export const TARGET_OPTIONS = [ { - value: SelectedVersions.TargetFinal, - text: i18n.TARGET_VS_FINAL, + value: SelectedVersions.BaseCurrent, + text: i18n.BASE_VS_CURRENT, }, ]; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.tsx index fd0ff57b70515..f56616adb2b64 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.tsx @@ -8,8 +8,7 @@ import React, { useCallback, useMemo } from 'react'; import { EuiSelect } from '@elastic/eui'; import type { EuiSelectOption } from '@elastic/eui'; -import { BASE_OPTIONS, CURRENT_OPTIONS, TARGET_OPTIONS } from './constants'; -import type { SelectedVersions } from './constants'; +import { BASE_OPTIONS, CURRENT_OPTIONS, TARGET_OPTIONS, SelectedVersions } from './constants'; import * as i18n from './translations'; interface VersionsPickerProps { @@ -20,11 +19,11 @@ interface VersionsPickerProps { export function VersionsPicker({ hasBaseVersion, - selectedVersions, + selectedVersions = SelectedVersions.CurrentFinal, onChange, }: VersionsPickerProps) { const options: EuiSelectOption[] = useMemo( - () => [...(hasBaseVersion ? BASE_OPTIONS : []), ...CURRENT_OPTIONS, ...TARGET_OPTIONS], + () => [...CURRENT_OPTIONS, ...TARGET_OPTIONS, ...(hasBaseVersion ? BASE_OPTIONS : [])], [hasBaseVersion] ); From 66ac9b9036f183d42ec8cec85616c5dda0a5169f Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Fri, 19 Jul 2024 17:27:29 +0200 Subject: [PATCH 3/3] Change component path in Storybook viewer --- .../versions_picker/versions_picker.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.stories.tsx index 48fe0ad0c75e2..c9193e2c358ad 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/versions_picker/versions_picker.stories.tsx @@ -12,7 +12,7 @@ import { SelectedVersions } from './constants'; export default { component: VersionsPicker, - title: 'ThreeWayDiff/VersionsPicker', + title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/VersionsPicker', argTypes: { hasBaseVersion: { control: 'boolean', @@ -24,7 +24,7 @@ export default { const Template: Story<{ hasBaseVersion: boolean }> = (args) => { const [selectedVersions, setSelectedVersions] = useState( - SelectedVersions.BaseTarget + SelectedVersions.CurrentFinal ); return (