INT-1160: CRUD Support

package.json

@@ -100,14 +100,16 @@
     "electron-squirrel-startup": "^0.1.4",
     "font-awesome": "https://github.com/FortAwesome/Font-Awesome/archive/v4.4.0.tar.gz",
     "get-object-path": "azer/get-object-path#74eb42de0cfd02c14ffdd18552f295aba723d394",
-    "hadron-action": "^0.0.2",
+    "hadron-action": "^0.0.4",
     "hadron-auto-update-manager": "^0.0.12",
     "hadron-compile-cache": "^0.1.0",
-    "hadron-component-registry": "^0.2.0",
+    "hadron-component-registry": "^0.3.0",
+    "hadron-document": "^0.12.0",
     "hadron-ipc": "^0.0.7",
     "hadron-module-cache": "^0.0.3",
     "hadron-package-manager": "0.1.0",
     "hadron-reflux-store": "^0.0.2",
+    "hadron-type-checker": "^0.3.0",
     "highlight.js": "^8.9.1",
     "jquery": "^2.1.4",
     "kerberos": "mongodb-js/kerberos#bc619b1b9213eb4cdae786cf3fb916fc7be66758",
@@ -120,8 +122,8 @@
     "marky-mark": "^1.2.1",
     "moment": "^2.10.6",
     "mongodb-collection-model": "^0.2.3",
-    "mongodb-connection-model": "^4.2.0",
-    "mongodb-data-service": "^0.2.1",
+    "mongodb-connection-model": "^4.3.0",
+    "mongodb-data-service": "^0.3.0",
     "mongodb-database-model": "^0.1.2",
     "mongodb-explain-plan-model": "^0.2.0",
     "mongodb-extended-json": "^1.6.0",
@@ -137,6 +139,7 @@
     "qs": "^5.2.0",
     "raf": "^3.1.0",
     "react": "^0.14.8",
+    "react-bootstrap": "0.29.5",
     "react-dom": "^0.14.8",
     "semver": "^5.1.0",
     "storage-mixin": "^0.6.2",

src/app/documents/document-list.js

