Treeify git commit view (Coding/WebIDE#71)

app/components/Git/GitBranchWidget.jsx

@@ -0,0 +1,81 @@
+/* @flow weak */
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { dispatchCommand } from '../../commands'
+import cx from 'classnames'
+import { connect } from 'react-redux'
+
+import * as GitActions from './actions'
+import Menu from '../Menu'
+
+@connect(state => state.GitState.branches,
+  dispatch => bindActionCreators(GitActions, dispatch) )
+export default class GitBranchWidget extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isActive: false
+    }
+  }
+
+  componentWillMount () {
+    this.props.getCurrentBranch()
+  }
+
+  render () {
+    const {current: currentBranch, local: localBranches, remote: remoteBranches} = this.props
+    return (
+      <div className='status-bar-menu-item' onClick={e => { e.stopPropagation(); this.toggleActive(true, true) }}>
+        <span>On branch: {currentBranch}</span>
+        { this.state.isActive ?
+          <Menu className={cx('bottom-up to-left', {active: this.state.isActive})}
+            items={this.makeBrancheMenuItems(localBranches, remoteBranches)}
+            deactivate={this.toggleActive.bind(this, false)} />
+        : null }
+      </div>
+    )
+  }
+
+  toggleActive (isActive, isTogglingEnabled) {
+    if (isTogglingEnabled)
+      isActive = !this.state.isActive
+    if (isActive) {
+      this.props.getBranches()
+    }
+    this.setState({isActive})
+  }
+
+  makeBrancheMenuItems (localBranches, remoteBranches) {
+    if (!localBranches && !remoteBranches)
+      return [{name: 'Fetching Branches...', isDisabled: true}]
+
+    var localBranchItems = localBranches.map(branch => ({
+      name: branch,
+      items: [{
+        name: 'Checkout',
+        command: () => { this.props.checkoutBranch(branch) }
+      }]
+    }))
+
+    var remoteBranchItems = remoteBranches.map(remoteBranch => {
+      var localBranch = remoteBranch.split('/').slice(1).join('/')
+      return {
+        name: remoteBranch,
+        items: [{
+          name: 'Checkout to new local branch',
+          // @todo: should prompt to input local branch name
+          command: () => { this.props.checkoutBranch(localBranch, remoteBranch) }
+        }]
+      }
+    })
+    return [
+      {name: 'New Branch', command: () => dispatchCommand('git:new_branch')},
+      {name: '-', isDisabled: true},
+      {name: 'Local Branches', isDisabled: true},
+      ...localBranchItems,
+      {name: '-', isDisabled: true},
+      {name: 'Remote Branches', isDisabled: true},
+      ...remoteBranchItems
+    ]
+  }
+}

app/components/Git/GitCommitView.jsx

@@ -0,0 +1,36 @@
+/* @flow weak */
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { dispatchCommand } from '../../commands'
+import { connect } from 'react-redux'
+import cx from 'classnames'
+import _ from 'lodash'
+
+import * as GitActions from './actions'
+import GitFileTree from './GitFileTree'
+
+var GitCommitView = ({workingDir, stagingArea, ...actionProps}) => {
+  const {isClean, files} = workingDir
+  const {updateCommitMessage, updateStagingArea, commit} = actionProps
+  if (isClean) return <h1 className=''>Your working directory is clean. Nothing to commit.</h1>
+  return (
+    <div>
+      <GitFileTree />
+      <hr />
+      <div className='git-commit-message-container'>
+        <textarea name='git-commit-message' id='git-commit-message' rows='4'
+          onChange={e => updateCommitMessage(e.target.value)} />
+      </div>
+      <hr />
+      <div className='modal-ops'>
+        <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>Cancel</button>
+        <button className='btn btn-primary' onClick={e => commit(stagingArea)}>Commit</button>
+      </div>
+    </div>
+  )
+}
+
+export default connect(
+  state => state.GitState,
+  dispatch => bindActionCreators(GitActions, dispatch)
+)(GitCommitView)

app/components/Git/GitCommitViewFlat.jsx

