Fix types, rename updates tab to "Updates", upgrade the "diff" lib

elastic · Nov 30, 2023 · 26ef3e7 · 26ef3e7
1 parent 56afbfb
commit 26ef3e7
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -912,7 +912,7 @@
     "deep-freeze-strict": "^1.1.1",
     "deepmerge": "^4.2.2",
     "del": "^6.1.0",
-    "diff": "^4.0.1",
+    "diff": "^5.1.0",
     "diff-match-patch": "^1.0.5",
     "diff-match-patch-line-and-word": "^0.1.3",
     "elastic-apm-node": "^4.1.0",

diff --git a/...detection_engine/rule_management/components/rule_details/json_diff/mark_edits_by_word.tsx b/...detection_engine/rule_management/components/rule_details/json_diff/mark_edits_by_word.tsx
@@ -93,7 +93,7 @@ function splitDiffToLines(diffs: Diff[]): Diff[][] {
       const next: Diff[][] = [
         ...lines.slice(0, -1),
         [...lines[lines.length - 1], currentLineRemaining],
-        ...nextLines.map((line: string) => [line]),
+        ...nextLines.map((line) => [line]),
       ];
       return next;
     },

diff --git a/...on_diff/rule_diff_tab_react_diff_view.tsx → .../rule_details/json_diff/rule_diff_tab.tsx b/...on_diff/rule_diff_tab_react_diff_view.tsx → .../rule_details/json_diff/rule_diff_tab.tsx
@@ -22,10 +22,13 @@ import {
 import 'react-diff-view/style/index.css';
 import type { RenderGutter, HunkData, DecorationProps, TokenizeOptions } from 'react-diff-view';
 import unidiff from 'unidiff';
+import stringify from 'json-stable-stringify';
 import { EuiSpacer, EuiIcon, EuiLink, useEuiTheme, EuiSwitch, EuiRadioGroup } from '@elastic/eui';
 import type { RuleResponse } from '../../../../../../common/api/detection_engine/model/rule_schema/rule_schemas.gen';
 import { markEditsBy, DiffMethod } from './mark_edits_by_word';
-import { sortAndStringifyJson } from './sort_stringify_json';
+
+const sortAndStringifyJson = (jsObject: Record<string, unknown>): string =>
+  stringify(jsObject, { space: 2 });
 
 interface UnfoldProps extends Omit<DecorationProps, 'children'> {
   start: number;
@@ -407,7 +410,7 @@ interface RuleDiffTabProps {
   newRule: RuleResponse;
 }
 
-export const RuleDiffTabReactDiffView = ({ oldRule, newRule }: RuleDiffTabProps) => {
+export const RuleDiffTab = ({ oldRule, newRule }: RuleDiffTabProps) => {
   const options = [
     {
       id: DiffMethod.CHARS,

diff --git a/...detection_engine/rule_management/components/rule_details/json_diff/sort_stringify_json.ts b/...detection_engine/rule_management/components/rule_details/json_diff/sort_stringify_json.ts
diff --git a/..._solution/public/detection_engine/rule_management/components/rule_details/translations.ts b/..._solution/public/detection_engine/rule_management/components/rule_details/translations.ts
@@ -21,6 +21,13 @@ export const INVESTIGATION_GUIDE_TAB_LABEL = i18n.translate(
   }
 );
 
+export const UPDATES_TAB_LABEL = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.updatesTabLabel',
+  {
+    defaultMessage: 'Updates',
+  }
+);
+
 export const DISMISS_BUTTON_LABEL = i18n.translate(
   'xpack.securitySolution.detectionEngine.ruleDetails.dismissButtonLabel',
   {

diff --git a/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx b/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx
@@ -28,11 +28,10 @@ import {
   RuleDetailsFlyout,
   TabContentPadding,
 } from '../../../../rule_management/components/rule_details/rule_details_flyout';
-import * as i18n from './translations';
-
+import { RuleDiffTab } from '../../../../rule_management/components/rule_details/json_diff/rule_diff_tab';
 import { MlJobUpgradeModal } from '../../../../../detections/components/modals/ml_job_upgrade_modal';
-
-import { RuleDiffTabReactDiffView } from '../../../../rule_management/components/rule_details/json_diff/rule_diff_tab_react_diff_view';
+import * as ruleDetailsI18n from '../../../../rule_management/components/rule_details/translations';
+import * as i18n from './translations';
 
 export interface UpgradePrebuiltRulesTableState {
   /**
@@ -292,25 +291,26 @@ export const UpgradePrebuiltRulesTableContextProvider = ({
               </EuiButton>
             }
             getRuleTabs={(rule, defaultTabs) => {
-              const activeRule = filteredRules.find(({ id }) => rule.id);
+              const activeRule = filteredRules.find(({ id }) => id === rule.id);
+
               if (!activeRule) {
                 return defaultTabs;
               }
 
-              const diffTabReactDiffView = {
-                id: 'react-diff-view',
-                name: 'react-diff-view',
+              const diffTab = {
+                id: 'updates',
+                name: ruleDetailsI18n.UPDATES_TAB_LABEL,
                 content: (
                   <TabContentPadding>
-                    <RuleDiffTabReactDiffView
+                    <RuleDiffTab
                       oldRule={activeRule.current_rule}
                       newRule={activeRule.target_rule}
                     />
                   </TabContentPadding>
                 ),
               };
 
-              return [diffTabReactDiffView, ...defaultTabs];
+              return [diffTab, ...defaultTabs];
             }}
           />
         )}