[Security Solution] ThreeWayDiff UI: Add FieldReadOnly component

x-pack/plugins/security_solution/common/api/detection_engine/prebuilt_rules/review_rule_upgrade/review_rule_upgrade_route.ts

@@ -21,7 +21,7 @@ export interface RuleUpgradeStatsForReview {
   /** Number of installed prebuilt rules available for upgrade (stock + customized) */
   num_rules_to_upgrade_total: number;
 
-  /** Number of installed prebuilt rules with upgrade conflicts (SOLVABLE or NON_SOLVALBE) */
+  /** Number of installed prebuilt rules with upgrade conflicts (SOLVABLE or NON_SOLVABLE) */
   num_rules_with_conflicts: number;
 
   /** Number of installed prebuilt rules with NON_SOLVABLE upgrade conflicts */

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/helpers.ts

@@ -5,15 +5,22 @@
  * 2.0.
  */
 
-import type { RuleFieldsDiff, ThreeWayDiff } from '../../../../../common/api/detection_engine';
-import { ThreeWayDiffOutcome } from '../../../../../common/api/detection_engine';
+import type { Filter } from '@kbn/es-query';
+import type {
+  DiffableAllFields,
+  RuleFieldsDiff,
+  ThreeWayDiff,
+} from '../../../../../common/api/detection_engine';
+import { DataSourceType, ThreeWayDiffOutcome } from '../../../../../common/api/detection_engine';
 import type { FieldsGroupDiff } from '../../model/rule_details/rule_field_diff';
 import {
   ABOUT_UPGRADE_FIELD_ORDER,
   DEFINITION_UPGRADE_FIELD_ORDER,
   SCHEDULE_UPGRADE_FIELD_ORDER,
   SETUP_UPGRADE_FIELD_ORDER,
 } from './constants';
+import * as i18n from './translations';
+import { assertUnreachable } from '../../../../../common/utility_types';
 
 export const getSectionedFieldDiffs = (fields: FieldsGroupDiff[]) => {
   const aboutFields = [];
@@ -57,3 +64,58 @@ export const filterUnsupportedDiffOutcomes = (
       );
     })
   );
+
+export function getQueryLanguageLabel(language: string) {
+  switch (language) {
+    case 'kuery':
+      return i18n.KUERY_LANGUAGE_LABEL;
+    case 'lucene':
+      return i18n.LUCENE_LANGUAGE_LABEL;
+    default:
+      return language;
+  }
+}
+
+/**
+ * Assigns type `Filter` to items that have a `meta` property. Removes any other items.
+ */
+export function typeCheckFilters(filters: unknown[]): Filter[] {
+  return filters.filter((f) => {
+    if (typeof f === 'object' && f !== null && 'meta' in f) {
+      return true;
+    }
+
+    return false;
+  }) as Filter[];
+}
+
+type DataSourceProps =
+  | {
+      index: undefined;
+      dataViewId: undefined;
+    }
+  | {
+      index: string[];
+      dataViewId: undefined;
+    }
+  | {
+      index: undefined;
+      dataViewId: string;
+    };
+
+/**
+ * Extracts `index` and `dataViewId` from a `data_source` object for use in the `Filters` component.
+ */
+export function getDataSourceProps(dataSource: DiffableAllFields['data_source']): DataSourceProps {
+  if (!dataSource) {
+    return { index: undefined, dataViewId: undefined };
+  }
+
+  if (dataSource.type === DataSourceType.index_patterns) {
+    return { index: dataSource.index_patterns, dataViewId: undefined };
+  } else if (dataSource.type === DataSourceType.data_view) {
+    return { index: undefined, dataViewId: dataSource.data_view_id };
+  }
+
+  return assertUnreachable(dataSource);
+}

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

@@ -43,10 +43,10 @@ const OverrideColumn = styled(EuiFlexItem)`
   text-overflow: ellipsis;
 `;
 
-const OverrideValueColumn = styled(EuiFlexItem)`
-  width: 30px;
-  max-width: 30px;
+const OverrideValueColumn = styled.div`
+  width: 50px;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
 `;
 
@@ -86,7 +86,7 @@ interface SeverityMappingItemProps {
   severityMappingItem: SeverityMappingItemType;
 }
 
-const SeverityMappingItem = ({ severityMappingItem }: SeverityMappingItemProps) => (
+export const SeverityMappingItem = ({ severityMappingItem }: SeverityMappingItemProps) => (
   <EuiFlexGroup alignItems="center" gutterSize="s">
     <OverrideColumn>
       <EuiToolTip
@@ -96,16 +96,18 @@ const SeverityMappingItem = ({ severityMappingItem }: SeverityMappingItemProps)
         <span data-test-subj="severityOverrideField">{`${severityMappingItem.field}:`}</span>
       </EuiToolTip>
     </OverrideColumn>
-    <OverrideValueColumn>
+    <EuiFlexItem grow={false}>
       <EuiToolTip
         content={severityMappingItem.value}
         data-test-subj={`severityOverrideValue-${severityMappingItem.value}`}
       >
-        <span data-test-subj="severityOverrideValue">
-          {defaultToEmptyTag(severityMappingItem.value)}
-        </span>
+        <OverrideValueColumn>
+          <span data-test-subj="severityOverrideValue">
+            {defaultToEmptyTag(severityMappingItem.value)}
+          </span>
+        </OverrideValueColumn>
       </EuiToolTip>
-    </OverrideValueColumn>
+    </EuiFlexItem>
     <EuiFlexItem grow={false}>
       <EuiIcon type={'sortRight'} />
     </EuiFlexItem>
@@ -132,7 +134,7 @@ interface RiskScoreMappingItemProps {
   riskScoreMappingItem: RiskScoreMappingItemType;
 }
 
-const RiskScoreMappingItem = ({ riskScoreMappingItem }: RiskScoreMappingItemProps) => (
+export const RiskScoreMappingItem = ({ riskScoreMappingItem }: RiskScoreMappingItemProps) => (
   <EuiFlexGroup alignItems="center" gutterSize="s">
     <OverrideColumn>
       <EuiToolTip
@@ -218,15 +220,15 @@ interface ThreatProps {
   threat: Threats;
 }
 
-const Threat = ({ threat }: ThreatProps) => (
+export const Threat = ({ threat }: ThreatProps) => (
   <ThreatEuiFlexGroup threat={filterEmptyThreats(threat)} data-test-subj="threatPropertyValue" />
 );
 
 interface ThreatIndicatorPathProps {
   threatIndicatorPath: string;
 }
 
-const ThreatIndicatorPath = ({ threatIndicatorPath }: ThreatIndicatorPathProps) => (
+export const ThreatIndicatorPath = ({ threatIndicatorPath }: ThreatIndicatorPathProps) => (
   <EuiText size="s">{threatIndicatorPath}</EuiText>
 );