Bootstrapped Diff-Component

scm-ui/package.json

@@ -16,6 +16,7 @@
     "i18next-fetch-backend": "^0.1.0",
     "moment": "^2.22.2",
     "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",

scm-ui/src/repos/containers/RepositoryRoot.js

@@ -25,6 +25,7 @@ import Edit from "../containers/Edit";
 
 import type { History } from "history";
 import EditNavLink from "../components/EditNavLink";
+import ScmDiff from "./ScmDiff";
 
 type Props = {
   namespace: string,
@@ -101,6 +102,16 @@ class RepositoryRoot extends React.Component<Props> {
               path={`${url}/edit`}
               component={() => <Edit repository={repository} />}
             />
+            <Route
+              path={`${url}/diff`}
+              component={() => (
+                <ScmDiff
+                  namespace={"scmadmin"}
+                  name={"foo"}
+                  revision={"4c18735d4c3bd89242284ed3eac52592637024b6"}
+                />
+              )}
+            />
           </div>
           <div className="column">
             <Navigation>
@@ -112,6 +123,9 @@ class RepositoryRoot extends React.Component<Props> {
                 <DeleteNavAction repository={repository} delete={this.delete} />
                 <NavLink to="/repos" label={t("repository-root.back-label")} />
               </Section>
+              <Section label="Diff">
+                <NavLink to={`${url}/diff`} label="Diff" />
+              </Section>
             </Navigation>
           </div>
         </div>

scm-ui/src/repos/containers/ScmDiff.js

@@ -0,0 +1,44 @@
+// @flow
+
+import React from "react";
+import { Diff, Hunk, parseDiff } from "react-diff-view";
+import { apiClient } from "@scm-manager/ui-components";
+
+type Props = {
+  namespace: string,
+  name: string,
+  revision: string
+};
+
+class ScmDiff extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    const { namespace, name, revision } = this.props;
+    const url = `http://localhost:8081/scm/api/rest/v2/repositories/${namespace}/${name}/diff/${revision}`;
+    apiClient
+      .get(url)
+      .then(response => response.text())
+      .then(text => this.setState({ diff: text }))
+      .catch(error => this.setState({ error }));
+  }
+
+  render() {
+    if (!this.state.diff || this.state.diff === "") {
+      return null;
+    }
+    const files = parseDiff(this.state.diff);
+    return (
+      <div>
+        {files.map(({ hunks }, i) => (
+          <Diff key={i} hunks={hunks} viewType="unified" />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default ScmDiff;

scm-ui/styles/scm.scss

@@ -1,6 +1,7 @@
 @import "bulma/sass/utilities/initial-variables";
 @import "bulma/sass/utilities/functions";
 
+
 $blue: #33B2E8;
 
 // $footer-background-color
@@ -51,3 +52,7 @@ $blue: #33B2E8;
 @import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
 $fa-font-path: "webfonts";
 @import "@fortawesome/fontawesome-free/scss/solid.scss";
+@import "react-diff-view/src/Change";
+@import "react-diff-view/src/Diff";
+@import "react-diff-view/src/Hunk";
+@import "react-diff-view/src/Widget";

scm-ui/yarn.lock

@@ -1915,7 +1915,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"
 
@@ -3541,6 +3541,10 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+gitdiff-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/gitdiff-parser/-/gitdiff-parser-0.1.0.tgz#a8f4396e3dd61a8fc274040a2aa02bcf8d952f92"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -5369,6 +5373,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"
@@ -5401,6 +5409,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"
@@ -6716,6 +6728,18 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-diff-view@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/react-diff-view/-/react-diff-view-1.7.0.tgz#80c0c13aa1e77ddf71698b75b9aa9ef7cccb02a5"
+  dependencies:
+    classnames "^2.2.6"
+    gitdiff-parser "^0.1.0"
+    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.4.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4"