fixes small bugs and adds code comments

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

@@ -9,7 +9,6 @@ import { EuiFlexGroup, EuiHorizontalRule, EuiTitle } from '@elastic/eui';
 import { camelCase, startCase } from 'lodash';
 import React from 'react';
 import { DiffView } from '../json_diff/diff_view';
-import { DiffMethod } from '../json_diff/mark_edits';
 import { RuleDiffPanelWrapper } from './panel_wrapper';
 import type { FormattedFieldDiff, FieldDiff } from '../../../model/rule_details/rule_field_diff';
 import { fieldToDisplayNameMap } from './translations';
@@ -23,25 +22,19 @@ const SubFieldComponent = ({
 }: FieldDiff & {
   shouldShowSeparator: boolean;
   shouldShowSubtitles: boolean;
-}) => {
-  return (
-    <EuiFlexGroup justifyContent="spaceBetween">
-      <EuiFlexGroup direction="column">
-        {shouldShowSubtitles ? (
-          <EuiTitle size="xxxs">
-            <h4>{fieldToDisplayNameMap[fieldName] ?? startCase(camelCase(fieldName))}</h4>
-          </EuiTitle>
-        ) : null}
-        <DiffView
-          oldSource={currentVersion}
-          newSource={targetVersion}
-          diffMethod={DiffMethod.WORDS}
-        />
-        {shouldShowSeparator ? <EuiHorizontalRule margin="s" size="full" /> : null}
-      </EuiFlexGroup>
+}) => (
+  <EuiFlexGroup justifyContent="spaceBetween">
+    <EuiFlexGroup direction="column">
+      {shouldShowSubtitles ? (
+        <EuiTitle size="xxxs">
+          <h4>{fieldToDisplayNameMap[fieldName] ?? startCase(camelCase(fieldName))}</h4>
+        </EuiTitle>
+      ) : null}
+      <DiffView oldSource={currentVersion} newSource={targetVersion} />
+      {shouldShowSeparator ? <EuiHorizontalRule margin="s" size="full" /> : null}
     </EuiFlexGroup>
-  );
-};
+  </EuiFlexGroup>
+);
 
 export interface FieldDiffComponentProps {
   ruleDiffs: FormattedFieldDiff;
@@ -55,8 +48,8 @@ export const FieldGroupDiffComponent = ({
   const { fieldDiffs, shouldShowSubtitles } = ruleDiffs;
   return (
     <RuleDiffPanelWrapper fieldName={fieldsGroupName}>
-      {fieldDiffs.map(({ currentVersion, targetVersion, fieldName: specificFieldName }, i) => {
-        const shouldShowSeparator = i !== fieldDiffs.length - 1;
+      {fieldDiffs.map(({ currentVersion, targetVersion, fieldName: specificFieldName }, index) => {
+        const shouldShowSeparator = index !== fieldDiffs.length - 1;
         return (
           <SubFieldComponent
             key={specificFieldName}

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

@@ -25,6 +25,7 @@ export const RuleDiffHeaderBar = () => {
         position: sticky;
         top: 0;
         background: ${euiTheme.colors.emptyShade};
+        z-index: 1; // Fixes accordion button displaying above header bug
       `}
     >
       <EuiSpacer size="m" />

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

@@ -21,7 +21,9 @@ import {
   HISTORY_WINDOW_SIZE_FIELD_LABEL,
 } from '../translations';
 
-// Used when fields have different display names or formats than their corresponding rule object fields
+/**
+ * Used when fields have different display names or formats than their corresponding rule object fields
+ */
 export const fieldToDisplayNameMap: Record<string, string> = {
   data_source: i18n.translate(
     'xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.dataSourceLabel',

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

@@ -14,7 +14,7 @@ import type { FieldDiff } from '../../../model/rule_details/rule_field_diff';
 
 export const sortAndStringifyJson = (fieldValue: unknown): string => {
   if (!fieldValue) {
-    return '';
+    return ''; // The JSON diff package we use does not accept `undefined` as a valid entry, empty string renders the equivalent of no field
   }
 
   if (typeof fieldValue === 'string') {

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

@@ -31,6 +31,12 @@ export const getFormattedFieldDiffGroups = (
   fieldName: keyof AllFieldsDiff,
   fields: Partial<RuleFieldsDiff>
 ): FormattedFieldDiff => {
+  /**
+   * Field types that contain groupings of rule fields must be formatted differently to compare and render
+   * each individual nested field and to satisfy types
+   *
+   * Setting shouldShowSubtitles to `true` displays the grouped field names in the rendered diff component
+   */
   switch (fieldName) {
     case 'data_source':
       const dataSourceThreeWayDiff = (fields as RuleFieldsDiffWithDataSource)[fieldName];

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

@@ -28,6 +28,13 @@ export const UPDATES_TAB_LABEL = i18n.translate(
   }
 );
 
+export const JSON_VIEW_UPDATES_TAB_LABEL = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.jsonViewUpdatesTabLabel',
+  {
+    defaultMessage: 'JSON view',
+  }
+);
+
 export const DISMISS_BUTTON_LABEL = i18n.translate(
   'xpack.securitySolution.detectionEngine.ruleDetails.dismissButtonLabel',
   {

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx

@@ -283,20 +283,11 @@ export const UpgradePrebuiltRulesTableContextProvider = ({
     }
 
     return [
-      {
-        id: 'updates',
-        name: ruleDetailsI18n.UPDATES_TAB_LABEL,
-        content: (
-          <TabContentPadding>
-            <RuleDiffTab oldRule={activeRule.current_rule} newRule={activeRule.target_rule} />
-          </TabContentPadding>
-        ),
-      },
       ...(isPerFieldPrebuiltRulesDiffingEnabled
         ? [
             {
-              id: 'perFieldUpdates',
-              name: 'Per-field Updates', // TODO: eventually will be "updates" too
+              id: 'updates',
+              name: ruleDetailsI18n.UPDATES_TAB_LABEL,
               content: (
                 <TabContentPadding>
                   <PerFieldRuleDiffTab ruleDiff={activeRule.diff} />
@@ -305,6 +296,15 @@ export const UpgradePrebuiltRulesTableContextProvider = ({
             },
           ]
         : []),
+      {
+        id: 'jsonViewUpdates',
+        name: ruleDetailsI18n.JSON_VIEW_UPDATES_TAB_LABEL,
+        content: (
+          <TabContentPadding>
+            <RuleDiffTab oldRule={activeRule.current_rule} newRule={activeRule.target_rule} />
+          </TabContentPadding>
+        ),
+      },
     ];
   }, [
     previewedRule,