INT-1160: Refactoring buttons (#427)

* INT-1160: Refactoring buttons

* Incorporate button changes from Marc

* Fix bug with length on null fields

* Check namespace in should component update

* Bring back treasure hunt

(cherry picked from commit 3718cbf)

Author: durran

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

@@ -2,9 +2,7 @@
 
 const React = require('react');
 const app = require('ampersand-app');
-const EditDocumentButton = require('./edit-document-button');
-const DeleteDocumentButton = require('./delete-document-button');
-const CloneDocumentButton = require('./clone-document-button');
+const IconButton = require('./icon-button');
 
 /**
  * The feature flag.
@@ -34,9 +32,18 @@ class DocumentActions extends React.Component {
     if (app.isFeatureEnabled(FEATURE)) {
       return (
         <div className='document-actions'>
-          <EditDocumentButton handler={this.props.edit} />
-          <DeleteDocumentButton handler={this.props.remove} />
-          <CloneDocumentButton handler={this.props.clone} />
+          <IconButton
+            title='Edit Document'
+            iconClassName='fa fa-pencil'
+            clickHandler={this.props.edit} />
+          <IconButton
+            title='Delete Document'
+            iconClassName='fa fa-trash-o'
+            clickHandler={this.props.remove} />
+          <IconButton
+            title='Clone Document'
+            iconClassName='fa fa-clone'
+            clickHandler={this.props.clone} />
         </div>
       );
     }

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

@@ -3,8 +3,7 @@
 const _ = require('lodash');
 const React = require('react');
 const Element = require('hadron-document').Element;
-const CancelEditButton = require('./cancel-edit-button');
-const UpdateButton = require('./update-button');
+const TextButton = require('./text-button');
 
 /**
  * The progress mode.
@@ -169,8 +168,14 @@ class DocumentFooter extends React.Component {
           {this.state.message}
         </div>
         <div className='document-footer-actions'>
-          <CancelEditButton handler={this.handleCancel.bind(this)} />
-          <UpdateButton handler={this.handleUpdate.bind(this)} />
+          <TextButton
+            className='btn btn-link btn-xs cancel'
+            text='Cancel'
+            clickHandler={this.handleCancel.bind(this)} />
+          <TextButton
+            className='btn btn-default btn-xs update'
+            text='Update'
+            clickHandler={this.handleUpdate.bind(this)} />
         </div>
       </div>
     );

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

@@ -7,6 +7,7 @@ const app = require('ampersand-app');
 const Action = require('hadron-action');
 const ObjectID = require('bson').ObjectID;
 const Document = require('./document');
+const NamespaceStore = require('hadron-reflux-store').NamespaceStore;
 const ResetDocumentListStore = require('../store/reset-document-list-store');
 const LoadMoreDocumentsStore = require('../store/load-more-documents-store');
 const RemoveDocumentStore = require('../store/remove-document-store');
@@ -68,7 +69,7 @@ class DocumentList extends React.Component {
    */
   constructor(props) {
     super(props);
-    this.state = { docs: [], nextSkip: 0 };
+    this.state = { docs: [], nextSkip: 0, namespace: NamespaceStore.ns };
   }
 
   /**
@@ -101,7 +102,8 @@ class DocumentList extends React.Component {
       docs: this.renderDocuments(documents),
       nextSkip: documents.length,
       count: count,
-      loadedCount: documents.length
+      loadedCount: documents.length,
+      namespace: NamespaceStore.ns
     });
   }
 
@@ -212,7 +214,8 @@ class DocumentList extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
     return (nextState.docs.length !== this.state.docs.length) ||
       (nextState.nextSkip !== this.state.nextSkip) ||
-      (nextState.loadedCount !== this.state.loadedCount);
+      (nextState.loadedCount !== this.state.loadedCount) ||
+      (nextState.namespace !== this.state.namespace);
   }
 
   /**

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

@@ -41,7 +41,7 @@ class EditableValue extends React.Component {
       <input
         ref={(c) => this._node = c}
         type='text'
-        size={this.element.currentValue.length}
+        size={this.element.currentValue ? this.element.currentValue.length : 5}
         className={this.style()}
         onBlur={this.handleBlur.bind(this)}
         onFocus={this.handleFocus.bind(this)}

src/internal-packages/crud/lib/component/document-actions.jsx

@@ -0,0 +1,53 @@
+'use strict';
+
+const React = require('react');
+
+/**
+ * The button constant.
+ */
+const BUTTON = 'button';
+
+/**
+ * Component for a button with an icon.
+ */
+class IconButton 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}
+        title={this.props.title}
+        className='btn btn-default btn-xs'
+        onClick={this.props.clickHandler}>
+        <i className={this.props.iconClassName} aria-hidden='true'></i>
+      </button>
+    );
+  }
+
+  /**
+   * By default should not need to to re-render itself.
+   *
+   * @returns {Boolean} Always false.
+   */
+  shouldComponentUpdate() {
+    return false;
+  }
+}
+
+IconButton.displayName = 'IconButton';
+
+module.exports = IconButton;