Bootstrapped Diff-Component

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;