Add diff view for unstash

app/backendAPI/gitAPI.js

@@ -105,4 +105,12 @@ export function gitRebaseUpdate (lines) {
 
 export function gitCommitDiff ({ref}) {
   return request.get(`/git/${config.spaceKey}/diff`, {ref})
-}
+}
+
+export function gitFileDiff ({ path, oldRef, newRef }) {
+  return request.get(`/git/${config.spaceKey}/diff`, { path, oldRef, newRef })
+}
+
+export function gitReadFile ({ref, path}) {
+  return request.get(`/git/${config.spaceKey}/read`, { path, ref, base64: false })
+}

app/components/Git/GitFileTree.jsx

@@ -57,7 +57,6 @@ class _GitFileTreeNode extends Component {
     const childrenStagingStatus = this.getChildrenStagingStatus()
     const FILETREE_INDENT = 14
     let indentCompensation = this.getIndentCompensation()
-
     return (
       <div className='filetree-node-container'>
         { node.isRoot ?
@@ -114,7 +113,7 @@ class _GitFileTreeNode extends Component {
             <span className='filetree-node-icon'>
               <i className={cx('fa file-status-indicator', node.status.toLowerCase(), {
                 'fa-folder-o': node.isDir,
-                'fa-pencil-square': node.status == 'MODIFIED' || node.status == 'CHANGED',
+                'fa-pencil-square': node.status == 'MODIFIED' || node.status == 'CHANGED' || node.status == 'MODIFY',
                 'fa-plus-square': node.status == 'UNTRACKED' || node.status == 'ADD',
                 'fa-minus-square': node.status == 'MISSING',
                 'fa-exclamation-circle': node.status == 'CONFLICTION'

app/components/Git/actions.js

@@ -247,8 +247,26 @@ export function mergeFile (path) {
   return dispatch => dispatch(addModal('GitMergeFile', {path}  ))
 }
 
-export function getConflicts ({path}) {
-  return dispatch => api.gitConflicts({path})
+export const GIT_DIFF = 'GIT_DIFF'
+export const gitDiff = createAction(GIT_DIFF)
+export function diffFile ({ path, newRef, oldRef }) {
+  return dispatch => dispatch(addModal('GitDiffFile', { path, newRef, oldRef }))
+}
+
+export function gitFileDiff ({ path, newRef, oldRef }) {
+  return dispatch => api.gitFileDiff({ path, newRef, oldRef })
+}
+
+export function getConflicts ({ path }) {
+  return dispatch => api.gitConflicts({ path })
+}
+
+export function gitReadFile ({ref, path}) {
+  return dispatch => api.gitReadFile({ref, path})
+}
+
+export function readFile ({path}) {
+  return dispatch => api.readFile(path)
 }
 
 export function resolveConflict ({path, content}) {

app/components/Git/modals/commitDiff.jsx

@@ -14,10 +14,11 @@ class GitCommitDiffView extends Component {
     super(props)
     this.state = {
     }
+    this.handleFileClick = this.handleFileClick.bind(this)
   }
 
   render () {
-    const {title} = this.props.commitDiff
+    const {title, ref} = this.props.commitDiff
     return (
       <div>
         <div className='git-resolve-conflicts'>
@@ -41,7 +42,16 @@ class GitCommitDiffView extends Component {
   }
 
   handleFileClick (path) {
-    // this.props.mergeFile(_.trimStart(path, '/'))
+    const {oldRef, ref} = this.props.commitDiff
+    if (oldRef) {
+      this.props.diffFile({
+        path, newRef: ref, oldRef
+      })
+    } else {
+      this.props.diffFile({
+        path, newRef: ref, oldRef: '~~unstaged~~'
+      })
+    }
   }
 }
 

app/components/Git/modals/diffFile.jsx

@@ -0,0 +1,133 @@
+/* @flow weak */
+import React, { Component, PropTypes } from 'react'
+import { bindActionCreators } from 'redux'
+import { dispatchCommand } from '../../../commands'
+import cx from 'classnames'
+import { connect } from 'react-redux'
+import * as GitActions from '../actions'
+const jsdiff = require('diff')
+
+// CodeMirror
+import CodeMirror from 'codemirror'
+require(['diff_match_patch'], (lib) => {
+  Object.assign(window, lib)  //@fixme: diff_match_patch is now exposed into the global ns
+  require(['codemirror/addon/merge/merge.js'])
+})
+import 'codemirror/addon/merge/merge.css'
+
+class GitDiffView extends Component {
+  static defaultProps = {
+    mode: null,
+    height: '100%',
+    width: '100%',
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      isLoading: true
+    }
+  }
+
+  componentWillMount () {
+    const {path, oldRef, newRef} = this.props.content
+    if (oldRef !== '') {
+      this.props.gitFileDiff({
+        path: path,
+        oldRef: oldRef,
+        newRef: newRef
+      }).then(res => {
+        this.setState({
+          isLoading: false,
+        })
+        const diffPatch = res.diff
+        if (diffPatch === '' || diffPatch.split('\n')[3] === '--- /dev/null') {
+          this.props.gitReadFile({ref: newRef, path: path})
+            .then(res => {
+              this.initDiff('', res.content)
+            })
+        } else if (oldRef && oldRef !== '~~unstaged~~'){
+          this.props.gitReadFile({ref: oldRef, path: path})
+            .then(res => {
+              let content = res.content
+              let newContent = jsdiff.applyPatch(content, diffPatch)
+              this.initDiff(newContent, content)
+            })
+        } else {
+          this.props.readFile({ path: path })
+            .then(res => {
+              let content = res.content
+              let newContent = jsdiff.applyPatch(content, diffPatch)
+              this.initDiff(newContent, content)
+            })
+        }
+      })
+    } else {
+      this.props.gitReadFile({ref: newRef, path: path})
+        .then(res => {
+          this.initDiff('', res.content)
+        })
+    }
+  }
+
+  render () {
+    const {theme, content} = this.props
+    const {path, oldRef, newRef} = this.props.content
+    let loadDiv = ''
+    if (this.state.isLoading) {
+      loadDiv = (
+        <div className='loading'>
+          <i className='fa fa-spinner fa-spin' />
+        </div>
+      )
+    } else {
+      loadDiv = ''
+    }
+    let title = ''
+    if (oldRef !== '') {
+      title = `Diff File: ${path} - ${newRef} vs ${oldRef}`
+    } else {
+      title = `Diff File: ${path}`
+    }
+    return (
+      <div>
+        <div className='git-merge'>
+          <h1>
+          {title}
+          </h1>
+          <hr />
+          <div className='diffModal'>
+            <div
+              id='flex-container'
+              className='diffContainer'>
+              <div id='cm-merge-view-wrapper' ref={r=>this.editorDOM=r} ></div>
+            </div>
+            { loadDiv }
+          </div>
+          <hr />
+          <div className='modal-ops'>
+            <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>Cancel</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  initDiff (left, right) {
+    this.mergeView = CodeMirror.MergeView(this.editorDOM, {
+      origLeft: left,
+      value: right,
+      lineNumbers: true,
+      // revertButtons: true,
+      readOnly: true
+    })
+    this.mergeView.wrap.style.height = '100%'
+    // require([`brace/mode/${getMode(that.props.content.path)}`], () => {
+    // })
+  }
+}
+
+export default GitDiffView = connect(
+  state => state.GitState,
+  dispatch => bindActionCreators(GitActions, dispatch)
+)(GitDiffView)

app/components/Git/modals/mergeFile.jsx

@@ -53,7 +53,7 @@ class GitMergeView extends Component {
       <div>
         <div className='git-merge'>
           <h1>
-          Conflicts List
+          Merge File: {this.props.content.path}
           </h1>
           <hr />
           <div className='diffModal'>
@@ -90,11 +90,11 @@ class GitMergeView extends Component {
   initMerge (data) {
     this.mergeView = CodeMirror.MergeView(this.editorDOM, {
       origLeft: data.local,
-      origRight: data.remote,
+      orig: data.remote,
       value: data.base,
       revertButtons: true,
     })
-    this.mergeView.setSize('100%', '100%')
+    this.mergeView.wrap.style.height = '100%'
 
     // require([`brace/mode/${getMode(that.props.content.path)}`], () => {
     // })

app/components/Git/modals/unstash.jsx

@@ -16,6 +16,7 @@ class GitUntashView extends Component {
     this.handleClear = this.handleClear.bind(this)
     this.handleApply = this.handleApply.bind(this)
     this.handleBranchName = this.handleBranchName.bind(this)
+    this.handleView = this.handleView.bind(this)
   }
 
   render () {
@@ -53,11 +54,11 @@ class GitUntashView extends Component {
                 {this.renderStashList(stashList, selectStash, selectedStash)}
               </div>
               <div className="col-lg-2 btn-list">
-                {/*<button className='btn btn-default'
+                <button className='btn btn-default'
                   type='button'
-                  onClick={e => console.log('view')}>
+                  onClick={this.handleView}>
                   View
-                </button>*/}
+                </button>
                 <button className='btn btn-default'
                   type='button'
                   disabled={!selectedStash}
@@ -135,6 +136,17 @@ class GitUntashView extends Component {
     )
   }
 
+  handleView(e) {
+    let commit = this.props.unstash.selectedStash.name
+    // let oldRef = commit + '^'
+    this.props.gitCommitDiff({
+      title: 'View Changes',
+      ref: commit
+    })
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+  }
+
   handleDrop(e) {
     this.props.dropStash(this.props.unstash.selectedStash.name)
     e.stopPropagation()

app/components/Modal/index.jsx

@@ -18,6 +18,7 @@ import {
   GitRebaseStart,
   GitResolveConflictsView,
   GitMergeFileView,
+  GitDiffFileView,
   GitRebasePrepare,
   GitRebaseInput,
   GitCommitDiffView,
@@ -96,6 +97,9 @@ class Modal extends Component {
         case 'GitMergeFile':
           return <GitMergeFileView {...this.props} />
 
+        case 'GitDiffFile':
+          return <GitDiffFileView {...this.props} />
+
         case 'Prompt':
           return <Prompt {...this.props} />
 

app/components/Modal/modals/index.js

@@ -15,6 +15,7 @@ export {PackageControlView} from '../../Package';
 export GitRebaseStart from '../../Git/modals/rebaseStart';
 export GitResolveConflictsView from '../../Git/modals/resolveConflicts';
 export GitMergeFileView from '../../Git/modals/mergeFile';
+export GitDiffFileView from '../../Git/modals/diffFile';
 export GitRebasePrepare from '../../Git/modals/rebasePrepare';
 export GitRebaseInput from '../../Git/modals/rebaseInput';
 export GitCommitDiffView from '../../Git/modals/commitDiff';

app/components/Modal/reducer.js

@@ -29,7 +29,6 @@ const ModalReducer = handleActions({
   },
 
   [MODAL_ADD]: (state, {payload: modalConfig, meta}) => {
-    console.log('MODAL_ADD')
     let newModal = {
       ...baseModal,
       isActive: true,

app/styles/components/Git.styl

@@ -64,7 +64,7 @@
 }
 
 .file-status-indicator {
-  &.modified, &.changed {color: hsl(47,100%,50%)}
+  &.modified, &.changed, &.modify {color: hsl(47,100%,50%)}
   &.untracked, &.add {color: hsl(80,60%,40%)}
   &.missing {color: hsl(10,80%,45%)}
   &.confliction {color: hsl(10,80%,45%)}

app/styles/components/GitMerge.styl

@@ -75,6 +75,17 @@ $tab-highlight-bg-darker = #8ab0f3;
     &.mergeContainer {
       padding-top: 20px;
     }
+    &.diffContainer {
+      padding-top: 0;
+      padding-bottom: 0;
+      .CodeMirror-merge-2pane .CodeMirror-merge-pane {
+        height: 100%;
+
+      }
+      .CodeMirror-merge, .CodeMirror-merge .CodeMirror {
+        height: 100%;
+      }
+    }
     &>div {
       flex-grow: 1;
       -webkit-flex-grow: 1;

app/styles/components/StatusBar.styl

@@ -22,3 +22,7 @@ $bar-height = 30px;
     min-width: 200px;
   }
 }
+
+.toggle-layout {
+  padding: 0 8px;
+}

package.json

@@ -68,6 +68,7 @@
     "brace": "^0.8.0",
     "classnames": "^2.2.5",
     "codemirror": "^5.21.0",
+    "diff": "^3.2.0",
     "diff_match_patch": "^0.1.1",
     "fixed-data-table": "^0.6.3",
     "font-awesome": "^4.6.3",

yarn.lock

@@ -1661,6 +1661,10 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
+diff@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
+
 diff_match_patch@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/diff_match_patch/-/diff_match_patch-0.1.1.tgz#d3f14d5b76fb4b5a9cf44706261dadb5bd97edbc"