@@ -25,7 +25,8 @@ var DocumentListView = View.extend({
     Action.filterChanged(app.queryOptions.query.serialize());
   },
   render: function() {
-    ReactDOM.render(React.createElement(this.documentList), this.el.parentNode);
+    var container = this.el.parentNode.parentNode.parentNode;
+    ReactDOM.render(React.createElement(this.documentList), container);
     return this;
   },
   reset: function() {

src/app/documents/index.less

@@ -1,5 +1,5 @@
 .truncate-text-mixin() {
-  overflow-x: hidden;
+  // overflow-x: hidden; // commenting out to make the dropdowns work
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
@@ -31,6 +31,7 @@ ol.document-list {
   }
 
   li.document-list-item {
+    position: relative;
     font-family: @font-family-monospace;
     font-size: 11px;
     padding-bottom: 10px;
@@ -97,6 +98,15 @@ ol.document-list {
         }
       }
 
+      .document-property.code > .document-property-value {
+        &::before {
+          content: "Code('";
+        }
+        &::after {
+          content: "')";
+        }
+      }
+
       li.document-property.array, li.document-property.object {
         display: block;
         margin-left: -16px;
@@ -114,8 +124,8 @@ ol.document-list {
             display: inline-block;
             width: 12px;
             height: 1em;
-            margin-left: 2px;
-            margin-right: 10px;
+            margin-left: -8px !important; // remove important hack later
+            margin-right: 4px;
             .caret-right;
           }
 
@@ -130,18 +140,21 @@ ol.document-list {
         }
 
         ol.document-property-body {
-          // margin-left: 21px;
-          padding-left: 36px;
-          // border-left: 1px dotted @gray6;
+          padding-left: 0;
           display: none;
+
+          .document-property-key,
+          .editable-key {
+            margin-left: 16px;
+          }
         }
         &.expanded {
           > .document-property-header {
             > .caret {
               .caret-down;
               vertical-align: bottom;
-              margin-left: 4px;
-              margin-right: 8px;
+              margin-left: -10px !important; // remove important hack later
+              margin-right: 2px;
             }
           }
           > ol.document-property-body {

src/app/explain-plan/index.less

@@ -1,5 +1,27 @@
 .explain-container {
 
+  // hacks for json view on explain tab
+  ol.document-list li.document-list-item ol.document-property-body li.document-property.array ol.document-property-body .document-property-key, 
+  ol.document-list li.document-list-item ol.document-property-body li.document-property.object ol.document-property-body .document-property-key {
+    margin-left: 0;
+  }
+
+  ol.document-list li.document-list-item ol.document-property-body li.document-property.array.expanded > ol.document-property-body,
+  ol.document-list li.document-list-item ol.document-property-body li.document-property.object.expanded > ol.document-property-body {
+    margin-left: 16px;
+  }
+
+  ol.document-list li.document-list-item ol.document-property-body li.document-property.array.expanded,
+  ol.document-list li.document-list-item ol.document-property-body li.document-property.object.expanded {
+    margin-left: 0;
+  }
+
+  ol.document-list li.document-list-item ol.document-property-body li.document-property.array,
+  ol.document-list li.document-list-item ol.document-property-body li.document-property.object {
+    margin-left: 0;
+  }
+  // end hacks
+
   .summary-container {
     background: @pw;
     padding: 12px;
@@ -59,7 +81,6 @@
       float: left;
       margin-right: 24px;
     }
-
   }
 
   i.link {

src/app/index.less

@@ -22,3 +22,5 @@
 @import "../auto-update/index.less";
 @import "../help/index.less";
 @import "metrics/index.less";
+
+@import "../internal-packages/crud/styles/crud.less";

src/app/models/preferences.js

@@ -144,6 +144,14 @@ var Preferences = Model.extend(storageMixin, {
       required: true,
       default: false
     },
+    /**
+     * Allow single document CRUD.
+     */
+    singleDocumentCrud: {
+      type: 'boolean',
+      required: true,
+      default: false
+    },
     /**
      * Switches to enable/disable various authentication / ssl types
      *

src/app/styles/caret.less

@@ -2,7 +2,6 @@
   display: inline-block;
   width: 0;
   height: 0;
-  margin-left: 2px;
   vertical-align: middle;
 }
 .caret-down {

src/app/styles/palette.less

@@ -44,6 +44,7 @@
 @pw: #fff;
 @cautionOrange: @alertOrange;
 @errorBackground: #fdd0d1;
+@greenBg: #e9f2e3;
 
 /* Text Colors */
 /* default text color is @gray1 */
@@ -76,7 +77,10 @@
 
 /* Alert Colors */
 @alertOrange: #fbb129;
+@alertOrangeBg: #fff4dc;
+@alertOrangeBorder: #a06c29;
 @alertRed: #ef4c4c;
+@alertRedBg: #feeded;
 @alertBlue: #43b1e5;
 
 /* Semantic Colors */

src/internal-packages/crud/lib/actions.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const Reflux = require('reflux');
+
+const Actions = Reflux.createActions([
+  'documentRemoved',
+  'openInsertDocumentDialog',
+  'insertDocument'
+]);
+
+module.exports = Actions;

src/internal-packages/crud/lib/component/binary-value.jsx

@@ -0,0 +1,71 @@
+'use strict';
+
+const React = require('react');
+const truncate = require('hadron-component-registry').truncate;
+
+/**
+ * Base 64 constant.
+ */
+const BASE_64 = 'base64';
+
+/**
+ * The new UUID type.
+ */
+const UUID = 4;
+
+/**
+ * The old UUID type.
+ */
+const UUID_OLD = 3;
+
+/**
+ * The document value class.
+ */
+const VALUE_CLASS = 'document-property-value';
+
+/**
+ * Binary value component.
+ */
+class BinaryValue extends React.Component {
+
+  /**
+   * The component constructor.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+    this.value = props.element.currentValue;
+  }
+
+  /**
+   * Render a single binary value.
+   *
+   * @returns {React.Component} The element component.
+   */
+  render() {
+    return (
+      <div className={VALUE_CLASS}>
+        {this.renderValue()}
+      </div>
+    );
+  }
+
+  /**
+   * Render the value.
+   *
+   * @returns {Component} The component.
+   */
+  renderValue() {
+    var type = this.value.sub_type;
+    var buffer = this.value.buffer;
+    if (type === UUID || type === UUID_OLD) {
+      return `Binary('${truncate(buffer.toString())}')`;
+    }
+    return `Binary('${truncate(buffer.toString(BASE_64))}')`;
+  }
+}
+
+BinaryValue.displayName = 'BinaryValue';
+
+module.exports = BinaryValue;

src/internal-packages/crud/lib/component/cancel-edit-button.jsx

@@ -0,0 +1,38 @@
+'use strict';
+
+const React = require('react');
+
+/**
+ * Component for the cancel button.
+ */
+class CancelEditButton extends React.Component {
+
+  /**
+   * The component constructor.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+  }
+
+  /**
+   * Render the button.
+   *
+   * @returns {Component} The button component.
+   */
+  render() {
+    return (
+      <button
+        className='btn btn-link btn-xs cancel'
+        type='button'
+        onClick={this.props.handler}>
+        Cancel
+      </button>
+    );
+  }
+}
+
+CancelEditButton.displayName = 'CancelEditButton';
+
+module.exports = CancelEditButton;

src/internal-packages/crud/lib/component/cancel-insert-button.jsx

@@ -0,0 +1,38 @@
+'use strict';
+
+const React = require('react');
+
+/**
+ * Component for the cancel button.
+ */
+class CancelInsertButton extends React.Component {
+
+  /**
+   * The component constructor.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+  }
+
+  /**
+   * Render the button.
+   *
+   * @returns {Component} The button component.
+   */
+  render() {
+    return (
+      <button
+        className='btn btn-default btn-xs cancel'
+        type='button'
+        onClick={this.props.handler}>
+        Cancel
+      </button>
+    );
+  }
+}
+
+CancelInsertButton.displayName = 'CancelInsertButton';
+
+module.exports = CancelInsertButton;

src/internal-packages/crud/lib/component/clone-document-button.jsx

@@ -0,0 +1,35 @@
+'use strict';
+
+const React = require('react');
+
+/**
+ * Component for the clone document button.
+ */
+class CloneDocumentButton extends React.Component {
+
+  /**
+   * The component constructor.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+  }
+
+  /**
+   * Render the button.
+   *
+   * @returns {Component} The button component.
+   */
+  render() {
+    return (
+      <button type='button' onClick={this.props.handler} title='Clone Document'>
+        <i className="fa fa-clone" aria-hidden="true"></i>
+      </button>
+    );
+  }
+}
+
+CloneDocumentButton.displayName = 'CloneDocumentButton';
+
+module.exports = CloneDocumentButton;