couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject [1/2] fauxton commit: updated refs/heads/master to 0c07ddc
Date Wed, 09 Mar 2016 13:01:57 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master b182c03e8 -> 0c07ddc43


react-migration: replace delete-db-modal with react version

  1. replaces old backbone delete-db-modal with backbone version
  2. renames `showModal` to `modalProps` for easier understanding
  3. removes softmigration paths for delete-db-modal

PR: #657
PR-URL: https://github.com/apache/couchdb-fauxton/pull/657
Reviewed-By: Benjamin Keen <ben.keen@gmail.com>


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

Branch: refs/heads/master
Commit: 98a546245eb5ddb25d2f7649c37baab7c8de6f61
Parents: b182c03
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Tue Mar 1 12:49:38 2016 +0000
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Wed Mar 9 13:01:00 2016 +0000

----------------------------------------------------------------------
 .../components/react-components.react.jsx       | 36 +++++------
 .../tests/deleteDatabaseModalSpec.react.jsx     |  6 +-
 app/addons/databases/components.react.jsx       | 10 ++-
 .../tests/nightwatch/deletesDatabase.js         |  8 +--
 .../nightwatch/deletesDatabaseSpecialChars.js   |  7 ++-
 app/addons/documents/assets/less/documents.less |  6 --
 app/addons/documents/helpers.js                 |  6 +-
 app/addons/documents/sidebar/sidebar.react.jsx  | 55 +++++++----------
 .../templates/delete_database_modal.html        | 42 -------------
 app/addons/documents/views.js                   | 65 --------------------
 app/addons/fauxton/components.js                |  6 +-
 11 files changed, 62 insertions(+), 185 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/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 a4f2c06..a39ed7b 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -1159,23 +1159,13 @@ function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, FauxtonComponents,
       }.bind(this));
     },
 