@@ -0,0 +1,51 @@
+/* @flow weak */
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { dispatchCommand } from '../../commands'
+import cx from 'classnames'
+import { connect } from 'react-redux'
+
+import * as GitActions from './actions'
+
+var GitCommitView = ({workingDir, stagingArea, ...actionProps}) => {
+  const {isClean, files} = workingDir
+  const {updateCommitMessage, updateStagingArea, commit} = actionProps
+  if (isClean) return <h1 className=''>Your working directory is clean. Nothing to commit.</h1>
+  return (
+    <div>
+      <div className='git-status-files-container'>
+        { files.map(file =>
+          <label className='git-status-file' key={file.name}>
+            <div className='file-add-checkbox'>
+              <input type='checkbox'
+                checked={stagingArea.files.indexOf(file.name) != -1}
+                onChange={e => updateStagingArea(e.target.checked ? 'stage' : 'unstage', file)} />
+            </div>
+            <div className={cx('file-status-indicator', file.status.toLowerCase())}>
+              <i className={cx('fa', {
+                'fa-pencil-square': file.status == 'MODIFIED',
+                'fa-plus-square': file.status == 'UNTRACKED',
+                'fa-minus-square': file.status == 'MISSING'
+              })} /></div>
+            <div className='file-path'>{file.name}</div>
+          </label>
+        ) }
+      </div>
+      <hr />
+      <div className='git-commit-message-container'>
+        <textarea name='git-commit-message' id='git-commit-message' rows='4'
+          onChange={e => updateCommitMessage(e.target.value)} />
+      </div>
+      <hr />
+      <div className='modal-ops'>
+        <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>Cancel</button>
+        <button className='btn btn-primary' onClick={e => commit(stagingArea)}>Commit</button>
+      </div>
+    </div>
+  )
+}
+
+export default connect(
+  state => state.GitState,
+  dispatch => bindActionCreators(GitActions, dispatch)
+)(GitCommitView)

app/components/Git/GitFileTree.jsx

