From b22cb46ac2efc6d6bb5c530dcb8860f06d6698f9 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 11 Dec 2018 13:25:35 +0100
Subject: [PATCH 1/3] reimplement diff and move it to ui-components

---
 scm-plugins/scm-git-plugin/package.json       |  2 +-
 scm-plugins/scm-git-plugin/yarn.lock          |  6 +-
 scm-plugins/scm-hg-plugin/package.json        |  2 +-
 scm-plugins/scm-hg-plugin/yarn.lock           |  6 +-
 scm-plugins/scm-svn-plugin/package.json       |  2 +-
 scm-plugins/scm-svn-plugin/yarn.lock          |  6 +-
 .../packages/ui-components/package.json       |  5 +-
 .../packages/ui-components/src/repos/Diff.js  | 37 +++++++++
 .../src/repos/changesets/ChangesetDiff.js     | 83 +++++++++++++++++++
 .../src/repos/changesets/index.js             |  1 +
 .../packages/ui-components/src/repos/index.js |  1 +
 .../packages/ui-components/yarn.lock          | 46 +++++++---
 .../packages/ui-types/package.json            |  2 +-
 scm-ui-components/packages/ui-types/yarn.lock |  6 +-
 scm-ui/package.json                           |  5 +-
 .../components/changesets/ChangesetDetails.js |  6 +-
 scm-ui/src/repos/containers/ScmDiff.js        | 51 ------------
 scm-ui/yarn.lock                              | 50 +++--------
 18 files changed, 192 insertions(+), 125 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/repos/Diff.js
 create mode 100644 scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
 delete mode 100644 scm-ui/src/repos/containers/ScmDiff.js

diff --git a/scm-plugins/scm-git-plugin/package.json b/scm-plugins/scm-git-plugin/package.json
index b617351264..3145b6a338 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.1"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.22"
+    "@scm-manager/ui-bundler": "^0.0.24"
   }
 }
diff --git a/scm-plugins/scm-git-plugin/yarn.lock b/scm-plugins/scm-git-plugin/yarn.lock
index 471beb513e..234ed65102 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.22":
-  version "0.0.22"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.22.tgz#6eaed4e1f0b1fbc6ed1ebbf7eb0f5585f760949a"
+"@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"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
diff --git a/scm-plugins/scm-hg-plugin/package.json b/scm-plugins/scm-hg-plugin/package.json
index 6bccf3bd96..0638a464de 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.1"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.22"
+    "@scm-manager/ui-bundler": "^0.0.24"
   }
 }
diff --git a/scm-plugins/scm-hg-plugin/yarn.lock b/scm-plugins/scm-hg-plugin/yarn.lock
index bc53e0a7ce..0666ef408d 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.22":
-  version "0.0.22"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.22.tgz#6eaed4e1f0b1fbc6ed1ebbf7eb0f5585f760949a"
+"@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"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
diff --git a/scm-plugins/scm-svn-plugin/package.json b/scm-plugins/scm-svn-plugin/package.json
index 3e509172fd..e51f3b9bfd 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.1"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.22"
+    "@scm-manager/ui-bundler": "^0.0.24"
   }
 }
diff --git a/scm-plugins/scm-svn-plugin/yarn.lock b/scm-plugins/scm-svn-plugin/yarn.lock
index bc53e0a7ce..0666ef408d 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.22":
-  version "0.0.22"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.22.tgz#6eaed4e1f0b1fbc6ed1ebbf7eb0f5585f760949a"
+"@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"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
diff --git a/scm-ui-components/packages/ui-components/package.json b/scm-ui-components/packages/ui-components/package.json
index 880d8f3891..06e007e871 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.22",
+    "@scm-manager/ui-bundler": "^0.0.24",
     "create-index": "^2.3.0",
     "enzyme": "^3.5.0",
     "enzyme-adapter-react-16": "^1.3.1",
@@ -35,7 +35,8 @@
     "react-i18next": "^7.11.0",
     "react-jss": "^8.6.1",
     "react-router-dom": "^4.3.1",
