fix diffing in both UI and API (#810)

kotsadm/pkg/downstream/diff.go

@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"os/exec"
 	"path/filepath"
+	"strings"
 
 	"github.com/marccampbell/yaml-toolbox/pkg/splitter"
 	"github.com/pkg/errors"
@@ -19,10 +20,10 @@ type Diff struct {
 	LinesRemoved int `json:"linesRemoved"`
 }
 
-func diffContent(updatedContent string, baseContent string) (int, int, error) {
+func diffContent(baseContent string, updatedContent string) (int, int, error) {
 	dmp := diffmatchpatch.New()
 
-	charsA, charsB, lines := dmp.DiffLinesToChars(updatedContent, baseContent)
+	charsA, charsB, lines := dmp.DiffLinesToChars(baseContent, updatedContent)
 
 	diffs := dmp.DiffMain(charsA, charsB, false)
 	diffs = dmp.DiffCharsToLines(diffs, lines)
@@ -31,10 +32,13 @@ func diffContent(updatedContent string, baseContent string) (int, int, error) {
 	deletions := 0
 
 	for _, diff := range diffs {
-		if diff.Type == diffmatchpatch.DiffDelete {
-			deletions++
-		} else if diff.Type == diffmatchpatch.DiffInsert {
-			additions++
+		scanner := bufio.NewScanner(strings.NewReader(diff.Text))
+		for scanner.Scan() {
+			if diff.Type == diffmatchpatch.DiffDelete {
+				deletions++
+			} else if diff.Type == diffmatchpatch.DiffInsert {
+				additions++
+			}
 		}
 	}
 
@@ -83,22 +87,23 @@ func DiffAppVersionsForDownstream(downstreamName string, archive string, diffBas
 			continue
 		}
 
-		linesAdded, linesRemoved, err := diffContent(string(archiveContents), string(baseContents))
+		linesAdded, linesRemoved, err := diffContent(string(baseContents), string(archiveContents))
 		if err != nil {
 			return nil, errors.Wrap(err, "failed to diff contents")
 		}
 
 		diff.LinesAdded += linesAdded
 		diff.LinesRemoved += linesRemoved
 
-		if diff.LinesAdded > 0 || diff.LinesRemoved > 0 {
+		if linesAdded > 0 || linesRemoved > 0 {
 			diff.FilesChanged++
 		}
 	}
 
 	for baseFilename, baseContents := range baseFiles {
 		_, ok := archiveFiles[baseFilename]
 		if !ok {
+			// this file was removed
 			scanner := bufio.NewScanner(bytes.NewReader(baseContents))
 			for scanner.Scan() {
 				diff.LinesRemoved++

kotsadm/web/package.json

@@ -126,6 +126,7 @@
     "clipboard": "^2.0.4",
     "cronstrue": "^1.84.0",
     "dayjs": "^1.8.14",
+    "diff": "^4.0.2",
     "downloadjs": "^1.4.7",
     "enzyme-adapter-react-16": "^1.13.1",
     "file-saver": "^2.0.2",

kotsadm/web/src/components/shared/DiffEditor.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { MonacoDiffEditor } from "react-monaco-editor";
 
-import { getLineChanges } from "../../utilities/utilities";
+import { diffContent } from "../../utilities/utilities";
 
 export default class DiffEditor extends React.Component {
   state = {
@@ -10,11 +10,9 @@ export default class DiffEditor extends React.Component {
     changes: 0
   }
 
-  onEditorValuesLoaded = () => {
-    if (this.monacoDiffEditor) {
-      const lineChanges = getLineChanges(this.monacoDiffEditor.editor.getLineChanges());
-      this.setState(lineChanges)
-    }
+  componentDidMount() {
+    const lineChanges = diffContent(this.props.original || "", this.props.value || "");
+    this.setState(lineChanges);
   }
 
   render() {

kotsadm/web/src/utilities/utilities.js

@@ -3,12 +3,12 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import utc from "dayjs/plugin/utc";
 import queryString from "query-string";
 import sortBy from "lodash/sortBy";
-import jwt from "jsonwebtoken";
 import cronstrue from "cronstrue";
 import size from "lodash/size";
 import each from "lodash/each";
 import find from "lodash/find";
-import { default as download } from "downloadjs";
+import * as jsdiff from "diff";
+
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
 
@@ -260,34 +260,22 @@ export function getFileFormat(selectedFile) {
   return "text";
 }
 
-export function getLineChanges(lineChangesArr) {
-  let addedLines = 0;
-  let removedLines = 0;
-  lineChangesArr.forEach(lineChange => {
-    const {
-      originalStartLineNumber,
-      originalEndLineNumber,
-      modifiedStartLineNumber,
-      modifiedEndLineNumber
-    } = lineChange;
-
-    if (originalEndLineNumber === originalStartLineNumber &&
-      modifiedEndLineNumber === modifiedStartLineNumber &&
-      originalEndLineNumber && modifiedEndLineNumber) {
-      addedLines++;
-      removedLines++;
-    } else {
-      if (modifiedEndLineNumber > modifiedStartLineNumber || originalEndLineNumber === 0) {
-        addedLines += (modifiedEndLineNumber - modifiedStartLineNumber) + 1;
-      }
-      if (originalEndLineNumber > originalStartLineNumber || modifiedEndLineNumber === 0) {
-        removedLines += (originalEndLineNumber - originalStartLineNumber) + 1;
-      }
+export function diffContent(oldContent, newContent) {
+  let addedLines = 0, removedLines = 0;
+
+  const diffs = jsdiff.diffLines(oldContent, newContent);
+  diffs.forEach(part => {
+    if (part.added) {
+      addedLines += part.count;
+    }
+    if (part.removed) {
+      removedLines += part.count;
     }
   });
+
   return {
-    addedLines: addedLines,
-    removedLines: removedLines,
+    addedLines,
+    removedLines,
     changes: addedLines + removedLines
   }
 }

kotsadm/web/yarn.lock

@@ -5229,6 +5229,11 @@ diff@^4.0.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
   integrity sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==
 
+diff@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"