INT-1783: Add error messages to insert dialog (#474)

(cherry picked from commit 178ae70)

Author: durran

src/internal-packages/crud/lib/component/insert-document-dialog.jsx

@@ -3,7 +3,9 @@
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
 const OpenInsertDocumentDialogStore = require('../store/open-insert-document-dialog-store');
+const InsertDocumentStore = require('../store/insert-document-store');
 const InsertDocument = require('./insert-document');
+const InsertDocumentFooter = require('./insert-document-footer');
 const TextButton = require('hadron-app-registry').TextButton;
 const Actions = require('../actions');
 
@@ -22,27 +24,62 @@ class InsertDocumentDialog extends React.Component {
     this.state = { open: false };
   }
 
+  /**
+   * Subscribe to the open dialog store.
+   */
   componentWillMount() {
     this.unsubscribeOpen = OpenInsertDocumentDialogStore.listen(this.handleStoreOpen.bind(this));
+    this.unsubscribeInsert = InsertDocumentStore.listen(this.handleDocumentInsert.bind(this));
   }
 
+  /**
+   * Unsubscribe from the store.
+   */
   componentWillUnmount() {
     this.unsubscribeOpen();
+    this.unsubscribeInsert();
   }
 
+  /**
+   * Handle opening the dialog with the new document.
+   *
+   * @param {Object} doc - The document.
+   */
   handleStoreOpen(doc) {
     this.setState({ doc: doc, open: true });
   }
 
+  /**
+   * Handle canceling the insert.
+   */
   handleCancel() {
     this.setState({ open: false });
   }
 
+  /**
+   * Handles completion of the document insert.
+   *
+   * @param {Boolean} success - If the operation succeeded.
+   * @param {Object} doc - The document or error.
+   */
+  handleDocumentInsert(success, doc) {
+    if (success) {
+      this.setState({ open: false });
+    }
+  }
+
+  /**
+   * Handle the insert.
+   */
   handleInsert() {
-    this.setState({ open: false });
     Actions.insertDocument(this.state.doc.generateObject());
   }
 
+  /**
+   * Render the modal dialog.
+   *
+   * @returns {React.Component} The react component.
+   */
   render() {
     return (
       <Modal show={this.state.open} backdrop='static' keyboard={false}>
@@ -52,6 +89,7 @@ class InsertDocumentDialog extends React.Component {
 
         <Modal.Body>
           <InsertDocument doc={this.state.doc} />
+          <InsertDocumentFooter />
         </Modal.Body>
 
         <Modal.Footer>

src/internal-packages/crud/lib/component/insert-document-footer.jsx

@@ -0,0 +1,95 @@
+'use strict';
+
+const React = require('react');
+const InsertDocumentStore = require('../store/insert-document-store');
+const Actions = require('../actions');
+
+const INSERTING = 'Inserting Document';
+
+/**
+ * Map of modes to styles.
+ */
+const MODES = {
+  'Progress': 'in-progress',
+  'Error': 'error',
+  'Modifying': 'modifying'
+}
+
+/**
+ * Component for the insert document footer.
+ */
+class InsertDocumentFooter extends React.Component {
+
+  /**
+   * The component constructor.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+    this.state = { message: '', mode: 'Modifying' };
+  }
+
+  /**
+   * Subscribe to the insert document store.
+   */
+  componentWillMount() {
+    this.unsubscribeInsert = InsertDocumentStore.listen(this.handleDocumentInsert.bind(this));
+    this.unsubscribeStart = Actions.insertDocument.listen(this.handleInsertStart.bind(this));
+  }
+
+  /**
+   * Unsubscribe from the store.
+   */
+  componentWillUnmount() {
+    this.unsubscribeInsert();
+    this.unsubscribeStart();
+  }
+
+  /**
+   * Handles completion of document insert.
+   *
+   * @param {Boolean} success - If the operation succeeded.
+   * @param {Object} doc - The document or error.
+   */
+  handleDocumentInsert(success, doc) {
+    if (!success) {
+      this.setState({ message: doc.message, mode: 'Error' });
+    }
+  }
+
+  /**
+   * Handles the start of a document insert.
+   */
+  handleInsertStart() {
+    this.setState({ message: INSERTING, mode: 'Progess' });
+  }
+
+  /**
+   * Get the style of the footer based on the current mode.
+   *
+   * @returns {String} The style.
+   */
+  style() {
+    return `document-footer ${MODES[this.state.mode]}`;
+  }
+
+  /**
+   * Render the footer.
+   *
+   * @returns {Component} The footer component.
+   */
+  render() {
+    return (
+      <div className={this.style()}>
+        <div className='edit-message' title={this.state.message}>
+          {this.state.message}
+        </div>
+      </div>
+    );
+  }
+}
+
+InsertDocumentFooter.displayName = 'InsertDocumentFooter';
+
+module.exports = InsertDocumentFooter;

src/internal-packages/query/lib/component/sampling-message.jsx

@@ -48,8 +48,10 @@ class SamplingMessage extends React.Component {
   /**
    * Handle updating the count on document insert.
    */
-  handleInsert() {
-    this.setState({ count: this.state.count + 1 });
+  handleInsert(success) {
+    if (success) {
+      this.setState({ count: this.state.count + 1 });
+    }
   }
 
   /**