couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From benk...@apache.org
Subject [2/6] fauxton commit: updated refs/heads/master to e6450a0
Date Mon, 01 Feb 2016 17:40:21 GMT
removing react 14 warnings


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/e6450a0d
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/e6450a0d
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/e6450a0d

Branch: refs/heads/master
Commit: e6450a0d0c9710d79e96bc924c447b8cb12f01b8
Parents: cab6fc2
Author: Ben Keen <ben.keen@gmail.com>
Authored: Tue Jan 19 10:33:45 2016 -0800
Committer: Ben Keen <ben.keen@gmail.com>
Committed: Mon Feb 1 08:39:35 2016 -0800

----------------------------------------------------------------------
 app/addons/activetasks/components.react.jsx     | 34 ++++++------
 .../tests/activetasks.componentsSpec.react.jsx  | 13 ++---
 app/addons/auth/components.react.jsx            | 13 ++---
 .../auth/test/auth.componentsSpec.react.jsx     | 31 +++++------
 app/addons/cluster/tests/clusterSpec.react.jsx  | 10 ++--
 .../compaction/tests/componentsSpec.react.jsx   | 15 +++---
 .../components/react-components.react.jsx       | 25 +++++----
 .../tests/apiBarControllerSpec.react.jsx        | 31 +++++------
 .../components/tests/beautifySpec.react.jsx     | 14 ++---
 .../tests/codeEditorPanelSpec.react.jsx         | 13 ++---
 .../components/tests/codeEditorSpec.react.jsx   |  7 +--
 .../tests/confirmButtonSpec.react.jsx           | 12 ++---
 app/addons/components/tests/docSpec.react.jsx   | 32 ++++++------
 .../tests/headerTogglebuttonSpec.react.jsx      | 10 ++--
 .../tests/paddedBorderedBoxSpec.react.jsx       | 10 ++--
 .../tests/stringEditModalSpec.react.jsx         | 55 +++-----------------
 .../components/tests/styledSelectSpec.react.jsx | 10 ++--
 .../components/tests/zenModeSpec.react.jsx      | 17 +++---
 app/addons/cors/tests/componentsSpec.react.jsx  | 55 ++++++++++----------
 app/addons/databases/components.react.jsx       | 27 +++++-----
 .../databases/tests/componentsSpec.react.jsx    | 31 +++++------
 .../documents/changes/components.react.jsx      | 19 ++++---
 .../tests/changes.componentsSpec.react.jsx      | 53 ++++++++++---------
 .../documents/doc-editor/components.react.jsx   |  5 +-
 .../tests/doc-editor.componentsSpec.react.jsx   | 55 +++++++++-----------
 app/addons/documents/helpers.js                 |  6 ++-
 .../tests/viewIndex.componentsSpec.react.jsx    | 23 ++++----
 .../index-results.components.react.jsx          |  2 +-
 .../index-results.componentsSpec.react.jsx      | 40 +++++++-------
 .../mango/tests/mango.componentsSpec.react.jsx  | 25 +++++----
 .../tests/pagination.componentSpec.react.jsx    | 14 ++---
 .../queryoptions/queryoptions.react.jsx         | 11 ++--
 .../tests/queryoptions.componentsSpec.react.jsx | 21 ++++----
 app/addons/documents/sidebar/sidebar.react.jsx  | 10 ++--
 .../tests/sidebar.componentsSpec.react.jsx      | 11 ++--
 app/addons/documents/tests/helpersSpec.js       | 31 +++++++++++
 app/addons/fauxton/components.react.jsx         | 11 ++--
 .../fauxton/navigation/components.react.jsx     |  5 +-
 .../navigation/tests/componentsSpec.react.jsx   | 13 ++---
 .../notifications/notifications.react.jsx       | 11 ++--
 .../tests/componentsSpec.react.jsx              | 43 +++++++--------
 .../fauxton/tests/componentsSpec.react.jsx      | 25 ++++-----
 .../permissions/tests/componentsSpec.react.jsx  | 25 ++++-----
 .../setup/tests/setupComponentsSpec.react.jsx   | 21 ++++----
 .../tests/componentsSpec.react.jsx              | 21 ++++----
 app/config.js                                   |  1 +
 app/core/routeObject.js                         |  7 +--
 app/core/tests/routeObjectSpec.js               | 11 ++--
 48 files changed, 504 insertions(+), 481 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/activetasks/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/components.react.jsx b/app/addons/activetasks/components.react.jsx