@@ -0,0 +1,205 @@
+/* @flow weak */
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { dispatchCommand } from '../../commands'
+import { connect } from 'react-redux'
+import cx from 'classnames'
+import _ from 'lodash'
+
+import * as GitActions from './actions'
+
+class GitFileTree extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      showTreeView: true,
+      showShrinkPathView: true,
+      displayOnly: false
+    }
+  }
+
+  render () {
+    return (
+      <div className='git-filetree-container' tabIndex={1} >
+        <GitFileTreeNode path='/'
+          showTreeView={this.state.showTreeView}
+          showShrinkPathView={this.state.showShrinkPathView}
+          displayOnly={this.state.displayOnly} />
+      </div>
+    )
+  }
+}
+
+
+class _GitFileTreeNode extends Component {
+  constructor (props) {
+    super(props)
+  }
+
+  render () {
+    const {
+      node,
+      statusFiles,
+      displayOnly,
+      showTreeView,
+      showShrinkPathView,
+      visualParentPath,    // for usage in shrinkPathView
+      ...actionProps} = this.props
+    const {toggleNodeFold, selectNode, toggleStaging} = actionProps
+
+    const childrenStagingStatus = this.getChildrenStagingStatus()
+    const FILETREE_INDENT = 14
+    let indentCompensation = this.getIndentCompensation()
+
+    return (
+      <div className='filetree-node-container'>
+        { node.isRoot ?
+          (<div className='filetree-node' ref={r => this.nodeDOM = r} >
+            { displayOnly ? null
+            : <span className='filetree-node-checkbox'
+                style={{marginRight: 0}}
+                onClick={e => toggleStaging(node)} >
+                <i className={cx('fa', {
+                  'fa-check-square': (!node.isDir && node.isStaged) || childrenStagingStatus === 'ALL',
+                  'fa-square-o': (!node.isDir && !node.isStaged) || childrenStagingStatus === 'NONE',
+                  'fa-minus-square': childrenStagingStatus === 'SOME',
+                })}></i>
+              </span>
+            }
+            <span className='filetree-node-label'>File Status
+              { displayOnly ? <span> ({node.leafNodes.length} changed) </span>
+              : <span> ({this.getStagedLeafNodes().length} staged / {node.leafNodes.length} changed) </span>
+              }
+            </span>
+          </div>)
+
+        : !showTreeView && node.isDir ? null // flatView
+
+        : showShrinkPathView && this.shouldHideAtShrinkPath() ? null
+
+        : (<div className={cx('filetree-node', {'focus':node.isFocused})}
+            ref={r => this.nodeDOM = r}
+            onClick={e => selectNode(node)} >
+            { displayOnly ? null
+            : <span className='filetree-node-checkbox'
+                onClick={e => toggleStaging(node)} >
+                <i className={cx('fa', {
+                  'fa-check-square': (!node.isDir && node.isStaged) || childrenStagingStatus === 'ALL',
+                  'fa-square-o': (!node.isDir && !node.isStaged) || childrenStagingStatus === 'NONE',
+                  'fa-minus-square': childrenStagingStatus === 'SOME',
+                })}></i>
+              </span>
+            }
+            <span className='filetree-node-arrow'
+              onClick={e => toggleNodeFold(node, null, e.altKey)}
+              style={{
+                'marginLeft': !showTreeView ? '0' : `${(node.depth - 1 - indentCompensation)*FILETREE_INDENT}px`
+              }} >
+              <i className={cx({
+                'fa fa-angle-right': node.isFolded,
+                'fa fa-angle-down': !node.isFolded,
+                'hidden': !node.isDir || node.childrenCount === 0
+              })}></i>
+            </span>
+            <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',
+                'fa-plus-square': node.status == 'UNTRACKED',
+                'fa-minus-square': node.status == 'MISSING'
+              })}></i>
+            </span>
+            <span className='filetree-node-label'>
+              { showTreeView ?
+                (node.isDir && showShrinkPathView ?
+                  node.path.replace(visualParentPath, '').replace(/^\//, '')
+                : node.name)
+              : node.path}
+            </span>
+            <div className='filetree-node-bg'></div>
+          </div>)
+
+        }
+
+        { node.isDir ?
+          <div className={cx('filetree-node-children', {isFolded: node.isFolded})}>
+            {node.children.map(childNodePath =>
+              <GitFileTreeNode
+                key={childNodePath}
+                path={childNodePath}
+                showTreeView={showTreeView}
+                showShrinkPathView={showShrinkPathView}
+                visualParentPath={showShrinkPathView && this.shouldHideAtShrinkPath() ? visualParentPath : node.path}
+                indentCompensation={indentCompensation}
+                displayOnly={displayOnly} />
+            )}
+          </div>
+        : null }
+      </div>
+    )
+  }
+
+
+  componentDidUpdate () {
+    if (this.props.node.isFocused) {
+      this.nodeDOM.scrollIntoViewIfNeeded && this.nodeDOM.scrollIntoViewIfNeeded()
+    }
+  }
+
+  getStagedLeafNodes () {
+    const {node, statusFiles} = this.props
+    if (!node.isDir) return []
+    return node.leafNodes.filter(leafNodePath =>
+      statusFiles.get(leafNodePath).get('isStaged')
+    )
+  }
+
+  getChildrenStagingStatus () {
+    const {node, statusFiles} = this.props
+    if (!node.isDir) return false
+    let stagedLeafNodes = this.getStagedLeafNodes()
+    if (stagedLeafNodes.length == 0) {
+      return 'NONE'
+    } else if (stagedLeafNodes.length === node.leafNodes.length) {
+      return 'ALL'
+    } else {
+      return 'SOME'
+    }
+  }
+
+  shouldHideAtShrinkPath () {
+    const {node, statusFiles} = this.props
+    if (!node.isDir) return false
+    if (node.children.length !== 1) return false
+
+    let childNode = statusFiles.get(node.children[0])
+    if (!childNode.isDir) return false
+    return true
+  }
+
+  getIndentCompensation () {
+    let {node, visualParentPath, indentCompensation, showShrinkPathView} = this.props
+    // if not showShrinkPathView, indentCompensation is uneccssary, set to 0
+    if (!showShrinkPathView) return 0
+
+    // else, let's do some math:
+    if (!indentCompensation) indentCompensation = 0
+    let indentOffset
+    if (node.isRoot) {
+      indentOffset = 1
+    } else {
+      indentOffset = (node.path.split('/').length - visualParentPath.split('/').length) || 1
+    }
+    return indentCompensation + indentOffset - 1
+  }
+
+}
+const GitFileTreeNode = connect(
+  (state, ownProps) => ({
+    statusFiles: state.GitState.statusFiles,
+    node: state.GitState.statusFiles.get(ownProps.path)
+  }),
+  dispatch => bindActionCreators(GitActions, dispatch)
+)(_GitFileTreeNode)
+
+export default GitFileTree

app/components/Git/actions.js

@@ -216,3 +216,17 @@ export function newBranch (branch) {
     }))
   })
 }
+
+export const GIT_STATUS_FOLD_NODE = 'GIT_STATUS_FOLD_NODE'
+export const toggleNodeFold = createAction(GIT_STATUS_FOLD_NODE,
+  (node, shouldBeFolded = null, deep = false) => {
+    let isFolded = (typeof shouldBeFolded === 'boolean') ? shouldBeFolded : !node.isFolded
+    return {node, isFolded, deep}
+  }
+)
+
+export const GIT_STATUS_SELECT_NODE = 'GIT_STATUS_SELECT_NODE'
+export const selectNode = createAction(GIT_STATUS_SELECT_NODE, node => node)
+
+export const GIT_STATUS_STAGE_NODE = 'GIT_STATUS_STAGE_NODE'
+export const toggleStaging = createAction(GIT_STATUS_STAGE_NODE, node => node)