From 3ac47b09774ef3c65ec914bafd52d8a6d1827ffc Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 26 Feb 2019 15:00:05 +0100
Subject: [PATCH 1/2] replace diff2html with react-diff-view

---
 scm-plugins/scm-git-plugin/package.json       |   2 +-
 scm-plugins/scm-git-plugin/yarn.lock          |   7 +-
 scm-plugins/scm-hg-plugin/package.json        |   2 +-
 scm-plugins/scm-hg-plugin/yarn.lock           |   7 +-
 scm-plugins/scm-svn-plugin/package.json       |   2 +-
 scm-plugins/scm-svn-plugin/yarn.lock          |   7 +-
 .../packages/ui-components/package.json       |   9 +-
 .../packages/ui-components/src/repos/Diff.js  |  26 ++--
 .../ui-components/src/repos/DiffFile.js       | 120 ++++++++++++++++++
 .../ui-components/src/repos/LoadingDiff.js    |   9 +-
 .../packages/ui-components/yarn.lock          |  70 +++++-----
 .../packages/ui-types/package.json            |   2 +-
 scm-ui-components/packages/ui-types/yarn.lock |   6 +-
 scm-ui/package.json                           |   4 +-
 scm-ui/public/locales/en/repos.json           |   9 ++
 scm-ui/styles/scm.scss                        |   2 +-
 scm-ui/yarn.lock                              |  69 +++++-----
 17 files changed, 242 insertions(+), 111 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/repos/DiffFile.js

diff --git a/scm-plugins/scm-git-plugin/package.json b/scm-plugins/scm-git-plugin/package.json
index 1805f0665b..8d5ac3165b 100644
--- a/scm-plugins/scm-git-plugin/package.json
+++ b/scm-plugins/scm-git-plugin/package.json
@@ -12,6 +12,6 @@
     "@scm-manager/ui-extensions": "^0.1.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.24"
+    "@scm-manager/ui-bundler": "^0.0.25"
   }
 }
diff --git a/scm-plugins/scm-git-plugin/yarn.lock b/scm-plugins/scm-git-plugin/yarn.lock
index 64c47a247d..6438262437 100644
--- a/scm-plugins/scm-git-plugin/yarn.lock
+++ b/scm-plugins/scm-git-plugin/yarn.lock
@@ -707,9 +707,9 @@
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/eslint-config/-/eslint-config-0.0.2.tgz#94cc8c3fb4f51f870b235893dc134fc6c423ae85"
 
-"@scm-manager/ui-bundler@^0.0.24":
-  version "0.0.24"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.24.tgz#034d5500c79b438c48d8f7ee985be07c4ea46d1e"
+"@scm-manager/ui-bundler@^0.0.25":
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.25.tgz#1f65b3ff0ae81559a114c6a8d8cf43856cc6e166"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
@@ -750,7 +750,6 @@
 "@scm-manager/ui-extensions@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/ui-extensions/-/ui-extensions-0.1.2.tgz#0689427ca45c8e4e045b5b9dbc89036f1d2c45fc"
-  integrity sha512-oIkXcc/VWssnK/yjWKC/Wnq5DZ01rArsz76n4X/0DT0hkGNIKmwk/Fdp7OoXiUEb7+aaPjUX1VvDqlTwCNKPmA==
   dependencies:
     react "^16.4.2"
     react-dom "^16.4.2"
diff --git a/scm-plugins/scm-hg-plugin/package.json b/scm-plugins/scm-hg-plugin/package.json
index 849d8a92cb..8d3926f0dd 100644
--- a/scm-plugins/scm-hg-plugin/package.json
+++ b/scm-plugins/scm-hg-plugin/package.json
@@ -9,6 +9,6 @@
     "@scm-manager/ui-extensions": "^0.1.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.24"
+    "@scm-manager/ui-bundler": "^0.0.25"
   }
 }
diff --git a/scm-plugins/scm-hg-plugin/yarn.lock b/scm-plugins/scm-hg-plugin/yarn.lock
index b47e6e6e32..47334b6e36 100644
--- a/scm-plugins/scm-hg-plugin/yarn.lock
+++ b/scm-plugins/scm-hg-plugin/yarn.lock
@@ -641,9 +641,9 @@
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/eslint-config/-/eslint-config-0.0.2.tgz#94cc8c3fb4f51f870b235893dc134fc6c423ae85"
 