-    "react-select": "^2.1.2"
+    "react-select": "^2.1.2",
+    "diff2html": "^2.5.0"
   },
   "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
new file mode 100644
index 0000000000..69f862fc0d
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/Diff.js
@@ -0,0 +1,37 @@
+//@flow
+import React from "react";
+import { Diff2Html } from "diff2html";
+
+
+type Props = {
+  diff: string,
+  sideBySide: boolean
+};
+
+class Diff extends React.Component<Props> {
+
+  static defaultProps = {
+    sideBySide: false
+  };
+
+  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);
+
+    return (
+      // eslint-disable-next-line react/no-danger
+      <div dangerouslySetInnerHTML={{ __html: outputHtml }} />
+    );
+  }
+
+}
+
+export default Diff;
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
new file mode 100644
index 0000000000..c9d86318f1
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
@@ -0,0 +1,83 @@
+//@flow
+import React from "react";
+import type { Changeset } from "@scm-manager/ui-types";
+import { apiClient } from "../../apiclient";
+import ErrorNotification from "../../ErrorNotification";
+import Loading from "../../Loading";
+import Diff from "../Diff";
+
+type Props = {
+  changeset: Changeset
+};
+
+type State = {
+  diff?: string,
+  loading: boolean,
+  error?: Error
+};
+
+class ChangesetDiff extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      loading: false
+    };
+  }
+
+  isDiffSupported(changeset: Changeset) {
+    return !!changeset._links.diff;
+  }
+
+  createUrl(changeset: Changeset) {
+    return changeset._links.diff.href + "?format=GIT";
+  }
+
+  loadDiff(changeset: Changeset) {
+    this.setState({
+      loading: true
+    });
+    const url = this.createUrl(changeset);
+    apiClient
+      .get(url)
+      .then(response => response.text())
+      .then(text => {
+        this.setState({
+          loading: false,
+          diff: text
+        });
+      })
+      .catch(error => {
+        this.setState({
+          loading: false,
+          error
+        });
+      });
+  }
+
+  componentDidMount() {
+    const { changeset } = this.props;
+    if (!this.isDiffSupported(changeset)) {
+      this.setState({
+        error: new Error("diff is not supported")
+      });
+    } else {
+      this.loadDiff(changeset);
+    }
+  }
+
+
+  render() {
+    const { diff, loading, error } = this.state;
+    if (error) {
+      return <ErrorNotification error={error} />;
+    } else if (loading || !diff) {
+      return <Loading />;
+    } else {
+      return <Diff diff={diff} />;
+    }
+  }
+
+}
+
+export default ChangesetDiff;
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/index.js b/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
index 9651978b35..0e7a5e533d 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/index.js
@@ -7,3 +7,4 @@ export { default as ChangesetId } from "./ChangesetId";
 export { default as ChangesetList } from "./ChangesetList";
 export { default as ChangesetRow } from "./ChangesetRow";
 export { default as ChangesetTag } from "./ChangesetTag";
+export { default as ChangesetDiff } from "./ChangesetDiff";
diff --git a/scm-ui-components/packages/ui-components/src/repos/index.js b/scm-ui-components/packages/ui-components/src/repos/index.js
index 05ae15d10d..cbecded267 100644
--- a/scm-ui-components/packages/ui-components/src/repos/index.js
+++ b/scm-ui-components/packages/ui-components/src/repos/index.js
@@ -1,3 +1,4 @@
 // @flow
 
 export * from "./changesets";
+export { default as Diff } from "./Diff";
diff --git a/scm-ui-components/packages/ui-components/yarn.lock b/scm-ui-components/packages/ui-components/yarn.lock
index 743e46f123..062bb75ab1 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.22":
-  version "0.0.22"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.22.tgz#6eaed4e1f0b1fbc6ed1ebbf7eb0f5585f760949a"
+"@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"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
@@ -2444,7 +2444,16 @@ dev-ip@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dev-ip/-/dev-ip-1.0.1.tgz#a76a3ed1855be7a012bb8ac16cb80f3c00dc28f0"
 
