adds file annotations and file controls to diff

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

@@ -25,6 +25,9 @@ const styles = {
   },
   hunkDivider: {
     margin: ".5rem 0"
+  },
+  changeType: {
+    marginLeft: ".75rem"
   }
 };
 
@@ -136,16 +139,18 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   render() {
-    const { file, sideBySide, classes } = this.props;
+    const { file, fileControlFactory, fileAnnotationFactory, sideBySide, classes } = this.props;
     const { collapsed } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
     let body = null;
     let icon = "fa fa-angle-right";
     if (!collapsed) {
+      const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null;
       icon = "fa fa-angle-down";
       body = (
         <div className="panel-block is-paddingless is-size-7">
+          { fileAnnotations }
           <DiffComponent viewType={viewType}>
             {file.hunks.map(this.renderHunk)}
           </DiffComponent>
@@ -153,6 +158,7 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
 
+    const fileControls = fileControlFactory ? fileControlFactory(file) : null;
     return (
       <div className={classNames("panel", classes.panel)}>
         <div
@@ -165,8 +171,13 @@ class DiffFile extends React.Component<Props, State> {
               <span className={classes.title}>
                 {this.renderFileTitle(file)}
               </span>
+              <span className={classes.changeType}>
+                {this.renderChangeTag(file)}
+              </span>
+            </div>
+            <div className="level-right">
+              { fileControls }
             </div>
-            <div className="level-right">{this.renderChangeTag(file)}</div>
           </div>
         </div>
         {body}

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

@@ -1,5 +1,7 @@
 // @flow
 
+import * as React from "react";
+
 // We place the types here and not in @scm-manager/ui-types,
 // because they represent not a real scm-manager related type.
 // This types represents only the required types for the Diff related components,
@@ -40,6 +42,8 @@ export type BaseContext = {
 
 export type AnnotationFactoryContext = BaseContext;
 
+export type FileAnnotationFactory = (file: File) => React.Node[];
+
 // key = change id, value = react component
 export type AnnotationFactory = (
   context: AnnotationFactoryContext
@@ -54,8 +58,12 @@ export type DiffEventContext = BaseContext & {
 
 export type DiffEventHandler = (context: DiffEventContext) => void;
 
+export type FileControlFactory = (file: File) => ?React.Node;
+
 export type DiffObjectProps = {
   sideBySide: boolean,
   onClick?: DiffEventHandler,
+  fileControlFactory?: FileControlFactory,
+  fileAnnotationFactory?: FileAnnotationFactory,
   annotationFactory?: AnnotationFactory
 };