-"@scm-manager/ui-bundler@^0.0.24":
-  version "0.0.24"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.24.tgz#034d5500c79b438c48d8f7ee985be07c4ea46d1e"
+"@scm-manager/ui-bundler@^0.0.25":
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.25.tgz#1f65b3ff0ae81559a114c6a8d8cf43856cc6e166"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
@@ -684,7 +684,6 @@
 "@scm-manager/ui-extensions@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/ui-extensions/-/ui-extensions-0.1.2.tgz#0689427ca45c8e4e045b5b9dbc89036f1d2c45fc"
-  integrity sha512-oIkXcc/VWssnK/yjWKC/Wnq5DZ01rArsz76n4X/0DT0hkGNIKmwk/Fdp7OoXiUEb7+aaPjUX1VvDqlTwCNKPmA==
   dependencies:
     react "^16.4.2"
     react-dom "^16.4.2"
diff --git a/scm-plugins/scm-svn-plugin/package.json b/scm-plugins/scm-svn-plugin/package.json
index e5cddc0bba..8bbf204e2f 100644
--- a/scm-plugins/scm-svn-plugin/package.json
+++ b/scm-plugins/scm-svn-plugin/package.json
@@ -9,6 +9,6 @@
     "@scm-manager/ui-extensions": "^0.1.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.24"
+    "@scm-manager/ui-bundler": "^0.0.25"
   }
 }
diff --git a/scm-plugins/scm-svn-plugin/yarn.lock b/scm-plugins/scm-svn-plugin/yarn.lock
index b47e6e6e32..47334b6e36 100644
--- a/scm-plugins/scm-svn-plugin/yarn.lock
+++ b/scm-plugins/scm-svn-plugin/yarn.lock
@@ -641,9 +641,9 @@
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/eslint-config/-/eslint-config-0.0.2.tgz#94cc8c3fb4f51f870b235893dc134fc6c423ae85"
 
-"@scm-manager/ui-bundler@^0.0.24":
-  version "0.0.24"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.24.tgz#034d5500c79b438c48d8f7ee985be07c4ea46d1e"
+"@scm-manager/ui-bundler@^0.0.25":
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.25.tgz#1f65b3ff0ae81559a114c6a8d8cf43856cc6e166"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
@@ -684,7 +684,6 @@
 "@scm-manager/ui-extensions@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/ui-extensions/-/ui-extensions-0.1.2.tgz#0689427ca45c8e4e045b5b9dbc89036f1d2c45fc"
-  integrity sha512-oIkXcc/VWssnK/yjWKC/Wnq5DZ01rArsz76n4X/0DT0hkGNIKmwk/Fdp7OoXiUEb7+aaPjUX1VvDqlTwCNKPmA==
   dependencies:
     react "^16.4.2"
     react-dom "^16.4.2"
diff --git a/scm-ui-components/packages/ui-components/package.json b/scm-ui-components/packages/ui-components/package.json
index bb8e5c738e..80b83b0265 100644
--- a/scm-ui-components/packages/ui-components/package.json
+++ b/scm-ui-components/packages/ui-components/package.json
@@ -14,7 +14,7 @@
     "eslint-fix": "eslint src --fix"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.24",
+    "@scm-manager/ui-bundler": "^0.0.25",
     "create-index": "^2.3.0",
     "enzyme": "^3.5.0",
     "enzyme-adapter-react-16": "^1.3.1",
@@ -31,12 +31,15 @@
     "classnames": "^2.2.6",
     "moment": "^2.22.2",
     "react": "^16.5.2",
+    "react-diff-view": "^1.8.1",
     "react-dom": "^16.5.2",
     "react-i18next": "^7.11.0",
     "react-jss": "^8.6.1",
     "react-router-dom": "^4.3.1",
