Scenes: Add endLineNumber to json diff (#87049)

public/app/features/dashboard-scene/saving/getDashboardChanges.ts

@@ -1,9 +1,10 @@
-import { compare } from 'fast-json-patch';
 // @ts-ignore
 import jsonMap from 'json-source-map';
 
 import type { AdHocVariableModel, TypedVariableModel } from '@grafana/data';
-import type { Dashboard, VariableOption } from '@grafana/schema';
+import { Dashboard, VariableOption } from '@grafana/schema';
+
+import { jsonDiff } from '../settings/version-history/utils';
 
 export function get(obj: any, keys: string[]) {
   try {
@@ -104,58 +105,3 @@ export function applyVariableChanges(saveModel: Dashboard, originalSaveModel: Da
 
   return hasVariableValueChanges;
 }
-
-export type Diff = {
-  op: 'add' | 'replace' | 'remove' | 'copy' | 'test' | '_get' | 'move';
-  value: unknown;
-  originalValue: unknown;
-  path: string[];
-  startLineNumber: number;
-};
-
-export type Diffs = Record<string, Diff[]>;
-
-export const jsonDiff = (lhs: Dashboard, rhs: Dashboard): Diffs => {
-  const diffs = compare(lhs, rhs);
-  const lhsMap = jsonMap.stringify(lhs, null, 2);
-  const rhsMap = jsonMap.stringify(rhs, null, 2);
-
-  const diffInfo = diffs.map((diff) => {
-    let originalValue = undefined;
-    let value = undefined;
-    let startLineNumber = 0;
-
-    const path = diff.path.split('/').slice(1);
-
-    if (diff.op === 'replace' && rhsMap.pointers[diff.path]) {
-      originalValue = get(lhs, path);
-      value = diff.value;
-      startLineNumber = rhsMap.pointers[diff.path].value.line;
-    } else if (diff.op === 'add' && rhsMap.pointers[diff.path]) {
-      value = diff.value;
-      startLineNumber = rhsMap.pointers[diff.path].value.line;
-    } else if (diff.op === 'remove' && lhsMap.pointers[diff.path]) {
-      originalValue = get(lhs, path);
-      startLineNumber = lhsMap.pointers[diff.path].value.line;
-    }
-
-    return {
-      op: diff.op,
-      value,
-      path,
-      originalValue,
-      startLineNumber,
-    };
-  });
-
-  const sortedDiffs = diffInfo.sort((a, b) => a.startLineNumber - b.startLineNumber);
-  const grouped = sortedDiffs.reduce<Record<string, Diff[]>>((acc, value) => {
-    const groupKey = value.path[0];
-    acc[groupKey] ??= [];
-    acc[groupKey].push(value);
-
-    return acc;
-  }, {});
-
-  return grouped;
-};

public/app/features/dashboard-scene/settings/version-history/DiffTitle.tsx

@@ -12,7 +12,14 @@ type DiffTitleProps = {
   title: string;
 };
 
-const replaceDiff: Diff = { op: 'replace', originalValue: undefined, path: [''], value: undefined, startLineNumber: 0 };
+const replaceDiff: Diff = {
+  op: 'replace',
+  originalValue: undefined,
+  path: [''],
+  value: undefined,
+  startLineNumber: 0,
+  endLineNumber: 0,
+};
 
 export const DiffTitle = ({ diff, title }: DiffTitleProps) => {
   const styles = useStyles2(getDiffTitleStyles);

public/app/features/dashboard-scene/settings/version-history/utils.test.ts

@@ -216,6 +216,7 @@ describe('jsonDiff', () => {
     const expected = {
       description: [
         {
+          endLineNumber: 14,
           op: 'add',
           originalValue: undefined,
           path: ['description'],
@@ -225,6 +226,7 @@ describe('jsonDiff', () => {
       ],
       graphTooltip: [
         {
+          endLineNumber: 17,
           op: 'replace',
           originalValue: 0,
           path: ['graphTooltip'],
@@ -234,6 +236,7 @@ describe('jsonDiff', () => {
       ],
       panels: [
         {
+          endLineNumber: 23,
           op: 'add',
           originalValue: undefined,
           path: ['panels', '0'],
@@ -245,6 +248,7 @@ describe('jsonDiff', () => {
       ],
       tags: [
         {
+          endLineNumber: 27,
           op: 'add',
           originalValue: undefined,
           path: ['tags', '0'],
@@ -254,6 +258,7 @@ describe('jsonDiff', () => {
       ],
       timepicker: [
         {
+          endLineNumber: 49,
           op: 'add',
           originalValue: undefined,
           path: ['timepicker', 'refresh_intervals'],
@@ -263,6 +268,7 @@ describe('jsonDiff', () => {
       ],
       timezone: [
         {
+          endLineNumber: 51,
           op: 'replace',
           originalValue: '',
           path: ['timezone'],
@@ -272,6 +278,7 @@ describe('jsonDiff', () => {
       ],
       title: [
         {
+          endLineNumber: 52,
           op: 'replace',
           originalValue: 'test dashboard',
           path: ['title'],
@@ -281,6 +288,7 @@ describe('jsonDiff', () => {
       ],
       version: [
         {
+          endLineNumber: 54,
           op: 'replace',
           originalValue: 2,
           path: ['version'],

public/app/features/dashboard-scene/settings/version-history/utils.ts

@@ -11,6 +11,7 @@ export type Diff = {
   originalValue: unknown;
   path: string[];
   startLineNumber: number;
+  endLineNumber: number;
 };
 
 export type Diffs = {
@@ -29,6 +30,7 @@ export const jsonDiff = (lhs: JSONValue, rhs: JSONValue): Diffs => {
       let originalValue = undefined;
       let value = undefined;
       let startLineNumber = 0;
+      let endLineNumber = 0;
 
       const path = tail(diff.path.split('/'));
 
@@ -36,14 +38,17 @@ export const jsonDiff = (lhs: JSONValue, rhs: JSONValue): Diffs => {
         originalValue = get(lhs, path);
         value = diff.value;
         startLineNumber = rhsMap.pointers[diff.path].value.line;
+        endLineNumber = rhsMap.pointers[diff.path].valueEnd.line;
       }
       if (diff.op === 'add' && rhsMap.pointers[diff.path]) {
         value = diff.value;
         startLineNumber = rhsMap.pointers[diff.path].value.line;
+        endLineNumber = rhsMap.pointers[diff.path].valueEnd.line;
       }
       if (diff.op === 'remove' && lhsMap.pointers[diff.path]) {
         originalValue = get(lhs, path);
         startLineNumber = lhsMap.pointers[diff.path].value.line;
+        endLineNumber = lhsMap.pointers[diff.path].valueEnd.line;
       }
 
       return {
@@ -52,6 +57,7 @@ export const jsonDiff = (lhs: JSONValue, rhs: JSONValue): Diffs => {
         path,
         originalValue,
         startLineNumber,
+        endLineNumber,
       };
     });
   };

public/app/features/dashboard/components/SaveDashboard/SaveDashboardDiff.tsx

@@ -63,7 +63,16 @@ export const SaveDashboardDiff = ({
     <Stack direction="column" gap={1}>
       {hasFolderChanges && (
         <DiffGroup
-          diffs={[{ op: 'replace', value: newFolder, originalValue: oldFolder, path: [], startLineNumber: 0 }]}
+          diffs={[
+            {
+              op: 'replace',
+              value: newFolder,
+              originalValue: oldFolder,
+              path: [],
+              startLineNumber: 0,
+              endLineNumber: 0,
+            },
+          ]}
           key={'folder'}
           title={'folder'}
         />