[Security Solution] Add upgrade prebuilt rule flyout layout details

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side.tsx

@@ -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';
@@ -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;
@@ -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} />
     </>

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side_help_info.tsx

@@ -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>
+  );
+}

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/translations.ts

@@ -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',
   {

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/components/field_upgrade_conflicts_resolver.tsx

@@ -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 {
@@ -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"
       >

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/components/field_upgrade_conflicts_resolver_header.tsx

@@ -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>
   );
 }

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/components/field_upgrade_state_info/field_upgrade_state_info.tsx

@@ -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>
+        </>
+      );
+  }
+}

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/components/field_upgrade_state_info/index.ts

@@ -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';

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/components/field_upgrade_state_info/translations.tsx

@@ -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: ' - ',
+  }
+);

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/components/rule_upgrade_callout/index.ts

@@ -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';

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/components/rule_upgrade_callout/rule_upgrade_callout.tsx

@@ -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>
+  );
+}