merge with default branch

scm-ui/ui-components/src/repos/Diff.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import { storiesOf } from "@storybook/react";
+import Diff from "./Diff";
+// @ts-ignore
+import parser from "gitdiff-parser";
+import simpleDiff from "../__resources__/Diff.simple";
+import hunksDiff from "../__resources__/Diff.hunks";
+import binaryDiff from "../__resources__/Diff.binary";
+import Button from "../buttons/Button";
+import { DiffEventContext } from "./DiffTypes";
+import Toast from "../toast/Toast";
+
+const diffFiles = parser.parse(simpleDiff);
+
+storiesOf("Diff", module)
+  .add("Default", () => <Diff diff={diffFiles} />)
+  .add("Side-By-Side", () => <Diff diff={diffFiles} sideBySide={true} />)
+  .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} />)
+  .add("File Controls", () => <Diff diff={diffFiles} fileControlFactory={() => <Button>Custom Control</Button>} />)
+  .add("File Annotation", () => (
+    <Diff
+      diff={diffFiles}
+      fileAnnotationFactory={file => [<p key={file.newPath}>Custom File annotation for {file.newPath}</p>]}
+    />
+  ))
+  .add("Line Annotation", () => (
+    <Diff
+      diff={diffFiles}
+      annotationFactory={ctx => {
+        return {
+          N2: <p key="N2">Line Annotation</p>
+        };
+      }}
+    />
+  ))
+  .add("OnClick", () => {
+    const OnClickDemo = () => {
+      const [changeId, setChangeId] = useState();
+      useEffect(() => {
+        const interval = setInterval(() => setChangeId(undefined), 2000);
+        return () => clearInterval(interval);
+      });
+      const onClick = (context: DiffEventContext) => setChangeId(context.changeId);
+      return (
+        <>
+          {changeId && <Toast type="info" title={"Change " + changeId} />}
+          <Diff diff={diffFiles} onClick={onClick} />
+        </>
+      );
+    };
+    return <OnClickDemo />;
+  })
+  .add("Hunks", () => {
+    const hunkDiffFiles = parser.parse(hunksDiff);
+    return <Diff diff={hunkDiffFiles} />;
+  })
+  .add("Binaries", () => {
+    const binaryDiffFiles = parser.parse(binaryDiff);
+    return <Diff diff={binaryDiffFiles} />;
+  });

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -3,11 +3,13 @@ import { withTranslation, WithTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 // @ts-ignore
-import { Change, Diff as DiffComponent, getChangeKey, Hunk } from "react-diff-view";
+import { Diff as DiffComponent, getChangeKey, Hunk, Decoration } from "react-diff-view";
 import { Button, ButtonGroup } from "../buttons";
 import Tag from "../Tag";
 import Icon from "../Icon";
-import { File, Hunk as HunkType, DiffObjectProps } from "./DiffTypes";
+import { ChangeEvent, Change, File, Hunk as HunkType, DiffObjectProps } from "./DiffTypes";
+
+const EMPTY_ANNOTATION_FACTORY = {};
 
 type Props = DiffObjectProps &
   WithTranslation & {
@@ -20,7 +22,7 @@ type Collapsible = {
 };
 
 type State = Collapsible & {
-  sideBySide: boolean;
+  sideBySide?: boolean;
 };
 
 const DiffFilePanel = styled.div`
@@ -56,6 +58,10 @@ const ChangeTypeTag = styled(Tag)`
 `;
 
 const ModifiedDiffComponent = styled(DiffComponent)`
+  /* align line numbers */
+  & .diff-gutter {
+    text-align: right;
+  }
   /* column sizing */
   > colgroup .diff-gutter-col {
     width: 3.25rem;
@@ -80,14 +86,15 @@ const ModifiedDiffComponent = styled(DiffComponent)`
 
 class DiffFile extends React.Component<Props, State> {
   static defaultProps: Partial<Props> = {
-    defaultCollapse: false
+    defaultCollapse: false,
+    markConflicts: true
   };
 
   constructor(props: Props) {
     super(props);
     this.state = {
       collapsed: !!this.props.defaultCollapse,
-      sideBySide: false
+      sideBySide: props.sideBySide
     };
   }
 
@@ -103,7 +110,7 @@ class DiffFile extends React.Component<Props, State> {
 
   toggleCollapse = () => {
     const { file } = this.props;
-    if (file && !file.isBinary) {
+    if (this.hasContent(file)) {
       this.setState(state => ({
         collapsed: !state.collapsed
       }));
@@ -126,7 +133,8 @@ class DiffFile extends React.Component<Props, State> {
     if (i > 0) {
       return <HunkDivider />;
     }
-    return null;
+    // hunk header must be defined
+    return <span />;
   };
 
   collectHunkAnnotations = (hunk: HunkType) => {
@@ -136,6 +144,8 @@ class DiffFile extends React.Component<Props, State> {
         hunk,
         file
       });
+    } else {
+      return EMPTY_ANNOTATION_FACTORY;
     }
   };
 
@@ -152,29 +162,45 @@ class DiffFile extends React.Component<Props, State> {
     }
   };
 
-  createCustomEvents = (hunk: HunkType) => {
+  createGutterEvents = (hunk: HunkType) => {
     const { onClick } = this.props;
     if (onClick) {
       return {
-        gutter: {
-          onClick: (change: Change) => {
-            this.handleClickEvent(change, hunk);
-          }
+        onClick: (event: ChangeEvent) => {
+          this.handleClickEvent(event.change, hunk);
         }
       };
     }
   };
 
   renderHunk = (hunk: HunkType, i: number) => {
-    return (
+    if (this.props.markConflicts && hunk.changes) {
+      this.markConflicts(hunk);
+    }
+    return [
+      <Decoration key={"decoration-" + hunk.content}>{this.createHunkHeader(hunk, i)}</Decoration>,
       <Hunk
-        key={hunk.content}
+        key={"hunk-" + hunk.content}
         hunk={hunk}
-        header={this.createHunkHeader(hunk, i)}
         widgets={this.collectHunkAnnotations(hunk)}
-        customEvents={this.createCustomEvents(hunk)}
+        gutterEvents={this.createGutterEvents(hunk)}
       />
-    );
+    ];
+  };
+
+  markConflicts = (hunk: HunkType) => {
+    let inConflict = false;
+    for (let i = 0; i < hunk.changes.length; ++i) {
+      if (hunk.changes[i].content === "<<<<<<< HEAD") {
+        inConflict = true;
+      }
+      if (inConflict) {
+        hunk.changes[i].type = "conflict";
+      }
+      if (hunk.changes[i].content.startsWith(">>>>>>>")) {
+        inConflict = false;
+      }
+    }
   };
 
   renderFileTitle = (file: File) => {
@@ -215,6 +241,16 @@ class DiffFile extends React.Component<Props, State> {
     return <ChangeTypeTag className={classNames("is-rounded", "has-text-weight-normal")} color={color} label={value} />;
   };
 
+  concat = (array: object[][]) => {
+    if (array.length > 0) {
+      return array.reduce((a, b) => a.concat(b));
+    } else {
+      return [];
+    }
+  };
+
+  hasContent = (file: File) => file && !file.isBinary && file.hunks && file.hunks.length > 0;
+
   render() {
     const { file, fileControlFactory, fileAnnotationFactory, t } = this.props;
     const { collapsed, sideBySide } = this.state;
@@ -228,13 +264,13 @@ class DiffFile extends React.Component<Props, State> {
       body = (
         <div className="panel-block is-paddingless">
           {fileAnnotations}
-          <ModifiedDiffComponent className={viewType} viewType={viewType}>
-            {file.hunks.map(this.renderHunk)}
+          <ModifiedDiffComponent className={viewType} viewType={viewType} hunks={file.hunks} diffType={file.type}>
+            {(hunks: HunkType[]) => this.concat(hunks.map(this.renderHunk))}
           </ModifiedDiffComponent>
         </div>
       );
     }
-    const collapseIcon = file && !file.isBinary ? <Icon name={icon} color="inherit" /> : null;
+    const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
 
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
     return (

scm-ui/ui-components/src/repos/DiffTypes.ts

@@ -27,7 +27,7 @@ export type Hunk = {
   content: string;
 };
 
-export type ChangeType = "insert" | "delete" | "normal";
+export type ChangeType = "insert" | "delete" | "normal" | "conflict";
 
 export type Change = {
   content: string;
@@ -40,6 +40,10 @@ export type Change = {
   type: ChangeType;
 };
 
+export type ChangeEvent = {
+  change: Change;
+};
+
 export type BaseContext = {
   hunk: Hunk;
   file: File;
@@ -66,9 +70,10 @@ export type DiffEventHandler = (context: DiffEventContext) => void;
 export type FileControlFactory = (file: File, setCollapseState: (p: boolean) => void) => ReactNode | null | undefined;
 
 export type DiffObjectProps = {
-  sideBySide: boolean;
+  sideBySide?: boolean;
   onClick?: DiffEventHandler;
   fileControlFactory?: FileControlFactory;
   fileAnnotationFactory?: FileAnnotationFactory;
   annotationFactory?: AnnotationFactory;
+  markConflicts?: boolean;
 };

scm-ui/ui-components/src/repos/LoadingDiff.tsx

@@ -9,12 +9,13 @@ import Diff from "./Diff";
 import { DiffObjectProps, File } from "./DiffTypes";
 import { NotFoundError } from "../errors";
 import { Notification } from "../index";
-import {withTranslation, WithTranslation} from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 
-type Props = WithTranslation & DiffObjectProps & {
-  url: string;
-  defaultCollapse?: boolean;
-};
+type Props = WithTranslation &
+  DiffObjectProps & {
+    url: string;
+    defaultCollapse?: boolean;
+  };
 
 type State = {
   diff?: File[];