COMPASS-142 showing error message on mondal on index drop error (#556)

* COMPASS-142 showing error message on mondal on index drop error

* COMPASS-141 added progress to the drop index modal

Author: Satya

src/internal-packages/indexes/lib/component/create-index-modal.jsx

@@ -10,6 +10,8 @@ const CreateIndexTextField = require('./create-index-text-field');
 const OptionsToggleBar = require('./options-toggle-bar');
 const Action = require('../action/index-actions');
 
+// const debug = require('debug')('mongodb-compass:ddl:index');
+
 /**
  * The index options and parameters to display.
  */
@@ -116,6 +118,7 @@ class CreateIndexModal extends React.Component {
    * Close modal when cancel is clicked.
    */
   handleCancel() {
+    Action.updateStatus('cancel');
     this.close();
   }
 

src/internal-packages/indexes/lib/component/drop-index-modal.jsx

@@ -1,6 +1,11 @@
+const app = require('ampersand-app');
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
 const Action = require('../action/index-actions');
+const DDLStatusStore = require('../store/ddl-status-store');
+
+
+// const debug = require('debug')('mongodb-compass:ddl:index');
 
 /**
  * Component for the drop confirmation modal.
@@ -17,13 +22,54 @@ class DropIndexModal extends React.Component {
     this.state = {
       confirmName: ''
     };
+    this.ModalStatusMessage = app.appRegistry.getComponent('App.ModalStatusMessage');
+  }
+
+  /**
+   * Subscribe on mount.
+   */
+  componentWillMount() {
+    this.unsubscribeDDLStatus = DDLStatusStore.listen(this.handleStatusChange.bind(this));
+  }
+
+  /**
+   * Unsubscribe on unmount.
+   */
+  componentWillUnmount() {
+    this.unsubscribeDDLStatus();
+  }
+
+  /**
+   * Handle changes in creation state (success, error, or complete).
+   *
+   * @param {string} status - The status.
+   * @param {string} message - The error message.
+   */
+  handleStatusChange(status, message) {
+    if (status === 'inProgress') {
+      this.setState({inProgress: true, error: false, errorMessage: message});
+    } else if (status === 'error') {
+      this.setState({inProgress: false, error: true, errorMessage: message});
+    } else {
+      this.handleClose();
+    }
+  }
+
+  /**
+   * Clean up after a close events
+   */
+  handleClose() {
+    // this.props.indexName = '';
+    this.setState({inProgress: false, error: false, errorMessage: ''});
+    this.props.close();
   }
 
   /**
    * Close drop index modal when cancel is clicked.
    */
   handleCancel() {
-    this.props.close();
+    Action.updateStatus('cancel');
+    this.handleClose();
   }
 
   /**
@@ -44,7 +90,31 @@ class DropIndexModal extends React.Component {
     evt.preventDefault();
     evt.stopPropagation();
     Action.dropIndex(this.props.indexName);
-    this.props.close();
+    // this.props.close();
+  }
+
+  /**
+   * Render the create and cancel buttons.
+   *
+   * @returns {React.Component} The create and cancel buttons.
+   */
+  renderButtons() {
+    return (
+      <div className="drop-btn-container">
+        <button
+          className="drop-btn btn btn-default btn-sm"
+          type="button"
+          onClick={this.handleCancel.bind(this)}>
+          Cancel
+        </button>
+        <button
+          className="drop-btn btn btn-primary btn-sm"
+          disabled={this.state.confirmName !== this.props.indexName}
+          type="submit">
+          Drop
+        </button>
+      </div>
+    );
   }
 
   /**
@@ -58,7 +128,7 @@ class DropIndexModal extends React.Component {
         backdrop="static"
         dialogClassName="drop-index-modal"
         keyboard={false}
-        onHide={this.props.close} >
+        onHide={this.handleClose.bind(this)} >
         <div className="drop-index-modal-content">
           <Modal.Header>
             <Modal.Title>Index Drop</Modal.Title>
@@ -81,20 +151,13 @@ class DropIndexModal extends React.Component {
                   value={this.state.confirmName}
                   onChange={this.handleChange.bind(this)} />
               </div>
-              <div className="drop-btn-container">
-                <button
-                  className="drop-btn btn btn-default btn-sm"
-                  type="button"
-                  onClick={this.handleCancel.bind(this)}>
-                  Cancel
-                </button>
-                <button
-                  className="drop-btn btn btn-primary btn-sm"
-                  disabled={this.state.confirmName !== this.props.indexName}
-                  type="submit">
-                  Drop
-                </button>
-              </div>
+              {this.state.error ?
+                <this.ModalStatusMessage icon="times" message={this.state.errorMessage} type="error" />
+                : null}
+
+              {this.state.inProgress ?
+                <this.ModalStatusMessage icon="align-center" message={'Drop in Progress'} type="in-progress" />
+                : this.renderButtons()}
             </form>
           </Modal.Body>
         </div>

src/internal-packages/indexes/lib/store/update-indexes-store.js

@@ -4,6 +4,8 @@ const NamespaceStore = require('hadron-reflux-store').NamespaceStore;
 const LoadIndexesStore = require('./load-indexes-store');
 const Action = require('../action/index-actions');
 
+// const debug = require('debug')('mongodb-compass:stores:ddl');
+
 /**
  * The reflux store for updating indexes.
  */
@@ -37,6 +39,9 @@ const UpdateIndexesStore = Reflux.createStore({
       if (!err) {
         this.indexes = this.indexes.filter(index => index.name !== indexName);
         this.trigger(this.indexes);
+        Action.updateStatus('complete');
+      } else {
+        Action.updateStatus('error', this._parseErrorMsg(err));
       }
     });
   },