reimplement diff and move it to ui-components

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;

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;

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";

scm-ui-components/packages/ui-components/src/repos/index.js

@@ -1,3 +1,4 @@
 // @flow
 
 export * from "./changesets";
+export { default as Diff } from "./Diff";