From e5384ed35b85857dc0ea34a6b57d13dda2e21440 Mon Sep 17 00:00:00 2001 From: Durran Jordan Date: Mon, 27 Jun 2016 14:33:35 -0400 Subject: [PATCH 1/5] INT-1160: Refactoring buttons --- .../crud/lib/component/cancel-edit-button.jsx | 45 ---------------- .../lib/component/cancel-insert-button.jsx | 45 ---------------- .../lib/component/clone-document-button.jsx | 42 --------------- .../lib/component/delete-document-button.jsx | 42 --------------- .../crud/lib/component/document-actions.jsx | 19 ++++--- .../crud/lib/component/document-footer.jsx | 13 +++-- .../lib/component/edit-document-button.jsx | 42 --------------- .../crud/lib/component/icon-button.jsx | 52 +++++++++++++++++++ .../crud/lib/component/insert-button.jsx | 45 ---------------- .../lib/component/insert-document-dialog.jsx | 13 +++-- .../component/open-insert-dialog-button.jsx | 45 ---------------- .../crud/lib/component/remove-button.jsx | 38 -------------- .../lib/component/remove-document-footer.jsx | 13 +++-- .../crud/lib/component/sampling-message.jsx | 34 +++--------- .../crud/lib/component/text-button.jsx | 52 +++++++++++++++++++ .../crud/lib/component/update-button.jsx | 38 -------------- .../lib/store/reset-document-list-store.js | 18 +++---- 17 files changed, 158 insertions(+), 438 deletions(-) delete mode 100644 src/internal-packages/crud/lib/component/cancel-edit-button.jsx delete mode 100644 src/internal-packages/crud/lib/component/cancel-insert-button.jsx delete mode 100644 src/internal-packages/crud/lib/component/clone-document-button.jsx delete mode 100644 src/internal-packages/crud/lib/component/delete-document-button.jsx delete mode 100644 src/internal-packages/crud/lib/component/edit-document-button.jsx create mode 100644 src/internal-packages/crud/lib/component/icon-button.jsx delete mode 100644 src/internal-packages/crud/lib/component/insert-button.jsx delete mode 100644 src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx delete mode 100644 src/internal-packages/crud/lib/component/remove-button.jsx create mode 100644 src/internal-packages/crud/lib/component/text-button.jsx delete mode 100644 src/internal-packages/crud/lib/component/update-button.jsx diff --git a/src/internal-packages/crud/lib/component/cancel-edit-button.jsx b/src/internal-packages/crud/lib/component/cancel-edit-button.jsx deleted file mode 100644 index d3b3288f589..00000000000 --- a/src/internal-packages/crud/lib/component/cancel-edit-button.jsx +++ /dev/null @@ -1,45 +0,0 @@ -'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 ( - - ); - } - - /** - * Never needs to re-render. - */ - shouldComponentUpdate() { - return false; - } -} - -CancelEditButton.displayName = 'CancelEditButton'; - -module.exports = CancelEditButton; diff --git a/src/internal-packages/crud/lib/component/cancel-insert-button.jsx b/src/internal-packages/crud/lib/component/cancel-insert-button.jsx deleted file mode 100644 index 07470d320a4..00000000000 --- a/src/internal-packages/crud/lib/component/cancel-insert-button.jsx +++ /dev/null @@ -1,45 +0,0 @@ -'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 ( - - ); - } - - /** - * Never needs to re-render. - */ - shouldComponentUpdate() { - return false; - } -} - -CancelInsertButton.displayName = 'CancelInsertButton'; - -module.exports = CancelInsertButton; diff --git a/src/internal-packages/crud/lib/component/clone-document-button.jsx b/src/internal-packages/crud/lib/component/clone-document-button.jsx deleted file mode 100644 index 5b92a6cc436..00000000000 --- a/src/internal-packages/crud/lib/component/clone-document-button.jsx +++ /dev/null @@ -1,42 +0,0 @@ -'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 ( - - ); - } - - /** - * Never needs to re-render. - */ - shouldComponentUpdate() { - return false; - } -} - -CloneDocumentButton.displayName = 'CloneDocumentButton'; - -module.exports = CloneDocumentButton; diff --git a/src/internal-packages/crud/lib/component/delete-document-button.jsx b/src/internal-packages/crud/lib/component/delete-document-button.jsx deleted file mode 100644 index 90d6b5226f7..00000000000 --- a/src/internal-packages/crud/lib/component/delete-document-button.jsx +++ /dev/null @@ -1,42 +0,0 @@ -'use strict'; - -const React = require('react'); - -/** - * Component for the edit document button. - */ -class DeleteDocumentButton 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 ( - - ); - } - - /** - * Never needs to re-render. - */ - shouldComponentUpdate() { - return false; - } -} - -DeleteDocumentButton.displayName = 'DeleteDocumentButton'; - -module.exports = DeleteDocumentButton; diff --git a/src/internal-packages/crud/lib/component/document-actions.jsx b/src/internal-packages/crud/lib/component/document-actions.jsx index 7b073d80666..59d692395db 100644 --- a/src/internal-packages/crud/lib/component/document-actions.jsx +++ b/src/internal-packages/crud/lib/component/document-actions.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 (
- - - + + +
); } diff --git a/src/internal-packages/crud/lib/component/document-footer.jsx b/src/internal-packages/crud/lib/component/document-footer.jsx index 8a3cec0b642..3f82eeb0efe 100644 --- a/src/internal-packages/crud/lib/component/document-footer.jsx +++ b/src/internal-packages/crud/lib/component/document-footer.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}
- - + +
); diff --git a/src/internal-packages/crud/lib/component/edit-document-button.jsx b/src/internal-packages/crud/lib/component/edit-document-button.jsx deleted file mode 100644 index 26d480b0078..00000000000 --- a/src/internal-packages/crud/lib/component/edit-document-button.jsx +++ /dev/null @@ -1,42 +0,0 @@ -'use strict'; - -const React = require('react'); - -/** - * Component for the edit document button. - */ -class EditDocumentButton 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 ( - - ); - } - - /** - * Never needs to re-render. - */ - shouldComponentUpdate() { - return false; - } -} - -EditDocumentButton.displayName = 'EditDocumentButton'; - -module.exports = EditDocumentButton; diff --git a/src/internal-packages/crud/lib/component/icon-button.jsx b/src/internal-packages/crud/lib/component/icon-button.jsx new file mode 100644 index 00000000000..7980733516a --- /dev/null +++ b/src/internal-packages/crud/lib/component/icon-button.jsx @@ -0,0 +1,52 @@ +'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 ( + + ); + } + + /** + * By default should not need to to re-render itself. + * + * @returns {Boolean} Always false. + */ + shouldComponentUpdate() { + return false; + } +} + +IconButton.displayName = 'IconButton'; + +module.exports = IconButton; diff --git a/src/internal-packages/crud/lib/component/insert-button.jsx b/src/internal-packages/crud/lib/component/insert-button.jsx deleted file mode 100644 index eb60f64e8eb..00000000000 --- a/src/internal-packages/crud/lib/component/insert-button.jsx +++ /dev/null @@ -1,45 +0,0 @@ -'use strict'; - -const React = require('react'); - -/** - * Component for the insert button. - */ -class InsertButton 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 ( - - ); - } - - /** - * Never needs to re-render. - */ - shouldComponentUpdate() { - return false; - } -} - -InsertButton.displayName = 'InsertButton'; - -module.exports = InsertButton; diff --git a/src/internal-packages/crud/lib/component/insert-document-dialog.jsx b/src/internal-packages/crud/lib/component/insert-document-dialog.jsx index 39bf9f65240..a68312182d3 100644 --- a/src/internal-packages/crud/lib/component/insert-document-dialog.jsx +++ b/src/internal-packages/crud/lib/component/insert-document-dialog.jsx @@ -4,8 +4,7 @@ const React = require('react'); const Modal = require('react-bootstrap').Modal; const OpenInsertDocumentDialogStore = require('../store/open-insert-document-dialog-store'); const InsertDocument = require('./insert-document'); -const CancelInsertButton = require('./cancel-insert-button'); -const InsertButton = require('./insert-button'); +const TextButton = require('./text-button'); const Actions = require('../actions'); /** @@ -56,8 +55,14 @@ class InsertDocumentDialog extends React.Component { - - + + ); diff --git a/src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx b/src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx deleted file mode 100644 index 753c79f304a..00000000000 --- a/src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx +++ /dev/null @@ -1,45 +0,0 @@ -'use strict'; - -const React = require('react'); - -/** - * Component for the open insert dialog button. - */ -class OpenInsertDialogButton 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 ( - - ); - } - - /** - * Never needs to re-render. - */ - shouldComponentUpdate() { - return false; - } -} - -OpenInsertDialogButton.displayName = 'OpenInsertDialogButton'; - -module.exports = OpenInsertDialogButton; diff --git a/src/internal-packages/crud/lib/component/remove-button.jsx b/src/internal-packages/crud/lib/component/remove-button.jsx deleted file mode 100644 index 78d07191261..00000000000 --- a/src/internal-packages/crud/lib/component/remove-button.jsx +++ /dev/null @@ -1,38 +0,0 @@ -'use strict'; - -const React = require('react'); - -/** - * Component for the update button. - */ -class RemoveButton 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 ( - - ); - } -} - -RemoveButton.displayName = 'RemoveButton'; - -module.exports = RemoveButton; diff --git a/src/internal-packages/crud/lib/component/remove-document-footer.jsx b/src/internal-packages/crud/lib/component/remove-document-footer.jsx index 0bd46bc8f16..a76ddd5dbea 100644 --- a/src/internal-packages/crud/lib/component/remove-document-footer.jsx +++ b/src/internal-packages/crud/lib/component/remove-document-footer.jsx @@ -1,8 +1,7 @@ 'use strict'; const React = require('react'); -const CancelEditButton = require('./cancel-edit-button'); -const RemoveButton = require('./remove-button'); +const TextButton = require('./text-button'); /** * The progress mode. @@ -136,8 +135,14 @@ class RemoveDocumentFooter extends React.Component { {this.state.message}
- - + +
); diff --git a/src/internal-packages/crud/lib/component/sampling-message.jsx b/src/internal-packages/crud/lib/component/sampling-message.jsx index bea12790e4d..6a0e78138a7 100644 --- a/src/internal-packages/crud/lib/component/sampling-message.jsx +++ b/src/internal-packages/crud/lib/component/sampling-message.jsx @@ -3,9 +3,7 @@ const React = require('react'); const app = require('ampersand-app'); const ResetDocumentListStore = require('../store/reset-document-list-store'); -const RemoveDocumentStore = require('../store/remove-document-store'); -const InsertDocumentStore = require('../store/insert-document-store'); -const OpenInsertDialogButton = require('./open-insert-dialog-button'); +const TextButton = require('./text-button'); /** * The feature flag. @@ -22,8 +20,6 @@ class SamplingMessage extends React.Component { */ componentDidMount() { this.unsubscribeReset = ResetDocumentListStore.listen(this.handleReset.bind(this)); - // this.unsubscribeRemove = RemoveDocumentStore.listen(this.handleRemove.bind(this)); - // this.unsibscribeInsert = InsertDocumentStore.listen(this.handleInsert.bind(this)); } /** @@ -31,8 +27,6 @@ class SamplingMessage extends React.Component { */ componentWillUnmount() { this.unsubscribeReset(); - // this.unsubscribeRemove(); - // this.unsubscribeInsert(); } /** @@ -55,25 +49,6 @@ class SamplingMessage extends React.Component { this.setState({ count: count }); } - /** - * Handles removal of a document from the document list. - */ - handleRemove() { - // this.setState({ count: this.state.count - 1 }); - } - - /** - * Handle insert of a new document. - * - * @param {Boolean} success - If the insert was successful. - * @param {Object} object - The new document or error. - */ - handleInsert(success, object) { - // if (success) { - // this.setState({ count: this.state.count + 1 }); - // } - } - /** * Render the sampling message. * @@ -94,7 +69,12 @@ class SamplingMessage extends React.Component { */ renderInsertButton() { if (app.isFeatureEnabled(FEATURE)) { - return (); + return ( + + ); } } diff --git a/src/internal-packages/crud/lib/component/text-button.jsx b/src/internal-packages/crud/lib/component/text-button.jsx new file mode 100644 index 00000000000..ea17014b28a --- /dev/null +++ b/src/internal-packages/crud/lib/component/text-button.jsx @@ -0,0 +1,52 @@ +'use strict'; + +const React = require('react'); + +/** + * The button constant. + */ +const BUTTON = 'button'; + +/** + * Component for a button with text. + */ +class TextButton 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 ( + + ); + } + + /** + * By default should not need to to re-render itself. + * + * @returns {Boolean} Always false. + */ + shouldComponentUpdate() { + return false; + } +} + +TextButton.displayName = 'TextButton'; + +module.exports = TextButton; diff --git a/src/internal-packages/crud/lib/component/update-button.jsx b/src/internal-packages/crud/lib/component/update-button.jsx deleted file mode 100644 index 874f5a56733..00000000000 --- a/src/internal-packages/crud/lib/component/update-button.jsx +++ /dev/null @@ -1,38 +0,0 @@ -'use strict'; - -const React = require('react'); - -/** - * Component for the update button. - */ -class UpdateButton 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 ( - - ); - } -} - -UpdateButton.displayName = 'UpdateButton'; - -module.exports = UpdateButton; diff --git a/src/internal-packages/crud/lib/store/reset-document-list-store.js b/src/internal-packages/crud/lib/store/reset-document-list-store.js index b7db8d25cda..a84922bd9ee 100644 --- a/src/internal-packages/crud/lib/store/reset-document-list-store.js +++ b/src/internal-packages/crud/lib/store/reset-document-list-store.js @@ -24,18 +24,14 @@ const ResetDocumentListStore = Reflux.createStore({ * @param {Object} filter - The query filter. */ reset: function(filter) { - app.dataService.count(NamespaceStore.ns, filter, {}, (err, count) => { - var options = { limit: 20, sort: [[ '_id', 1 ]] }; - app.dataService.find(NamespaceStore.ns, filter, options, (error, documents) => { - if (app.isFeatureEnabled('treasureHunt')) { - if (documents && documents.length === 1 && - documents[0]._id.toHexString() === '576cd312d141109b51ae6b86') { - metrics.track('Treasure Hunt', 'stage7'); - } - } - this.trigger(documents, count); + if (NamespaceStore.ns) { + app.dataService.count(NamespaceStore.ns, filter, {}, (err, count) => { + var options = { limit: 20, sort: [[ '_id', 1 ]] }; + app.dataService.find(NamespaceStore.ns, filter, options, (error, documents) => { + this.trigger(documents, count); + }); }); - }); + } }, }); From b1c5b33e52174b6d69d71f2b844a0d1f0c15fbdf Mon Sep 17 00:00:00 2001 From: Durran Jordan Date: Mon, 27 Jun 2016 18:50:46 -0400 Subject: [PATCH 2/5] Incorporate button changes from Marc --- src/internal-packages/crud/lib/component/icon-button.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/internal-packages/crud/lib/component/icon-button.jsx b/src/internal-packages/crud/lib/component/icon-button.jsx index 7980733516a..3611a9ee6d7 100644 --- a/src/internal-packages/crud/lib/component/icon-button.jsx +++ b/src/internal-packages/crud/lib/component/icon-button.jsx @@ -31,6 +31,7 @@ class IconButton extends React.Component { From 1a9d7f3c6cdca18ece7fa7ef67b070cf3dddd6d7 Mon Sep 17 00:00:00 2001 From: Durran Jordan Date: Tue, 28 Jun 2016 13:30:01 -0400 Subject: [PATCH 3/5] Fix bug with length on null fields --- src/internal-packages/crud/lib/component/editable-value.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/internal-packages/crud/lib/component/editable-value.jsx b/src/internal-packages/crud/lib/component/editable-value.jsx index c903053ab22..f7d498c05eb 100644 --- a/src/internal-packages/crud/lib/component/editable-value.jsx +++ b/src/internal-packages/crud/lib/component/editable-value.jsx @@ -41,7 +41,7 @@ class EditableValue extends React.Component { 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)} From 871a4647e641a4e161deec26765e4eefb57946e2 Mon Sep 17 00:00:00 2001 From: Durran Jordan Date: Tue, 28 Jun 2016 14:08:20 -0400 Subject: [PATCH 4/5] Check namespace in should component update --- .../crud/lib/component/document-list.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx index 2f265ac2572..f038007d62e 100644 --- a/src/internal-packages/crud/lib/component/document-list.jsx +++ b/src/internal-packages/crud/lib/component/document-list.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); } /** From d9854d3d1a8558d1b461349f7468193ca36c29fc Mon Sep 17 00:00:00 2001 From: Durran Jordan Date: Tue, 28 Jun 2016 15:10:51 -0400 Subject: [PATCH 5/5] Bring back treasure hunt --- .../crud/lib/store/reset-document-list-store.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/internal-packages/crud/lib/store/reset-document-list-store.js b/src/internal-packages/crud/lib/store/reset-document-list-store.js index a84922bd9ee..bf08540f980 100644 --- a/src/internal-packages/crud/lib/store/reset-document-list-store.js +++ b/src/internal-packages/crud/lib/store/reset-document-list-store.js @@ -28,6 +28,12 @@ const ResetDocumentListStore = Reflux.createStore({ app.dataService.count(NamespaceStore.ns, filter, {}, (err, count) => { var options = { limit: 20, sort: [[ '_id', 1 ]] }; app.dataService.find(NamespaceStore.ns, filter, options, (error, documents) => { + if (app.isFeatureEnabled('treasureHunt')) { + if (documents && documents.length === 1 && + documents[0]._id.toHexString() === '576cd312d141109b51ae6b86') { + metrics.track('Treasure Hunt', 'stage7'); + } + } this.trigger(documents, count); }); });