index 7e65399..b8d294c 100644
--- a/app/addons/activetasks/components.react.jsx
+++ b/app/addons/activetasks/components.react.jsx
@@ -14,12 +14,13 @@ define([
   'app',
   'api',
   'react',
+  'react-dom',
   'addons/activetasks/stores',
   'addons/activetasks/resources',
   'addons/activetasks/actions',
   'addons/components/react-components.react',
   'addons/fauxton/components.react'
-], function (app, FauxtonAPI, React, Stores, Resources, Actions, Components, ComponentsReact) {
+], function (app, FauxtonAPI, React, ReactDOM, Stores, Resources, Actions, Components, ComponentsReact) {
 
   var activeTasksStore = Stores.activeTasksStore;
   var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
@@ -263,21 +264,20 @@ define([
       var th_class = 'header-field ' + this.props.headerName;
 
       return (
-        <input
-          type="radio"
-          name="header-field"
-          id={this.props.headerName}
-          value={this.props.headerName}
-          className="header-field radio"
-          onChange={this.onTableHeaderClick}>
-          <td className={th_class + " tableheader"} value={this.props.headerName}>
-            <label
-              className="header-field label-text active-tasks-header noselect"
-              htmlFor={this.props.headerName}>
-              {this.props.displayName} {arrow}
-            </label>
-          </td>
-        </input>
+        <td className={th_class + " tableheader"} value={this.props.headerName}>
+          <input
+            type="radio"
+            name="header-field"
+            id={this.props.headerName}
+            value={this.props.headerName}
+            className="header-field radio"
+            onChange={this.onTableHeaderClick} />
+          <label
+            className="header-field label-text active-tasks-header noselect"
+            htmlFor={this.props.headerName}>
+            {this.props.displayName} {arrow}
+          </label>
+        </td>
       );
     }
   });
@@ -396,7 +396,7 @@ define([
       e.preventDefault();
       this.refs.view_source_sequence_btn.toggle(function (shown) {
         if (shown) {
-          React.findDOMNode(this.refs.view_source_sequence_btn).focus();
+          ReactDOM.findDOMNode(this.refs.view_source_sequence_btn).focus();
         }
       }.bind(this));
     },

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx b/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx
index 6db8f66..6ad4413 100644
--- a/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx
+++ b/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx
@@ -16,9 +16,10 @@ define([
   'addons/activetasks/stores',
   'addons/activetasks/tests/fakeActiveTaskResponse',
   'react',
+  'react-dom',
   'addons/activetasks/actions',
   'testUtils'
-], function (FauxtonAPI, ActiveTasks, Components, Stores, fakedResponse, React, Actions, utils) {
+], function (FauxtonAPI, ActiveTasks, Components, Stores, fakedResponse, React, ReactDOM, Actions, utils) {
   var assert = utils.assert;
   var restore = utils.restore;
   var TestUtils = React.addons.TestUtils;
@@ -39,7 +40,7 @@ define([
       });
 
       afterEach(function () {
-        React.unmountComponentAtNode(pollingWidgetDiv);
+        ReactDOM.unmountComponentAtNode(pollingWidgetDiv);
         restore(Actions.changePollingInterval);
       });
 
@@ -67,7 +68,7 @@ define([
       });
 
       afterEach(function () {
-        React.unmountComponentAtNode(tableDiv);
+        ReactDOM.unmountComponentAtNode(tableDiv);
         restore(window.confirm);
       });
 
@@ -88,7 +89,7 @@ define([
         it('should trigger change to radio buttons', function () {
           _.each(radioIDs, function (radioID) {
             spy = sinon.spy(Actions, 'switchTab');
-            TestUtils.Simulate.change($(table.getDOMNode()).find('#' + radioID)[0]);
+            TestUtils.Simulate.change($(ReactDOM.findDOMNode(table)).find('#' + radioID)[0]);
             assert.ok(spy.calledOnce);
             spy.restore();
           });
@@ -96,7 +97,7 @@ define([
 
         it('should trigger change to search term', function () {
           spy = sinon.spy(Actions, 'setSearchTerm');
-          TestUtils.Simulate.change($(table.getDOMNode()).find('.searchbox')[0], {target: {value: 'searching'}});
+          TestUtils.Simulate.change($(ReactDOM.findDOMNode(table)).find('.searchbox')[0], {target: {value: 'searching'}});
           assert.ok(spy.calledOnce);
         });
       });
@@ -118,7 +119,7 @@ define([
         it('should trigger change to which header to sort by', function () {
           _.each(headerNames, function (header) {
             spy = sinon.spy(Actions, 'sortByColumnHeader');
-            TestUtils.Simulate.change($(table.getDOMNode()).find('#' + header)[0]);
+            TestUtils.Simulate.change($(ReactDOM.findDOMNode(table)).find('#' + header)[0]);
             assert.ok(spy.calledOnce);
             spy.restore();
           });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/auth/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/auth/components.react.jsx b/app/addons/auth/components.react.jsx
index d4d1abb..448c7c0 100644
--- a/app/addons/auth/components.react.jsx
+++ b/app/addons/auth/components.react.jsx
@@ -14,9 +14,10 @@ define([
   'app',
   'api',
   'react',
+  'react-dom',
   'addons/auth/stores',
   'addons/auth/actions'
-], function (app, FauxtonAPI, React, AuthStores, AuthActions) {
+], function (app, FauxtonAPI, React, ReactDOM, AuthStores, AuthActions) {
 
   var changePasswordStore = AuthStores.changePasswordStore;
   var createAdminStore = AuthStores.createAdminStore;
@@ -64,8 +65,8 @@ define([
       if (this.state.username !== '' || this.state.password !== '') {
         return false;
       }
-      var username = (this.props.testBlankUsername) ? this.props.testBlankUsername : React.findDOMNode(this.refs.username).value;
-      var password = (this.props.testBlankPassword) ? this.props.testBlankPassword : React.findDOMNode(this.refs.password).value;
+      var username = (this.props.testBlankUsername) ? this.props.testBlankUsername : ReactDOM.findDOMNode(this.refs.username).value;
+      var password = (this.props.testBlankPassword) ? this.props.testBlankPassword : ReactDOM.findDOMNode(this.refs.password).value;
       this.setState({ username: username, password: password }); // doesn't set immediately, hence separate login() call
       this.login(username, password);
 
@@ -77,7 +78,7 @@ define([
     },
 
     componentDidMount: function () {
-      React.findDOMNode(this.refs.username).focus();
+      ReactDOM.findDOMNode(this.refs.username).focus();
     },
 
     render: function () {
@@ -128,7 +129,7 @@ define([
     },
 
     componentDidMount: function () {
-      React.findDOMNode(this.refs.password).focus();
+      ReactDOM.findDOMNode(this.refs.password).focus();
       changePasswordStore.on('change', this.onChange, this);
     },
 
@@ -203,7 +204,7 @@ define([
     },
 
     componentDidMount: function () {
-      React.findDOMNode(this.refs.username).focus();
+      ReactDOM.findDOMNode(this.refs.username).focus();
       createAdminStore.on('change', this.onChange, this);
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/auth/test/auth.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/auth/test/auth.componentsSpec.react.jsx b/app/addons/auth/test/auth.componentsSpec.react.jsx
index 5113147..f8315bb 100644
--- a/app/addons/auth/test/auth.componentsSpec.react.jsx
+++ b/app/addons/auth/test/auth.componentsSpec.react.jsx
@@ -12,11 +12,12 @@
 define([
   'api',
   'react',
+  'react-dom',
   'testUtils',
   'addons/auth/components.react',
   'addons/auth/stores',
   'addons/auth/actions'
-], function (FauxtonAPI, React, utils, Components, Stores, Actions) {
+], function (FauxtonAPI, React, ReactDOM, utils, Components, Stores, Actions) {
   var assert = utils.assert;
 
   var TestUtils = React.addons.TestUtils;
@@ -34,14 +35,14 @@ define([
       });
 
       afterEach(function () {
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
         createAdminSidebarStore.reset();
         Actions.login.restore();
       });
 
       it('should trigger login event when form submitted', function () {
         loginForm = TestUtils.renderIntoDocument(<Components.LoginForm />, container);
-        TestUtils.Simulate.submit($(loginForm.getDOMNode()).find('#login')[0]);
+        TestUtils.Simulate.submit($(ReactDOM.findDOMNode(loginForm)).find('#login')[0]);
         assert.ok(stub.calledOnce);
       });
 
@@ -55,7 +56,7 @@ define([
             testBlankPassword={password}
           />, container);
 
-        TestUtils.Simulate.submit($(loginForm.getDOMNode()).find('#login')[0]);
+        TestUtils.Simulate.submit($(ReactDOM.findDOMNode(loginForm)).find('#login')[0]);
         assert.ok(stub.calledOnce);
 
         // confirm Actions.login() received the values that weren't in the DOM
@@ -75,24 +76,24 @@ define([
       });
 
       afterEach(function () {
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
       });
 
       it('should call action to update password on field change', function () {
         var spy = sinon.spy(Actions, 'updateChangePasswordField');
-        TestUtils.Simulate.change($(changePasswordForm.getDOMNode()).find('#password')[0], { target: { value: 'bobsyouruncle' }});
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(changePasswordForm)).find('#password')[0], { target: { value: 'bobsyouruncle' }});
         assert.ok(spy.calledOnce);
       });
 
       it('should call action to update password confirm on field change', function () {
         var spy = sinon.spy(Actions, 'updateChangePasswordConfirmField');
-        TestUtils.Simulate.change($(changePasswordForm.getDOMNode()).find('#password-confirm')[0], { target: { value: 'hotdiggity' }});
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(changePasswordForm)).find('#password-confirm')[0], { target: { value: 'hotdiggity' }});
         assert.ok(spy.calledOnce);
       });
 
       it('should call action to submit form', function () {
         var stub = sinon.stub(Actions, 'changePassword', function () {});
-        TestUtils.Simulate.submit($(changePasswordForm.getDOMNode()).find('#change-password')[0]);
+        TestUtils.Simulate.submit($(ReactDOM.findDOMNode(changePasswordForm)).find('#change-password')[0]);
         assert.ok(stub.calledOnce);
       });
     });
@@ -106,18 +107,18 @@ define([
       });
 
       afterEach(function () {
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
       });
 
       it('should call action to update username on field change', function () {
         var spy = sinon.spy(Actions, 'updateCreateAdminUsername');
-        TestUtils.Simulate.change($(createAdminForm.getDOMNode()).find('#username')[0], { target: { value: 'catsmeow' }});
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(createAdminForm)).find('#username')[0], { target: { value: 'catsmeow' }});
         assert.ok(spy.calledOnce);
       });
 
       it('should call action to update password confirm on field change', function () {
         var spy = sinon.spy(Actions, 'updateCreateAdminPassword');
-        TestUtils.Simulate.change($(createAdminForm.getDOMNode()).find('#password')[0], { target: { value: 'topnotch' }});
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(createAdminForm)).find('#password')[0], { target: { value: 'topnotch' }});
         assert.ok(spy.calledOnce);
       });
     });
@@ -132,16 +133,16 @@ define([
       });
 
       afterEach(function () {
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
       });
 
       it('confirm the default selected nav item is the change pwd page', function () {
-        assert.equal($(createAdminSidebar.getDOMNode()).find('.active').find('a').attr('href'), '#changePassword');
+        assert.equal($(ReactDOM.findDOMNode(createAdminSidebar)).find('.active').find('a').attr('href'), '#changePassword');
       });
 
       it('confirm clicking a sidebar nav item selects it in the DOM', function () {
-        TestUtils.Simulate.click($(createAdminSidebar.getDOMNode()).find('li[data-page="addAdmin"]').find('a')[0]);
-        assert.equal($(createAdminSidebar.getDOMNode()).find('.active').find('a').attr('href'), '#addAdmin');
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(createAdminSidebar)).find('li[data-page="addAdmin"]').find('a')[0]);
+        assert.equal($(ReactDOM.findDOMNode(createAdminSidebar)).find('.active').find('a').attr('href'), '#addAdmin');
       });
     });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/cluster/tests/clusterSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/cluster/tests/clusterSpec.react.jsx b/app/addons/cluster/tests/clusterSpec.react.jsx
index 9a6c3b5..08e3625 100644
--- a/app/addons/cluster/tests/clusterSpec.react.jsx
+++ b/app/addons/cluster/tests/clusterSpec.react.jsx
@@ -14,10 +14,10 @@ define([
   'addons/cluster/cluster.react',
   'addons/cluster/cluster.actions',
   'addons/cluster/cluster.stores',
-
   'testUtils',
-  'react'
-], function (FauxtonAPI, ClusterComponent, ClusterActions, ClusterStores, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ClusterComponent, ClusterActions, ClusterStores, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -47,11 +47,11 @@ define([
 
     afterEach(function () {
       ClusterStores.nodesStore.reset();
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('renders the amount of nodes', function () {
-      assert.ok(/6 nodes/.test($(controller.getDOMNode()).text()), 'finds 6 nodes');
+      assert.ok(/6 nodes/.test($(ReactDOM.findDOMNode(controller)).text()), 'finds 6 nodes');
     });
   });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/compaction/tests/componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/compaction/tests/componentsSpec.react.jsx b/app/addons/compaction/tests/componentsSpec.react.jsx
index 5c6a18a..08fb02e 100644
--- a/app/addons/compaction/tests/componentsSpec.react.jsx
+++ b/app/addons/compaction/tests/componentsSpec.react.jsx
@@ -14,8 +14,9 @@ define([
   'addons/compaction/components.react',
   'addons/compaction/actions',
   'testUtils',
-  "react"
-], function (FauxtonAPI, Views, Actions, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, Views, Actions, utils, React, ReactDOM) {
   FauxtonAPI.router = new FauxtonAPI.Router([]);
 
   var assert = utils.assert;
@@ -37,7 +38,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('triggers compact database action', function () {
@@ -69,11 +70,11 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('calls cleanupView on button click', function () {
-      var el = $(cleanupViewEl.getDOMNode()).find('button')[0];
+      var el = $(ReactDOM.findDOMNode(cleanupViewEl)).find('button')[0];
       TestUtils.Simulate.click(el, {});
 
       assert.ok(spy.calledOnce);
@@ -95,11 +96,11 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('calls compact database on button click', function () {
-      var el = $(compactViewEl.getDOMNode()).find('button')[0];
+      var el = $(ReactDOM.findDOMNode(compactViewEl)).find('button')[0];
       TestUtils.Simulate.click(el, {});
 
       assert.ok(spy.calledOnce);

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/react-components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/react-components.react.jsx b/app/addons/components/react-components.react.jsx
index a471637..606d50b 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -14,14 +14,16 @@ define([
   'app',
   'api',
   'react',
+  'react-dom',
   'addons/components/stores',
   'addons/fauxton/components.react',
+  'addons/documents/helpers',
   'ace/ace',
   'plugins/beautify',
   'libs/react-bootstrap'
 ],
 
-function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper, ReactBootstrap) {
+function (app, FauxtonAPI, React, ReactDOM, Stores, FauxtonComponents, Helpers, ace, beautifyHelper, ReactBootstrap) {
 
   var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
   var componentStore = Stores.componentStore;
@@ -450,7 +452,7 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
     },
 
     setupAce: function (props, shouldUpdateCode) {
-      this.editor = ace.edit(React.findDOMNode(this.refs.ace));
+      this.editor = ace.edit(ReactDOM.findDOMNode(this.refs.ace));
 
       // suppresses an Ace editor error
       this.editor.$blockScrolling = Infinity;
@@ -770,14 +772,14 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
       }
       var val = '';
       if (!prevProps.visible && this.props.visible) {
-        val = JSON.parse('"' + this.props.value + '"'); // this ensures newlines are converted
+        val = Helpers.parseJSON(this.props.value);
       }
 
       this.initEditor(val);
     },
 
     initEditor: function (val) {
-      this.editor = ace.edit(React.findDOMNode(this.refs.stringEditor));
+      this.editor = ace.edit(ReactDOM.findDOMNode(this.refs.stringEditor));
       this.editor.$blockScrolling = Infinity; // suppresses an Ace editor error
       this.editor.setShowPrintMargin(false);
       this.editor.setOption('highlightActiveLine', true);
@@ -857,8 +859,8 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
     },
 
     componentDidMount: function () {
-      $(React.findDOMNode(this.refs.exit)).tooltip({ placement: 'left' });
-      $(React.findDOMNode(this.refs.theme)).tooltip({ placement: 'left' });
+      $(ReactDOM.findDOMNode(this.refs.exit)).tooltip({ placement: 'left' });
+      $(ReactDOM.findDOMNode(this.refs.theme)).tooltip({ placement: 'left' });
     },
 
     exitZenMode: function () {
@@ -1194,7 +1196,8 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
 
     render: function () {
       return (
-        <ReactCSSTransitionGroup transitionName="tray" transitionAppear={true} component="div">
+        <ReactCSSTransitionGroup transitionName="tray" transitionAppear={true} component="div" transitionAppearTimeout={500}
+          transitionEnterTimeout={500} transitionLeaveTimeout={300}>
           {this.getChildren()}
         </ReactCSSTransitionGroup>
       );
@@ -1246,7 +1249,7 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
 
     renderChildren: function () {
       return React.Children.map(this.props.children, function (child, key) {
-        return React.addons.cloneWithProps(child, {
+        return React.cloneElement(child, {
           trayVisible: this.state.trayVisible,
           selected: this.state.trayVisible,
           toggleCallback: this.toggleTray,
@@ -1265,7 +1268,7 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
 
     closeIfOpen: function (e) {
       if (!this.state.trayVisible) { return; }
-      var trayEl = $(React.findDOMNode(this));
+      var trayEl = $(ReactDOM.findDOMNode(this));
 
       if (!trayEl.is(e.target) && trayEl.has(e.target).length === 0) {
         this.toggleTray();
@@ -1385,11 +1388,11 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
     ApiBarController: ApiBarController,
 
     renderMenuDropDown: function (el, opts) {
-      React.render(<MenuDropDown icon="fonticon-cog" links={opts.links} />, el);
+      ReactDOM.render(<MenuDropDown icon="fonticon-cog" links={opts.links} />, el);
     },
 
     removeMenuDropDown: function (el) {
-      React.unmountComponentAtNode(el);
+      ReactDOM.unmountComponentAtNode(el);
     },
   };
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/apiBarControllerSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/apiBarControllerSpec.react.jsx b/app/addons/components/tests/apiBarControllerSpec.react.jsx
index 3f516d8..4ca4b5d 100644
--- a/app/addons/components/tests/apiBarControllerSpec.react.jsx
+++ b/app/addons/components/tests/apiBarControllerSpec.react.jsx
@@ -15,8 +15,9 @@ define([
   'addons/components/stores',
   'addons/components/react-components.react',
   'testUtils',
-  'react'
-], function (FauxtonAPI, Actions, Stores, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, Actions, Stores, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -32,7 +33,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
       componentStore.reset();
     });
 
@@ -83,16 +84,16 @@ define([
       var el = TestUtils.renderIntoDocument(<ApiBarController />, container);
       Actions.updateAPIBar({ visible: true, endpoint: 'http://link.com', docURL: 'http://doc.com' });
 
-      TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]);
-      assert.equal($(el.getDOMNode()).find('.help-link').length, 1);
+      TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.help-link').length, 1);
     });
 
     it('Confirm doc link icon doesn\'t appear with no docURL', function () {
       var el = TestUtils.renderIntoDocument(<ApiBarController />, container);
       Actions.updateAPIBar({ visible: true, endpoint: 'http://link.com', docURL: null });
 
-      TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]);
-      assert.equal($(el.getDOMNode()).find('.help-link').length, 0);
+      TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.help-link').length, 0);
     });
 
     it('Confirm endpoint appears in markup', function () {
@@ -100,8 +101,8 @@ define([
       var link = 'http://booyah.ca';
       Actions.updateAPIBar({ visible: true, endpoint: link, docURL: null });
 
-      TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]);
-      assert.equal($(el.getDOMNode()).find('.text-field-to-copy').val(), link);
+      TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.text-field-to-copy').val(), link);
     });
 
     it('Confirm endpoint is updated in markup', function () {
@@ -109,12 +110,12 @@ define([
       var link = 'http://booyah.ca';
       Actions.updateAPIBar({ visible: true, endpoint: link, docURL: null });
 
-      TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]);
-      assert.equal($(el.getDOMNode()).find('.text-field-to-copy').val(), link);
+      TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.text-field-to-copy').val(), link);
 
       var newLink = 'http://chickensarenoisy.com';
       Actions.updateAPIBar({ endpoint: newLink });
-      assert.equal($(el.getDOMNode()).find('.text-field-to-copy').val(), newLink);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.text-field-to-copy').val(), newLink);
     });
 
     it('Confirm doc URL is updated in markup after a change', function () {
@@ -122,12 +123,12 @@ define([
       var docLink = 'http://mydoc.org';
       Actions.updateAPIBar({ visible: true, endpoint: 'http://whatever.com', docURL: docLink });
 
-      TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]);
-      assert.equal($(el.getDOMNode()).find('.help-link').attr('href'), docLink);
+      TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.help-link').attr('href'), docLink);
 
       var newDocLink = 'http://newawesomedoclink.xxx';
       Actions.updateAPIBar({ docURL: newDocLink });
-      assert.equal($(el.getDOMNode()).find('.help-link').attr('href'), newDocLink);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.help-link').attr('href'), newDocLink);
     });
 
   });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/beautifySpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/beautifySpec.react.jsx b/app/addons/components/tests/beautifySpec.react.jsx
index 92260cb..17d106d 100644
--- a/app/addons/components/tests/beautifySpec.react.jsx
+++ b/app/addons/components/tests/beautifySpec.react.jsx
@@ -12,10 +12,10 @@
 define([
   'api',
   'addons/components/react-components.react',
-
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -28,7 +28,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should be empty for multi-lined code', function () {
@@ -37,13 +37,13 @@ define([
         <ReactComponents.Beautify code={correctCode}/>,
         container
       );
-      assert.ok(_.isNull(beautifyEl.getDOMNode()));
+      assert.ok(_.isNull(ReactDOM.findDOMNode(beautifyEl)));
     });
 
     it('should have button to beautify for single line code', function () {
       var badCode = 'function () { console.log("hello"); }';
       beautifyEl = TestUtils.renderIntoDocument(<ReactComponents.Beautify code={badCode}/>, container);
-      assert.ok($(beautifyEl.getDOMNode()).hasClass('beautify'));
+      assert.ok($(ReactDOM.findDOMNode(beautifyEl)).hasClass('beautify'));
     });
 
     it('on click beautifies code', function () {
@@ -61,7 +61,7 @@ define([
           noOfLines={1}/>,
         container
       );
-      TestUtils.Simulate.click(beautifyEl.getDOMNode());
+      TestUtils.Simulate.click(ReactDOM.findDOMNode(beautifyEl));
       assert.equal(fixedCode, correctCode);
 
     });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/codeEditorPanelSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/codeEditorPanelSpec.react.jsx b/app/addons/components/tests/codeEditorPanelSpec.react.jsx
index a2a1dcd..98252b5 100644
--- a/app/addons/components/tests/codeEditorPanelSpec.react.jsx
+++ b/app/addons/components/tests/codeEditorPanelSpec.react.jsx
@@ -13,8 +13,9 @@ define([
   'api',
   'addons/components/react-components.react',
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -30,7 +31,7 @@ define([
           <ReactComponents.CodeEditorPanel defaultCode={code} />,
           container
         );
-        assert.equal($(codeEditorEl.getDOMNode()).find('.icon-question-sign').length, 0);
+        assert.equal($(ReactDOM.findDOMNode(codeEditorEl)).find('.icon-question-sign').length, 0);
       });
       it('hidden by default', function () {
         var container = document.createElement('div');
@@ -38,7 +39,7 @@ define([
           <ReactComponents.CodeEditorPanel defaultCode={code} docLink="http://link.com" />,
           container
         );
-        assert.equal($(codeEditorEl.getDOMNode()).find('.icon-question-sign').length, 1);
+        assert.equal($(ReactDOM.findDOMNode(codeEditorEl)).find('.icon-question-sign').length, 1);
       });
     });
 
@@ -49,7 +50,7 @@ define([
           <ReactComponents.CodeEditorPanel defaultCode={code} />,
           container
         );
-        assert.equal($(codeEditorEl.getDOMNode()).find('.zen-editor-icon').length, 1);
+        assert.equal($(ReactDOM.findDOMNode(codeEditorEl)).find('.zen-editor-icon').length, 1);
       });
 
       it('omits zen mode if explicitly turned off', function () {
@@ -58,7 +59,7 @@ define([
           <ReactComponents.CodeEditor defaultCode={code} allowZenMode={false} />,
           container
         );
-        assert.equal($(codeEditorEl.getDOMNode()).find('.zen-editor-icon').length, 0);
+        assert.equal($(ReactDOM.findDOMNode(codeEditorEl)).find('.zen-editor-icon').length, 0);
       });
     });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/codeEditorSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/codeEditorSpec.react.jsx b/app/addons/components/tests/codeEditorSpec.react.jsx
index ee3dbd5..3ba5ce7 100644
--- a/app/addons/components/tests/codeEditorSpec.react.jsx
+++ b/app/addons/components/tests/codeEditorSpec.react.jsx
@@ -13,8 +13,9 @@ define([
   'api',
   'addons/components/react-components.react',
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -39,7 +40,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     describe('Tracking edits', function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/confirmButtonSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/confirmButtonSpec.react.jsx b/app/addons/components/tests/confirmButtonSpec.react.jsx
index d4d428a..d650c59 100644
--- a/app/addons/components/tests/confirmButtonSpec.react.jsx
+++ b/app/addons/components/tests/confirmButtonSpec.react.jsx
@@ -12,10 +12,10 @@
 define([
   'api',
   'addons/components/react-components.react',
-
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -27,7 +27,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should render text properties', function () {
@@ -35,7 +35,7 @@ define([
         <ReactComponents.ConfirmButton text="Click here to render Rocko Artischocko" />,
         container
       );
-      assert.equal($(button.getDOMNode()).text(), 'Click here to render Rocko Artischocko');
+      assert.equal($(ReactDOM.findDOMNode(button)).text(), 'Click here to render Rocko Artischocko');
     });
 
     it('should use onClick handler if provided', function () {
@@ -46,7 +46,7 @@ define([
         container
       );
 
-      React.addons.TestUtils.Simulate.click(button.getDOMNode());
+      React.addons.TestUtils.Simulate.click(ReactDOM.findDOMNode(button));
       assert.ok(spy.calledOnce);
     });
   });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/docSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/docSpec.react.jsx b/app/addons/components/tests/docSpec.react.jsx
index a931019..a013cb0 100644
--- a/app/addons/components/tests/docSpec.react.jsx
+++ b/app/addons/components/tests/docSpec.react.jsx
@@ -12,10 +12,10 @@
 define([
   'api',
   'addons/components/react-components.react',
-
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -28,7 +28,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('hosts child elements', function () {
@@ -38,7 +38,7 @@ define([
         </ReactComponents.Document>,
         container
       );
-      assert.ok($(el.getDOMNode()).find('.foo-children').length);
+      assert.ok($(ReactDOM.findDOMNode(el)).find('.foo-children').length);
     });
 
     it('does not require child elements', function () {
@@ -46,7 +46,7 @@ define([
         <ReactComponents.Document />,
         container
       );
-      assert.notOk($(el.getDOMNode()).find('.doc-edit-symbol').length);
+      assert.notOk($(ReactDOM.findDOMNode(el)).find('.doc-edit-symbol').length);
     });
 
     it('you can check it', function () {
@@ -54,7 +54,7 @@ define([
         <ReactComponents.Document isDeletable={true} checked={true} docIdentifier="foo" />,
         container
       );
-      assert.equal($(el.getDOMNode()).find('input[type="checkbox"]').attr('checked'), 'checked');
+      assert.equal($(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]').attr('checked'), 'checked');
     });
 
     it('you can uncheck it', function () {
@@ -62,7 +62,7 @@ define([
         <ReactComponents.Document isDeletable={true} docIdentifier="foo" />,
         container
       );
-      assert.equal($(el.getDOMNode()).find('input[type="checkbox"]').attr('checked'), undefined);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]').attr('checked'), undefined);
     });
 
     it('it calls an onchange callback', function () {
@@ -72,7 +72,7 @@ define([
         <ReactComponents.Document doc={{id: "foo"}} isDeletable={true} docChecked={spy} docIdentifier="foo" />,
         container
       );
-      var testEl = $(el.getDOMNode()).find('input[type="checkbox"]')[0];
+      var testEl = $(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]')[0];
       React.addons.TestUtils.Simulate.change(testEl, {target: {value: 'Hello, world'}});
       assert.ok(spy.calledOnce);
     });
@@ -84,7 +84,7 @@ define([
         <ReactComponents.Document isDeletable={true} onDoubleClick={spy} docIdentifier="foo" />,
         container
       );
-      React.addons.TestUtils.Simulate.doubleClick(el.getDOMNode());
+      React.addons.TestUtils.Simulate.doubleClick(ReactDOM.findDOMNode(el));
       assert.ok(spy.calledOnce);
     });
 
@@ -95,8 +95,8 @@ define([
         <ReactComponents.Document isDeletable={false} onDoubleClick={spy} docIdentifier="foo" />,
         container
       );
-      assert.notOk($(el.getDOMNode()).find('input[type="checkbox"]').length);
-      assert.ok($(el.getDOMNode()).find('.checkbox-dummy').length);
+      assert.notOk($(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]').length);
+      assert.ok($(ReactDOM.findDOMNode(el)).find('.checkbox-dummy').length);
     });
 
     it('contains a doc-data element when there\'s doc content', function () {
@@ -104,7 +104,7 @@ define([
         <ReactComponents.Document isDeletable={true} checked={true} docIdentifier="foo" docContent='{ "content": true }' />,
         container
       );
-      assert.equal(1, $(el.getDOMNode()).find('.doc-data').length);
+      assert.equal(1, $(ReactDOM.findDOMNode(el)).find('.doc-data').length);
     });
 
     it('doesn\'t contain a doc-data element when there\'s no doc content', function () {
@@ -112,7 +112,7 @@ define([
         <ReactComponents.Document isDeletable={true} checked={true} docIdentifier="foo" docContent='' />,
         container
       );
-      assert.equal(0, $(el.getDOMNode()).find('.doc-data').length);
+      assert.equal(0, $(ReactDOM.findDOMNode(el)).find('.doc-data').length);
     });
 
     it('allows empty headers', function () {
@@ -120,7 +120,7 @@ define([
         <ReactComponents.Document header={null} isDeletable={true} checked={true} docIdentifier="foo" docContent='' />,
         container
       );
-      assert.equal('', $(el.getDOMNode()).find('.header-doc-id').text());
+      assert.equal('', $(ReactDOM.findDOMNode(el)).find('.header-doc-id').text());
     });
 
     it('allows supports headers with "', function () {
@@ -128,7 +128,7 @@ define([
         <ReactComponents.Document header="foo" isDeletable={true} checked={true} docIdentifier="foo" docContent='' />,
         container
       );
-      assert.equal('"foo"', $(el.getDOMNode()).find('.header-doc-id').text());
+      assert.equal('"foo"', $(ReactDOM.findDOMNode(el)).find('.header-doc-id').text());
     });
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/headerTogglebuttonSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/headerTogglebuttonSpec.react.jsx b/app/addons/components/tests/headerTogglebuttonSpec.react.jsx
index 14523f3..6ce0776 100644
--- a/app/addons/components/tests/headerTogglebuttonSpec.react.jsx
+++ b/app/addons/components/tests/headerTogglebuttonSpec.react.jsx
@@ -12,10 +12,10 @@
 define([
   'api',
   'addons/components/react-components.react',
-
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -30,11 +30,11 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should call the passed callback', function () {
-      TestUtils.Simulate.click(toggleEl.getDOMNode());
+      TestUtils.Simulate.click(ReactDOM.findDOMNode(toggleEl));
       assert.ok(toggleCallback.calledOnce);
     });
   });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx b/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx
index b262bc3..a0e2866 100644
--- a/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx
+++ b/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx
@@ -12,10 +12,10 @@
 define([
   'api',
   'addons/components/react-components.react',
-
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -28,7 +28,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('hosts child elements', function () {
@@ -38,7 +38,7 @@ define([
         </ReactComponents.PaddedBorderedBox>,
         container
       );
-      assert.ok($(el.getDOMNode()).find('.foo-children').length);
+      assert.ok($(ReactDOM.findDOMNode(el)).find('.foo-children').length);
     });
   });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/stringEditModalSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/stringEditModalSpec.react.jsx b/app/addons/components/tests/stringEditModalSpec.react.jsx
index bc1fd71..188581c 100644
--- a/app/addons/components/tests/stringEditModalSpec.react.jsx
+++ b/app/addons/components/tests/stringEditModalSpec.react.jsx
@@ -14,8 +14,9 @@ define([
   'addons/components/react-components.react',
   'libs/react-bootstrap',
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, ReactBootstrap, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, ReactBootstrap, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -31,34 +32,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
-    });
-
-    describe('event methods called', function () {
-      it('onClose called by top (x)', function () {
-        var spy = sinon.spy();
-        el = TestUtils.renderIntoDocument(
-          <ReactComponents.StringEditModal visible={true} onClose={spy} onSave={stub} />,
-          container
-        );
-        var modal = TestUtils.findRenderedComponentWithType(el, Modal);
-        var modalEl = React.findDOMNode(modal.refs.modal);
-
-        TestUtils.Simulate.click($(modalEl).find('.close')[0]);
-        assert.ok(spy.calledOnce);
-      });
-
-      it('onClose called by cancel button', function () {
-        var spy = sinon.spy();
-        el = TestUtils.renderIntoDocument(
-          <ReactComponents.StringEditModal visible={true} onClose={spy} onSave={stub} />,
-          container
-        );
-        var modal = TestUtils.findRenderedComponentWithType(el, Modal);
-        var modalEl = React.findDOMNode(modal.refs.modal);
-        TestUtils.Simulate.click($(modalEl).find('.cancel-button')[0]);
-        assert.ok(spy.calledOnce);
-      });
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     describe('onSave', function () {
@@ -69,28 +43,11 @@ define([
           <ReactComponents.StringEditModal visible={true} onClose={stub} onSave={spy} value={string} />,
           container
         );
-        var modal = TestUtils.findRenderedComponentWithType(el, Modal);
-        var modalEl = React.findDOMNode(modal.refs.modal);
-
-        TestUtils.Simulate.click($(modalEl).find('#string-edit-save-btn')[0]);
+        TestUtils.Simulate.click($('body').find('#string-edit-save-btn')[0]);
         assert.ok(spy.calledOnce);
         assert.ok(spy.calledWith(string));
       });
-
-      it('replaces "\\n" with actual newlines', function () {
-        var spy = sinon.spy();
-        var string = 'I am a string\\nwith\\nlinebreaks\\nin\\nit';
-        el = TestUtils.renderIntoDocument(
-          <ReactComponents.StringEditModal visible={true} onSave={spy} value={string} />,
-          container
-        );
-
-        var modal = TestUtils.findRenderedComponentWithType(el, Modal);
-        var modalEl = React.findDOMNode(modal.refs.modal);
-
-        TestUtils.Simulate.click($(modalEl).find('#string-edit-save-btn')[0]);
-        assert.ok(spy.calledOnce);
-      });
     });
   });
+
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/styledSelectSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/styledSelectSpec.react.jsx b/app/addons/components/tests/styledSelectSpec.react.jsx
index 7a3328a..94e0028 100644
--- a/app/addons/components/tests/styledSelectSpec.react.jsx
+++ b/app/addons/components/tests/styledSelectSpec.react.jsx
@@ -12,10 +12,10 @@
 define([
   'api',
   'addons/components/react-components.react',
-
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -44,11 +44,11 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('calls the callback on select', function () {
-      TestUtils.Simulate.change($(selectorEl.getDOMNode()).find('#new-ddoc')[0], {
+      TestUtils.Simulate.change($(ReactDOM.findDOMNode(selectorEl)).find('#new-ddoc')[0], {
         target: {
           value: 'new'
         }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/zenModeSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/zenModeSpec.react.jsx b/app/addons/components/tests/zenModeSpec.react.jsx
index ec742d4..7895454 100644
--- a/app/addons/components/tests/zenModeSpec.react.jsx
+++ b/app/addons/components/tests/zenModeSpec.react.jsx
@@ -13,8 +13,9 @@ define([
   'api',
   'addons/components/react-components.react',
   'testUtils',
-  'react'
-], function (FauxtonAPI, ReactComponents, utils, React) {
+  'react',
+  'react-dom'
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -33,26 +34,26 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
       window.localStorage.removeItem('zenTheme');
     });
 
     describe('Toggle theme', function () {
       it('defaults to dark theme', function () {
-        assert.ok($(el.getDOMNode()).hasClass('zen-theme-dark'));
+        assert.ok($(ReactDOM.findDOMNode(el)).hasClass('zen-theme-dark'));
       });
 
       it('switch to light theme on click', function () {
-        TestUtils.Simulate.click($(el.getDOMNode()).find('.js-toggle-theme')[0]);
-        assert.ok($(el.getDOMNode()).hasClass('zen-theme-light'));
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.js-toggle-theme')[0]);
+        assert.ok($(ReactDOM.findDOMNode(el)).hasClass('zen-theme-light'));
         // reset
-        TestUtils.Simulate.click($(el.getDOMNode()).find('.js-toggle-theme')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.js-toggle-theme')[0]);
       });
     });
 
     describe('Closing zen mode', function () {
       it('method called', function () {
-        TestUtils.Simulate.click($(el.getDOMNode()).find('.js-exit-zen-mode')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.js-exit-zen-mode')[0]);
         assert.ok(spy.calledOnce);
       });
     });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/cors/tests/componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/cors/tests/componentsSpec.react.jsx b/app/addons/cors/tests/componentsSpec.react.jsx
index 7bd5762..dd76ff3 100644
--- a/app/addons/cors/tests/componentsSpec.react.jsx
+++ b/app/addons/cors/tests/componentsSpec.react.jsx
@@ -16,8 +16,9 @@ define([
   'addons/cors/resources',
   'addons/cors/stores',
   'testUtils',
-  "react"
-], function (FauxtonAPI, Views, Actions, Resources, Stores, utils, React) {
+  "react",
+  'react-dom'
+], function (FauxtonAPI, Views, Actions, Resources, Stores, utils, React, ReactDOM) {
 
   FauxtonAPI.router = new FauxtonAPI.Router([]);
   var assert = utils.assert;
@@ -45,7 +46,7 @@ define([
         utils.restore(Actions.toggleLoadingBarsToEnabled);
         utils.restore(corsEl.save);
 
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
         window.confirm.restore && window.confirm.restore();
       });
 
@@ -92,13 +93,13 @@ define([
 
       it('shows loading bars', function () {
         Actions.toggleLoadingBarsToEnabled(true);
-        assert.equal($(corsEl.getDOMNode()).find('.loading-lines').length, 1);
+        assert.equal($(ReactDOM.findDOMNode(corsEl)).find('.loading-lines').length, 1);
       });
 
       it('hides loading bars', function () {
         Actions.toggleLoadingBarsToEnabled(false);
 
-        assert.equal($(corsEl.getDOMNode()).find('.loading-lines').length, 0);
+        assert.equal($(ReactDOM.findDOMNode(corsEl)).find('.loading-lines').length, 0);
       });
     });
 
@@ -115,26 +116,26 @@ define([
       afterEach(function () {
         utils.restore(Resources.validateCORSDomain);
         utils.restore(FauxtonAPI.addNotification);
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
       });
 
       it('calls validates each domain', function () {
         var spy = sinon.spy(Resources, 'validateCORSDomain');
-        TestUtils.Simulate.change($(inputEl.getDOMNode()).find('input')[0], {target: {value: newOrigin}});
-        TestUtils.Simulate.click($(inputEl.getDOMNode()).find('.btn')[0]);
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(inputEl)).find('input')[0], {target: {value: newOrigin}});
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(inputEl)).find('.btn')[0]);
         assert.ok(spy.calledWith(newOrigin));
       });
 
       it('calls addOrigin on add click with valid domain', function () {
-        TestUtils.Simulate.change($(inputEl.getDOMNode()).find('input')[0], {target: {value: newOrigin}});
-        TestUtils.Simulate.click($(inputEl.getDOMNode()).find('.btn')[0]);
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(inputEl)).find('input')[0], {target: {value: newOrigin}});
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(inputEl)).find('.btn')[0]);
         assert.ok(addOrigin.calledWith(newOrigin));
       });
 
       it('shows notification if origin is not valid', function () {
         var spy = sinon.spy(FauxtonAPI, 'addNotification');
-        TestUtils.Simulate.change($(inputEl.getDOMNode()).find('input')[0], {target: {value: 'badOrigin'}});
-        TestUtils.Simulate.click($(inputEl.getDOMNode()).find('.btn')[0]);
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(inputEl)).find('input')[0], {target: {value: 'badOrigin'}});
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(inputEl)).find('.btn')[0]);
         assert.ok(spy.calledOnce);
       });
     });
@@ -149,11 +150,11 @@ define([
       });
 
       afterEach(function () {
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
       });
 
       it('calls change Origin on all origins selected', function () {
-        TestUtils.Simulate.change($(originEl.getDOMNode()).find('input[value="all"]')[0]);
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(originEl)).find('input[value="all"]')[0]);
         assert.ok(changeOrigin.calledWith(true));
       });
 
@@ -165,7 +166,7 @@ define([
         //1. render radio buttons with 'all origins'
         originEl = TestUtils.renderIntoDocument(<Views.Origins corsEnabled={true} isAllOrigins={true} originChange={changeOrigin}/>, container);
         //2. switch back to 'select origins'
-        TestUtils.Simulate.change($(originEl.getDOMNode()).find('input[value="selected"]')[0]);
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(originEl)).find('input[value="selected"]')[0]);
         assert.ok(changeOrigin.calledWith(false));
       });
     });
@@ -185,14 +186,14 @@ define([
       afterEach(function () {
         window.confirm.restore && window.confirm.restore();
         Actions.deleteOrigin.restore && Actions.deleteOrigin.restore();
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
       });
 
       it('should confirm on delete', function () {
         var stub = sinon.stub(window, 'confirm');
         stub.returns(true);
 
-        TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-trash')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-trash')[0]);
         assert.ok(stub.calledOnce);
       });
 
@@ -210,43 +211,43 @@ define([
       it('should deleteOrigin on confirm true', function () {
         var stub = sinon.stub(window, 'confirm');
         stub.returns(true);
-        TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-trash')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-trash')[0]);
         assert.ok(deleteOrigin.calledWith(origin));
       });
 
       it('should not deleteOrigin on confirm false', function () {
         var stub = sinon.stub(window, 'confirm');
         stub.returns(false);
-        TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-trash')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-trash')[0]);
         assert.notOk(deleteOrigin.calledOnce);
       });
 
       it('should change origin to input on edit click', function () {
-        TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-pencil')[0]);
-        assert.ok($(originTableEl.getDOMNode()).find('input').length === 1);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-pencil')[0]);
+        assert.ok($(ReactDOM.findDOMNode(originTableEl)).find('input').length === 1);
       });
 
       it('should update origin on update clicked', function () {
         var updatedOrigin = 'https://updated-origin.com';
-        TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-pencil')[0]);
-        TestUtils.Simulate.change($(originTableEl.getDOMNode()).find('input')[0], {
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-pencil')[0]);
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(originTableEl)).find('input')[0], {
           target: {
             value: updatedOrigin
           }
         });
-        TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.btn')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.btn')[0]);
         assert.ok(updateOrigin.calledWith(updatedOrigin));
       });
 
       it('should not update origin on update clicked with bad origin', function () {
         var updatedOrigin = 'updated-origin';
-        TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-pencil')[0]);
-        TestUtils.Simulate.change($(originTableEl.getDOMNode()).find('input')[0], {
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-pencil')[0]);
+        TestUtils.Simulate.change($(ReactDOM.findDOMNode(originTableEl)).find('input')[0], {
           target: {
             value: updatedOrigin
           }
         });
-        TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.btn')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.btn')[0]);
         assert.notOk(updateOrigin.calledOnce);
       });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/databases/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/databases/components.react.jsx b/app/addons/databases/components.react.jsx
index 98e85be..05e4b45 100644
--- a/app/addons/databases/components.react.jsx
+++ b/app/addons/databases/components.react.jsx
@@ -14,13 +14,14 @@ define([
   'app',
   'api',
   'react',
+  'react-dom',
   'addons/components/react-components.react',
   'addons/fauxton/components.react',
   'addons/databases/stores',
   'addons/databases/resources',
   'addons/databases/actions',
   'helpers'
-], function (app, FauxtonAPI, React, Components, ComponentsReact, Stores, Resources, Actions, Helpers) {
+], function (app, FauxtonAPI, React, ReactDOM, Components, ComponentsReact, Stores, Resources, Actions, Helpers) {
 
   var ToggleHeaderButton = Components.ToggleHeaderButton;
   var databasesStore = Stores.databasesStore;
@@ -89,12 +90,14 @@ define([
         <div className="view">
           <table className="databases table table-striped">
             <thead>
-              <th>Name</th>
-              <th>Size</th>
-              <th># of Docs</th>
-              <th>Update Seq</th>
-              {this.getExtensionColumns()}
-              <th>Actions</th>
+              <tr>
+                <th>Name</th>
+                <th>Size</th>
+                <th># of Docs</th>
+                <th>Update Seq</th>
+                {this.getExtensionColumns()}
+                <th>Actions</th>
+              </tr>
             </thead>
             <tbody>
             {rows}
@@ -170,7 +173,7 @@ define([
   var GraveyardInfo = React.createClass({
 
     componentDidMount: function () {
-      $(React.findDOMNode(this.refs.myself)).tooltip();
+      $(ReactDOM.findDOMNode(this.refs.myself)).tooltip();
     },
 
     render: function () {
@@ -204,7 +207,7 @@ define([
 
       this.refs.newDbTray.toggle(function (shown) {
         if (shown) {
-          React.findDOMNode(this.refs.newDbName).focus();
+          ReactDOM.findDOMNode(this.refs.newDbName).focus();
         }
       }.bind(this));
     },
@@ -222,7 +225,7 @@ define([
     },
 
     onAddDatabase: function () {
-      var databaseName = React.findDOMNode(this.refs.newDbName).value;
+      var databaseName = ReactDOM.findDOMNode(this.refs.newDbName).value;
       Actions.createNewDatabase(databaseName);
     },
 
@@ -265,7 +268,7 @@ define([
     },
 
     componentDidUpdate: function () {
-      $(React.findDOMNode(this.refs.searchDbName)).typeahead({
+      $(ReactDOM.findDOMNode(this.refs.searchDbName)).typeahead({
         source: this.state.databaseNames,
         updater: function (item) {
           this.jumpToDb(item);
@@ -282,7 +285,7 @@ define([
     },
 
     jumpToDb: function (databaseName) {
-      databaseName = databaseName || React.findDOMNode(this.refs.searchDbName).value;
+      databaseName = databaseName || ReactDOM.findDOMNode(this.refs.searchDbName).value;
       Actions.jumpToDatabase(databaseName);
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/databases/tests/componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/databases/tests/componentsSpec.react.jsx b/app/addons/databases/tests/componentsSpec.react.jsx
index 2669b46..f57c5c2 100644
--- a/app/addons/databases/tests/componentsSpec.react.jsx
+++ b/app/addons/databases/tests/componentsSpec.react.jsx
@@ -16,8 +16,9 @@ define([
   'addons/databases/actiontypes',
   'addons/databases/stores',
   'testUtils',
-  "react"
-], function (FauxtonAPI, Views, Actions, ActionTypes, Stores, utils, React) {
+  "react",
+  'react-dom'
+], function (FauxtonAPI, Views, Actions, ActionTypes, Stores, utils, React, ReactDOM) {
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -85,12 +86,12 @@ define([
         ];
       };
       container = document.createElement('div');
-      dbEl = React.render(React.createElement(Views.DatabasesController, {}), container);
+      dbEl = ReactDOM.render(React.createElement(Views.DatabasesController, {}), container);
     });
 
     afterEach(function () {
       Stores.databasesStore.getCollection = oldGetCollection;
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('renders base data of DBs', function () {
@@ -118,12 +119,12 @@ define([
         passedDbName = dbName;
       };
       container = document.createElement('div');
-      addEl = React.render(React.createElement(Views.AddDatabaseWidget, {}), container);
+      addEl = ReactDOM.render(React.createElement(Views.AddDatabaseWidget, {}), container);
     });
 
     afterEach(function () {
       Actions.createNewDatabase = oldCreateNewDatabase;
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it("Creates a database with given name", function () {
@@ -160,14 +161,14 @@ define([
         return ["db1", "db2"];
       };
       container = document.createElement('div');
-      jumpEl = React.render(React.createElement(Views.JumpToDatabaseWidget, {}), container);
+      jumpEl = ReactDOM.render(React.createElement(Views.JumpToDatabaseWidget, {}), container);
     });
 
     afterEach(function () {
       $ = old$;
       Actions.jumpToDatabase = oldJumpToDatabase;
       Stores.databasesStore.getDatabaseNames = oldGetDatabaseNames;
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it("Jumps to a database with given name", function () {
@@ -217,14 +218,14 @@ define([
     it('uses custom URL prefix on the navigation if passed through props', function () {
       var container = document.createElement('div');
       var pagination = TestUtils.renderIntoDocument(<Views.DatabasePagination linkPath="_custom_path" />, container);
-      var links = $(pagination.getDOMNode()).find('a');
+      var links = $(ReactDOM.findDOMNode(pagination)).find('a');
 
       assert.equal(links.length, 3, 'pagination contains links');
       links.each(function () {
         assert.include(this.href, '_custom_path', 'link contains custom path');
       });
 
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
   });
 
@@ -236,7 +237,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('adds multiple extra columns if extended', function () {
@@ -255,7 +256,7 @@ define([
       FauxtonAPI.registerExtension('DatabaseTable:head', ColHeader3);
 
       var table = TestUtils.renderIntoDocument(<Views.DatabaseTable loading={false} body={[]} />, container);
-      var cols = $(table.getDOMNode()).find('th');
+      var cols = $(ReactDOM.findDOMNode(table)).find('th');
 
       // (default # of rows is 5)
       assert.equal(cols.length, 8, 'extra columns show up');
@@ -280,7 +281,7 @@ define([
       };
 
       var databaseRow = TestUtils.renderIntoDocument(<Views.DatabaseTable body={[row]} />, container);
-      var links = $(databaseRow.getDOMNode()).find('td');
+      var links = $(ReactDOM.findDOMNode(databaseRow)).find('td');
 
       // (default # of rows is 5)
       assert.equal(links.length, 6, 'extra column shows up');
@@ -301,7 +302,7 @@ define([
       };
 
       var databaseRow = TestUtils.renderIntoDocument(<Views.DatabaseTable body={[row]} />, container);
-      assert.equal($(databaseRow.getDOMNode()).find('.database-load-fail').length, 1);
+      assert.equal($(ReactDOM.findDOMNode(databaseRow)).find('.database-load-fail').length, 1);
     });
 
     it('shows no error if row marked as loaded', function () {
@@ -316,7 +317,7 @@ define([
 
       var databaseRow = TestUtils.renderIntoDocument(<Views.DatabaseTable body={[row]} />, container);
 
-      assert.equal($(databaseRow.getDOMNode()).find('.database-load-fail').length, 0);
+      assert.equal($(ReactDOM.findDOMNode(databaseRow)).find('.database-load-fail').length, 0);
     });
 
   });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/changes/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/changes/components.react.jsx b/app/addons/documents/changes/components.react.jsx
index 9d8ed98..9ba2b57 100644
--- a/app/addons/documents/changes/components.react.jsx
+++ b/app/addons/documents/changes/components.react.jsx
@@ -14,13 +14,14 @@ define([
   'app',
   'api',
   'react',
+  'react-dom',
   'addons/documents/changes/actions',
   'addons/documents/changes/stores',
   'addons/fauxton/components.react',
   'addons/components/react-components.react',
 
   'plugins/prettify'
-], function (app, FauxtonAPI, React, Actions, Stores, Components, ReactComponents) {
+], function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, Components, ReactComponents) {
 
   var changesStore = Stores.changesStore;
   var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
@@ -64,7 +65,8 @@ define([
       return (
         <div className="changes-header-section">
           <ChangesHeaderTab onToggle={this.toggleFilterSection} />
-          <ReactCSSTransitionGroup transitionName="toggle-changes-filter" component="div" className="changes-tab-content">
+          <ReactCSSTransitionGroup transitionName="toggle-changes-filter" component="div" className="changes-tab-content"
+             transitionEnterTimeout={500} transitionLeaveTimeout={300}>
             {tabContent}
           </ReactCSSTransitionGroup>
         </div>
@@ -211,7 +213,7 @@ define([
     },
 
     focusFilterField: function () {
-      React.findDOMNode(this.refs.addItem).focus();
+      ReactDOM.findDOMNode(this.refs.addItem).focus();
     },
 
     onChangeFilter: function (e) {
@@ -248,7 +250,7 @@ define([
   var FilterTooltip = React.createClass({
     componentDidMount: function () {
       if (this.props.tooltip) {
-        $(React.findDOMNode(this.refs.tooltip)).tooltip();
+        $(ReactDOM.findDOMNode(this.refs.tooltip)).tooltip();
       }
     },
 
@@ -383,7 +385,8 @@ define([
               </div>
             </div>
 
-            <ReactCSSTransitionGroup transitionName="toggle-changes-code" component="div" className="changesCodeSectionWrapper">
+            <ReactCSSTransitionGroup transitionName="toggle-changes-code" component="div" className="changesCodeSectionWrapper"
+              transitionEnterTimeout={500} transitionLeaveTimeout={300}>
               {this.getChangesCode()}
             </ReactCSSTransitionGroup>
 
@@ -416,13 +419,13 @@ define([
 
   return {
     renderHeader: function (el) {
-      React.render(<ChangesHeaderController />, el);
+      ReactDOM.render(<ChangesHeaderController />, el);
     },
     renderChanges: function (el) {
-      React.render(<ChangesController />, el);
+      ReactDOM.render(<ChangesController />, el);
     },
     remove: function (el) {
-      React.unmountComponentAtNode(el);
+      ReactDOM.unmountComponentAtNode(el);
     },
 
     ChangesHeaderController: ChangesHeaderController,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx b/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx
index 7a3e444..c5f5e62 100644
--- a/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx
+++ b/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx
@@ -14,11 +14,12 @@ define([
   'app',
   'api',
   'react',
+  'react-dom',
   'addons/documents/changes/components.react',
   'addons/documents/changes/stores',
   'addons/documents/changes/actions',
   'testUtils'
-], function (app, FauxtonAPI, React, Changes, Stores, Actions, utils) {
+], function (app, FauxtonAPI, React, ReactDOM, Changes, Stores, Actions, utils) {
   FauxtonAPI.router = new FauxtonAPI.Router([]);
 
   var assert = utils.assert;
@@ -47,12 +48,12 @@ define([
       afterEach(function () {
         spy.restore();
         Stores.changesStore.reset();
-        React.unmountComponentAtNode(container);
+        ReactDOM.unmountComponentAtNode(container);
       });
 
       // similar as previous, except it confirms that the action gets fired, not the custom toggle func
       it('calls toggleTabVisibility action on selecting a tab', function () {
-        TestUtils.Simulate.click($(tab.getDOMNode()).find('a')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(tab)).find('a')[0]);
         assert.ok(spy.calledOnce);
       });
     });
@@ -69,11 +70,11 @@ define([
 
     afterEach(function () {
       Stores.changesStore.reset();
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should call toggle function on clicking tab', function () {
-      TestUtils.Simulate.click($(tab.getDOMNode()).find('a')[0]);
+      TestUtils.Simulate.click($(ReactDOM.findDOMNode(tab)).find('a')[0]);
       assert.ok(toggleTabVisibility.calledOnce);
     });
   });
@@ -89,11 +90,11 @@ define([
 
     afterEach(function () {
       Stores.changesStore.reset();
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should add filter markup', function () {
-      var $el = $(changesFilterEl.getDOMNode()),
+      var $el = $(ReactDOM.findDOMNode(changesFilterEl)),
           submitBtn = $el.find('[type="submit"]')[0],
           addItemField = $el.find('.js-changes-filter-field')[0];
 
@@ -109,7 +110,7 @@ define([
     });
 
     it('should call addFilter action on click', function () {
-      var $el = $(changesFilterEl.getDOMNode()),
+      var $el = $(ReactDOM.findDOMNode(changesFilterEl)),
         submitBtn = $el.find('[type="submit"]')[0],
         addItemField = $el.find('.js-changes-filter-field')[0];
 
@@ -123,7 +124,7 @@ define([
     });
 
     it('should remove filter markup', function () {
-      var $el = $(changesFilterEl.getDOMNode()),
+      var $el = $(ReactDOM.findDOMNode(changesFilterEl)),
         submitBtn = $el.find('[type="submit"]')[0],
         addItemField = $el.find('.js-changes-filter-field')[0];
 
@@ -143,7 +144,7 @@ define([
     });
 
     it('should call removeFilter action on click', function () {
-      var $el = $(changesFilterEl.getDOMNode()),
+      var $el = $(ReactDOM.findDOMNode(changesFilterEl)),
         submitBtn = $el.find('[type="submit"]')[0],
         addItemField = $el.find('.js-changes-filter-field')[0];
 
@@ -158,7 +159,7 @@ define([
     });
 
     it('should not add empty filters', function () {
-      var $el = $(changesFilterEl.getDOMNode()),
+      var $el = $(ReactDOM.findDOMNode(changesFilterEl)),
         submitBtn = $el.find('[type="submit"]')[0],
         addItemField = $el.find('.js-changes-filter-field')[0];
 
@@ -170,11 +171,11 @@ define([
     });
 
     it('should not add tooltips by default', function () {
-      assert.equal(0, $(changesFilterEl.getDOMNode()).find('.js-remove-filter').length);
+      assert.equal(0, $(ReactDOM.findDOMNode(changesFilterEl)).find('.js-remove-filter').length);
     });
 
     it('should not add the same filter twice', function () {
-      var $el = $(changesFilterEl.getDOMNode()),
+      var $el = $(ReactDOM.findDOMNode(changesFilterEl)),
           submitBtn = $el.find('[type="submit"]')[0],
           addItemField = $el.find('.js-changes-filter-field')[0];
 
@@ -213,16 +214,16 @@ define([
       container2 = document.createElement('div');
       Actions.initChanges({ databaseName: 'testDatabase' });
       headerEl  = TestUtils.renderIntoDocument(<Changes.ChangesHeaderController />, container);
-      $headerEl = $(headerEl.getDOMNode());
+      $headerEl = $(ReactDOM.findDOMNode(headerEl));
       changesEl = TestUtils.renderIntoDocument(<Changes.ChangesController />, container2);
-      $changesEl = $(changesEl.getDOMNode());
+      $changesEl = $(ReactDOM.findDOMNode(changesEl));
       Actions.updateChanges(changesResponse);
     });
 
     afterEach(function () {
       Stores.changesStore.reset();
-      React.unmountComponentAtNode(container);
-      React.unmountComponentAtNode(container2);
+      ReactDOM.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container2);
     });
 
 
@@ -320,16 +321,16 @@ define([
 
     afterEach(function () {
       Stores.changesStore.reset();
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should truncate the number of results with very large # of changes', function () {
       // check there's no more than maxChanges results
-      assert.equal(maxChanges, $(changesEl.getDOMNode()).find('.change-box').length);
+      assert.equal(maxChanges, $(ReactDOM.findDOMNode(changesEl)).find('.change-box').length);
     });
 
     it('should show a message if the results are truncated', function () {
-      assert.equal(1, $(changesEl.getDOMNode()).find('.changes-result-limit').length);
+      assert.equal(1, $(ReactDOM.findDOMNode(changesEl)).find('.changes-result-limit').length);
     });
 
   });
@@ -349,7 +350,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
 
@@ -357,23 +358,23 @@ define([
       var changeRow = TestUtils.renderIntoDocument(<Changes.ChangeRow change={change} databaseName="testDatabase" />, container);
 
       // confirm it's hidden by default
-      assert.equal(0, $(changeRow.getDOMNode()).find('.prettyprint').length);
+      assert.equal(0, $(ReactDOM.findDOMNode(changeRow)).find('.prettyprint').length);
 
       // confirm clicking it shows the element
-      TestUtils.Simulate.click($(changeRow.getDOMNode()).find('button.btn')[0]);
-      assert.equal(1, $(changeRow.getDOMNode()).find('.prettyprint').length);
+      TestUtils.Simulate.click($(ReactDOM.findDOMNode(changeRow)).find('button.btn')[0]);
+      assert.equal(1, $(ReactDOM.findDOMNode(changeRow)).find('.prettyprint').length);
     });
 
     it('deleted docs should not be clickable', function () {
       change.deleted = true;
       var changeRow = TestUtils.renderIntoDocument(<Changes.ChangeRow change={change} databaseName="testDatabase" />, container);
-      assert.equal(0, $(changeRow.getDOMNode()).find('a.js-doc-link').length);
+      assert.equal(0, $(ReactDOM.findDOMNode(changeRow)).find('a.js-doc-link').length);
     });
 
     it('non-deleted docs should be clickable', function () {
       change.deleted = false;
       var changeRow = TestUtils.renderIntoDocument(<Changes.ChangeRow change={change} databaseName="testDatabase" />, container);
-      assert.equal(1, $(changeRow.getDOMNode()).find('a.js-doc-link').length);
+      assert.equal(1, $(ReactDOM.findDOMNode(changeRow)).find('a.js-doc-link').length);
     });
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/doc-editor/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/doc-editor/components.react.jsx b/app/addons/documents/doc-editor/components.react.jsx
index 6e1e051..56ed8d3 100644
--- a/app/addons/documents/doc-editor/components.react.jsx
+++ b/app/addons/documents/doc-editor/components.react.jsx
@@ -2,13 +2,14 @@ define([
   'api',
   'app',
   'react',
+  'react-dom',
   'addons/documents/doc-editor/actions',
   'addons/documents/doc-editor/stores',
   'addons/fauxton/components.react',
   'addons/components/react-components.react',
   'libs/react-bootstrap',
   'helpers'
-], function (FauxtonAPI, app, React, Actions, Stores, FauxtonComponents, GeneralComponents, ReactBootstrap, Helpers) {
+], function (FauxtonAPI, app, React, ReactDOM, Actions, Stores, FauxtonComponents, GeneralComponents, ReactBootstrap, Helpers) {
 
   var store = Stores.docEditorStore;
   var Modal = ReactBootstrap.Modal;
@@ -290,7 +291,7 @@ define([
       Actions.uploadAttachment({
         doc: this.props.doc,
         rev: this.props.doc.get('_rev'),
-        files: $(React.findDOMNode(this.refs.attachments))[0].files
+        files: $(ReactDOM.findDOMNode(this.refs.attachments))[0].files
       });
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx b/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx
index cdbc192..124d101 100644
--- a/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx
+++ b/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx
@@ -14,6 +14,7 @@ define([
   'app',
   'api',
   'react',
+  'react-dom',
   'addons/documents/resources',
   'addons/documents/doc-editor/components.react',
   'addons/documents/doc-editor/stores',
@@ -22,12 +23,10 @@ define([
   'addons/databases/base',
   'testUtils',
   'libs/react-bootstrap'
-], function (app, FauxtonAPI, React, Documents, Components, Stores, Actions, ActionTypes, Databases, utils,
+], function (app, FauxtonAPI, React, ReactDOM, Documents, Components, Stores, Actions, ActionTypes, Databases, utils,
   ReactBoostrap) {
 
   FauxtonAPI.router = new FauxtonAPI.Router([]);
-  var Modal = ReactBoostrap.Modal;
-
 
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
@@ -71,12 +70,12 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('loading indicator appears on load', function () {
       var el = TestUtils.renderIntoDocument(<Components.DocEditorController />, container);
-      assert.equal($(el.getDOMNode()).find('.loading-lines').length, 1);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.loading-lines').length, 1);
     });
 
     it('new docs do not show the button row', function () {
@@ -90,10 +89,10 @@ define([
         }
       });
 
-      assert.equal($(el.getDOMNode()).find('.loading-lines').length, 0);
-      assert.equal($(el.getDOMNode()).find('.icon-circle-arrow-up').length, 0);
-      assert.equal($(el.getDOMNode()).find('.icon-repeat').length, 0);
-      assert.equal($(el.getDOMNode()).find('.icon-trash').length, 0);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.loading-lines').length, 0);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.icon-circle-arrow-up').length, 0);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.icon-repeat').length, 0);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.icon-trash').length, 0);
     });
 
     it('view attachments button does not appear with no attachments', function () {
@@ -106,7 +105,7 @@ define([
           doc: doc
         }
       });
-      assert.equal($(el.getDOMNode()).find('.view-attachments-section').length, 0);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.view-attachments-section').length, 0);
     });
 
     it('view attachments button shows up when the doc has attachments', function () {
@@ -119,7 +118,7 @@ define([
           doc: doc
         }
       });
-      assert.equal($(el.getDOMNode()).find('.view-attachments-section').length, 1);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.view-attachments-section').length, 1);
     });
 
     it('view attachments dropdown contains right number of docs', function () {
@@ -132,7 +131,7 @@ define([
           doc: doc
         }
       });
-      assert.equal($(el.getDOMNode()).find('.view-attachments-section .dropdown-menu li').length, 2);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.view-attachments-section .dropdown-menu li').length, 2);
     });
 
     it('view attachments dropdown contains correct urls', function () {
@@ -146,13 +145,12 @@ define([
         }
       });
 
-      var attachmentNode = $(el.getDOMNode()).find('.view-attachments-section .dropdown-menu li')[0];
+      var attachmentNode = $(ReactDOM.findDOMNode(el)).find('.view-attachments-section .dropdown-menu li')[0];
       var attachmentURLactual = $(attachmentNode).find('a').attr('href');
 
       assert.equal(attachmentURLactual, "../../id/_design/test-doc/one.png");
     });
 
-
     it('setting deleteDocModal=true in store shows modal', function () {
       var el = TestUtils.renderIntoDocument(<Components.DocEditorController database={database} />, container);
       var doc = new Documents.Doc(docWithAttachmentsJSON, { database: database });
@@ -163,14 +161,14 @@ define([
         }
       });
 
-      // this is unfortunate, but I can't find a better way to do it. Refs won't work for bootstrap modals because
-      // they add the modal to the page at the top level outside the component. There are 3 modals in the
-      // component: the upload modal, clone modal, delete doc modal. We locate it by index
-      var modals = TestUtils.scryRenderedComponentsWithType(el, Modal);
+      // uber-kludgy, but the delete doc modal is a generic dialog used multiple times, so this test first checks
+      // no modal is open, then confirms the open modal contains the delete dialog message
+      assert.equal($('body').find('.confirmation-modal').length, 0);
 
-      assert.equal(React.findDOMNode(modals[2].refs.modal), null);
       Actions.showDeleteDocModal();
-      assert.notEqual(React.findDOMNode(modals[2].refs.modal), null);
+
+      var modalContent = $('body').find('.confirmation-modal .modal-body p')[0];
+      assert.ok(/Are you sure you want to delete this document\?/.test(modalContent.innerHTML));
     });
 
     it('setting uploadDocModal=true in store shows modal', function () {
@@ -182,11 +180,10 @@ define([
           doc: doc
         }
       });
-      var modals = TestUtils.scryRenderedComponentsWithType(el, Modal);
 
-      assert.equal(React.findDOMNode(modals[1].refs.modal), null);
+      assert.equal($('body').find('.upload-file-modal').length, 0);
       Actions.showUploadModal();
-      assert.notEqual(React.findDOMNode(modals[1].refs.modal), null);
+      assert.notEqual($('body').find('.upload-file-modal').length, 0);
     });
   });
 
@@ -200,17 +197,17 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('does not show up when loading', function () {
       var el = TestUtils.renderIntoDocument(<Components.AttachmentsPanelButton isLoading={true} doc={doc} />, container);
-      assert.equal($(el.getDOMNode()).find('.panel-button').length, 0);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.panel-button').length, 0);
     });
 
     it('shows up after loading', function () {
       var el = TestUtils.renderIntoDocument(<Components.AttachmentsPanelButton isLoading={false} doc={doc} />, container);
-      assert.equal($(el.getDOMNode()).find('.panel-button').length, 1);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('.panel-button').length, 1);
     });
   });
 
@@ -231,12 +228,12 @@ define([
 
       var container = document.createElement('div');
       var el = TestUtils.renderIntoDocument(<Components.DocEditorController database={database} />, container);
-      assert.isTrue(/Oh\sno\sshe\sdi'n't!/.test(el.getDOMNode().outerHTML));
+      assert.isTrue(/Oh\sno\sshe\sdi'n't!/.test(ReactDOM.findDOMNode(el).outerHTML));
 
       // confirm the database name was also included
-      assert.equal($(el.getDOMNode()).find("#testDatabaseName").html(), database.id);
+      assert.equal($(ReactDOM.findDOMNode(el)).find("#testDatabaseName").html(), database.id);
 
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/helpers.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/helpers.js b/app/addons/documents/helpers.js
index 17d774c..81be185 100644
--- a/app/addons/documents/helpers.js
+++ b/app/addons/documents/helpers.js
@@ -16,7 +16,6 @@ define([
 ], function (app, FauxtonAPI) {
 
 
-
   function getPreviousPageForDoc (database, wasCloned) {
     var previousPage = database.url('index'), // default to the current database's all_docs page
         lastPages = FauxtonAPI.router.lastPages;
@@ -81,12 +80,15 @@ define([
     };
   }
 
+  function parseJSON (str) {
+    return JSON.parse('"' + str + '"');   // this ensures newlines are converted
+  }
 
   return {
     getPreviousPageForDoc: getPreviousPageForDoc,
     getPreviousPage: getPreviousPage,
     getSeqNum: getSeqNum,
     getNewButtonLinks: getNewButtonLinks,
-
+    parseJSON: parseJSON
   };
 });


Mime
View raw message