-    onClick: function (eventToTrigger, e) {
-      // XXX softmigration react
-
-      if (!eventToTrigger) {
-        return;
-      }
-
-      FauxtonAPI.Events.trigger(eventToTrigger);
-    },
-
     createEntry: function (link, key) {
       return (
         <li key={key}>
           <a className={link.icon ? 'icon ' + link.icon : ''}
             data-bypass={link.external ? 'true' : ''}
             href={link.url}
-            onClick={this.onClick.bind(this, link.trigger)}
+            onClick={link.onClick}
             target={link.external ? '_blank' : ''}>
             {link.title}
           </a>
@@ -1441,8 +1431,8 @@ function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, FauxtonComponents,
     },
 
     propTypes: {
-      dbId: React.PropTypes.string,
-      showHide: React.PropTypes.func.isRequired
+      showHide: React.PropTypes.func.isRequired,
+      modalProps: React.PropTypes.object
     },
 
     close: function () {
@@ -1459,35 +1449,39 @@ function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, FauxtonComponents,
     },
 
     onInputChange: function (e) {
+      var val = encodeURIComponent(e.target.value.trim());
+
       this.setState({
-        inputValue: e.target.value
+        inputValue: val
       });
 
       this.setState({
-        disableSubmit: e.target.value.trim() !== this.props.showModal.dbId.trim()
+        disableSubmit: val !== this.props.modalProps.dbId.trim()
       });
     },
 
     onDeleteClick: function (e) {
       e.preventDefault();
 
-      Actions.deleteDatabase(this.props.showModal.dbId.trim());
+      Actions.deleteDatabase(this.props.modalProps.dbId.trim());
     },
 
     onInputKeypress: function (e) {
       if (e.keyCode === 13 && this.state.disableSubmit !== true) {
-        Actions.deleteDatabase(this.props.showModal.dbId.trim());
+        Actions.deleteDatabase(this.props.modalProps.dbId.trim());
       }
     },
 
     render: function () {
-      var isSystemDatabase = this.props.showModal.isSystemDatabase;
-      var showDeleteModal = this.props.showModal.showDeleteModal;
-      var dbId = this.props.showModal.dbId;
+      var isSystemDatabase = this.props.modalProps.isSystemDatabase;
+      var showDeleteModal = this.props.modalProps.showDeleteModal;
+      var dbId = this.props.modalProps.dbId;
       var errorMessage = this.state.errorMessage;
 
       var warning = isSystemDatabase ? (
-        <p className="warning"><b>You are about to delete a system database,
be careful!</b></p>
+        <p style={{color: '#d14'}} className="warning">
+          <b>You are about to delete a system database, be careful!</b>
+        </p>
       ) : null;
 
       return (

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx b/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx
index 6b4d62a..b2cc970 100644
--- a/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx
+++ b/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx
@@ -38,7 +38,7 @@ define([
       instance = TestUtils.renderIntoDocument(
         <ReactComponents.DeleteDatabaseModal
           showHide={noop}
-          showModal={{isSystemDatabase: false, showDeleteModal: true, dbId: 'fooo'}} />,
+          modalProps={{isSystemDatabase: false, showDeleteModal: true, dbId: 'fooo'}} />,
         container
       );
 
@@ -49,7 +49,7 @@ define([
       instance = TestUtils.renderIntoDocument(
         <ReactComponents.DeleteDatabaseModal
           showHide={noop}
-          showModal={{isSystemDatabase: false, showDeleteModal: true, dbId: 'fooo'}} />,
+          modalProps={{isSystemDatabase: false, showDeleteModal: true, dbId: 'fooo'}} />,
         container
       );
 
@@ -63,7 +63,7 @@ define([
       instance = TestUtils.renderIntoDocument(
         <ReactComponents.DeleteDatabaseModal
           showHide={noop}
-          showModal={{isSystemDatabase: false, showDeleteModal: true, dbId: 'fooo'}} />,
+          modalProps={{isSystemDatabase: false, showDeleteModal: true, dbId: 'fooo'}} />,
         container
       );
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/databases/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/databases/components.react.jsx b/app/addons/databases/components.react.jsx
index a1cb2e4..3c7f40c 100644
--- a/app/addons/databases/components.react.jsx
+++ b/app/addons/databases/components.react.jsx
@@ -15,6 +15,7 @@ define([
   'api',
   'react',
   'react-dom',
+
   'addons/components/react-components.react',
   'addons/components/stores',
   'addons/components/actions',
@@ -24,7 +25,8 @@ define([
   'addons/databases/resources',
   'addons/databases/actions',
   'helpers'
-], function (app, FauxtonAPI, React, ReactDOM, Components, ComponentsStore, ComponentsActions,
FauxtonComponentsReact,
+], function (app, FauxtonAPI, React, ReactDOM,
+  Components, ComponentsStore, ComponentsActions, FauxtonComponentsReact,
   Stores, Resources, Actions, Helpers) {
 
   var ToggleHeaderButton = Components.ToggleHeaderButton;
@@ -58,7 +60,9 @@ define([
     },
 
     onChange: function () {
-      this.setState(this.getStoreState());
+      if (this.isMounted()) {
+        this.setState(this.getStoreState());
+      }
     },
 
     render: function () {
@@ -112,7 +116,7 @@ define([
         <div className="view">
           <DeleteDatabaseModal
             showHide={this.showDeleteDatabaseModal}
-            showModal={this.props.showDeleteDatabaseModal} />
+            modalProps={this.props.showDeleteDatabaseModal} />
           <table className="databases table table-striped">
             <thead>
               <tr>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/databases/tests/nightwatch/deletesDatabase.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/tests/nightwatch/deletesDatabase.js b/app/addons/databases/tests/nightwatch/deletesDatabase.js
index f28c199..3109318 100644
--- a/app/addons/databases/tests/nightwatch/deletesDatabase.js
+++ b/app/addons/databases/tests/nightwatch/deletesDatabase.js
@@ -23,11 +23,10 @@ module.exports = {
       .waitForElementPresent('#header-dropdown-menu a.dropdown-toggle.icon.fonticon-vertical-ellipsis',
waitTime, false)
       .clickWhenVisible("#header-dropdown-menu a.dropdown-toggle.icon.fonticon-vertical-ellipsis",
waitTime, false)
       .waitForElementPresent('#header-dropdown-menu .fonticon-trash', waitTime, false)
-      .waitForElementPresent('#delete-db-modal', waitTime, false)
       .clickWhenVisible('#header-dropdown-menu .fonticon-trash', waitTime, false)
-      .waitForElementVisible('#db-name', waitTime, false)
-      .clickWhenVisible('#db-name', waitTime, false)
-      .setValue('#db-name', [newDatabaseName, client.Keys.ENTER])
+      .waitForElementVisible('.delete-db-modal', waitTime, false)
+      .clickWhenVisible('.delete-db-modal input[type="text"]', waitTime, false)
+      .setValue('.delete-db-modal input[type="text"]', [newDatabaseName, client.Keys.ENTER])
       .checkForDatabaseDeleted(newDatabaseName, waitTime)
 
     .end();
@@ -50,7 +49,6 @@ module.exports = {
       .checkForDatabaseDeleted(newDatabaseName, waitTime)
       .assert.elementNotPresent('a[href="#/database/' + newDatabaseName + '/_all_docs"]')
 
-
     .end();
   }
 };

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/databases/tests/nightwatch/deletesDatabaseSpecialChars.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/tests/nightwatch/deletesDatabaseSpecialChars.js b/app/addons/databases/tests/nightwatch/deletesDatabaseSpecialChars.js
index de556d9..03150e4 100644
--- a/app/addons/databases/tests/nightwatch/deletesDatabaseSpecialChars.js
+++ b/app/addons/databases/tests/nightwatch/deletesDatabaseSpecialChars.js
@@ -24,9 +24,10 @@ module.exports = {
       .clickWhenVisible("#header-dropdown-menu a.dropdown-toggle.icon.fonticon-vertical-ellipsis",
waitTime, false)
       .waitForElementPresent('#header-dropdown-menu .fonticon-trash', waitTime, false)
       .clickWhenVisible('#header-dropdown-menu .fonticon-trash', waitTime, false)
-      .waitForElementPresent('#db-name', waitTime, false)
-      .clickWhenVisible('#db-name', waitTime, false)
-      .setValue('#db-name', [newDatabaseName, client.Keys.ENTER])
+      .waitForElementVisible('.delete-db-modal', waitTime, false)
+      .clickWhenVisible('.delete-db-modal input[type="text"]', waitTime, false)
+      .setValue('.delete-db-modal input[type="text"]', [newDatabaseName, client.Keys.ENTER])
+
       .checkForDatabaseDeleted(newDatabaseName, waitTime)
 
     .end();

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/documents/assets/less/documents.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less
index c934d37..77ab9d2 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -110,12 +110,6 @@ button.string-edit[disabled] {
   display: none;
 }
 
-#delete-db-check {
-  .warning {
-    color: #d14;
-  }
-}
-
 #string-edit-modal {
   div.modal {
     overflow-x: visible;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/documents/helpers.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/helpers.js b/app/addons/documents/helpers.js
index c6a1da0..9389f1d 100644
--- a/app/addons/documents/helpers.js
+++ b/app/addons/documents/helpers.js
@@ -84,7 +84,7 @@ define([
     return JSON.parse('"' + str + '"');   // this ensures newlines are converted
   }
 
-  function getModifyDatabaseLinks (databaseName) {
+  function getModifyDatabaseLinks (databaseName, deleteCallback) {
     return [{
       title: 'Replicate Database',
       icon: 'fonticon-replicate',
@@ -92,7 +92,9 @@ define([
     }, {
       title: 'Delete',
       icon: 'fonticon-trash',
-      trigger: 'database:delete'
+      onClick: function () {
+        deleteCallback({showDeleteModal: true, dbId: databaseName});
+      }
     }];
   }
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/documents/sidebar/sidebar.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/sidebar/sidebar.react.jsx b/app/addons/documents/sidebar/sidebar.react.jsx
index 326e10b..a96b647 100644
--- a/app/addons/documents/sidebar/sidebar.react.jsx
+++ b/app/addons/documents/sidebar/sidebar.react.jsx
@@ -17,17 +17,24 @@ define([
   'react-dom',
   'addons/documents/sidebar/stores',
   'addons/documents/sidebar/actions',
+
+
   'addons/components/react-components.react',
-  'addons/documents/views',
+  'addons/components/stores',
+  'addons/components/actions',
   'addons/documents/helpers',
   'plugins/prettify'
 ],
 
-function (app, FauxtonAPI, React, ReactDOM, Stores, Actions, Components, DocumentViews, DocumentHelper)
{
-  var DeleteDBModal = DocumentViews.Views.DeleteDBModal;
+function (app, FauxtonAPI, React, ReactDOM, Stores, Actions,
+  Components, ComponentsStore, ComponentsActions, DocumentHelper) {
+
   var store = Stores.sidebarStore;
   var LoadLines = Components.LoadLines;
 
+  var DeleteDatabaseModal = Components.DeleteDatabaseModal;
+  var deleteDbModalStore = ComponentsStore.deleteDbModalStore;
+
 
   var MainSidebar = React.createClass({
     propTypes: {
@@ -351,33 +358,6 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions, Components,
Documen
     }
   });
 
-
-  var DeleteDBModalWrapper = React.createClass({
-    componentDidMount: function () {
-      this.dbModal = new DeleteDBModal({
-        database: this.props.database,
-        el: ReactDOM.findDOMNode(this),
-        isSystemDatabase: app.utils.isSystemDatabase(this.props.database.id)
-      });
-
-      this.dbModal.render();
-    },
-
-    componentWillUnmount: function () {
-      this.dbModal.remove();
-    },
-
-    componentWillReceiveProps: function (newProps) {
-      this.dbModal.database = newProps.database;
-      this.dbModal.isSystemDatabase = newProps.database.isSystemDatabase();
-    },
-
-    render: function () {
-      return <div id="delete-db-modal"> </div>;
-    }
-  });
-
-
   var SidebarController = React.createClass({
     getStoreState: function () {
       return {
@@ -386,7 +366,8 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions, Components,
Documen
         designDocs: store.getDesignDocs(),
         toggledSections: store.getToggledSections(),
         isLoading: store.isLoading(),
-        database: store.getDatabase()
+        database: store.getDatabase(),
+        deleteDbModalProperties: deleteDbModalStore.getShowDeleteDatabaseModal()
       };
     },
 
@@ -396,10 +377,12 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions, Components,
Documen
 
     componentDidMount: function () {
       store.on('change', this.onChange, this);
+      deleteDbModalStore.on('change', this.onChange, this);
     },
 
     componentWillUnmount: function () {
       store.off('change', this.onChange);
+      deleteDbModalStore.off('change', this.onChange, this);
     },
 
     onChange: function () {
@@ -408,6 +391,10 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions, Components,
Documen
       }
     },
 
+    showDeleteDatabaseModal: function (payload) {
+      ComponentsActions.showDeleteDatabaseModal(payload);
+    },
+
     render: function () {
       if (this.state.isLoading) {
         return <LoadLines />;
@@ -423,8 +410,10 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions, Components,
Documen
             toggledSections={this.state.toggledSections}
             designDocs={this.state.designDocs}
             databaseName={this.state.databaseName} />
-          <DeleteDBModalWrapper
-            database={this.state.database} />
+
+          <DeleteDatabaseModal
+            showHide={this.showDeleteDatabaseModal}
+            modalProps={this.state.deleteDbModalProperties} />
         </nav>
       );
     }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/documents/templates/delete_database_modal.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/delete_database_modal.html b/app/addons/documents/templates/delete_database_modal.html
deleted file mode 100644
index 227fc54..0000000
--- a/app/addons/documents/templates/delete_database_modal.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
--->
-
-<div class="modal hide fade">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>Delete Database</h3>
-  </div>
-  <div class="modal-body">
-    <form id="delete-db-check" class="form" method="post">
-      <% if (isSystemDatabase) { %>
-      <p class="warning"><b>You are about to delete a system database, be careful!</b></p>
-      <% } %>
-      <p>
-      You've asked to <b>permanently delete</b> <code><%- database.id
%></code>.
-      Please enter the database name below to confirm the deletion of the
-      database and all documents and attachments within.
-      </p>
-      <input class="input-block-level" type="text" name="db-name" id="db-name"></input>
-      <br/>
-      <div id="modal-error" class="alert alert-error hide" style="font-size: 16px;"></div>
-    </form>
-  </div>
-  <div class="modal-footer">
-    <button data-dismiss="modal" data-bypass="true" class="btn cancel-button">
-      <i class="icon fonticon-cancel-circled"></i> Cancel</button>
-    <button id="delete-db-btn" data-bypass="true" class="btn btn-danger save">
-      <i class="icon fonticon-ok-circled"></i> Delete</button>
-  </div>
-</div>
-

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index d5375f4..5d694a3 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -102,71 +102,6 @@ function (app, FauxtonAPI, Components, Documents, Databases, QueryOptions,
Query
     }
   });
 
-
-  Views.DeleteDBModal = Components.ModalView.extend({
-    template: "addons/documents/templates/delete_database_modal",
-    initialize: function (options) {
-      this.database = options.database;
-      this.isSystemDatabase = options.isSystemDatabase;
-      FauxtonAPI.Events.on('database:delete', this.showDeleteDatabase, this);
-    },
-
-    serialize: function () {
-      return {
-        isSystemDatabase: this.isSystemDatabase,
-        database: this.database
-      };
-    },
-
-    showDeleteDatabase: function () {
-      this.showModal();
-    },
-
-    cleanup: function () {
-      FauxtonAPI.Events.off('database:delete', this.showDeleteDatabase);
-    },
-
-    events: {
-      "click #delete-db-btn": "deleteDatabase",
-      "submit #delete-db-check": "deleteDatabase"
-    },
-
-    deleteDatabase: function (event) {
-      event.preventDefault();
-
-      var enteredName = $('#db-name').val();
-      if (this.database.id != enteredName) {
-        this.set_error_msg(enteredName + " does not match the database name.");
-        return;
-      }
-
-      this.hideModal();
-      var databaseName = this.database.id;
-      FauxtonAPI.addNotification({
-        msg: "Deleting your database...",
-        type: "error",
-        clear: true
-      });
-
-      this.database.url = FauxtonAPI.urls('databaseBaseURL', 'server', this.database.safeID(),
'');
-
-      this.database.destroy().then(function () {
-        FauxtonAPI.navigate(FauxtonAPI.urls('allDBs', 'app'));
-        FauxtonAPI.addNotification({
-          msg: 'The database <code>' + _.escape(databaseName) + '</code> has
been deleted.',
-          clear: true,
-          escape: false // beware of possible XSS when the message changes
-        });
-      }).fail(function (rsp, error, msg) {
-        FauxtonAPI.addNotification({
-          msg: 'Could not delete the database, reason ' + msg + '.',
-          type: 'error',
-          clear: true
-        });
-      });
-    }
-  });
-
   Views.JumpToDoc = FauxtonAPI.View.extend({
     template: "addons/documents/templates/jumpdoc",
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/98a54624/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 4046794..5f0fbfb 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -28,12 +28,13 @@ define([
   "ace_configuration",
   "spin",
   'addons/components/react-components.react',
+  'addons/components/actions',
   'addons/documents/helpers',
 
   "velocity.ui"
 ],
 
-function (app, FauxtonAPI, ace, spin, ReactComponents, Helpers) {
+function (app, FauxtonAPI, ace, spin, ReactComponents, ComponentsActions, Helpers) {
   var Components = FauxtonAPI.addon();
 
   // XXX: move to /addons/documents - component is tightly coupled to documents/alldocs
@@ -89,7 +90,8 @@ function (app, FauxtonAPI, ace, spin, ReactComponents, Helpers) {
     },
 
     getModififyDbLinks: function () {
-      return Helpers.getModifyDatabaseLinks(this.dbName);
+      var onClickDelete = ComponentsActions.showDeleteDatabaseModal;
+      return Helpers.getModifyDatabaseLinks(this.dbName, onClickDelete);
     },
 
     setUpDropDownMenu: function () {


Mime
View raw message