-    "react-select": "^2.1.2",
-    "diff2html": "^2.5.0"
+    "react-select": "^2.1.2"
+  },
+  "resolutions": {
+    "gitdiff-parser": "https://github.com/cloudogu/gitdiff-parser#3a72da4a8e3d9bfb4b9e01a43e85628c19f26cc4"
   },
   "browserify": {
     "transform": [
diff --git a/scm-ui-components/packages/ui-components/src/repos/Diff.js b/scm-ui-components/packages/ui-components/src/repos/Diff.js
index 0b0b31a3d4..61fd1ad814 100644
--- a/scm-ui-components/packages/ui-components/src/repos/Diff.js
+++ b/scm-ui-components/packages/ui-components/src/repos/Diff.js
@@ -1,9 +1,9 @@
 //@flow
 import React from "react";
-import { Diff2Html } from "diff2html";
+import DiffFile from "./DiffFile";
 
 type Props = {
-  diff: string,
+  diff: any,
   sideBySide: boolean
 };
 
@@ -13,21 +13,17 @@ class Diff extends React.Component<Props> {
     sideBySide: false
   };
 
+  renderFile = (file: any, i: number) => {
+    const { sideBySide } = this.props;
+    return <DiffFile key={i} file={file} sideBySide={sideBySide} />;
+  };
+
   render() {
-    const { diff, sideBySide } = this.props;
-
-    const options = {
-      inputFormat: "diff",
-      outputFormat: sideBySide ? "side-by-side" : "line-by-line",
-      showFiles: false,
-      matching: "lines"
-    };
-
-    const outputHtml = Diff2Html.getPrettyHtml(diff, options);
-
+    const { diff } = this.props;
     return (
-      // eslint-disable-next-line react/no-danger
-      <div dangerouslySetInnerHTML={{ __html: outputHtml }} />
+      <>
+        {diff.map(this.renderFile)}
+      </>
     );
   }
 
diff --git a/scm-ui-components/packages/ui-components/src/repos/DiffFile.js b/scm-ui-components/packages/ui-components/src/repos/DiffFile.js
new file mode 100644
index 0000000000..71aa4e282c
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/DiffFile.js
@@ -0,0 +1,120 @@
+//@flow
+import React from "react";
+import { Hunk, Diff as DiffComponent } from "react-diff-view";
+import injectSheets from "react-jss";
+import classNames from "classnames";
+import {translate} from "react-i18next";
+
+const styles = {
+  panel: {
+    fontSize: "1rem"
+  },
+  header: {
+    cursor: "pointer"
+  },
+  title: {
+    marginLeft: ".25rem",
+    fontSize: "1rem"
+  },
+  hunkDivider: {
+    margin: ".5rem 0"
+  }
+};
+
+type Props = {
+  file: any,
+  sideBySide: boolean,
+  // context props
+  classes: any,
+  t: string => string
+}
+
+type State = {
+  collapsed: boolean
+}
+
+class DiffFile extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      collapsed: false
+    };
+  }
+
+  toggleCollapse = () => {
+    this.setState((state) => ({
+      collapsed: ! state.collapsed
+    }));
+  };
+
+  renderHunk = (hunk: any, i: number) => {
+    const { classes } = this.props;
+    let header = null;
+    if (i > 0) {
+      header = <hr className={classes.hunkDivider} />;
+    }
+    return <Hunk key={hunk.content} hunk={hunk} header={header} />;
+  };
+
+  renderFileTitle = (file: any) => {
+    if (file.oldPath !== file.newPath && (file.type === "copy" || file.type === "rename")) {
+      return (<>{file.oldPath} <i className="fa fa-arrow-right" /> {file.newPath}</>);
+    } else if (file.type === "delete") {
+      return file.oldPath;
+    }
+    return file.newPath;
+  };
+
+  renderChangeTag = (file: any) => {
+    const { t } = this.props;
+    const key = "diff.changes." + file.type;
+    let value = t(key);
+    if (key === value) {
+      value = file.type;
+    }
+    return (
+      <span className="tag is-info has-text-weight-normal">
+        {value}
+      </span>
+    );
+  };
+
+  render() {
+    const { file, sideBySide, classes } = this.props;
+    const { collapsed } = this.state;
+    const viewType = sideBySide ? "split" : "unified";
+
+    let body = null;
+    let icon = "fa fa-angle-right";
+    if (!collapsed) {
+      icon = "fa fa-angle-down";
+      body = (
+        <div className="panel-block is-paddingless is-size-7">
+          <DiffComponent viewType={viewType}>
+            { file.hunks.map(this.renderHunk) }
+          </DiffComponent>
+        </div>
+      );
+    }
+
+    return (
+      <div className={classNames("panel", classes.panel)}>
+        <div className={classNames("panel-heading", classes.header)} onClick={this.toggleCollapse}>
+          <div className="level">
+            <div className="level-left">
+              <i className={icon} /><span className={classes.title}>{this.renderFileTitle(file)}</span>
+            </div>
+            <div className="level-right">
+              {this.renderChangeTag(file)}
+            </div>
+          </div>
+        </div>
+        {body}
+      </div>
+    );
+  }
+
+}
+
+export default injectSheets(styles)(translate("repos")(DiffFile));
diff --git a/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js b/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js
index 2ebc4a170b..5b51f790e4 100644
--- a/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js
+++ b/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js
@@ -2,6 +2,8 @@
 import React from "react";
 import { apiClient } from "../apiclient";
 import ErrorNotification from "../ErrorNotification";
