You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2016/05/31 07:58:39 UTC

[11/27] fauxton commit: updated refs/heads/master to 0ca35da

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/rev-browser/rev-browser.components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/rev-browser/rev-browser.components.react.jsx b/app/addons/documents/rev-browser/rev-browser.components.react.jsx
index 89c44eb..d49a6cc 100644
--- a/app/addons/documents/rev-browser/rev-browser.components.react.jsx
+++ b/app/addons/documents/rev-browser/rev-browser.components.react.jsx
@@ -11,431 +11,419 @@
 // the License.
 
 
-define([
-  '../../../core/api',
-  '../../../app',
-  'react',
-  'react-dom',
-  './rev-browser.actions',
-  './rev-browser.stores',
-  '../../components/react-components.react',
+import FauxtonAPI from "../../../core/api";
+import app from "../../../app";
+import React from "react";
+import ReactDOM from "react-dom";
+import RevActions from "./rev-browser.actions";
+import RevStores from "./rev-browser.stores";
+import ReactComponents from "../../components/react-components.react";
+import { ButtonGroup, Button, Modal } from "react-bootstrap";
+import ReactSelect from "react-select";
+import jdp from "jsondiffpatch";
+import jdpformatters from "jsondiffpatch/src/formatters/html";
+import ace from "brace";
+import "jsondiffpatch/public/formatters-styles/html.css";
 
-  'react-bootstrap',
-  'react-select',
-  'jsondiffpatch',
-  'jsondiffpatch/src/formatters/html',
+const storageKeyDeleteConflictsModal = 'deleteConflictsHideModal';
 
-  'brace',
+const store = RevStores.revBrowserStore;
+const ConfirmButton = ReactComponents.ConfirmButton;
 
-  'jsondiffpatch/public/formatters-styles/html.css'
-], (FauxtonAPI, app, React, ReactDOM, RevActions, RevStores, ReactComponents,
-    ReactBootstrap, ReactSelect, jdp, jdpformatters, ace) => {
+require('brace/ext/static_highlight');
+const highlight = ace.acequire('ace/ext/static_highlight');
 
-  const storageKeyDeleteConflictsModal = 'deleteConflictsHideModal';
+require('brace/mode/json');
+const JavaScriptMode = ace.acequire('ace/mode/json').Mode;
 
-  const store = RevStores.revBrowserStore;
-  const ConfirmButton = ReactComponents.ConfirmButton;
+require('brace/theme/idle_fingers');
+const theme = ace.acequire('ace/theme/idle_fingers');
 
-  const ButtonGroup = ReactBootstrap.ButtonGroup;
-  const Button = ReactBootstrap.Button;
-  const Modal = ReactBootstrap.Modal;
 
-  require('brace/ext/static_highlight');
-  const highlight = ace.acequire('ace/ext/static_highlight');
+class DiffyController extends React.Component {
 
-  require('brace/mode/json');
-  const JavaScriptMode = ace.acequire('ace/mode/json').Mode;
-
-  require('brace/theme/idle_fingers');
-  const theme = ace.acequire('ace/theme/idle_fingers');
+  constructor (props) {
+    super(props);
 
+    this.state = this.getStoreState();
+  }
 
-  class DiffyController extends React.Component {
+  getStoreState () {
+
+    return {
+      tree: store.getRevTree(),
+      ours: store.getOurs(),
+      theirs: store.getTheirs(),
+      conflictingRevs: store.getConflictingRevs(),
+      dropdownData: store.getDropdownData(),
+      isDiffViewEnabled: store.getIsDiffViewEnabled(),
+      databaseName: store.getDatabaseName()
+    };
+  }
 
-    constructor (props) {
-      super(props);
+  componentDidMount () {
+    store.on('change', this.onChange, this);
+  }
 
-      this.state = this.getStoreState();
-    }
+  componentWillUnmount () {
+    store.off('change', this.onChange);
+  }
 
-    getStoreState () {
-
-      return {
-        tree: store.getRevTree(),
-        ours: store.getOurs(),
-        theirs: store.getTheirs(),
-        conflictingRevs: store.getConflictingRevs(),
-        dropdownData: store.getDropdownData(),
-        isDiffViewEnabled: store.getIsDiffViewEnabled(),
-        databaseName: store.getDatabaseName()
-      };
-    }
+  onChange () {
+    this.setState(this.getStoreState());
+  }
 
-    componentDidMount () {
-      store.on('change', this.onChange, this);
-    }
+  toggleDiffView (enableDiff) {
+    RevActions.toggleDiffView(enableDiff);
+  }
 
-    componentWillUnmount () {
-      store.off('change', this.onChange);
-    }
+  render () {
+    const {tree, ours, theirs, dropdownData, conflictingRevs, isDiffViewEnabled} = this.state;
 
-    onChange () {
-      this.setState(this.getStoreState());
+    if (!tree) {
+      return null;
     }
 
-    toggleDiffView (enableDiff) {
-      RevActions.toggleDiffView(enableDiff);
+    // no conflicts happened for this doc
+    if (!theirs || !conflictingRevs.length) {
+      return <div style={{textAlign: 'center', color: '#fff'}}><h2>No conflicts</h2></div>;
     }
 
-    render () {
-      const {tree, ours, theirs, dropdownData, conflictingRevs, isDiffViewEnabled} = this.state;
-
-      if (!tree) {
-        return null;
-      }
-
-      // no conflicts happened for this doc
-      if (!theirs || !conflictingRevs.length) {
-        return <div style={{textAlign: 'center', color: '#fff'}}><h2>No conflicts</h2></div>;
-      }
-
-      return (
-        <div className="revision-wrapper scrollable">
-          <RevisionBrowserControls {...this.state} />
-          <div className="revision-view-controls">
-            <ButtonGroup className="two-sides-toggle-button">
-              <Button
-                style={{width: '120px'}}
-                className={isDiffViewEnabled ? 'active' : ''}
-                onClick={this.toggleDiffView.bind(this, true)}
-              >
-                <i className="icon-columns" /> Diff
-              </Button>
-              <Button
-                style={{width: '120px'}}
-                className={isDiffViewEnabled ? '' : 'active'}
-                onClick={this.toggleDiffView.bind(this, false)}
-              >
-                <i className="icon-file-text" /> Document
-              </Button>
-            </ButtonGroup>
-          </div>
-
-          {isDiffViewEnabled ?
-            <RevisionDiffArea ours={ours} theirs={theirs} /> :
-            <SplitScreenArea ours={ours} theirs={theirs} /> }
+    return (
+      <div className="revision-wrapper scrollable">
+        <RevisionBrowserControls {...this.state} />
+        <div className="revision-view-controls">
+          <ButtonGroup className="two-sides-toggle-button">
+            <Button
+              style={{width: '120px'}}
+              className={isDiffViewEnabled ? 'active' : ''}
+              onClick={this.toggleDiffView.bind(this, true)}
+            >
+              <i className="icon-columns" /> Diff
+            </Button>
+            <Button
+              style={{width: '120px'}}
+              className={isDiffViewEnabled ? '' : 'active'}
+              onClick={this.toggleDiffView.bind(this, false)}
+            >
+              <i className="icon-file-text" /> Document
+            </Button>
+          </ButtonGroup>
         </div>
-      );
-    }
-  };
-
-
-  class SplitScreenArea extends React.Component {
-
-    constructor (props) {
-      super(props);
-    }
 
-    componentDidUpdate () {
-      this.hightlightAfterRender();
-    }
+        {isDiffViewEnabled ?
+          <RevisionDiffArea ours={ours} theirs={theirs} /> :
+          <SplitScreenArea ours={ours} theirs={theirs} /> }
+      </div>
+    );
+  }
+}
 
-    componentDidMount () {
-      this.hightlightAfterRender();
-    }
 
-    hightlightAfterRender () {
-      const format = (input) => { return JSON.stringify(input, null, '  '); };
+class SplitScreenArea extends React.Component {
 
-      const jsmode = new JavaScriptMode();
-      const left = ReactDOM.findDOMNode(this.refs.revLeftOurs);
-      const right = ReactDOM.findDOMNode(this.refs.revRightTheirs);
+  constructor (props) {
+    super(props);
+  }
 
-      const leftRes = highlight.render(format(this.props.ours), jsmode, theme, 0, true);
-      left.innerHTML = leftRes.html;
-      const rightRes = highlight.render(format(this.props.theirs), jsmode, theme, 0, true);
-      right.innerHTML = rightRes.html;
-    }
+  componentDidUpdate () {
+    this.hightlightAfterRender();
+  }
 
-    render () {
-      const {ours, theirs} = this.props;
+  componentDidMount () {
+    this.hightlightAfterRender();
+  }
 
-      if (!ours || !theirs) {
-        return <div></div>;
-      }
+  hightlightAfterRender () {
+    const format = (input) => { return JSON.stringify(input, null, '  '); };
 
-      return (
-        <div className="revision-split-area">
-          <div data-id="ours" style={{width: '50%'}}>
-            <div style={{marginBottom: '20px'}}>{ours._rev} (Server-Selected Rev)</div>
-            <pre ref="revLeftOurs"></pre>
-          </div>
+    const jsmode = new JavaScriptMode();
+    const left = ReactDOM.findDOMNode(this.refs.revLeftOurs);
+    const right = ReactDOM.findDOMNode(this.refs.revRightTheirs);
 
-          <div data-id="theirs" style={{width: '50%'}}>
-            <div style={{marginBottom: '20px'}}>{theirs._rev}</div>
-            <pre ref="revRightTheirs"></pre>
-          </div>
-        </div>
-      );
-    }
+    const leftRes = highlight.render(format(this.props.ours), jsmode, theme, 0, true);
+    left.innerHTML = leftRes.html;
+    const rightRes = highlight.render(format(this.props.theirs), jsmode, theme, 0, true);
+    right.innerHTML = rightRes.html;
   }
 
-  const RevisionDiffArea = ({ours, theirs}) => {
+  render () {
+    const {ours, theirs} = this.props;
+
     if (!ours || !theirs) {
       return <div></div>;
     }
 
-    const delta = jdp.diff(ours, theirs);
-    const html = jdpformatters.format(delta, ours);
-
     return (
-      <div className="revision-diff-area">
-        <div
-          style={{marginTop: '30px'}}
-          dangerouslySetInnerHTML={{__html: html}}
-        >
+      <div className="revision-split-area">
+        <div data-id="ours" style={{width: '50%'}}>
+          <div style={{marginBottom: '20px'}}>{ours._rev} (Server-Selected Rev)</div>
+          <pre ref="revLeftOurs"></pre>
         </div>
-      </div>
-    );
-  };
-  RevisionDiffArea.propTypes = {
-    ours: React.PropTypes.object,
-    theirs: React.PropTypes.object,
-    currentRev: React.PropTypes.string
-  };
 
-
-  const ConflictingRevisionsDropDown = ({options, selected, onRevisionClick, onBackwardClick, onForwardClick}) => {
-    return (
-      <div className="conflicting-revs-dropdown">
-        <BackForwardControls backward onClick={onBackwardClick} />
-        <div style={{width: '345px', margin: '0 5px'}}>
-          <ReactSelect
-            name="form-field-name"
-            value={selected}
-            options={options}
-            clearable={false}
-            onChange={onRevisionClick} />
+        <div data-id="theirs" style={{width: '50%'}}>
+          <div style={{marginBottom: '20px'}}>{theirs._rev}</div>
+          <pre ref="revRightTheirs"></pre>
         </div>
-        <BackForwardControls forward onClick={onForwardClick} />
       </div>
     );
-  };
-  ConflictingRevisionsDropDown.propTypes = {
-    options: React.PropTypes.array.isRequired,
-    selected: React.PropTypes.string.isRequired,
-    onRevisionClick: React.PropTypes.func.isRequired,
-    onBackwardClick: React.PropTypes.func.isRequired,
-    onForwardClick: React.PropTypes.func.isRequired,
-  };
+  }
+}
 
-  class RevisionBrowserControls extends React.Component {
+const RevisionDiffArea = ({ours, theirs}) => {
+  if (!ours || !theirs) {
+    return <div></div>;
+  }
 
-    constructor (props) {
-      super(props);
+  const delta = jdp.diff(ours, theirs);
+  const html = jdpformatters.format(delta, ours);
 
-      this.state = {showModal: false};
-    }
-
-    onRevisionClick (revTheirs) {
+  return (
+    <div className="revision-diff-area">
+      <div
+        style={{marginTop: '30px'}}
+        dangerouslySetInnerHTML={{__html: html}}
+      >
+      </div>
+    </div>
+  );
+};
+RevisionDiffArea.propTypes = {
+  ours: React.PropTypes.object,
+  theirs: React.PropTypes.object,
+  currentRev: React.PropTypes.string
+};
+
+
+const ConflictingRevisionsDropDown = ({options, selected, onRevisionClick, onBackwardClick, onForwardClick}) => {
+  return (
+    <div className="conflicting-revs-dropdown">
+      <BackForwardControls backward onClick={onBackwardClick} />
+      <div style={{width: '345px', margin: '0 5px'}}>
+        <ReactSelect
+          name="form-field-name"
+          value={selected}
+          options={options}
+          clearable={false}
+          onChange={onRevisionClick} />
+      </div>
+      <BackForwardControls forward onClick={onForwardClick} />
+    </div>
+  );
+};
+ConflictingRevisionsDropDown.propTypes = {
+  options: React.PropTypes.array.isRequired,
+  selected: React.PropTypes.string.isRequired,
+  onRevisionClick: React.PropTypes.func.isRequired,
+  onBackwardClick: React.PropTypes.func.isRequired,
+  onForwardClick: React.PropTypes.func.isRequired,
+};
+
+class RevisionBrowserControls extends React.Component {
+
+  constructor (props) {
+    super(props);
+
+    this.state = {showModal: false};
+  }
 
-      RevActions.chooseLeaves(this.props.ours, revTheirs.value);
-    }
+  onRevisionClick (revTheirs) {
 
-    onForwardClick () {
-      const conflictingRevs = this.props.conflictingRevs;
-      const index = conflictingRevs.indexOf(this.props.theirs._rev);
+    RevActions.chooseLeaves(this.props.ours, revTheirs.value);
+  }
 
-      const next = conflictingRevs[index + 1];
+  onForwardClick () {
+    const conflictingRevs = this.props.conflictingRevs;
+    const index = conflictingRevs.indexOf(this.props.theirs._rev);
 
-      if (!next) {
-        return;
-      }
+    const next = conflictingRevs[index + 1];
 
-      RevActions.chooseLeaves(this.props.ours, next);
+    if (!next) {
+      return;
     }
 
-    onBackwardClick () {
-      const conflictingRevs = this.props.conflictingRevs;
-      const index = conflictingRevs.indexOf(this.props.theirs._rev);
+    RevActions.chooseLeaves(this.props.ours, next);
+  }
 
-      const next = conflictingRevs[index - 1];
+  onBackwardClick () {
+    const conflictingRevs = this.props.conflictingRevs;
+    const index = conflictingRevs.indexOf(this.props.theirs._rev);
 
-      if (!next) {
-        return;
-      }
+    const next = conflictingRevs[index - 1];
 
-      RevActions.chooseLeaves(this.props.ours, next);
+    if (!next) {
+      return;
     }
 
-    selectAsWinner (docToWin, doNotShowModalAgain) {
-      if (doNotShowModalAgain) {
-        app.utils.localStorageSet(storageKeyDeleteConflictsModal, true);
-      }
+    RevActions.chooseLeaves(this.props.ours, next);
+  }
 
-      RevActions.selectRevAsWinner(this.props.databaseName, docToWin._id, this.props.tree.paths, docToWin._rev);
+  selectAsWinner (docToWin, doNotShowModalAgain) {
+    if (doNotShowModalAgain) {
+      app.utils.localStorageSet(storageKeyDeleteConflictsModal, true);
     }
 
-    onSelectAsWinnerClick (docToWin) {
-      if (app.utils.localStorageGet(storageKeyDeleteConflictsModal) !== true) {
-        RevActions.showConfirmModal(true, docToWin);
-        return;
-      }
+    RevActions.selectRevAsWinner(this.props.databaseName, docToWin._id, this.props.tree.paths, docToWin._rev);
+  }
 
-      this.selectAsWinner(docToWin);
+  onSelectAsWinnerClick (docToWin) {
+    if (app.utils.localStorageGet(storageKeyDeleteConflictsModal) !== true) {
+      RevActions.showConfirmModal(true, docToWin);
+      return;
     }
 
-    render () {
-      const {tree, conflictingRevs} = this.props;
-      const cellStyle = {paddingRight: '30px'};
-
-      return (
-        <div className="revision-browser-controls">
-          <ConfirmModal onConfirm={this.selectAsWinner.bind(this)} />
-          <table style={{margin: '10px 60px', width: '100%'}}>
-            <tbody>
-              <tr style={{height: '60px'}}>
-                <td style={cellStyle}>Server-Selected Rev: </td>
-                <td style={cellStyle}>
-                  <div style={{lineHeight: '36px', height: '36px', width: '337px', color: '#000', backgroundColor: '#ffbbbb'}}>
-                    <b style={{paddingLeft: '10px'}}>{tree.winner}</b>
-                  </div>
-                </td>
-                <td>
-                  <ConfirmButton
-                    onClick={this.onSelectAsWinnerClick.bind(this, this.props.ours)}
-                    style={{marginRight: '10px', width: '220px'}}
-                    text="Delete Other Conflicts"
-                    buttonType="btn-info"
-                    customIcon="icon-trophy" />
-                </td>
-              </tr>
-              <tr style={{height: '60px'}}>
-                <td style={cellStyle}>Conflicting Revisions: </td>
-                <td style={cellStyle}>
-                  <ConflictingRevisionsDropDown
-                    onRevisionClick={this.onRevisionClick.bind(this)}
-                    onForwardClick={this.onForwardClick.bind(this)}
-                    onBackwardClick={this.onBackwardClick.bind(this)}
-                    options={this.props.dropdownData}
-                    selected={this.props.theirs._rev} />
-                </td>
-                <td>
-                  <ConfirmButton
-                    data-id="button-select-theirs"
-                    onClick={this.onSelectAsWinnerClick.bind(this, this.props.theirs)}
-                    style={{marginRight: '10px', width: '220px'}}
-                    text="Select as Winner"
-                    buttonType="btn-info"
-                    customIcon="icon-trophy" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+    this.selectAsWinner(docToWin);
+  }
 
-      );
-    }
+  render () {
+    const {tree, conflictingRevs} = this.props;
+    const cellStyle = {paddingRight: '30px'};
+
+    return (
+      <div className="revision-browser-controls">
+        <ConfirmModal onConfirm={this.selectAsWinner.bind(this)} />
+        <table style={{margin: '10px 60px', width: '100%'}}>
+          <tbody>
+            <tr style={{height: '60px'}}>
+              <td style={cellStyle}>Server-Selected Rev: </td>
+              <td style={cellStyle}>
+                <div style={{lineHeight: '36px', height: '36px', width: '337px', color: '#000', backgroundColor: '#ffbbbb'}}>
+                  <b style={{paddingLeft: '10px'}}>{tree.winner}</b>
+                </div>
+              </td>
+              <td>
+                <ConfirmButton
+                  onClick={this.onSelectAsWinnerClick.bind(this, this.props.ours)}
+                  style={{marginRight: '10px', width: '220px'}}
+                  text="Delete Other Conflicts"
+                  buttonType="btn-info"
+                  customIcon="icon-trophy" />
+              </td>
+            </tr>
+            <tr style={{height: '60px'}}>
+              <td style={cellStyle}>Conflicting Revisions: </td>
+              <td style={cellStyle}>
+                <ConflictingRevisionsDropDown
+                  onRevisionClick={this.onRevisionClick.bind(this)}
+                  onForwardClick={this.onForwardClick.bind(this)}
+                  onBackwardClick={this.onBackwardClick.bind(this)}
+                  options={this.props.dropdownData}
+                  selected={this.props.theirs._rev} />
+              </td>
+              <td>
+                <ConfirmButton
+                  data-id="button-select-theirs"
+                  onClick={this.onSelectAsWinnerClick.bind(this, this.props.theirs)}
+                  style={{marginRight: '10px', width: '220px'}}
+                  text="Select as Winner"
+                  buttonType="btn-info"
+                  customIcon="icon-trophy" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    );
   }
-  RevisionBrowserControls.propTypes = {
-    tree: React.PropTypes.object.isRequired,
-    ours: React.PropTypes.object.isRequired,
-    conflictingRevs: React.PropTypes.array.isRequired,
-  };
+}
+RevisionBrowserControls.propTypes = {
+  tree: React.PropTypes.object.isRequired,
+  ours: React.PropTypes.object.isRequired,
+  conflictingRevs: React.PropTypes.array.isRequired,
+};
 
-  class ConfirmModal extends React.Component {
+class ConfirmModal extends React.Component {
 
-    constructor (props) {
-      super(props);
+  constructor (props) {
+    super(props);
 
-      this.state = this.getStoreState();
-    }
+    this.state = this.getStoreState();
+  }
 
-    getStoreState () {
-      return {
-        show: store.getShowConfirmModal(),
-        docToWin: store.getDocToWin(),
-        checked: false
-      };
-    }
+  getStoreState () {
+    return {
+      show: store.getShowConfirmModal(),
+      docToWin: store.getDocToWin(),
+      checked: false
+    };
+  }
 
-    componentDidMount () {
-      store.on('change', this.onChange, this);
-    }
+  componentDidMount () {
+    store.on('change', this.onChange, this);
+  }
 
-    componentWillUnmount () {
-      store.off('change', this.onChange);
-    }
+  componentWillUnmount () {
+    store.off('change', this.onChange);
+  }
 
-    onChange () {
-      this.setState(this.getStoreState());
-    }
+  onChange () {
+    this.setState(this.getStoreState());
+  }
 
-    close () {
-      RevActions.showConfirmModal(false, null);
-    }
+  close () {
+    RevActions.showConfirmModal(false, null);
+  }
 
-    onDeleteConflicts () {
-      const hideModal = this.state.checked;
-      this.props.onConfirm(this.state.docToWin, hideModal);
-    }
+  onDeleteConflicts () {
+    const hideModal = this.state.checked;
+    this.props.onConfirm(this.state.docToWin, hideModal);
+  }
 
-    render () {
-      return (
-        <Modal dialogClassName="delete-conflicts-modal" show={this.state.show} onHide={this.close}>
-          <Modal.Header closeButton={false}>
-            <Modal.Title>Solve Conflicts</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <p>
-            <i className="icon-warning-sign"></i> Do you want to delete all conflicting revisions for this document?
-            </p>
-
-
-          </Modal.Body>
-          <Modal.Footer>
-            <div style={{float: 'left', marginTop: '10px'}}>
-              <label>
-                <input
-                  style={{margin: '0 5px 3px 0'}}
-                  onChange={() => { this.setState({checked: !this.state.checked }); }}
-                  type="checkbox" />
-                  Do not show this warning message again
-              </label>
-            </div>
-            <a
-              style={{marginRight: '10px', cursor: 'pointer'}}
-              onClick={this.close}
-              data-bypass="true"
-            >
-              Cancel
-            </a>
-
-            <ConfirmButton
-              onClick={this.onDeleteConflicts.bind(this)}
-              text="Delete Revisions"
-              buttonType="btn-danger" />
-          </Modal.Footer>
-        </Modal>
-      );
-    }
-  };
-  ConfirmModal.propTypes = {
-    onConfirm: React.PropTypes.func.isRequired,
-  };
-
-  const BackForwardControls = ({onClick, forward, backward}) => {
-    const icon = forward ? 'fonticon-right-open' : 'fonticon-left-open';
-    const style = {height: '20px', width: '11px', marginTop: '7px'};
-
-    return <div style={style} className={icon} onClick={onClick}></div>;
-  };
-  BackForwardControls.propTypes = {
-    onClick: React.PropTypes.func.isRequired,
-  };
-
-  return {
-    DiffyController: DiffyController
-  };
-
-});
+  render () {
+    return (
+      <Modal dialogClassName="delete-conflicts-modal" show={this.state.show} onHide={this.close}>
+        <Modal.Header closeButton={false}>
+          <Modal.Title>Solve Conflicts</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <p>
+          <i className="icon-warning-sign"></i> Do you want to delete all conflicting revisions for this document?
+          </p>
+
+
+        </Modal.Body>
+        <Modal.Footer>
+          <div style={{float: 'left', marginTop: '10px'}}>
+            <label>
+              <input
+                style={{margin: '0 5px 3px 0'}}
+                onChange={() => { this.setState({checked: !this.state.checked }); }}
+                type="checkbox" />
+                Do not show this warning message again
+            </label>
+          </div>
+          <a
+            style={{marginRight: '10px', cursor: 'pointer'}}
+            onClick={this.close}
+            data-bypass="true"
+          >
+            Cancel
+          </a>
+
+          <ConfirmButton
+            onClick={this.onDeleteConflicts.bind(this)}
+            text="Delete Revisions"
+            buttonType="btn-danger" />
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+ConfirmModal.propTypes = {
+  onConfirm: React.PropTypes.func.isRequired,
+};
+
+const BackForwardControls = ({onClick, forward, backward}) => {
+  const icon = forward ? 'fonticon-right-open' : 'fonticon-left-open';
+  const style = {height: '20px', width: '11px', marginTop: '7px'};
+
+  return <div style={style} className={icon} onClick={onClick}></div>;
+};
+BackForwardControls.propTypes = {
+  onClick: React.PropTypes.func.isRequired,
+};
+
+export default {
+  DiffyController: DiffyController
+};

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/rev-browser/rev-browser.stores.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/rev-browser/rev-browser.stores.js b/app/addons/documents/rev-browser/rev-browser.stores.js
index 28a6dfd..c4b4afa 100644
--- a/app/addons/documents/rev-browser/rev-browser.stores.js
+++ b/app/addons/documents/rev-browser/rev-browser.stores.js
@@ -10,114 +10,111 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../../core/api',
-  './rev-browser.actiontypes'
-], (FauxtonAPI, ActionTypes) => {
+import FauxtonAPI from "../../../core/api";
+import ActionTypes from "./rev-browser.actiontypes";
 
-  const Stores = {};
+const Stores = {};
 
-  Stores.RevBrowserStore = FauxtonAPI.Store.extend({
-    initialize: function () {
-      this.reset();
-    },
+Stores.RevBrowserStore = FauxtonAPI.Store.extend({
+  initialize: function () {
+    this.reset();
+  },
 
-    reset: function () {
-      this._revTree = null;
+  reset: function () {
+    this._revTree = null;
 
-      this._ours = null;
-      this._theirs = null;
+    this._ours = null;
+    this._theirs = null;
 
-      this._dropDownData = null;
-      this._isDiffViewEnabled = true;
+    this._dropDownData = null;
+    this._isDiffViewEnabled = true;
 
-      this._databaseName = null;
+    this._databaseName = null;
 
-      this._showConfirmModal = false;
-      this._docToWin = null;
-    },
+    this._showConfirmModal = false;
+    this._docToWin = null;
+  },
 
-    prepareDropdownData: function (revs) {
-      return revs.map((el) => {
+  prepareDropdownData: function (revs) {
+    return revs.map((el) => {
 
-        return { value: el, label: el };
-      });
-    },
+      return { value: el, label: el };
+    });
+  },
 
-    getRevTree: function () {
-      return this._revTree;
-    },
+  getRevTree: function () {
+    return this._revTree;
+  },
 
-    getDatabaseName: function () {
-      return this._databaseName;
-    },
+  getDatabaseName: function () {
+    return this._databaseName;
+  },
 
-    getOurs: function () {
-      return this._ours;
-    },
+  getOurs: function () {
+    return this._ours;
+  },
 
-    getTheirs: function () {
-      return this._theirs;
-    },
+  getTheirs: function () {
+    return this._theirs;
+  },
 
-    getConflictingRevs: function () {
-      return this._conflictingRevs;
-    },
+  getConflictingRevs: function () {
+    return this._conflictingRevs;
+  },
 
-    getDropdownData: function () {
-      return this._dropDownData;
-    },
+  getDropdownData: function () {
+    return this._dropDownData;
+  },
 
-    getIsDiffViewEnabled: function () {
-      return this._isDiffViewEnabled;
-    },
+  getIsDiffViewEnabled: function () {
+    return this._isDiffViewEnabled;
+  },
 
-    getShowConfirmModal: function () {
-      return this._showConfirmModal;
-    },
+  getShowConfirmModal: function () {
+    return this._showConfirmModal;
+  },
 
-    getDocToWin: function () {
-      return this._docToWin;
-    },
+  getDocToWin: function () {
+    return this._docToWin;
+  },
 
-    dispatch: function (action) {
-      switch (action.type) {
-        case ActionTypes.REV_BROWSER_REV_TREE_LOADED:
-          this._revTree = action.options.tree;
-          this._ours = action.options.doc;
-          this._conflictingRevs = action.options.conflictingRevs;
-          this._theirs = action.options.conflictDoc;
+  dispatch: function (action) {
+    switch (action.type) {
+      case ActionTypes.REV_BROWSER_REV_TREE_LOADED:
+        this._revTree = action.options.tree;
+        this._ours = action.options.doc;
+        this._conflictingRevs = action.options.conflictingRevs;
+        this._theirs = action.options.conflictDoc;
 
-          this._dropDownData = this.prepareDropdownData(this._conflictingRevs);
+        this._dropDownData = this.prepareDropdownData(this._conflictingRevs);
 
-          this._databaseName = action.options.databaseName;
-        break;
+        this._databaseName = action.options.databaseName;
+      break;
 
-        case ActionTypes.REV_BROWSER_DIFF_DOCS_READY:
-          this._theirs = action.options.theirs;
-        break;
+      case ActionTypes.REV_BROWSER_DIFF_DOCS_READY:
+        this._theirs = action.options.theirs;
+      break;
 
-        case ActionTypes.REV_BROWSER_DIFF_ENABLE_DIFF_VIEW:
-          this._isDiffViewEnabled = action.options.enableDiff;
-        break;
+      case ActionTypes.REV_BROWSER_DIFF_ENABLE_DIFF_VIEW:
+        this._isDiffViewEnabled = action.options.enableDiff;
+      break;
 
-        case ActionTypes.REV_BROWSER_SHOW_CONFIRM_MODAL:
-          this._showConfirmModal = action.options.show;
-          this._docToWin = action.options.docToWin;
-        break;
+      case ActionTypes.REV_BROWSER_SHOW_CONFIRM_MODAL:
+        this._showConfirmModal = action.options.show;
+        this._docToWin = action.options.docToWin;
+      break;
 
-        default:
-        return;
-        // do nothing
-      }
-
-      this.triggerChange();
+      default:
+      return;
+      // do nothing
     }
 
-  });
-
-  Stores.revBrowserStore = new Stores.RevBrowserStore();
-  Stores.revBrowserStore.dispatchToken = FauxtonAPI.dispatcher.register(Stores.revBrowserStore.dispatch);
+    this.triggerChange();
+  }
 
-  return Stores;
 });
+
+Stores.revBrowserStore = new Stores.RevBrowserStore();
+Stores.revBrowserStore.dispatchToken = FauxtonAPI.dispatcher.register(Stores.revBrowserStore.dispatch);
+
+export default Stores;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/rev-browser/tests/fixtures.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/rev-browser/tests/fixtures.js b/app/addons/documents/rev-browser/tests/fixtures.js
index f8f2e3a..650d9a9 100644
--- a/app/addons/documents/rev-browser/tests/fixtures.js
+++ b/app/addons/documents/rev-browser/tests/fixtures.js
@@ -10,63 +10,60 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([], () => {
-
-  const twoPaths = {
-    "paths": [
-      [
-        "4-2868f2429e2211f74e656663f39b0cb8",
-        "3-b1a15f62533e8d3344504855c7c006f7",
-        "2-3016a16f8d02b6062c0f85af048974df",
-        "1-a2701a97f75439f13e9062ad8a9e2b9c"
-      ],
-      [
-        "6-9831e318304c35efafa6faa57a54809f",
-        "5-8eadb1a781b835cce132a339250bba53",
-        "4-3c1720cc9f559444f7e717a070f8eaec",
-        "3-b1a15f62533e8d3344504855c7c006f7",
-        "2-3016a16f8d02b6062c0f85af048974df",
-        "1-a2701a97f75439f13e9062ad8a9e2b9c"
-      ]
+const twoPaths = {
+  "paths": [
+    [
+      "4-2868f2429e2211f74e656663f39b0cb8",
+      "3-b1a15f62533e8d3344504855c7c006f7",
+      "2-3016a16f8d02b6062c0f85af048974df",
+      "1-a2701a97f75439f13e9062ad8a9e2b9c"
     ],
-    "deleted": {},
-    "winner": "6-9831e318304c35efafa6faa57a54809f"
-  };
+    [
+      "6-9831e318304c35efafa6faa57a54809f",
+      "5-8eadb1a781b835cce132a339250bba53",
+      "4-3c1720cc9f559444f7e717a070f8eaec",
+      "3-b1a15f62533e8d3344504855c7c006f7",
+      "2-3016a16f8d02b6062c0f85af048974df",
+      "1-a2701a97f75439f13e9062ad8a9e2b9c"
+    ]
+  ],
+  "deleted": {},
+  "winner": "6-9831e318304c35efafa6faa57a54809f"
+};
 
-  const threePaths = {
-    "paths": [
-      [
-        "5-5555f2429e2211f74e656663f39b0cb8",
-        "4-2868f2429e2211f74e656663f39b0cb8",
-        "3-b1a15f62533e8d3344504855c7c006f7",
-        "2-3016a16f8d02b6062c0f85af048974df",
-        "1-a2701a97f75439f13e9062ad8a9e2b9c"
-      ],
-      [
-        "7-1309b41d34787f7ba95280802f327dc2",
-        "6-9831e318304c35efafa6faa57a54809f",
-        "5-8eadb1a781b835cce132a339250bba53",
-        "4-3c1720cc9f559444f7e717a070f8eaec",
-        "3-b1a15f62533e8d3344504855c7c006f7",
-        "2-3016a16f8d02b6062c0f85af048974df",
-        "1-a2701a97f75439f13e9062ad8a9e2b9c"
-      ],
-      [
-        "7-1f1bb5806f33c8922277ea053d6fc4ed",
-        "6-9831e318304c35efafa6faa57a54809f",
-        "5-8eadb1a781b835cce132a339250bba53",
-        "4-3c1720cc9f559444f7e717a070f8eaec",
-        "3-b1a15f62533e8d3344504855c7c006f7",
-        "2-3016a16f8d02b6062c0f85af048974df",
-        "1-a2701a97f75439f13e9062ad8a9e2b9c"
-      ]
+const threePaths = {
+  "paths": [
+    [
+      "5-5555f2429e2211f74e656663f39b0cb8",
+      "4-2868f2429e2211f74e656663f39b0cb8",
+      "3-b1a15f62533e8d3344504855c7c006f7",
+      "2-3016a16f8d02b6062c0f85af048974df",
+      "1-a2701a97f75439f13e9062ad8a9e2b9c"
+    ],
+    [
+      "7-1309b41d34787f7ba95280802f327dc2",
+      "6-9831e318304c35efafa6faa57a54809f",
+      "5-8eadb1a781b835cce132a339250bba53",
+      "4-3c1720cc9f559444f7e717a070f8eaec",
+      "3-b1a15f62533e8d3344504855c7c006f7",
+      "2-3016a16f8d02b6062c0f85af048974df",
+      "1-a2701a97f75439f13e9062ad8a9e2b9c"
     ],
-    "deleted": {},
-    "winner": "7-1f1bb5806f33c8922277ea053d6fc4ed"
-  };
+    [
+      "7-1f1bb5806f33c8922277ea053d6fc4ed",
+      "6-9831e318304c35efafa6faa57a54809f",
+      "5-8eadb1a781b835cce132a339250bba53",
+      "4-3c1720cc9f559444f7e717a070f8eaec",
+      "3-b1a15f62533e8d3344504855c7c006f7",
+      "2-3016a16f8d02b6062c0f85af048974df",
+      "1-a2701a97f75439f13e9062ad8a9e2b9c"
+    ]
+  ],
+  "deleted": {},
+  "winner": "7-1f1bb5806f33c8922277ea053d6fc4ed"
+};
 
-  return {
-    twoPaths: twoPaths,
-    threePaths: threePaths
-  };
-});
+export default {
+  twoPaths: twoPaths,
+  threePaths: threePaths
+};

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/rev-browser/tests/rev-browser.actionsSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/rev-browser/tests/rev-browser.actionsSpec.js b/app/addons/documents/rev-browser/tests/rev-browser.actionsSpec.js
index f43962e..b0678ce 100644
--- a/app/addons/documents/rev-browser/tests/rev-browser.actionsSpec.js
+++ b/app/addons/documents/rev-browser/tests/rev-browser.actionsSpec.js
@@ -10,85 +10,81 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../../../core/api',
-  '../rev-browser.actions',
-  './fixtures',
+import FauxtonAPI from "../../../../core/api";
+import RevActions from "../rev-browser.actions";
+import fixtures from "./fixtures";
+import utils from "../../../../../test/mocha/testUtils";
 
-  '../../../../../test/mocha/testUtils'
-], (FauxtonAPI, RevActions, fixtures, utils) => {
+const assert = utils.assert;
 
-  const assert = utils.assert;
+describe('RevActions', () => {
 
-  describe('RevActions', () => {
 
+  it('getConflictingRevs gets the revisions which are obsolete, winner', () => {
 
-    it('getConflictingRevs gets the revisions which are obsolete, winner', () => {
+    const res = RevActions.getConflictingRevs(
+      fixtures.threePaths.paths,
+      "7-1f1bb5806f33c8922277ea053d6fc4ed",
+      Object.keys({})
+    );
 
-      const res = RevActions.getConflictingRevs(
-        fixtures.threePaths.paths,
-        "7-1f1bb5806f33c8922277ea053d6fc4ed",
-        Object.keys({})
-      );
+    const expected = [
+      "5-5555f2429e2211f74e656663f39b0cb8",
+      "7-1309b41d34787f7ba95280802f327dc2"
+    ];
 
-      const expected = [
-        "5-5555f2429e2211f74e656663f39b0cb8",
-        "7-1309b41d34787f7ba95280802f327dc2"
-      ];
-
-      assert.deepEqual(expected, res);
-    });
-
-    it('getConflictingRevs gets the revisions which are obsolete, sidetrack with a lot lower rev', () => {
-
-      const res = RevActions.getConflictingRevs(
-        fixtures.threePaths.paths,
-        "5-5555f2429e2211f74e656663f39b0cb8",
-        Object.keys({})
-      );
-
-      const expected = [
-        "7-1309b41d34787f7ba95280802f327dc2",
-        "7-1f1bb5806f33c8922277ea053d6fc4ed"
-      ];
+    assert.deepEqual(expected, res);
+  });
 
-      assert.deepEqual(expected, res);
-    });
+  it('getConflictingRevs gets the revisions which are obsolete, sidetrack with a lot lower rev', () => {
 
-    it('getConflictingRevs filters out deleted revisions', () => {
+    const res = RevActions.getConflictingRevs(
+      fixtures.threePaths.paths,
+      "5-5555f2429e2211f74e656663f39b0cb8",
+      Object.keys({})
+    );
 
-      const res = RevActions.getConflictingRevs(
-        fixtures.threePaths.paths,
-        "5-5555f2429e2211f74e656663f39b0cb8",
-        Object.keys({ '7-1f1bb5806f33c8922277ea053d6fc4ed': true })
-      );
+    const expected = [
+      "7-1309b41d34787f7ba95280802f327dc2",
+      "7-1f1bb5806f33c8922277ea053d6fc4ed"
+    ];
 
-      const expected = [
-        "7-1309b41d34787f7ba95280802f327dc2"
-      ];
+    assert.deepEqual(expected, res);
+  });
 
-      assert.deepEqual(expected, res);
-    });
+  it('getConflictingRevs filters out deleted revisions', () => {
 
-    it('buildBulkDeletePayload prepares the payload for bulkdocs', () => {
+    const res = RevActions.getConflictingRevs(
+      fixtures.threePaths.paths,
+      "5-5555f2429e2211f74e656663f39b0cb8",
+      Object.keys({ '7-1f1bb5806f33c8922277ea053d6fc4ed': true })
+    );
 
-      const data = [
-        "7-1309b41d34787f7ba95280802f327dc2",
-        "6-9831e318304c35efafa6faa57a54809f",
-        "5-8eadb1a781b835cce132a339250bba53",
-        "4-3c1720cc9f559444f7e717a070f8eaec",
-        "7-1f1bb5806f33c8922277ea053d6fc4ed"
-      ];
+    const expected = [
+      "7-1309b41d34787f7ba95280802f327dc2"
+    ];
 
-      const res = RevActions.buildBulkDeletePayload('fooId', data);
+    assert.deepEqual(expected, res);
+  });
 
-      assert.deepEqual([
-        { "_id": "fooId", "_rev": "7-1309b41d34787f7ba95280802f327dc2", "_deleted": true },
-        { "_id": "fooId", "_rev": "6-9831e318304c35efafa6faa57a54809f", "_deleted": true },
-        { "_id": "fooId", "_rev": "5-8eadb1a781b835cce132a339250bba53", "_deleted": true },
-        { "_id": "fooId", "_rev": "4-3c1720cc9f559444f7e717a070f8eaec", "_deleted": true },
-        { "_id": "fooId", "_rev": "7-1f1bb5806f33c8922277ea053d6fc4ed", "_deleted": true },
-      ], res.docs);
-    });
+  it('buildBulkDeletePayload prepares the payload for bulkdocs', () => {
+
+    const data = [
+      "7-1309b41d34787f7ba95280802f327dc2",
+      "6-9831e318304c35efafa6faa57a54809f",
+      "5-8eadb1a781b835cce132a339250bba53",
+      "4-3c1720cc9f559444f7e717a070f8eaec",
+      "7-1f1bb5806f33c8922277ea053d6fc4ed"
+    ];
+
+    const res = RevActions.buildBulkDeletePayload('fooId', data);
+
+    assert.deepEqual([
+      { "_id": "fooId", "_rev": "7-1309b41d34787f7ba95280802f327dc2", "_deleted": true },
+      { "_id": "fooId", "_rev": "6-9831e318304c35efafa6faa57a54809f", "_deleted": true },
+      { "_id": "fooId", "_rev": "5-8eadb1a781b835cce132a339250bba53", "_deleted": true },
+      { "_id": "fooId", "_rev": "4-3c1720cc9f559444f7e717a070f8eaec", "_deleted": true },
+      { "_id": "fooId", "_rev": "7-1f1bb5806f33c8922277ea053d6fc4ed", "_deleted": true },
+    ], res.docs);
   });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/routes-doc-editor.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes-doc-editor.js b/app/addons/documents/routes-doc-editor.js
index 0702a40..59d91b6 100644
--- a/app/addons/documents/routes-doc-editor.js
+++ b/app/addons/documents/routes-doc-editor.js
@@ -10,160 +10,152 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../app',
-  '../../core/api',
-  './helpers',
-  './resources',
-  '../databases/base',
-  './doc-editor/actions',
-  './doc-editor/components.react',
+import app from "../../app";
+import FauxtonAPI from "../../core/api";
+import Helpers from "./helpers";
+import Documents from "./resources";
+import Databases from "../databases/base";
+import Actions from "./doc-editor/actions";
+import ReactComponents from "./doc-editor/components.react";
+import RevBrowserActions from "./rev-browser/rev-browser.actions";
+import RevBrowserComponents from "./rev-browser/rev-browser.components.react";
+
+
+const RevBrowserRouteObject = FauxtonAPI.RouteObject.extend({
+  layout: 'doc_editor',
+  disableLoader: true,
+  selectedHeader: 'Databases',
+  roles: ['fx_loggedIn'],
+
+  routes: {
+    'database/:database/:doc/conflicts': 'revisionBrowser'
+  },
+
+  initialize: function (route, masterLayout, options) {
+    const databaseName = options[0];
+
+    this.docId = options[1];
+    this.database = this.database || new Databases.Model({ id: databaseName });
+    this.doc = new Documents.Doc({ _id: this.docId }, { database: this.database });
+  },
+
+  crumbs: function () {
+    const previousPage = Helpers.getPreviousPageForDoc(this.database, this.wasCloned);
+    const docUrl = FauxtonAPI.urls('document', 'app', this.database.safeID(), this.docId);
+
+    return [
+      { type: 'back', link: previousPage },
+      { name: this.docId + ' > Conflicts', link: '#' }
+    ];
+  },
+
+  apiUrl: function () {
+    return [this.doc.url('apiurl'), this.doc.documentation()];
+  },
+
+  revisionBrowser: function (databaseName, docId) {
+    RevBrowserActions.showConfirmModal(false, null);
+    RevBrowserActions.initDiffEditor(databaseName, docId);
+    this.setComponent('#dashboard-content', RevBrowserComponents.DiffyController);
+  }
 
-  './rev-browser/rev-browser.actions',
-  './rev-browser/rev-browser.components.react'
-],
+});
 
-(app, FauxtonAPI, Helpers, Documents, Databases, Actions, ReactComponents,
-RevBrowserActions, RevBrowserComponents) => {
+const DocEditorRouteObject = FauxtonAPI.RouteObject.extend({
+  layout: 'doc_editor',
+  disableLoader: true,
+  selectedHeader: 'Databases',
 
+  roles: ['fx_loggedIn'],
 
-  const RevBrowserRouteObject = FauxtonAPI.RouteObject.extend({
-    layout: 'doc_editor',
-    disableLoader: true,
-    selectedHeader: 'Databases',
-    roles: ['fx_loggedIn'],
+  initialize: function (route, masterLayout, options) {
+    this.databaseName = options[0];
+    this.docId = options[1];
+    this.database = this.database || new Databases.Model({ id: this.databaseName });
+    this.doc = new Documents.NewDoc(null, { database: this.database });
+    this.wasCloned = false;
+  },
 
-    routes: {
-      'database/:database/:doc/conflicts': 'revisionBrowser'
-    },
+  routes: {
+    'database/:database/:doc/code_editor': 'codeEditor',
+    'database/:database/_design/:ddoc': 'showDesignDoc',
+    'database/:database/:doc': 'codeEditor',
+    'database/:database/new': 'codeEditor'
+  },
 
-    initialize: function (route, masterLayout, options) {
-      const databaseName = options[0];
+  events: {
+    'route:duplicateDoc': 'duplicateDoc'
+  },
 
-      this.docId = options[1];
-      this.database = this.database || new Databases.Model({ id: databaseName });
-      this.doc = new Documents.Doc({ _id: this.docId }, { database: this.database });
-    },
+  crumbs: function () {
 
-    crumbs: function () {
-      const previousPage = Helpers.getPreviousPageForDoc(this.database, this.wasCloned);
-      const docUrl = FauxtonAPI.urls('document', 'app', this.database.safeID(), this.docId);
+    if (this.docId) {
+      let previousPage = Helpers.getPreviousPageForDoc(this.database, this.wasCloned);
 
       return [
         { type: 'back', link: previousPage },
-        { name: this.docId + ' > Conflicts', link: '#' }
+        { name: this.docId, link: '#' }
       ];
-    },
-
-    apiUrl: function () {
-      return [this.doc.url('apiurl'), this.doc.documentation()];
-    },
-
-    revisionBrowser: function (databaseName, docId) {
-      RevBrowserActions.showConfirmModal(false, null);
-      RevBrowserActions.initDiffEditor(databaseName, docId);
-      this.setComponent('#dashboard-content', RevBrowserComponents.DiffyController);
     }
 
-  });
-
-  const DocEditorRouteObject = FauxtonAPI.RouteObject.extend({
-    layout: 'doc_editor',
-    disableLoader: true,
-    selectedHeader: 'Databases',
+    let previousPage = Helpers.getPreviousPageForDoc(this.database);
+    return [
+      { type: 'back', link: previousPage },
+      { name: 'New Document', link: '#' }
+    ];
+  },
 
-    roles: ['fx_loggedIn'],
+  codeEditor: function (databaseName, docId) {
+    this.database = new Databases.Model({ id: databaseName });
 
-    initialize: function (route, masterLayout, options) {
-      this.databaseName = options[0];
-      this.docId = options[1];
-      this.database = this.database || new Databases.Model({ id: this.databaseName });
-      this.doc = new Documents.NewDoc(null, { database: this.database });
-      this.wasCloned = false;
-    },
-
-    routes: {
-      'database/:database/:doc/code_editor': 'codeEditor',
-      'database/:database/_design/:ddoc': 'showDesignDoc',
-      'database/:database/:doc': 'codeEditor',
-      'database/:database/new': 'codeEditor'
-    },
-
-    events: {
-      'route:duplicateDoc': 'duplicateDoc'
-    },
-
-    crumbs: function () {
+    if (docId) {
+      this.doc = new Documents.Doc({ _id: docId }, { database: this.database, fetchConflicts: true });
+    }
 
-      if (this.docId) {
-        let previousPage = Helpers.getPreviousPageForDoc(this.database, this.wasCloned);
+    Actions.initDocEditor({ doc: this.doc, database: this.database });
+    this.setComponent('#dashboard-content', ReactComponents.DocEditorController, {
+      database: this.database,
+      isNewDoc: docId ? false : true,
+      previousPage: '#/' + Helpers.getPreviousPageForDoc(this.database)
+    });
+  },
 
-        return [
-          { type: 'back', link: previousPage },
-          { name: this.docId, link: '#' }
-        ];
-      }
+  showDesignDoc: function (database, ddoc) {
+    this.codeEditor(database, '_design/' + ddoc);
+  },
 
-      let previousPage = Helpers.getPreviousPageForDoc(this.database);
-      return [
-        { type: 'back', link: previousPage },
-        { name: 'New Document', link: '#' }
-      ];
-    },
+  duplicateDoc: function (newId) {
+    var doc = this.doc,
+        database = this.database;
 
-    codeEditor: function (databaseName, docId) {
-      this.database = new Databases.Model({ id: databaseName });
+    this.docID = newId;
 
-      if (docId) {
-        this.doc = new Documents.Doc({ _id: docId }, { database: this.database, fetchConflicts: true });
-      }
+    var that = this;
+    doc.copy(newId).then(function () {
+      doc.set({ _id: newId });
+      that.wasCloned = true;
 
-      Actions.initDocEditor({ doc: this.doc, database: this.database });
-      this.setComponent('#dashboard-content', ReactComponents.DocEditorController, {
-        database: this.database,
-        isNewDoc: docId ? false : true,
-        previousPage: '#/' + Helpers.getPreviousPageForDoc(this.database)
-      });
-    },
-
-    showDesignDoc: function (database, ddoc) {
-      this.codeEditor(database, '_design/' + ddoc);
-    },
-
-    duplicateDoc: function (newId) {
-      var doc = this.doc,
-          database = this.database;
-
-      this.docID = newId;
-
-      var that = this;
-      doc.copy(newId).then(function () {
-        doc.set({ _id: newId });
-        that.wasCloned = true;
-
-        FauxtonAPI.navigate('/database/' + database.safeID() + '/' + app.utils.safeURLName(newId), { trigger: true });
-        FauxtonAPI.addNotification({
-          msg: 'Document has been duplicated.'
-        });
-
-      }, function (error) {
-        var errorMsg = 'Could not duplicate document, reason: ' + error.responseText + '.';
-        FauxtonAPI.addNotification({
-          msg: errorMsg,
-          type: 'error'
-        });
+      FauxtonAPI.navigate('/database/' + database.safeID() + '/' + app.utils.safeURLName(newId), { trigger: true });
+      FauxtonAPI.addNotification({
+        msg: 'Document has been duplicated.'
       });
-    },
 
-    apiUrl: function () {
-      return [this.doc.url('apiurl'), this.doc.documentation()];
-    }
-  });
+    }, function (error) {
+      var errorMsg = 'Could not duplicate document, reason: ' + error.responseText + '.';
+      FauxtonAPI.addNotification({
+        msg: errorMsg,
+        type: 'error'
+      });
+    });
+  },
 
+  apiUrl: function () {
+    return [this.doc.url('apiurl'), this.doc.documentation()];
+  }
+});
 
-  return {
-    DocEditorRouteObject: DocEditorRouteObject,
-    RevBrowserRouteObject: RevBrowserRouteObject
-  };
 
-});
+export default {
+  DocEditorRouteObject: DocEditorRouteObject,
+  RevBrowserRouteObject: RevBrowserRouteObject
+};

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/routes-documents.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes-documents.js b/app/addons/documents/routes-documents.js
index 29ab8da..32f67c7 100644
--- a/app/addons/documents/routes-documents.js
+++ b/app/addons/documents/routes-documents.js
@@ -10,201 +10,192 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  "../../app",
-  "../../core/api",
-
-  // Modules
-  './shared-routes',
-  './views',
-  './changes/components.react',
-  './changes/actions',
-  '../databases/base',
-  './resources',
-  '../fauxton/components',
-   './index-results/stores',
-   './index-results/actions',
-   './index-results/index-results.components.react',
-   './pagination/pagination.react',
-   './header/header.react',
-   './header/header.actions',
-   './sidebar/actions',
-   './designdocinfo/actions',
-   './designdocinfo/components.react',
-   '../components/actions'
-],
-
-function (app, FauxtonAPI, BaseRoute, Documents, Changes, ChangesActions, Databases, Resources, Components,
-  IndexResultStores, IndexResultsActions, IndexResultsComponents, ReactPagination, ReactHeader, ReactActions,
-  SidebarActions, DesignDocInfoActions, DesignDocInfoComponents, ComponentsActions) {
-
-    var DocumentsRouteObject = BaseRoute.extend({
-      layout: "with_tabs_sidebar",
-      routes: {
-        "database/:database/_all_docs(:extra)": {
-          route: "allDocs",
-          roles: ["fx_loggedIn"]
-        },
-        "database/:database/_design/:ddoc/_info": {
-          route: "designDocMetadata",
-          roles: ['fx_loggedIn']
-        },
-        'database/:database/_changes': 'changes'
-      },
-
-      events: {
-        "route:reloadDesignDocs": "reloadDesignDocs"
-      },
-
-      initialize: function (route, masterLayout, options) {
-        this.initViews(options[0]);
-        this.listenToLookaheadTray();
-      },
-
-      establish: function () {
-        return [
-          this.designDocs.fetch({ reset: true }),
-          this.allDatabases.fetchOnce()
-        ];
-      },
-
-      initViews: function (dbName) {
-        this.databaseName = dbName;
-        this.database = new Databases.Model({id: this.databaseName});
-        this.allDatabases = this.getAllDatabases();
-
-        this.createDesignDocsCollection();
-
-        this.rightHeader = this.setView("#right-header", new Documents.Views.RightAllDocsHeader({
-          database: this.database
-        }));
-
-        this.addLeftHeader();
-        this.addSidebar();
-      },
-
-      designDocMetadata: function (database, ddoc) {
-        this.removeComponent('#footer');
-        this.removeComponent('#react-headerbar');
-        this.removeComponent('#dashboard-upper-content');
-
-        var designDocInfo = new Resources.DdocInfo({ _id: "_design/" + ddoc }, { database: this.database });
-        DesignDocInfoActions.fetchDesignDocInfo({
-          ddocName: ddoc,
-          designDocInfo: designDocInfo
-        });
-        this.setComponent("#dashboard-lower-content", DesignDocInfoComponents.DesignDocInfo);
-
-        SidebarActions.selectNavItem('designDoc', {
-          designDocName: ddoc,
-          designDocSection: 'metadata'
-        });
-
-        this.leftheader.updateCrumbs(this.getCrumbs(this.database));
-        this.rightHeader.hideQueryOptions();
-
-        this.apiUrl = [designDocInfo.url('apiurl'), designDocInfo.documentation()];
-      },
-
-      /*
-      * docParams are the options collection uses to fetch from the server
-      * urlParams are what are shown in the url and to the user
-      * They are not the same when paginating
-      */
-      allDocs: function (databaseName, options) {
-        var params = this.createParams(options),
-            urlParams = params.urlParams,
-            docParams = params.docParams,
-            collection;
-
-        this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs: true});
-        this.setComponent('#footer', ReactPagination.Footer);
-
-        this.leftheader.updateCrumbs(this.getCrumbs(this.database));
-
-
-        // includes_docs = true if you are visiting the _replicator/_users databases
-        if (['_replicator', '_users'].indexOf(databaseName) > -1) {
-          docParams.include_docs = true;
-          urlParams = params.docParams;
-          var updatedURL = FauxtonAPI.urls('allDocs', 'app', databaseName, '?' + $.param(urlParams));
-          FauxtonAPI.navigate(updatedURL, {trigger: false, replace: true});
-        }
-
-        this.database.buildAllDocs(docParams);
-        collection = this.database.allDocs;
-
-        var tab = 'all-docs';
-        if (docParams.startkey && docParams.startkey.indexOf("_design") > -1) {
-          tab = 'design-docs';
-        }
-
-        SidebarActions.selectNavItem(tab);
-        ComponentsActions.showDeleteDatabaseModal({showDeleteModal: false, dbId: ''});
-
-        this.removeComponent('#dashboard-upper-content');
-
-        if (!docParams) {
-          docParams = {};
-        }
-
-        var frozenCollection = app.utils.localStorageGet('include_docs_bulkdocs');
-        window.localStorage.removeItem('include_docs_bulkdocs');
-
-        IndexResultsActions.newResultsList({
-          collection: collection,
-          textEmptyIndex: 'No Documents Found',
-          bulkCollection: new Documents.BulkDeleteDocCollection(frozenCollection, { databaseId: this.database.safeID() }),
-        });
-
-        this.database.allDocs.paging.pageSize = IndexResultStores.indexResultsStore.getPerPage();
-
-        this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
-
-        // this used to be a function that returned the object, but be warned: it caused a closure with a reference to
-        // the initial this.database object which can change
-        this.apiUrl = [this.database.allDocs.urlRef("apiurl", urlParams), this.database.allDocs.documentation()];
-
-        // update the rightHeader with the latest & greatest info
-        this.rightHeader.resetQueryOptions({ queryParams: urlParams });
-        this.rightHeader.showQueryOptions();
-      },
-
-      reloadDesignDocs: function (event) {
-        this.addSidebar(); // this ensures the design docs get reloaded
-        if (event && event.selectedTab) {
-          SidebarActions.selectNavItem(event.selectedTab);
-        }
-      },
-
-      changes: function () {
-        ChangesActions.initChanges({
-          databaseName: this.database.id
-        });
-        this.setComponent('#dashboard-upper-content', Changes.ChangesHeaderController);
-        this.setComponent("#dashboard-lower-content", Changes.ChangesController);
-
-        this.removeComponent('#footer');
-        this.removeComponent('#react-headerbar');
-
-        this.viewEditor && this.viewEditor.remove();
-
-        SidebarActions.selectNavItem('changes');
-        this.leftheader.updateCrumbs(this.getCrumbs(this.database));
-        this.rightHeader.hideQueryOptions();
-
-        this.apiUrl = function () {
-          return [FauxtonAPI.urls('changes', 'apiurl', this.database.id, ''), this.database.documentation()];
-        };
-      },
+import app from "../../app";
+import FauxtonAPI from "../../core/api";
+import BaseRoute from "./shared-routes";
+import Documents from "./views";
+import Changes from "./changes/components.react";
+import ChangesActions from "./changes/actions";
+import Databases from "../databases/base";
+import Resources from "./resources";
+import Components from "../fauxton/components";
+import IndexResultStores from "./index-results/stores";
+import IndexResultsActions from "./index-results/actions";
+import IndexResultsComponents from "./index-results/index-results.components.react";
+import ReactPagination from "./pagination/pagination.react";
+import ReactHeader from "./header/header.react";
+import ReactActions from "./header/header.actions";
+import SidebarActions from "./sidebar/actions";
+import DesignDocInfoActions from "./designdocinfo/actions";
+import DesignDocInfoComponents from "./designdocinfo/components.react";
+import ComponentsActions from "../components/actions";
+
+var DocumentsRouteObject = BaseRoute.extend({
+  layout: "with_tabs_sidebar",
+  routes: {
+    "database/:database/_all_docs(:extra)": {
+      route: "allDocs",
+      roles: ["fx_loggedIn"]
+    },
+    "database/:database/_design/:ddoc/_info": {
+      route: "designDocMetadata",
+      roles: ['fx_loggedIn']
+    },
+    'database/:database/_changes': 'changes'
+  },
+
+  events: {
+    "route:reloadDesignDocs": "reloadDesignDocs"
+  },
+
+  initialize: function (route, masterLayout, options) {
+    this.initViews(options[0]);
+    this.listenToLookaheadTray();
+  },
+
+  establish: function () {
+    return [
+      this.designDocs.fetch({ reset: true }),
+      this.allDatabases.fetchOnce()
+    ];
+  },
+
+  initViews: function (dbName) {
+    this.databaseName = dbName;
+    this.database = new Databases.Model({id: this.databaseName});
+    this.allDatabases = this.getAllDatabases();
+
+    this.createDesignDocsCollection();
+
+    this.rightHeader = this.setView("#right-header", new Documents.Views.RightAllDocsHeader({
+      database: this.database
+    }));
+
+    this.addLeftHeader();
+    this.addSidebar();
+  },
+
+  designDocMetadata: function (database, ddoc) {
+    this.removeComponent('#footer');
+    this.removeComponent('#react-headerbar');
+    this.removeComponent('#dashboard-upper-content');
+
+    var designDocInfo = new Resources.DdocInfo({ _id: "_design/" + ddoc }, { database: this.database });
+    DesignDocInfoActions.fetchDesignDocInfo({
+      ddocName: ddoc,
+      designDocInfo: designDocInfo
+    });
+    this.setComponent("#dashboard-lower-content", DesignDocInfoComponents.DesignDocInfo);
+
+    SidebarActions.selectNavItem('designDoc', {
+      designDocName: ddoc,
+      designDocSection: 'metadata'
+    });
+
+    this.leftheader.updateCrumbs(this.getCrumbs(this.database));
+    this.rightHeader.hideQueryOptions();
+
+    this.apiUrl = [designDocInfo.url('apiurl'), designDocInfo.documentation()];
+  },
+
+  /*
+  * docParams are the options collection uses to fetch from the server
+  * urlParams are what are shown in the url and to the user
+  * They are not the same when paginating
+  */
+  allDocs: function (databaseName, options) {
+    var params = this.createParams(options),
+        urlParams = params.urlParams,
+        docParams = params.docParams,
+        collection;
+
+    this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs: true});
+    this.setComponent('#footer', ReactPagination.Footer);
+
+    this.leftheader.updateCrumbs(this.getCrumbs(this.database));
+
+
+    // includes_docs = true if you are visiting the _replicator/_users databases
+    if (['_replicator', '_users'].indexOf(databaseName) > -1) {
+      docParams.include_docs = true;
+      urlParams = params.docParams;
+      var updatedURL = FauxtonAPI.urls('allDocs', 'app', databaseName, '?' + $.param(urlParams));
+      FauxtonAPI.navigate(updatedURL, {trigger: false, replace: true});
+    }
+
+    this.database.buildAllDocs(docParams);
+    collection = this.database.allDocs;
+
+    var tab = 'all-docs';
+    if (docParams.startkey && docParams.startkey.indexOf("_design") > -1) {
+      tab = 'design-docs';
+    }
+
+    SidebarActions.selectNavItem(tab);
+    ComponentsActions.showDeleteDatabaseModal({showDeleteModal: false, dbId: ''});
+
+    this.removeComponent('#dashboard-upper-content');
 
-      cleanup: function () {
-        // we're no longer interested in listening to the lookahead tray event on this route object
-        this.stopListening(FauxtonAPI.Events, 'lookaheadTray:update', this.onSelectDatabase);
-        FauxtonAPI.RouteObject.prototype.cleanup.apply(this);
-      }
+    if (!docParams) {
+      docParams = {};
+    }
 
+    var frozenCollection = app.utils.localStorageGet('include_docs_bulkdocs');
+    window.localStorage.removeItem('include_docs_bulkdocs');
+
+    IndexResultsActions.newResultsList({
+      collection: collection,
+      textEmptyIndex: 'No Documents Found',
+      bulkCollection: new Documents.BulkDeleteDocCollection(frozenCollection, { databaseId: this.database.safeID() }),
+    });
+
+    this.database.allDocs.paging.pageSize = IndexResultStores.indexResultsStore.getPerPage();
+
+    this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
+
+    // this used to be a function that returned the object, but be warned: it caused a closure with a reference to
+    // the initial this.database object which can change
+    this.apiUrl = [this.database.allDocs.urlRef("apiurl", urlParams), this.database.allDocs.documentation()];
+
+    // update the rightHeader with the latest & greatest info
+    this.rightHeader.resetQueryOptions({ queryParams: urlParams });
+    this.rightHeader.showQueryOptions();
+  },
+
+  reloadDesignDocs: function (event) {
+    this.addSidebar(); // this ensures the design docs get reloaded
+    if (event && event.selectedTab) {
+      SidebarActions.selectNavItem(event.selectedTab);
+    }
+  },
+
+  changes: function () {
+    ChangesActions.initChanges({
+      databaseName: this.database.id
     });
+    this.setComponent('#dashboard-upper-content', Changes.ChangesHeaderController);
+    this.setComponent("#dashboard-lower-content", Changes.ChangesController);
+
+    this.removeComponent('#footer');
+    this.removeComponent('#react-headerbar');
+
+    this.viewEditor && this.viewEditor.remove();
+
+    SidebarActions.selectNavItem('changes');
+    this.leftheader.updateCrumbs(this.getCrumbs(this.database));
+    this.rightHeader.hideQueryOptions();
+
+    this.apiUrl = function () {
+      return [FauxtonAPI.urls('changes', 'apiurl', this.database.id, ''), this.database.documentation()];
+    };
+  },
+
+  cleanup: function () {
+    // we're no longer interested in listening to the lookahead tray event on this route object
+    this.stopListening(FauxtonAPI.Events, 'lookaheadTray:update', this.onSelectDatabase);
+    FauxtonAPI.RouteObject.prototype.cleanup.apply(this);
+  }
+
+});
 
-    return DocumentsRouteObject;
-  });
+export default DocumentsRouteObject;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/routes-index-editor.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes-index-editor.js b/app/addons/documents/routes-index-editor.js
index d1f760a..d371433 100644
--- a/app/addons/documents/routes-index-editor.js
+++ b/app/addons/documents/routes-index-editor.js
@@ -10,174 +10,165 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../app',
-  '../../core/api',
-
-  // Modules
-  "./helpers",
-  './shared-routes',
-  './views',
-  './index-editor/components.react',
-  './index-editor/actions',
-  '../databases/base',
-  '../fauxton/components',
-  './index-results/stores',
-  './index-results/actions',
-  './index-results/index-results.components.react',
-  './pagination/pagination.react',
-  './header/header.react',
-  './header/header.actions',
-  './sidebar/actions'
-],
-
-function (app, FauxtonAPI, Helpers, BaseRoute, Documents, IndexEditorComponents, ActionsIndexEditor,
-          Databases, Components, IndexResultsStores, IndexResultsActions,
-          IndexResultsComponents, ReactPagination, ReactHeader, ReactHeaderActions, SidebarActions) {
-
-
-  var IndexEditorAndResults = BaseRoute.extend({
-    layout: 'with_tabs_sidebar',
-    routes: {
-      'database/:database/new_view': {
-        route: 'createView',
-        roles: ['fx_loggedIn']
-      },
-      'database/:database/new_view/:designDoc': {
-        route: 'createView',
-        roles: ['fx_loggedIn']
-      },
-      'database/:database/_design/:ddoc/_view/:view': {
-        route: 'showView',
-        roles: ['fx_loggedIn']
-      },
-      'database/:database/_design/:ddoc/_view/:view/edit': {
-        route: 'editView',
-        roles: ['fx_loggedIn']
-      }
-    },
-
-    initialize: function (route, masterLayout, options) {
-      var databaseName = options[0];
-      this.databaseName = databaseName;
-      this.database = new Databases.Model({id: databaseName});
-      this.allDatabases = new Databases.List();
-      this.createDesignDocsCollection();
-      this.addLeftHeader();
-      this.addSidebar();
+import app from "../../app";
+import FauxtonAPI from "../../core/api";
+import Helpers from "./helpers";
+import BaseRoute from "./shared-routes";
+import Documents from "./views";
+import IndexEditorComponents from "./index-editor/components.react";
+import ActionsIndexEditor from "./index-editor/actions";
+import Databases from "../databases/base";
+import Components from "../fauxton/components";
+import IndexResultsStores from "./index-results/stores";
+import IndexResultsActions from "./index-results/actions";
+import IndexResultsComponents from "./index-results/index-results.components.react";
+import ReactPagination from "./pagination/pagination.react";
+import ReactHeader from "./header/header.react";
+import ReactHeaderActions from "./header/header.actions";
+import SidebarActions from "./sidebar/actions";
+
+
+var IndexEditorAndResults = BaseRoute.extend({
+  layout: 'with_tabs_sidebar',
+  routes: {
+    'database/:database/new_view': {
+      route: 'createView',
+      roles: ['fx_loggedIn']
     },
-
-    establish: function () {
-      return [
-        this.designDocs.fetch({ reset: true }),
-        this.allDatabases.fetchOnce()
-      ];
+    'database/:database/new_view/:designDoc': {
+      route: 'createView',
+      roles: ['fx_loggedIn']
     },
-
-    showView: function (databaseName, ddoc, viewName) {
-      var params = this.createParams(),
-          urlParams = params.urlParams,
-          docParams = params.docParams,
-          decodeDdoc = decodeURIComponent(ddoc);
-
-      this.rightHeader = this.setView('#right-header', new Documents.Views.RightAllDocsHeader({
-        database: this.database
-      }));
-
-      viewName = viewName.replace(/\?.*$/, '');
-      this.setComponent('#footer', ReactPagination.Footer);
-
-      this.indexedDocs = new Documents.IndexCollection(null, {
-        database: this.database,
-        design: decodeDdoc,
-        view: viewName,
-        params: docParams,
-        paging: {
-          pageSize: IndexResultsStores.indexResultsStore.getPerPage()
-        }
-      });
-
-      ActionsIndexEditor.clearIndex();
-
-      IndexResultsActions.newResultsList({
-        collection: this.indexedDocs,
-        bulkCollection: new Documents.BulkDeleteDocCollection([], { databaseId: this.database.safeID() }),
-      });
-
-      ActionsIndexEditor.fetchDesignDocsBeforeEdit({
-        viewName: viewName,
-        newView: false,
-        database: this.database,
-        designDocs: this.designDocs,
-        designDocId: '_design/' + decodeDdoc
-      });
-
-      SidebarActions.selectNavItem('designDoc', {
-        designDocName: ddoc,
-        designDocSection: 'Views',
-        indexName: viewName
-      });
-
-      this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs: true});
-      this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
-
-      this.apiUrl = function () {
-        return [this.indexedDocs.urlRef('apiurl'), FauxtonAPI.constants.DOC_URLS.GENERAL];
-      };
-
-      this.showQueryOptions(urlParams, ddoc, viewName);
+    'database/:database/_design/:ddoc/_view/:view': {
+      route: 'showView',
+      roles: ['fx_loggedIn']
     },
-
-    createView: function (database, _designDoc) {
-      var newDesignDoc = true;
-      var designDoc = 'new-doc';
-
-      if (_designDoc) {
-        designDoc = '_design/' + _designDoc;
-        newDesignDoc = false;
+    'database/:database/_design/:ddoc/_view/:view/edit': {
+      route: 'editView',
+      roles: ['fx_loggedIn']
+    }
+  },
+
+  initialize: function (route, masterLayout, options) {
+    var databaseName = options[0];
+    this.databaseName = databaseName;
+    this.database = new Databases.Model({id: databaseName});
+    this.allDatabases = new Databases.List();
+    this.createDesignDocsCollection();
+    this.addLeftHeader();
+    this.addSidebar();
+  },
+
+  establish: function () {
+    return [
+      this.designDocs.fetch({ reset: true }),
+      this.allDatabases.fetchOnce()
+    ];
+  },
+
+  showView: function (databaseName, ddoc, viewName) {
+    var params = this.createParams(),
+        urlParams = params.urlParams,
+        docParams = params.docParams,
+        decodeDdoc = decodeURIComponent(ddoc);
+
+    this.rightHeader = this.setView('#right-header', new Documents.Views.RightAllDocsHeader({
+      database: this.database
+    }));
+
+    viewName = viewName.replace(/\?.*$/, '');
+    this.setComponent('#footer', ReactPagination.Footer);
+
+    this.indexedDocs = new Documents.IndexCollection(null, {
+      database: this.database,
+      design: decodeDdoc,
+      view: viewName,
+      params: docParams,
+      paging: {
+        pageSize: IndexResultsStores.indexResultsStore.getPerPage()
       }
-
-      ActionsIndexEditor.fetchDesignDocsBeforeEdit({
-        viewName: 'new-view',
-        newView: true,
-        database: this.database,
-        designDocs: this.designDocs,
-        designDocId: designDoc,
-        newDesignDoc: newDesignDoc
-      });
-
-      this.removeComponent('#react-headerbar');
-      this.removeComponent('#footer');
-      this.setComponent('#dashboard-lower-content', IndexEditorComponents.EditorController);
-      SidebarActions.selectNavItem('');
-    },
-
-    editView: function (databaseName, ddocName, viewName) {
-      ActionsIndexEditor.fetchDesignDocsBeforeEdit({
-        viewName: viewName,
-        newView: false,
-        database: this.database,
-        designDocs: this.designDocs,
-        designDocId: '_design/' + ddocName
-      });
-
-      SidebarActions.selectNavItem('designDoc', {
-        designDocName: ddocName,
-        designDocSection: 'Views',
-        indexName: viewName
-      });
-
-      this.apiUrl = function () {
-        return [FauxtonAPI.urls('view', 'apiurl', databaseName, ddocName, viewName), FauxtonAPI.constants.DOC_URLS.GENERAL];
-      };
-
-      this.removeView('#right-header');
-      this.removeComponent('#react-headerbar');
-      this.removeComponent('#footer');
-      this.setComponent('#dashboard-lower-content', IndexEditorComponents.EditorController);
+    });
+
+    ActionsIndexEditor.clearIndex();
+
+    IndexResultsActions.newResultsList({
+      collection: this.indexedDocs,
+      bulkCollection: new Documents.BulkDeleteDocCollection([], { databaseId: this.database.safeID() }),
+    });
+
+    ActionsIndexEditor.fetchDesignDocsBeforeEdit({
+      viewName: viewName,
+      newView: false,
+      database: this.database,
+      designDocs: this.designDocs,
+      designDocId: '_design/' + decodeDdoc
+    });
+
+    SidebarActions.selectNavItem('designDoc', {
+      designDocName: ddoc,
+      designDocSection: 'Views',
+      indexName: viewName
+    });
+
+    this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs: true});
+    this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
+
+    this.apiUrl = function () {
+      return [this.indexedDocs.urlRef('apiurl'), FauxtonAPI.constants.DOC_URLS.GENERAL];
+    };
+
+    this.showQueryOptions(urlParams, ddoc, viewName);
+  },
+
+  createView: function (database, _designDoc) {
+    var newDesignDoc = true;
+    var designDoc = 'new-doc';
+
+    if (_designDoc) {
+      designDoc = '_design/' + _designDoc;
+      newDesignDoc = false;
     }
 
-  });
+    ActionsIndexEditor.fetchDesignDocsBeforeEdit({
+      viewName: 'new-view',
+      newView: true,
+      database: this.database,
+      designDocs: this.designDocs,
+      designDocId: designDoc,
+      newDesignDoc: newDesignDoc
+    });
+
+    this.removeComponent('#react-headerbar');
+    this.removeComponent('#footer');
+    this.setComponent('#dashboard-lower-content', IndexEditorComponents.EditorController);
+    SidebarActions.selectNavItem('');
+  },
+
+  editView: function (databaseName, ddocName, viewName) {
+    ActionsIndexEditor.fetchDesignDocsBeforeEdit({
+      viewName: viewName,
+      newView: false,
+      database: this.database,
+      designDocs: this.designDocs,
+      designDocId: '_design/' + ddocName
+    });
+
+    SidebarActions.selectNavItem('designDoc', {
+      designDocName: ddocName,
+      designDocSection: 'Views',
+      indexName: viewName
+    });
+
+    this.apiUrl = function () {
+      return [FauxtonAPI.urls('view', 'apiurl', databaseName, ddocName, viewName), FauxtonAPI.constants.DOC_URLS.GENERAL];
+    };
+
+    this.removeView('#right-header');
+    this.removeComponent('#react-headerbar');
+    this.removeComponent('#footer');
+    this.setComponent('#dashboard-lower-content', IndexEditorComponents.EditorController);
+  }
 
-  return IndexEditorAndResults;
 });
+
+export default IndexEditorAndResults;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/routes-mango.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes-mango.js b/app/addons/documents/routes-mango.js
index ee11d34..b76f799 100644
--- a/app/addons/documents/routes-mango.js
+++ b/app/addons/documents/routes-mango.js
@@ -10,158 +10,145 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../app',
-  '../../core/api',
-  // Modules
-  './helpers',
-  './shared-routes',
-  '../databases/resources',
-
-  '../fauxton/components',
-  './resources',
-  './views',
-  './index-results/actions',
-  './index-results/stores',
-
-  './header/header.react',
-  './header/header.actions',
-  './pagination/pagination.react',
-
-  './mango/mango.components.react',
-  './mango/mango.actions',
-  './mango/mango.stores',
-  './index-results/index-results.components.react',
-  './sidebar/actions',
-],
-
-
-function (app, FauxtonAPI, Helpers, BaseRoute, Databases,
-  Components, Resources, Documents, IndexResultsActions, IndexResultStores,
-  ReactHeader, ReactActions, ReactPagination,
-  MangoComponents, MangoActions, MangoStores, IndexResultsComponents, SidebarActions) {
-
-  var MangoIndexEditorAndQueryEditor = BaseRoute.extend({
-    layout: 'two_pane',
-    routes: {
-      'database/:database/_index': {
-        route: 'createIndex',
-        roles: ['fx_loggedIn']
-      },
-      'database/:database/_find': {
-        route: 'findUsingIndex',
-        roles: ['fx_loggedIn']
-      },
+import app from "../../app";
+import FauxtonAPI from "../../core/api";
+import Helpers from "./helpers";
+import BaseRoute from "./shared-routes";
+import Databases from "../databases/resources";
+import Components from "../fauxton/components";
+import Resources from "./resources";
+import Documents from "./views";
+import IndexResultsActions from "./index-results/actions";
+import IndexResultStores from "./index-results/stores";
+import ReactHeader from "./header/header.react";
+import ReactActions from "./header/header.actions";
+import ReactPagination from "./pagination/pagination.react";
+import MangoComponents from "./mango/mango.components.react";
+import MangoActions from "./mango/mango.actions";
+import MangoStores from "./mango/mango.stores";
+import IndexResultsComponents from "./index-results/index-results.components.react";
+import SidebarActions from "./sidebar/actions";
+
+var MangoIndexEditorAndQueryEditor = BaseRoute.extend({
+  layout: 'two_pane',
+  routes: {
+    'database/:database/_index': {
+      route: 'createIndex',
+      roles: ['fx_loggedIn']
     },
-
-    initialize: function (route, masterLayout, options) {
-      var databaseName = options[0];
-      this.databaseName = databaseName;
-      this.database = new Databases.Model({id: databaseName});
-
-      // magic methods
-      this.allDatabases = this.getAllDatabases();
-      this.createDesignDocsCollection();
-      this.addLeftHeader();
-
-      MangoActions.setDatabase({
-        database: this.database
-      });
+    'database/:database/_find': {
+      route: 'findUsingIndex',
+      roles: ['fx_loggedIn']
     },
-
-    findUsingIndex: function () {
-      var params = this.createParams(),
-          urlParams = params.urlParams,
-          mangoResultCollection = new Resources.MangoDocumentCollection(null, {
-            database: this.database,
-            paging: {
-              pageSize: IndexResultStores.indexResultsStore.getPerPage()
-            }
-          }),
-          mangoIndexList = new Resources.MangoIndexCollection(null, {
-            database: this.database,
-            params: null,
-            paging: {
-              pageSize: IndexResultStores.indexResultsStore.getPerPage()
-            }
-          });
-
-      SidebarActions.selectNavItem('mango-query');
-      this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs: false});
-      this.setComponent('#footer', ReactPagination.Footer);
-
-      IndexResultsActions.newMangoResultsList({
-        collection: mangoResultCollection,
-        textEmptyIndex: 'No Results',
-        bulkCollection: new Documents.BulkDeleteDocCollection([], { databaseId: this.database.safeID() }),
-      });
-
-      MangoActions.getIndexList({
-        indexList: mangoIndexList
-      });
-
-      var url = FauxtonAPI.urls('allDocs', 'app', this.database.safeID(), '?limit=' + FauxtonAPI.constants.DATABASES.DOCUMENT_LIMIT);
-      this.breadcrumbs = this.setView('#breadcrumbs', new Components.Breadcrumbs({
-        toggleDisabled: true,
-        crumbs: [
-          {'type': 'back', 'link': url},
-          {'name': app.i18n.en_US['mango-title-editor'], 'link': url}
-        ]
-      }));
-
-      this.setComponent('#left-content', MangoComponents.MangoQueryEditorController, {
-        description: app.i18n.en_US['mango-descripton'],
-        editorTitle: app.i18n.en_US['mango-title-editor'],
-        additionalIndexesText: app.i18n.en_US['mango-additional-indexes-heading']
-      });
-      this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
-
-      this.apiUrl = function () {
-        return [mangoResultCollection.urlRef('query-apiurl', urlParams), FauxtonAPI.constants.DOC_URLS.MANGO_SEARCH];
-      };
-    },
-
-    createIndex: function (database) {
-      var params = this.createParams(),
-          urlParams = params.urlParams,
-          mangoIndexCollection = new Resources.MangoIndexCollection(null, {
-            database: this.database,
-            params: null,
-            paging: {
-              pageSize: IndexResultStores.indexResultsStore.getPerPage()
-            }
-          });
-
-      IndexResultsActions.newResultsList({
-        collection: mangoIndexCollection,
-        bulkCollection: new Documents.MangoBulkDeleteDocCollection([], { databaseId: this.database.safeID() }),
-        typeOfIndex: 'mango'
-      });
-
-      var url = FauxtonAPI.urls('allDocs', 'app', this.database.safeID(), '?limit=' + FauxtonAPI.constants.DATABASES.DOCUMENT_LIMIT);
-      this.breadcrumbs = this.setView('#breadcrumbs', new Components.Breadcrumbs({
-        toggleDisabled: true,
-        crumbs: [
-          {'type': 'back', 'link': url},
-          {'name': app.i18n.en_US['mango-indexeditor-title'], 'link': url }
-        ]
-      }));
-
-      this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs: false});
-      this.setComponent('#footer', ReactPagination.Footer);
-
-      this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
-      this.setComponent('#left-content', MangoComponents.MangoIndexEditorController, {
-        description: app.i18n.en_US['mango-descripton-index-editor']
-      });
-
-      this.apiUrl = function () {
-        return [mangoIndexCollection.urlRef('index-apiurl', urlParams), FauxtonAPI.constants.DOC_URLS.MANGO_INDEX];
-      };
-    }
-  });
-
-  return {
-    MangoIndexEditorAndQueryEditor: MangoIndexEditorAndQueryEditor
-  };
+  },
+
+  initialize: function (route, masterLayout, options) {
+    var databaseName = options[0];
+    this.databaseName = databaseName;
+    this.database = new Databases.Model({id: databaseName});
+
+    // magic methods
+    this.allDatabases = this.getAllDatabases();
+    this.createDesignDocsCollection();
+    this.addLeftHeader();
+
+    MangoActions.setDatabase({
+      database: this.database
+    });
+  },
+
+  findUsingIndex: function () {
+    var params = this.createParams(),
+        urlParams = params.urlParams,
+        mangoResultCollection = new Resources.MangoDocumentCollection(null, {
+          database: this.database,
+          paging: {
+            pageSize: IndexResultStores.indexResultsStore.getPerPage()
+          }
+        }),
+        mangoIndexList = new Resources.MangoIndexCollection(null, {
+          database: this.database,
+          params: null,
+          paging: {
+            pageSize: IndexResultStores.indexResultsStore.getPerPage()
+          }
+        });
+
+    SidebarActions.selectNavItem('mango-query');
+    this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs: false});
+    this.setComponent('#footer', ReactPagination.Footer);
+
+    IndexResultsActions.newMangoResultsList({
+      collection: mangoResultCollection,
+      textEmptyIndex: 'No Results',
+      bulkCollection: new Documents.BulkDeleteDocCollection([], { databaseId: this.database.safeID() }),
+    });
+
+    MangoActions.getIndexList({
+      indexList: mangoIndexList
+    });
+
+    var url = FauxtonAPI.urls('allDocs', 'app', this.database.safeID(), '?limit=' + FauxtonAPI.constants.DATABASES.DOCUMENT_LIMIT);
+    this.breadcrumbs = this.setView('#breadcrumbs', new Components.Breadcrumbs({
+      toggleDisabled: true,
+      crumbs: [
+        {'type': 'back', 'link': url},
+        {'name': app.i18n.en_US['mango-title-editor'], 'link': url}
+      ]
+    }));
+
+    this.setComponent('#left-content', MangoComponents.MangoQueryEditorController, {
+      description: app.i18n.en_US['mango-descripton'],
+      editorTitle: app.i18n.en_US['mango-title-editor'],
+      additionalIndexesText: app.i18n.en_US['mango-additional-indexes-heading']
+    });
+    this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
+
+    this.apiUrl = function () {
+      return [mangoResultCollection.urlRef('query-apiurl', urlParams), FauxtonAPI.constants.DOC_URLS.MANGO_SEARCH];
+    };
+  },
+
+  createIndex: function (database) {
+    var params = this.createParams(),
+        urlParams = params.urlParams,
+        mangoIndexCollection = new Resources.MangoIndexCollection(null, {
+          database: this.database,
+          params: null,
+          paging: {
+            pageSize: IndexResultStores.indexResultsStore.getPerPage()
+          }
+        });
+
+    IndexResultsActions.newResultsList({
+      collection: mangoIndexCollection,
+      bulkCollection: new Documents.MangoBulkDeleteDocCollection([], { databaseId: this.database.safeID() }),
+      typeOfIndex: 'mango'
+    });
+
+    var url = FauxtonAPI.urls('allDocs', 'app', this.database.safeID(), '?limit=' + FauxtonAPI.constants.DATABASES.DOCUMENT_LIMIT);
+    this.breadcrumbs = this.setView('#breadcrumbs', new Components.Breadcrumbs({
+      toggleDisabled: true,
+      crumbs: [
+        {'type': 'back', 'link': url},
+        {'name': app.i18n.en_US['mango-indexeditor-title'], 'link': url }
+      ]
+    }));
+
+    this.setComponent('#react-headerbar', ReactHeader.BulkDocumentHeaderController, {showIncludeAllDocs: false});
+    this.setComponent('#footer', ReactPagination.Footer);
+
+    this.setComponent('#dashboard-lower-content', IndexResultsComponents.List);
+    this.setComponent('#left-content', MangoComponents.MangoIndexEditorController, {
+      description: app.i18n.en_US['mango-descripton-index-editor']
+    });
+
+    this.apiUrl = function () {
+      return [mangoIndexCollection.urlRef('index-apiurl', urlParams), FauxtonAPI.constants.DOC_URLS.MANGO_INDEX];
+    };
+  }
 });
+
+export default {
+  MangoIndexEditorAndQueryEditor: MangoIndexEditorAndQueryEditor
+};

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js
index f994780..3d09471 100644
--- a/app/addons/documents/routes.js
+++ b/app/addons/documents/routes.js
@@ -10,23 +10,17 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  './views',
-  './routes-documents',
-  './routes-doc-editor',
-  './routes-index-editor',
-  './routes-mango'
-],
+import Documents from "./views";
+import DocumentsRouteObject from "./routes-documents";
+import docEditor from "./routes-doc-editor";
+import IndexEditorRouteObject from "./routes-index-editor";
+import Mango from "./routes-mango";
+Documents.RouteObjects = [
+  docEditor.DocEditorRouteObject,
+  docEditor.RevBrowserRouteObject,
+  DocumentsRouteObject,
+  IndexEditorRouteObject,
+  Mango.MangoIndexEditorAndQueryEditor
+];
 
-
-function (Documents, DocumentsRouteObject, docEditor, IndexEditorRouteObject, Mango) {
-  Documents.RouteObjects = [
-    docEditor.DocEditorRouteObject,
-    docEditor.RevBrowserRouteObject,
-    DocumentsRouteObject,
-    IndexEditorRouteObject,
-    Mango.MangoIndexEditorAndQueryEditor
-  ];
-
-  return Documents;
-});
+export default Documents;