replace diff2html with react-diff-view

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)}
+      </>
     );
   }
 

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

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 => {