+import parser from "gitdiff-parser";
+
 import Loading from "../Loading";
 import Diff from "./Diff";
 
@@ -11,7 +13,7 @@ type Props = {
 };
 
 type State = {
-  diff?: string,
+  diff?: any,
   loading: boolean,
   error?: Error
 };
@@ -44,10 +46,11 @@ class LoadingDiff extends React.Component<Props, State> {
     apiClient
       .get(url)
       .then(response => response.text())
-      .then(text => {
+      .then(parser.parse)
+      .then(diff => {
         this.setState({
           loading: false,
-          diff: text
+          diff: diff
         });
       })
       .catch(error => {
diff --git a/scm-ui-components/packages/ui-components/yarn.lock b/scm-ui-components/packages/ui-components/yarn.lock
index 2fd20f2870..1a4c28c9c2 100644
--- a/scm-ui-components/packages/ui-components/yarn.lock
+++ b/scm-ui-components/packages/ui-components/yarn.lock
@@ -687,9 +687,9 @@
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/eslint-config/-/eslint-config-0.0.2.tgz#94cc8c3fb4f51f870b235893dc134fc6c423ae85"
 
-"@scm-manager/ui-bundler@^0.0.24":
-  version "0.0.24"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.24.tgz#034d5500c79b438c48d8f7ee985be07c4ea46d1e"
+"@scm-manager/ui-bundler@^0.0.25":
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.25.tgz#1f65b3ff0ae81559a114c6a8d8cf43856cc6e166"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
@@ -2444,16 +2444,7 @@ dev-ip@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
 
-diff2html@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/diff2html/-/diff2html-2.5.0.tgz#2d16f1a8f115354733b16b0264a594fa7db98aa2"
-  dependencies:
-    diff "^3.5.0"
-    hogan.js "^3.0.2"
-    lodash "^4.17.11"
-    whatwg-fetch "^3.0.0"
-
-diff@^3.2.0, diff@^3.5.0:
+diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
 
@@ -3456,6 +3447,10 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+gitdiff-parser@^0.1.2, "gitdiff-parser@https://github.com/cloudogu/gitdiff-parser#3a72da4a8e3d9bfb4b9e01a43e85628c19f26cc4":
+  version "0.1.2"
+  resolved "https://github.com/cloudogu/gitdiff-parser#3a72da4a8e3d9bfb4b9e01a43e85628c19f26cc4"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -3867,13 +3862,6 @@ hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
-hogan.js@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd"
-  dependencies:
-    mkdirp "0.3.0"
-    nopt "1.0.10"
-
 hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
@@ -5213,6 +5201,10 @@ lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
 
+lodash.findlastindex@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.findlastindex/-/lodash.findlastindex-4.6.0.tgz#b8375ac0f02e9b926375cdf8dc3ea814abf9c6ac"
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -5241,6 +5233,10 @@ lodash.keys@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
+lodash.mapvalues@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
+
 lodash.memoize@~3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
@@ -5274,7 +5270,7 @@ lodash.templatesettings@^3.0.0:
     lodash._reinterpolate "^3.0.0"
     lodash.escape "^3.0.0"
 
-lodash@^4.13.1, lodash@^4.15.0, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5:
+lodash@^4.13.1, lodash@^4.15.0, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
@@ -5534,10 +5530,6 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.3.0:
-  version "0.3.0"
-  resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
-
 "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
   version "0.5.1"
   resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -5716,12 +5708,6 @@ nomnom@~1.6.2:
     colors "0.5.x"
     underscore "~1.4.4"
 
-nopt@1.0.10, nopt@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
-  dependencies:
-    abbrev "1"
-
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -5729,6 +5715,12 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.2:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
@@ -6433,6 +6425,18 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-diff-view@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/react-diff-view/-/react-diff-view-1.8.1.tgz#0b9b4adcb92de6730d28177d68654dfcc2097f73"
+  dependencies:
+    classnames "^2.2.6"
+    gitdiff-parser "^0.1.2"
+    leven "^2.1.0"
+    lodash.escape "^4.0.1"
+    lodash.findlastindex "^4.6.0"
+    lodash.mapvalues "^4.6.0"
+    warning "^4.0.1"
+
 react-dom@^16.4.2:
   version "16.6.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.0.tgz#6375b8391e019a632a89a0988bce85f0cc87a92f"
@@ -8060,10 +8064,6 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
-
 whatwg-mimetype@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz#a3d58ef10b76009b042d03e25591ece89b88d171"
diff --git a/scm-ui-components/packages/ui-types/package.json b/scm-ui-components/packages/ui-types/package.json
index 4d87265379..11029490bb 100644
--- a/scm-ui-components/packages/ui-types/package.json
+++ b/scm-ui-components/packages/ui-types/package.json
@@ -14,7 +14,7 @@
     "check": "flow check"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.24"
+    "@scm-manager/ui-bundler": "^0.0.25"
   },
   "browserify": {
     "transform": [
diff --git a/scm-ui-components/packages/ui-types/yarn.lock b/scm-ui-components/packages/ui-types/yarn.lock
index ee367343ee..d0ef9f7a86 100644
--- a/scm-ui-components/packages/ui-types/yarn.lock
+++ b/scm-ui-components/packages/ui-types/yarn.lock
@@ -707,9 +707,9 @@
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/eslint-config/-/eslint-config-0.0.2.tgz#94cc8c3fb4f51f870b235893dc134fc6c423ae85"
 
-"@scm-manager/ui-bundler@^0.0.24":
-  version "0.0.24"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.24.tgz#034d5500c79b438c48d8f7ee985be07c4ea46d1e"
+"@scm-manager/ui-bundler@^0.0.25":
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.25.tgz#1f65b3ff0ae81559a114c6a8d8cf43856cc6e166"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
diff --git a/scm-ui/package.json b/scm-ui/package.json
index 2144e50e6c..531b3400a9 100644
--- a/scm-ui/package.json
+++ b/scm-ui/package.json
@@ -11,7 +11,6 @@
     "bulma": "^0.7.1",
     "bulma-tooltip": "^2.0.2",
     "classnames": "^2.2.5",
-    "diff2html": "^2.5.0",
     "font-awesome": "^4.7.0",
     "history": "^4.7.2",
     "i18next": "^11.4.0",
@@ -22,6 +21,7 @@
     "node-sass": "^4.9.3",
     "postcss-easy-import": "^3.0.0",
     "react": "^16.4.2",
+    "react-diff-view": "^1.8.1",
     "react-dom": "^16.4.2",
     "react-i18next": "^7.9.0",
     "react-jss": "^8.6.0",
@@ -52,7 +52,7 @@
     "pre-commit": "jest && flow && eslint src"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.24",
+    "@scm-manager/ui-bundler": "^0.0.25",
     "concat": "^1.0.3",
     "copyfiles": "^2.0.0",
     "enzyme": "^3.3.0",
diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json
index bdb0491489..ebc0adfd34 100644
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -144,5 +144,14 @@
       "submit": "Yes",
       "cancel": "No"
     }
+  },
+  "diff": {
+    "changes": {
+      "add": "added",
+      "delete":  "deleted",
+      "modify": "modified",
+      "rename": "renamed",
+      "copy": "copied"
+    }
   }
 }
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index fc5d423fa3..e02a4b28e0 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -82,7 +82,7 @@ hr.header-with-actions {
 $fa-font-path: "webfonts";
 @import "@fortawesome/fontawesome-free/scss/solid.scss";
 
-@import "diff2html/dist/diff2html";
+@import "react-diff-view/index";
 
 // NEW STYLES
 
diff --git a/scm-ui/yarn.lock b/scm-ui/yarn.lock
index 5c656ab243..5c38cb2dba 100644
--- a/scm-ui/yarn.lock
+++ b/scm-ui/yarn.lock
@@ -698,9 +698,9 @@
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/eslint-config/-/eslint-config-0.0.2.tgz#94cc8c3fb4f51f870b235893dc134fc6c423ae85"
 
-"@scm-manager/ui-bundler@^0.0.24":
-  version "0.0.24"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.24.tgz#034d5500c79b438c48d8f7ee985be07c4ea46d1e"
+"@scm-manager/ui-bundler@^0.0.25":
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.25.tgz#1f65b3ff0ae81559a114c6a8d8cf43856cc6e166"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
@@ -741,7 +741,6 @@
 "@scm-manager/ui-extensions@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@scm-manager/ui-extensions/-/ui-extensions-0.1.2.tgz#0689427ca45c8e4e045b5b9dbc89036f1d2c45fc"
-  integrity sha512-oIkXcc/VWssnK/yjWKC/Wnq5DZ01rArsz76n4X/0DT0hkGNIKmwk/Fdp7OoXiUEb7+aaPjUX1VvDqlTwCNKPmA==
   dependencies:
     react "^16.4.2"
     react-dom "^16.4.2"
@@ -1926,7 +1925,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -2550,16 +2549,7 @@ dev-ip@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
 
-diff2html@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/diff2html/-/diff2html-2.5.0.tgz#2d16f1a8f115354733b16b0264a594fa7db98aa2"
-  dependencies:
-    diff "^3.5.0"
-    hogan.js "^3.0.2"
-    lodash "^4.17.11"
-    whatwg-fetch "^3.0.0"
-
-diff@^3.2.0, diff@^3.5.0:
+diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
 
@@ -3605,6 +3595,10 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+gitdiff-parser@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/gitdiff-parser/-/gitdiff-parser-0.1.2.tgz#26a256e05e9c2d5016b512a96c1dacb40862b92a"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -4064,13 +4058,6 @@ hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
-hogan.js@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd"
-  dependencies:
-    mkdirp "0.3.0"
-    nopt "1.0.10"
-
 hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
@@ -5478,6 +5465,10 @@ lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
 
+lodash.findlastindex@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.findlastindex/-/lodash.findlastindex-4.6.0.tgz#b8375ac0f02e9b926375cdf8dc3ea814abf9c6ac"
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -5510,6 +5501,10 @@ lodash.keys@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
+lodash.mapvalues@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
+
 lodash.memoize@~3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
@@ -5547,7 +5542,7 @@ lodash.templatesettings@^3.0.0:
     lodash._reinterpolate "^3.0.0"
     lodash.escape "^3.0.0"
 
-lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
@@ -5848,10 +5843,6 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.3.0:
-  version "0.3.0"
-  resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
-
 "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
   version "0.5.1"
   resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -6091,12 +6082,6 @@ noms@0.0.0:
     inherits "^2.0.1"
     readable-stream "~1.0.31"
 
-nopt@1.0.10, nopt@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
-  dependencies:
-    abbrev "1"
-
 "nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -6110,6 +6095,12 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
@@ -6908,6 +6899,18 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-diff-view@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/react-diff-view/-/react-diff-view-1.8.1.tgz#0b9b4adcb92de6730d28177d68654dfcc2097f73"
+  dependencies:
+    classnames "^2.2.6"
+    gitdiff-parser "^0.1.2"
+    leven "^2.1.0"
+    lodash.escape "^4.0.1"
+    lodash.findlastindex "^4.6.0"
+    lodash.mapvalues "^4.6.0"
+    warning "^4.0.1"
+
 react-dom@^16.4.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"

From b4abd06f5546935270a805c045def10784920ed1 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Wed, 27 Feb 2019 14:12:43 +0000
Subject: [PATCH 2/2] Close branch feature/react-diff-view