-diff@^3.2.0:
+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:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
 
@@ -3858,6 +3867,13 @@ 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"
@@ -5258,7 +5274,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.4, lodash@^4.17.5:
+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:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
@@ -5518,6 +5534,10 @@ 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"
@@ -5696,6 +5716,12 @@ 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"
@@ -5703,12 +5729,6 @@ 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"
@@ -8040,6 +8060,10 @@ 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 8a009d314c..4d87265379 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.22"
+    "@scm-manager/ui-bundler": "^0.0.24"
   },
   "browserify": {
     "transform": [
diff --git a/scm-ui-components/packages/ui-types/yarn.lock b/scm-ui-components/packages/ui-types/yarn.lock
index a19d99dfbf..ee367343ee 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.22":
-  version "0.0.22"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.22.tgz#6eaed4e1f0b1fbc6ed1ebbf7eb0f5585f760949a"
+"@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"
   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 6fd0febd9c..2f68b75317 100644
--- a/scm-ui/package.json
+++ b/scm-ui/package.json
@@ -11,7 +11,7 @@
     "bulma": "^0.7.1",
     "bulma-tooltip": "^2.0.2",
     "classnames": "^2.2.5",
-    "diff2html": "^2.4.0",
+    "diff2html": "^2.5.0",
     "font-awesome": "^4.7.0",
     "history": "^4.7.2",
     "i18next": "^11.4.0",
@@ -21,7 +21,6 @@
     "node-sass": "^4.9.3",
     "postcss-easy-import": "^3.0.0",
     "react": "^16.4.2",
-    "react-diff-view": "^1.7.0",
     "react-dom": "^16.4.2",
     "react-i18next": "^7.9.0",
     "react-jss": "^8.6.0",
@@ -52,7 +51,7 @@
     "pre-commit": "jest && flow && eslint src"
   },
   "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.22",
+    "@scm-manager/ui-bundler": "^0.0.24",
     "concat": "^1.0.3",
     "copyfiles": "^2.0.0",
     "enzyme": "^3.3.0",
diff --git a/scm-ui/src/repos/components/changesets/ChangesetDetails.js b/scm-ui/src/repos/components/changesets/ChangesetDetails.js
index 2f6c4b410e..483042a779 100644
--- a/scm-ui/src/repos/components/changesets/ChangesetDetails.js
+++ b/scm-ui/src/repos/components/changesets/ChangesetDetails.js
@@ -9,14 +9,14 @@ import {
   ChangesetId,
   ChangesetTag,
   ChangesetAuthor,
+  ChangesetDiff,
   AvatarWrapper,
   AvatarImage,
-  changesets
+  changesets,
 } from "@scm-manager/ui-components";
 
 import classNames from "classnames";
 import type { Tag } from "@scm-manager/ui-types";
-import ScmDiff from "../../containers/ScmDiff";
 
 const styles = {
   spacing: {
@@ -78,7 +78,7 @@ class ChangesetDetails extends React.Component<Props> {
           </p>
         </div>
         <div>
-          <ScmDiff changeset={changeset} sideBySide={false}/>
+          <ChangesetDiff changeset={changeset} />
         </div>
       </div>
     );
diff --git a/scm-ui/src/repos/containers/ScmDiff.js b/scm-ui/src/repos/containers/ScmDiff.js
deleted file mode 100644
index b2df677eb3..0000000000
--- a/scm-ui/src/repos/containers/ScmDiff.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// @flow
-
-import React from "react";
-import { apiClient } from "@scm-manager/ui-components";
-import type { Changeset } from "@scm-manager/ui-types";
-import { Diff2Html } from "diff2html";
-
-type Props = {
-  changeset: Changeset,
-  sideBySide: boolean
-};
-
-type State = {
-  diff: string,
-  error?: Error
-};
-
-class ScmDiff extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { diff: "" };
-  }
-
-  componentDidMount() {
-    const { changeset } = this.props;
-    const url = changeset._links.diff.href+"?format=GIT";
-    apiClient
-      .get(url)
-      .then(response => response.text())
-      .then(text => this.setState({ ...this.state, diff: text }))
-      .catch(error => this.setState({ ...this.state, error }));
-  }
-
-  render() {
-    const options = {
-      inputFormat: "diff",
-      outputFormat: this.props.sideBySide ? "side-by-side" : "line-by-line",
-      showFiles: false,
-      matching: "lines"
-    };
-
-    const outputHtml = Diff2Html.getPrettyHtml(this.state.diff, options);
-
-    return (
-      // eslint-disable-next-line react/no-danger
-      <div dangerouslySetInnerHTML={{ __html: outputHtml }} />
-    );
-  }
-}
-
-export default ScmDiff;
diff --git a/scm-ui/yarn.lock b/scm-ui/yarn.lock
index 6aeb0f7703..3ddf27be96 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.22":
-  version "0.0.22"
-  resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.22.tgz#6eaed4e1f0b1fbc6ed1ebbf7eb0f5585f760949a"
+"@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"
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
@@ -1925,7 +1925,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5, classnames@^2.2.6:
+classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -2549,14 +2549,14 @@ 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.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/diff2html/-/diff2html-2.4.0.tgz#de632384eefa5a7f6b0e92eafb1fa25d22dc88ab"
+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.10"
-    whatwg-fetch "^2.0.4"
+    lodash "^4.17.11"
+    whatwg-fetch "^3.0.0"
 
 diff@^3.2.0, diff@^3.5.0:
   version "3.5.0"
@@ -3604,10 +3604,6 @@ 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"
@@ -5481,10 +5477,6 @@ 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"
@@ -5517,10 +5509,6 @@ 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"
@@ -5558,7 +5546,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.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.11, 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"
 
@@ -5861,7 +5849,7 @@ mixin-deep@^1.2.0:
 
 mkdirp@0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
+  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"
@@ -6919,18 +6907,6 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-diff-view@^1.7.0:
-  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"
@@ -8730,10 +8706,6 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
-
 whatwg-fetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"

From c3727eb9c26ff29d654946f361ae7f234c331af5 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 11 Dec 2018 14:13:32 +0100
Subject: [PATCH 2/3] create a separate LoadingDiff component

---
 .../packages/ui-components/src/repos/Diff.js  |  1 -
 .../ui-components/src/repos/LoadingDiff.js    | 64 ++++++++++++++++
 .../src/repos/changesets/ChangesetDiff.js     | 74 ++++---------------
 .../packages/ui-components/src/repos/index.js |  1 +
 scm-ui/public/locales/en/repos.json           |  3 +
 5 files changed, 82 insertions(+), 61 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js

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 69f862fc0d..0b0b31a3d4 100644
--- a/scm-ui-components/packages/ui-components/src/repos/Diff.js
+++ b/scm-ui-components/packages/ui-components/src/repos/Diff.js
@@ -2,7 +2,6 @@
 import React from "react";
 import { Diff2Html } from "diff2html";
 
-
 type Props = {
   diff: string,
   sideBySide: boolean
diff --git a/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js b/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js
new file mode 100644
index 0000000000..5f6330f0e5
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js
@@ -0,0 +1,64 @@
+//@flow
+import React from "react";
+import { apiClient } from "../apiclient";
+import ErrorNotification from "../ErrorNotification";
+import Loading from "../Loading";
+import Diff from "./Diff";
+
+type Props = {
+  url: string,
+  sideBySide: boolean
+};
+
+type State = {
+  diff?: string,
+  loading: boolean,
+  error?: Error
+};
+
+class LoadingDiff extends React.Component<Props, State> {
+
+  static defaultProps = {
+    sideBySide: false
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentDidMount() {
+    const { url } = this.props;
+    apiClient
+      .get(url)
+      .then(response => response.text())
+      .then(text => {
+        this.setState({
+          loading: false,
+          diff: text
+        });
+      })
+      .catch(error => {
+        this.setState({
+          loading: false,
+          error
+        });
+      });
+  }
+
+  render() {
+    const { diff, loading, error } = this.state;
+    if (error) {
+      return <ErrorNotification error={error} />;
+    } else if (loading || !diff) {
+      return <Loading />;
+    } else {
+      return <Diff diff={diff} />;
+    }
+  }
+
+}
+
+export default LoadingDiff;
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
index c9d86318f1..857ff8c827 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js
@@ -1,29 +1,18 @@
 //@flow
 import React from "react";
 import type { Changeset } from "@scm-manager/ui-types";
-import { apiClient } from "../../apiclient";
-import ErrorNotification from "../../ErrorNotification";
-import Loading from "../../Loading";
-import Diff from "../Diff";
+import LoadingDiff from "../LoadingDiff";
+import Notification from "../../Notification";
+import {translate} from "react-i18next";
 
 type Props = {
-  changeset: Changeset
+  changeset: Changeset,
+
+  // context props
+  t: string => string
 };
 
-type State = {
-  diff?: string,
-  loading: boolean,
-  error?: Error
-};
-
-class ChangesetDiff extends React.Component<Props, State> {
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      loading: false
-    };
-  }
+class ChangesetDiff extends React.Component<Props> {
 
   isDiffSupported(changeset: Changeset) {
     return !!changeset._links.diff;
@@ -33,51 +22,16 @@ class ChangesetDiff extends React.Component<Props, State> {
     return changeset._links.diff.href + "?format=GIT";
   }
 
-  loadDiff(changeset: Changeset) {
-    this.setState({
-      loading: true
-    });
-    const url = this.createUrl(changeset);
-    apiClient
-      .get(url)
-      .then(response => response.text())
-      .then(text => {
-        this.setState({
-          loading: false,
-          diff: text
-        });
-      })
-      .catch(error => {
-        this.setState({
-          loading: false,
-          error
-        });
-      });
-  }
-
-  componentDidMount() {
-    const { changeset } = this.props;
-    if (!this.isDiffSupported(changeset)) {
-      this.setState({
-        error: new Error("diff is not supported")
-      });
-    } else {
-      this.loadDiff(changeset);
-    }
-  }
-
-
   render() {
-    const { diff, loading, error } = this.state;
-    if (error) {
-      return <ErrorNotification error={error} />;
-    } else if (loading || !diff) {
-      return <Loading />;
+    const { changeset, t } = this.props;
+    if (!this.isDiffSupported(changeset)) {
+      return <Notification type="danger">{t("changesets.diff.not-supported")}</Notification>;
     } else {
-      return <Diff diff={diff} />;
+      const url = this.createUrl(changeset);
+      return <LoadingDiff url={url} />;
     }
   }
 
 }
 
-export default ChangesetDiff;
+export default translate("repos")(ChangesetDiff);
diff --git a/scm-ui-components/packages/ui-components/src/repos/index.js b/scm-ui-components/packages/ui-components/src/repos/index.js
index cbecded267..9ebd1e9c55 100644
--- a/scm-ui-components/packages/ui-components/src/repos/index.js
+++ b/scm-ui-components/packages/ui-components/src/repos/index.js
@@ -2,3 +2,4 @@
 
 export * from "./changesets";
 export { default as Diff } from "./Diff";
+export { default as LoadingDiff } from "./LoadingDiff";
diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json
index 8296b46907..d6cdaa1d8d 100644
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -66,6 +66,9 @@
     }
   },
   "changesets": {
+    "diff": {
+      "not-supported": "Diff of changesets is not supported by the type of repository"
+    },
     "error-title": "Error",
     "error-subtitle": "Could not fetch changesets",
     "changeset": {

From db8bba628fd7b1c6abf805caa89e691dcb1be305 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Wed, 12 Dec 2018 09:25:34 +0000
Subject: [PATCH 3/3] Close branch feature/move-diff-to-ui-components