From 493137c1de32fb2127ea703f5260c6afcae281bd Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Tue, 1 Nov 2016 15:47:31 +1100 Subject: [PATCH 01/17] COMPASS-221 changed heading for field options --- .../indexes/lib/component/create-index-modal.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/internal-packages/indexes/lib/component/create-index-modal.jsx b/src/internal-packages/indexes/lib/component/create-index-modal.jsx index 013e1611c1b..34375b99599 100644 --- a/src/internal-packages/indexes/lib/component/create-index-modal.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-modal.jsx @@ -210,7 +210,7 @@ class CreateIndexModal extends React.Component {
- Index Create + Create Index @@ -221,7 +221,7 @@ class CreateIndexModal extends React.Component { option={'name'} />
-

Add fields and types

+

Configure the index definition

{this.getSelectedFields()} From 5dd9bf229a8873d1044f6d3d9d1cc535540d8be6 Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Tue, 1 Nov 2016 16:58:52 +1100 Subject: [PATCH 02/17] COMPASS-221 rough implementation of designs --- .../lib/component/create-index-field.jsx | 70 +++++++++++-------- .../lib/component/create-index-modal.jsx | 2 +- .../lib/component/selected-index-field.jsx | 20 +++--- 3 files changed, 53 insertions(+), 39 deletions(-) diff --git a/src/internal-packages/indexes/lib/component/create-index-field.jsx b/src/internal-packages/indexes/lib/component/create-index-field.jsx index 74df0d96fd8..2a4660e6ddd 100644 --- a/src/internal-packages/indexes/lib/component/create-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-field.jsx @@ -4,6 +4,8 @@ const DropdownButton = require('react-bootstrap').DropdownButton; const MenuItem = require('react-bootstrap').MenuItem; const Action = require('../action/index-actions'); +const debug = require('debug')('mongodb-compass:component:indexes:create-modal'); + /** * Current allowed types for indexes. */ @@ -23,8 +25,8 @@ class CreateIndexField extends React.Component { super(props); this.state = { // default titles shown in dropdown - field: 'Add a Field', - type: '1 (asc)' + field: 'Select a field name', + type: 'Select a type' }; } @@ -56,9 +58,11 @@ class CreateIndexField extends React.Component { handleSubmit(evt) { evt.preventDefault(); evt.stopPropagation(); - if (this.state.field !== 'Add a Field') { + + debug('handling submit: ', this.state); + if (this.state.field !== 'Select a field name') { Action.updateField(this.state.field, this.state.type, 'add'); - this.setState({field: 'Add a Field', type: '1 (asc)'}); + this.setState({field: 'Select a field name', type: 'Select a type'}); } } @@ -78,34 +82,42 @@ class CreateIndexField extends React.Component { */ render() { return ( -
-
- - - {this.getDropdownOptions(this.props.fields)} - - -
-
- - - {this.getDropdownOptions(INDEX_TYPES)} - - +
+
+
+ + + {this.getDropdownOptions(this.props.fields)} + + +
+
+ + + {this.getDropdownOptions(INDEX_TYPES)} + + +
+
+ +
-
+
diff --git a/src/internal-packages/indexes/lib/component/create-index-modal.jsx b/src/internal-packages/indexes/lib/component/create-index-modal.jsx index 34375b99599..0a1c1866bc1 100644 --- a/src/internal-packages/indexes/lib/component/create-index-modal.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-modal.jsx @@ -222,9 +222,9 @@ class CreateIndexModal extends React.Component {

Configure the index definition

+ {this.getSelectedFields()} - {this.getSelectedFields()}
-
- -
- {this.props.field.name} -
-
- {this.props.field.type} -
- +
+ + + +
+
+ + +
-
+
+
+ + + {this.getDropdownOptions(this.props.fields)} + +
-
+
+ + + {this.getDropdownOptions(INDEX_TYPES)} + + +
+
+ +
+
diff --git a/src/internal-packages/indexes/lib/component/selected-index-field.jsx b/src/internal-packages/indexes/lib/component/selected-index-field.jsx index caf0252d094..acf9ee56b52 100644 --- a/src/internal-packages/indexes/lib/component/selected-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/selected-index-field.jsx @@ -1,7 +1,5 @@ const React = require('react'); -const Panel = require('react-bootstrap').Panel; const Action = require('../action/index-actions'); -const ButtonToolbar = require('react-bootstrap').ButtonToolbar; const Button = require('react-bootstrap').Button; /** @@ -38,21 +36,17 @@ class SelectedIndexField extends React.Component { return (
- - - +
- - - +
- +
); diff --git a/src/internal-packages/indexes/styles/create-index-modal.less b/src/internal-packages/indexes/styles/create-index-modal.less index 89e54ee6bae..88adc0cd281 100644 --- a/src/internal-packages/indexes/styles/create-index-modal.less +++ b/src/internal-packages/indexes/styles/create-index-modal.less @@ -30,6 +30,7 @@ } .create-index-field { + .create-index-field-dropdown-name { width: 164px; text-align: left; @@ -37,10 +38,14 @@ } .create-index-field-dropdown-type { - width: 102px; + width: 108px; text-align: left; text-transform: none; } + + .create-index-field-add { + margin-top: 10px; + } } input { @@ -146,8 +151,21 @@ } } + .selected-index-field-name { + width: 164px; + text-align: left; + text-transform: none; + } + + .selected-index-field-type { + width: 108px; + text-align: left; + text-transform: none; + } + .selected-index-btn { - margin-top: 10px; + margin-top: 5px; + margin-bottom: 5px; } } From cc416edba5354fcd8ba7f71edf0c64799c91632b Mon Sep 17 00:00:00 2001 From: Sean Oh Date: Wed, 2 Nov 2016 12:25:51 -0400 Subject: [PATCH 04/17] Quick style fixes --- .../lib/component/create-index-button.jsx | 2 +- .../lib/component/create-index-field.jsx | 2 +- .../indexes/styles/create-index-modal.less | 18 ++++++++++++++++-- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/internal-packages/indexes/lib/component/create-index-button.jsx b/src/internal-packages/indexes/lib/component/create-index-button.jsx index 1caf115ab65..e5cff9535b0 100644 --- a/src/internal-packages/indexes/lib/component/create-index-button.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-button.jsx @@ -48,7 +48,7 @@ class CreateIndexButton extends React.Component { className="btn btn-default btn-sm" type="button" onClick={this.clickCreateHandler.bind(this)}> - Add Index + Create Index
diff --git a/src/internal-packages/indexes/styles/create-index-modal.less b/src/internal-packages/indexes/styles/create-index-modal.less index 88adc0cd281..51a80efacf8 100644 --- a/src/internal-packages/indexes/styles/create-index-modal.less +++ b/src/internal-packages/indexes/styles/create-index-modal.less @@ -27,6 +27,18 @@ .create-index-fields { margin-bottom: 10px; + + .caret { + margin-top: 8px; + float: right; + } + + .col-md-6 { + .dropdown-menu { + max-height: 400px; + overflow: scroll; + } + } } .create-index-field { @@ -38,9 +50,10 @@ } .create-index-field-dropdown-type { - width: 108px; + width: 120px; text-align: left; text-transform: none; + margin-left: -7px; } .create-index-field-add { @@ -158,9 +171,10 @@ } .selected-index-field-type { - width: 108px; + width: 120px; text-align: left; text-transform: none; + margin-left: -7px; } .selected-index-btn { From 43dc5b2468897169b68b5b30034b85695ecf048a Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Sun, 6 Nov 2016 09:32:31 +1100 Subject: [PATCH 05/17] COMPASS-221 added some extra actions --- .../indexes/lib/action/index-actions.js | 6 ++++- .../indexes/lib/store/create-index-store.js | 23 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/internal-packages/indexes/lib/action/index-actions.js b/src/internal-packages/indexes/lib/action/index-actions.js index 54c3f62244c..c09e5de5419 100644 --- a/src/internal-packages/indexes/lib/action/index-actions.js +++ b/src/internal-packages/indexes/lib/action/index-actions.js @@ -9,7 +9,11 @@ const IndexActions = Reflux.createActions([ 'triggerIndexCreation', 'updateField', 'updateOption', - 'updateStatus' + 'updateStatus', + 'addRowIndex', + 'updateRowFieldName', + 'updateRowFieldType', + 'removeRowIndex' ]); module.exports = IndexActions; diff --git a/src/internal-packages/indexes/lib/store/create-index-store.js b/src/internal-packages/indexes/lib/store/create-index-store.js index 85d33183d45..3712001c4ed 100644 --- a/src/internal-packages/indexes/lib/store/create-index-store.js +++ b/src/internal-packages/indexes/lib/store/create-index-store.js @@ -4,6 +4,8 @@ const Action = require('../action/index-actions'); const NamespaceStore = require('hadron-reflux-store').NamespaceStore; const SchemaStore = require('../../../schema/lib/store'); +const debug = require('debug')('mongodb-compass:ddl:index:store'); + /** * The reflux store for storing the form for creating indexes. */ @@ -18,6 +20,10 @@ const CreateIndexStore = Reflux.createStore({ this.listenTo(Action.triggerIndexCreation, this.triggerIndexCreation); this.listenTo(Action.updateField, this.updateField); this.listenTo(Action.updateOption, this.updateOption); + this.listenTo(Action.addRowIndex, this.addRowIndex); + this.listenTo(Action.updateRowFieldName, this.updateRowFieldName); + this.listenTo(Action.updateRowFieldType, this.updateRowFieldType); + this.listenTo(Action.removeRowIndex, this.removeRowIndex); this.schemaFields = []; // fields in the current schema this.fields = []; // fields and types for new index this.options = {}; // options for new index @@ -159,7 +165,24 @@ const CreateIndexStore = Reflux.createStore({ this.options[option].value = value; } this.sendValues(); + }, + + addRowIndex: function() { + debug('adding a row index'); + }, + + updateRowFieldName: function(idx, name) { + debug('updating row at: ', idx, ' with name: ', name); + }, + + updateRowFieldType: function(idx, type) { + debug('updating row at: ', idx, ' with name: ', type); + }, + + removeRowIndex: function(idx) { + debug('removing row at: ', idx); } }); + module.exports = CreateIndexStore; From c824955717167bbfd454f2d106c8d8ec73aaf70e Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Sun, 6 Nov 2016 15:26:09 +1100 Subject: [PATCH 06/17] COMPASS-221 implemented add create index from store to ui --- .../indexes/lib/action/index-actions.js | 8 ++-- .../lib/component/create-index-field.jsx | 37 +++++----------- .../lib/component/create-index-modal.jsx | 42 +++++++++++++++---- .../indexes/lib/store/create-index-store.js | 18 ++++---- 4 files changed, 59 insertions(+), 46 deletions(-) diff --git a/src/internal-packages/indexes/lib/action/index-actions.js b/src/internal-packages/indexes/lib/action/index-actions.js index c09e5de5419..cb0d0efd036 100644 --- a/src/internal-packages/indexes/lib/action/index-actions.js +++ b/src/internal-packages/indexes/lib/action/index-actions.js @@ -10,10 +10,10 @@ const IndexActions = Reflux.createActions([ 'updateField', 'updateOption', 'updateStatus', - 'addRowIndex', - 'updateRowFieldName', - 'updateRowFieldType', - 'removeRowIndex' + 'addIndexField', + 'updateFieldName', + 'updateFieldType', + 'removeIndexField' ]); module.exports = IndexActions; diff --git a/src/internal-packages/indexes/lib/component/create-index-field.jsx b/src/internal-packages/indexes/lib/component/create-index-field.jsx index 6cd42a2d3ee..caa14effa3e 100644 --- a/src/internal-packages/indexes/lib/component/create-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-field.jsx @@ -2,7 +2,7 @@ const React = require('react'); const ButtonToolbar = require('react-bootstrap').ButtonToolbar; const DropdownButton = require('react-bootstrap').DropdownButton; const MenuItem = require('react-bootstrap').MenuItem; -const Action = require('../action/index-actions'); +// const Action = require('../action/index-actions'); // const debug = require('debug')('mongodb-compass:component:indexes:create-modal'); @@ -23,10 +23,13 @@ class CreateIndexField extends React.Component { */ constructor(props) { super(props); + this.defaultName = 'Select a field name'; + this.defaultType = 'Select a type'; + this.state = { // default titles shown in dropdown - field: 'Select a field name', - type: 'Select a type' + name: this.defaultName, + type: this.defaultType }; } @@ -50,21 +53,6 @@ class CreateIndexField extends React.Component { this.setState({field: field}); } - /** - * Fire add field action to add field and type to add index form. - * - * @param {Object} evt - The click event. - */ - handleSubmit(evt) { - evt.preventDefault(); - evt.stopPropagation(); - - if (this.state.field !== 'Select a field name') { - Action.updateField(this.state.field, this.state.type, 'add'); - this.setState({field: 'Select a field name', type: 'Select a type'}); - } - } - /** * Set state to selected type on type change. * @@ -85,7 +73,7 @@ class CreateIndexField extends React.Component {
@@ -110,13 +98,6 @@ class CreateIndexField extends React.Component {
-
- -
); } @@ -125,7 +106,9 @@ class CreateIndexField extends React.Component { CreateIndexField.displayName = 'CreateIndexField'; CreateIndexField.propTypes = { - fields: React.PropTypes.array.isRequired + fields: React.PropTypes.array.isRequired, + field: React.PropTypes.object.isRequired, + idx: React.PropTypes.number.isRequired }; module.exports = CreateIndexField; diff --git a/src/internal-packages/indexes/lib/component/create-index-modal.jsx b/src/internal-packages/indexes/lib/component/create-index-modal.jsx index 0a1c1866bc1..a02af246094 100644 --- a/src/internal-packages/indexes/lib/component/create-index-modal.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-modal.jsx @@ -3,14 +3,13 @@ const React = require('react'); const Modal = require('react-bootstrap').Modal; const CreateIndexStore = require('../store/create-index-store'); const DDLStatusStore = require('../store/ddl-status-store'); -const SelectedIndexField = require('./selected-index-field'); const CreateIndexCheckbox = require('./create-index-checkbox'); const CreateIndexField = require('./create-index-field'); 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'); +const debug = require('debug')('mongodb-compass:ddl:index'); /** * The index options and parameters to display. @@ -98,11 +97,16 @@ class CreateIndexModal extends React.Component { * * @returns {Array} The React components for each field, or null if none are selected. */ - getSelectedFields() { + getIndexFields() { if (!this.state.fields.length) { return null; } - return this.state.fields.map((field, idx) => ); + return this.state.fields.map((field, idx) => + ); } /** @@ -171,6 +175,24 @@ class CreateIndexModal extends React.Component { this.setState({showOptions: !this.state.showOptions}); } + /** + * Fire add field action to add field and type to add index form. + * + * @param {Object} evt - The click event. + */ + handleSubmit(evt) { + evt.preventDefault(); + evt.stopPropagation(); + + debug('handle submit'); + Action.addIndexField(); + /* + if (this.state.field !== 'Select a field name') { + Action.updateField(this.state.field, this.state.type, 'add'); + this.setState({field: 'Select a field name', type: 'Select a type'}); + }*/ + } + /** * Render the create and cancel buttons. * @@ -222,9 +244,15 @@ class CreateIndexModal extends React.Component {

Configure the index definition

- {this.getSelectedFields()} - + {this.getIndexFields()} + +
+ +
Date: Sun, 6 Nov 2016 17:13:10 +1100 Subject: [PATCH 07/17] COMPASS-221 implemented updating field name and type --- .../lib/component/create-index-field.jsx | 25 +++++++++++-------- .../lib/component/create-index-modal.jsx | 19 +++++++++++--- .../indexes/lib/store/create-index-store.js | 16 +++++++++++- 3 files changed, 45 insertions(+), 15 deletions(-) diff --git a/src/internal-packages/indexes/lib/component/create-index-field.jsx b/src/internal-packages/indexes/lib/component/create-index-field.jsx index caa14effa3e..a838d632497 100644 --- a/src/internal-packages/indexes/lib/component/create-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-field.jsx @@ -2,7 +2,7 @@ const React = require('react'); const ButtonToolbar = require('react-bootstrap').ButtonToolbar; const DropdownButton = require('react-bootstrap').DropdownButton; const MenuItem = require('react-bootstrap').MenuItem; -// const Action = require('../action/index-actions'); +const Action = require('../action/index-actions'); // const debug = require('debug')('mongodb-compass:component:indexes:create-modal'); @@ -23,6 +23,7 @@ class CreateIndexField extends React.Component { */ constructor(props) { super(props); + /* this.defaultName = 'Select a field name'; this.defaultType = 'Select a type'; @@ -30,7 +31,7 @@ class CreateIndexField extends React.Component { // default titles shown in dropdown name: this.defaultName, type: this.defaultType - }; + };*/ } /** @@ -47,10 +48,11 @@ class CreateIndexField extends React.Component { /** * Set state to selected field on field change. * - * @param {string} field - The selected field. + * @param {string} name - The selected name. */ - handleFieldSelect(field) { - this.setState({field: field}); + selectName(name) { + // this.setState({name: name}); + Action.updateFieldName(this.props.idx, name); } /** @@ -58,8 +60,9 @@ class CreateIndexField extends React.Component { * * @param {string} type - The selected type. */ - handleTypeSelect(type) { - this.setState({type: type}); + selectType(type) { + // this.setState({type: type}); + Action.updateFieldType(this.props.idx, type); } /** @@ -73,10 +76,10 @@ class CreateIndexField extends React.Component {
+ onSelect={this.selectName.bind(this)}> {this.getDropdownOptions(this.props.fields)} @@ -84,10 +87,10 @@ class CreateIndexField extends React.Component {
+ onSelect={this.selectType.bind(this)}> {this.getDropdownOptions(INDEX_TYPES)} diff --git a/src/internal-packages/indexes/lib/component/create-index-modal.jsx b/src/internal-packages/indexes/lib/component/create-index-modal.jsx index a02af246094..8aec28c3d33 100644 --- a/src/internal-packages/indexes/lib/component/create-index-modal.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-modal.jsx @@ -21,6 +21,14 @@ const INDEX_OPTIONS = [ {name: 'partialFilterExpression', desc: 'Partial Filter Expression', param: true, paramUnit: ''} ]; +/** + * Default values for field name and type as presented in the UI + */ +const DEFAULT_FIELD = { + name: 'Select a field name', + type: 'Select a type' +}; + /** * Component for the create index modal. */ @@ -101,12 +109,17 @@ class CreateIndexModal extends React.Component { if (!this.state.fields.length) { return null; } - return this.state.fields.map((field, idx) => - { + const fieldUI = { + name: field.name === '' ? DEFAULT_FIELD.name : field.name, + type: field.type === '' ? DEFAULT_FIELD.type : field.type + }; + return (); + field={fieldUI} />); + }); } /** diff --git a/src/internal-packages/indexes/lib/store/create-index-store.js b/src/internal-packages/indexes/lib/store/create-index-store.js index 26d6cadfcc7..dbc60a1f30d 100644 --- a/src/internal-packages/indexes/lib/store/create-index-store.js +++ b/src/internal-packages/indexes/lib/store/create-index-store.js @@ -175,10 +175,24 @@ const CreateIndexStore = Reflux.createStore({ updateFieldName: function(idx, name) { debug('updating row at: ', idx, ' with name: ', name); + if (idx >= 0 && idx < this.fields.length) { + // check if field name already exists or no + if (this.fields.some(field => field.name === name)) { + // TODO show error to ui when existing name is being added to field + debug('field name: ', name, ' already exists'); + } else { + this.fields[idx].name = name; + } + } + this.sendValues(); }, updateFieldType: function(idx, type) { - debug('updating row at: ', idx, ' with name: ', type); + debug('updating row at: ', idx, ' with type: ', type); + if (idx >= 0 && idx < this.fields.length) { + this.fields[idx].type = type; + } + this.sendValues(); }, removeIndexField: function(idx) { From 24adf4ba13423e7848fc48b3ebe440a1bdfa35b7 Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Sun, 6 Nov 2016 17:40:26 +1100 Subject: [PATCH 08/17] COMPASS-221 set initial state for fields --- src/internal-packages/indexes/lib/store/create-index-store.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/internal-packages/indexes/lib/store/create-index-store.js b/src/internal-packages/indexes/lib/store/create-index-store.js index dbc60a1f30d..015064e5d97 100644 --- a/src/internal-packages/indexes/lib/store/create-index-store.js +++ b/src/internal-packages/indexes/lib/store/create-index-store.js @@ -25,7 +25,7 @@ const CreateIndexStore = Reflux.createStore({ this.listenTo(Action.updateFieldType, this.updateFieldType); this.listenTo(Action.removeIndexField, this.removeIndexField); this.schemaFields = []; // fields in the current schema - this.fields = []; // fields and types for new index + this.fields = [{name: '', type: ''}]; this.options = {}; // options for new index }, @@ -33,7 +33,7 @@ const CreateIndexStore = Reflux.createStore({ * Reset fields and options and send both to listeners. */ clearForm: function() { - this.fields = []; + this.fields = [{name: '', type: ''}]; this.options = {}; this.sendValues(); }, From 654c67cd7f1fba58805787b39dd10ba979205df3 Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Sun, 6 Nov 2016 18:15:38 +1100 Subject: [PATCH 09/17] COMPASS-221 implemented remove index field --- .../lib/component/create-index-field.jsx | 19 ++++++++++++++++--- .../lib/component/create-index-modal.jsx | 4 +++- .../indexes/lib/store/create-index-store.js | 4 ++++ 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/internal-packages/indexes/lib/component/create-index-field.jsx b/src/internal-packages/indexes/lib/component/create-index-field.jsx index a838d632497..99162018370 100644 --- a/src/internal-packages/indexes/lib/component/create-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-field.jsx @@ -65,6 +65,17 @@ class CreateIndexField extends React.Component { Action.updateFieldType(this.props.idx, type); } + /** + * Remove this index field + * + * @param {object} evt The click event. + */ + remove(evt) { + evt.preventDefault(); + evt.stopPropagation(); + Action.removeIndexField(this.props.idx); + } + /** * Render the index field form. * @@ -96,8 +107,9 @@ class CreateIndexField extends React.Component {
-
@@ -111,7 +123,8 @@ CreateIndexField.displayName = 'CreateIndexField'; CreateIndexField.propTypes = { fields: React.PropTypes.array.isRequired, field: React.PropTypes.object.isRequired, - idx: React.PropTypes.number.isRequired + idx: React.PropTypes.number.isRequired, + remove: React.PropTypes.bool.isRequired }; module.exports = CreateIndexField; diff --git a/src/internal-packages/indexes/lib/component/create-index-modal.jsx b/src/internal-packages/indexes/lib/component/create-index-modal.jsx index 8aec28c3d33..4c28e4b6323 100644 --- a/src/internal-packages/indexes/lib/component/create-index-modal.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-modal.jsx @@ -109,6 +109,7 @@ class CreateIndexModal extends React.Component { if (!this.state.fields.length) { return null; } + return this.state.fields.map((field, idx) => { const fieldUI = { name: field.name === '' ? DEFAULT_FIELD.name : field.name, @@ -118,7 +119,8 @@ class CreateIndexModal extends React.Component { fields={this.state.schemaFields} key={idx} idx={idx} - field={fieldUI} />); + field={fieldUI} + remove={!(this.state.fields.length > 1)} />); }); } diff --git a/src/internal-packages/indexes/lib/store/create-index-store.js b/src/internal-packages/indexes/lib/store/create-index-store.js index 015064e5d97..803ef323fb7 100644 --- a/src/internal-packages/indexes/lib/store/create-index-store.js +++ b/src/internal-packages/indexes/lib/store/create-index-store.js @@ -197,6 +197,10 @@ const CreateIndexStore = Reflux.createStore({ removeIndexField: function(idx) { debug('removing row at: ', idx); + if (idx >= 0 && idx < this.fields.length) { + this.fields.splice(idx, 1); + } + this.sendValues(); } }); From 8c0361c0de07fbf4f609f63d189ec8da4f58058d Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Sun, 6 Nov 2016 19:21:32 +1100 Subject: [PATCH 10/17] COMPASS-221 added some error cases --- .../indexes/lib/store/create-index-store.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/internal-packages/indexes/lib/store/create-index-store.js b/src/internal-packages/indexes/lib/store/create-index-store.js index 803ef323fb7..e19dc852bad 100644 --- a/src/internal-packages/indexes/lib/store/create-index-store.js +++ b/src/internal-packages/indexes/lib/store/create-index-store.js @@ -6,6 +6,10 @@ const SchemaStore = require('../../../schema/lib/store'); const debug = require('debug')('mongodb-compass:ddl:index:store'); +const ERRORS = { + duplicate: 'Index keys must be unique', + blank: 'You must select a field name and type' +}; /** * The reflux store for storing the form for creating indexes. */ @@ -43,6 +47,13 @@ const CreateIndexStore = Reflux.createStore({ */ triggerIndexCreation: function() { const spec = {}; + + // check for errors + if (this.fields.some(field => (field.name === '' || field.type === ''))) { + Action.updateStatus('error', ERRORS.blank); + return; + } + this.fields.forEach(field => { let type = field.type; if (type === '1 (asc)') type = 1; @@ -180,6 +191,7 @@ const CreateIndexStore = Reflux.createStore({ if (this.fields.some(field => field.name === name)) { // TODO show error to ui when existing name is being added to field debug('field name: ', name, ' already exists'); + Action.updateStatus('error', ERRORS.duplicate); } else { this.fields[idx].name = name; } From 960cde647043131042998d98db6aef01c3ae708d Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Sun, 6 Nov 2016 20:00:01 +1100 Subject: [PATCH 11/17] COMPASS-221 clean up a few files after refactoring --- .../lib/component/create-index-field.jsx | 18 ------ .../lib/component/create-index-modal.jsx | 9 +-- .../lib/component/selected-index-field.jsx | 62 ------------------- .../indexes/lib/store/create-index-store.js | 26 +------- 4 files changed, 2 insertions(+), 113 deletions(-) delete mode 100644 src/internal-packages/indexes/lib/component/selected-index-field.jsx diff --git a/src/internal-packages/indexes/lib/component/create-index-field.jsx b/src/internal-packages/indexes/lib/component/create-index-field.jsx index 99162018370..4a5a92f668e 100644 --- a/src/internal-packages/indexes/lib/component/create-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-field.jsx @@ -16,24 +16,6 @@ const INDEX_TYPES = ['1 (asc)', '-1 (desc)', '2dsphere']; */ class CreateIndexField extends React.Component { - /** - * The component constructor. - * - * @param {Object} props - The properties. - */ - constructor(props) { - super(props); - /* - this.defaultName = 'Select a field name'; - this.defaultType = 'Select a type'; - - this.state = { - // default titles shown in dropdown - name: this.defaultName, - type: this.defaultType - };*/ - } - /** * Create React dropdown items for each element in the given array. * diff --git a/src/internal-packages/indexes/lib/component/create-index-modal.jsx b/src/internal-packages/indexes/lib/component/create-index-modal.jsx index 4c28e4b6323..527a6ce5558 100644 --- a/src/internal-packages/indexes/lib/component/create-index-modal.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-modal.jsx @@ -9,7 +9,7 @@ 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'); +// const debug = require('debug')('mongodb-compass:ddl:index'); /** * The index options and parameters to display. @@ -198,14 +198,7 @@ class CreateIndexModal extends React.Component { handleSubmit(evt) { evt.preventDefault(); evt.stopPropagation(); - - debug('handle submit'); Action.addIndexField(); - /* - if (this.state.field !== 'Select a field name') { - Action.updateField(this.state.field, this.state.type, 'add'); - this.setState({field: 'Select a field name', type: 'Select a type'}); - }*/ } /** diff --git a/src/internal-packages/indexes/lib/component/selected-index-field.jsx b/src/internal-packages/indexes/lib/component/selected-index-field.jsx deleted file mode 100644 index acf9ee56b52..00000000000 --- a/src/internal-packages/indexes/lib/component/selected-index-field.jsx +++ /dev/null @@ -1,62 +0,0 @@ -const React = require('react'); -const Action = require('../action/index-actions'); -const Button = require('react-bootstrap').Button; - -/** - * Component for the selected index field. - */ -class SelectedIndexField extends React.Component { - - /** - * The component constructor. - * - * @param {Object} props - The properties. - */ - constructor(props) { - super(props); - } - - /** - * Fire drop field action when drop button is clicked. - * - * @param {Object} evt - The click event. - */ - onClick(evt) { - evt.preventDefault(); - evt.stopPropagation(); - Action.updateField(this.props.field.name, this.props.field.type, 'drop'); - } - - /** - * Render the selected index field form. - * - * @returns {React.Component} The selected index field form. - */ - render() { - return ( -
-
- -
-
- -
-
- -
-
- ); - } -} - -SelectedIndexField.displayName = 'SelectedIndexField'; - -SelectedIndexField.propTypes = { - field: React.PropTypes.object.isRequired -}; - -module.exports = SelectedIndexField; diff --git a/src/internal-packages/indexes/lib/store/create-index-store.js b/src/internal-packages/indexes/lib/store/create-index-store.js index e19dc852bad..f7aacf97200 100644 --- a/src/internal-packages/indexes/lib/store/create-index-store.js +++ b/src/internal-packages/indexes/lib/store/create-index-store.js @@ -4,7 +4,7 @@ const Action = require('../action/index-actions'); const NamespaceStore = require('hadron-reflux-store').NamespaceStore; const SchemaStore = require('../../../schema/lib/store'); -const debug = require('debug')('mongodb-compass:ddl:index:store'); +// const debug = require('debug')('mongodb-compass:ddl:index:store'); const ERRORS = { duplicate: 'Index keys must be unique', @@ -22,7 +22,6 @@ const CreateIndexStore = Reflux.createStore({ this.listenTo(SchemaStore, this.loadFields); this.listenTo(Action.clearForm, this.clearForm); this.listenTo(Action.triggerIndexCreation, this.triggerIndexCreation); - this.listenTo(Action.updateField, this.updateField); this.listenTo(Action.updateOption, this.updateOption); this.listenTo(Action.addIndexField, this.addIndexField); this.listenTo(Action.updateFieldName, this.updateFieldName); @@ -142,24 +141,6 @@ const CreateIndexStore = Reflux.createStore({ this.trigger(this.fields, this.options, this.schemaFields); }, - /** - * Add or remove field name and type from store and send updated form to listeners. - * - * @param {string} name - The index field name. - * @param {string} type - The index type. - * @param {string} action - The action to take (either add or drop). - */ - updateField: function(name, type, action) { - if (action === 'add') { // add field if not already added - if (!this.fields.some(field => field.name === name)) { - this.fields.push({name: name, type: type}); - } - } else if (action === 'drop') { // remove field - this.fields = this.fields.filter(field => field.name !== name || field.type !== type); - } - this.sendValues(); - }, - /** * Update option or parameter value in the store and send updated form to listeners. * @@ -179,18 +160,15 @@ const CreateIndexStore = Reflux.createStore({ }, addIndexField: function() { - debug('adding a row index'); this.fields.push({name: '', type: ''}); this.sendValues(); }, updateFieldName: function(idx, name) { - debug('updating row at: ', idx, ' with name: ', name); if (idx >= 0 && idx < this.fields.length) { // check if field name already exists or no if (this.fields.some(field => field.name === name)) { // TODO show error to ui when existing name is being added to field - debug('field name: ', name, ' already exists'); Action.updateStatus('error', ERRORS.duplicate); } else { this.fields[idx].name = name; @@ -200,7 +178,6 @@ const CreateIndexStore = Reflux.createStore({ }, updateFieldType: function(idx, type) { - debug('updating row at: ', idx, ' with type: ', type); if (idx >= 0 && idx < this.fields.length) { this.fields[idx].type = type; } @@ -208,7 +185,6 @@ const CreateIndexStore = Reflux.createStore({ }, removeIndexField: function(idx) { - debug('removing row at: ', idx); if (idx >= 0 && idx < this.fields.length) { this.fields.splice(idx, 1); } From 8d18c39c98fd26b0357e06bce3edd28ddf9bd7b4 Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Sun, 6 Nov 2016 22:45:56 +1100 Subject: [PATCH 12/17] COMPASS-221 added some test cases --- .../indexes/lib/store/create-index-store.js | 1 - test/indexes.store.test.js | 105 ++++++++++++++++++ 2 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 test/indexes.store.test.js diff --git a/src/internal-packages/indexes/lib/store/create-index-store.js b/src/internal-packages/indexes/lib/store/create-index-store.js index f7aacf97200..6096ffd2380 100644 --- a/src/internal-packages/indexes/lib/store/create-index-store.js +++ b/src/internal-packages/indexes/lib/store/create-index-store.js @@ -168,7 +168,6 @@ const CreateIndexStore = Reflux.createStore({ if (idx >= 0 && idx < this.fields.length) { // check if field name already exists or no if (this.fields.some(field => field.name === name)) { - // TODO show error to ui when existing name is being added to field Action.updateStatus('error', ERRORS.duplicate); } else { this.fields[idx].name = name; diff --git a/test/indexes.store.test.js b/test/indexes.store.test.js new file mode 100644 index 00000000000..9416577de52 --- /dev/null +++ b/test/indexes.store.test.js @@ -0,0 +1,105 @@ +const expect = require('chai').expect; +const CreateIndexStore = require('../src/internal-packages/indexes/lib/store/create-index-store'); + +describe('CreateIndexesStore', function() { + let unsubscribe; + + beforeEach(function() { + unsubscribe = function() {}; + CreateIndexStore.clearForm(); + }); + + afterEach(function() { + unsubscribe(); + unsubscribe = function() {}; + }); + + it('Initially has 1 field', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields).to.have.lengthOf(1); + unsubscribe(); + done(); + }); + CreateIndexStore.sendValues(); + }); + + it('can add an extra field', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields).to.have.lengthOf(2); + expect(fields[0].name).to.be.equal(''); + expect(fields[0].type).to.be.equal(''); + expect(fields[1].name).to.be.equal(''); + expect(fields[1].type).to.be.equal(''); + unsubscribe(); + done(); + }); + CreateIndexStore.addIndexField(); + }); + + it('can remove a field with a valid index', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields).to.have.lengthOf(0); + unsubscribe(); + done(); + }); + CreateIndexStore.removeIndexField(0); + }); + + it('can\'t remove a field with an invalid index', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields).to.have.lengthOf(1); + unsubscribe(); + done(); + }); + CreateIndexStore.removeIndexField(2); + }); + + it('can change a field name with a valid index', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields[0].name).to.equal('location'); + unsubscribe(); + done(); + }); + CreateIndexStore.updateFieldName(0, 'location'); + }); + + it('can\'t change a field name with a invalid index', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields[0].name).to.equal(''); + unsubscribe(); + done(); + }); + CreateIndexStore.updateFieldName(3, 'location'); + }); + + it('can change a field type with a valid index', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields[0].type).to.equal('1 (asc)'); + unsubscribe(); + done(); + }); + CreateIndexStore.updateFieldType(0, '1 (asc)'); + }); + + it('can\'t change a field type with a invalid index', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields[0].type).to.equal(''); + unsubscribe(); + done(); + }); + CreateIndexStore.updateFieldType(-1, '1 (asc)'); + }); + + /* + it('won\'t change a field name if it already exists', function(done) { + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields[0].name).to.equal('location'); + expect(fields[1].name).to.equal(''); + unsubscribe(); + done(); + }); + CreateIndexStore.updateFieldName(0, 'location'); + CreateIndexStore.addIndexField(); + CreateIndexStore.updateFieldName(1, 'location'); + }); */ +}); From 173e718fb8d080512f91cf37648f2993ab71d4bd Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Mon, 7 Nov 2016 12:47:31 +1100 Subject: [PATCH 13/17] validation of index fields, button styling --- .../lib/component/create-index-field.jsx | 63 ++++++++++++++++--- .../lib/component/create-index-modal.jsx | 18 +----- .../indexes/styles/create-index-modal.less | 14 +++-- 3 files changed, 68 insertions(+), 27 deletions(-) diff --git a/src/internal-packages/indexes/lib/component/create-index-field.jsx b/src/internal-packages/indexes/lib/component/create-index-field.jsx index 4a5a92f668e..03d2b71986a 100644 --- a/src/internal-packages/indexes/lib/component/create-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-field.jsx @@ -2,20 +2,50 @@ const React = require('react'); const ButtonToolbar = require('react-bootstrap').ButtonToolbar; const DropdownButton = require('react-bootstrap').DropdownButton; const MenuItem = require('react-bootstrap').MenuItem; +const StatusStore = require('../store/ddl-status-store'); const Action = require('../action/index-actions'); -// const debug = require('debug')('mongodb-compass:component:indexes:create-modal'); +const debug = require('debug')('mongodb-compass:indexes:create-index-field'); /** * Current allowed types for indexes. */ const INDEX_TYPES = ['1 (asc)', '-1 (desc)', '2dsphere']; +/** + * Default values for field name and type as presented in the UI + */ +const DEFAULT_FIELD = { + name: 'Select a field name', + type: 'Select a type' +}; + /** * Component for the index field form. */ class CreateIndexField extends React.Component { + constructor(props) { + super(props); + this.state = { + hasStartedValidating: false, + isNameValid: true, + isTypeValid: true + }; + } + + componentDidMount() { + this._unsubscribeStatusStore = StatusStore.listen(this.statusChanged.bind(this)); + } + + componentWillReceiveProps() { + this.validate(false); + } + + componentWillUnmount() { + this._unsubscribeStatusStore(); + } + /** * Create React dropdown items for each element in the given array. * @@ -33,7 +63,6 @@ class CreateIndexField extends React.Component { * @param {string} name - The selected name. */ selectName(name) { - // this.setState({name: name}); Action.updateFieldName(this.props.idx, name); } @@ -43,7 +72,6 @@ class CreateIndexField extends React.Component { * @param {string} type - The selected type. */ selectType(type) { - // this.setState({type: type}); Action.updateFieldType(this.props.idx, type); } @@ -58,20 +86,41 @@ class CreateIndexField extends React.Component { Action.removeIndexField(this.props.idx); } + statusChanged() { + this.validate(true); + } + + validate(force) { + if (!force && !this.state.hasStartedValidating) { + return; + } + this.setState({ + hasStartedValidating: true, + isTypeValid: this.props.field.type !== '', + isNameValid: this.props.field.name !== '' + }); + } + /** * Render the index field form. * * @returns {React.Component} The index field form. */ render() { + const fieldName = this.props.field.name || DEFAULT_FIELD.name; + const fieldType = this.props.field.type || DEFAULT_FIELD.type; + + const hasNameError = this.state.isNameValid ? '' : 'has-error'; + const hasTypeError = this.state.isTypeValid ? '' : 'has-error'; + return (
{this.getDropdownOptions(this.props.fields)} @@ -80,9 +129,9 @@ class CreateIndexField extends React.Component {
{this.getDropdownOptions(INDEX_TYPES)} diff --git a/src/internal-packages/indexes/lib/component/create-index-modal.jsx b/src/internal-packages/indexes/lib/component/create-index-modal.jsx index 527a6ce5558..e17c1213e63 100644 --- a/src/internal-packages/indexes/lib/component/create-index-modal.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-modal.jsx @@ -21,14 +21,6 @@ const INDEX_OPTIONS = [ {name: 'partialFilterExpression', desc: 'Partial Filter Expression', param: true, paramUnit: ''} ]; -/** - * Default values for field name and type as presented in the UI - */ -const DEFAULT_FIELD = { - name: 'Select a field name', - type: 'Select a type' -}; - /** * Component for the create index modal. */ @@ -111,15 +103,11 @@ class CreateIndexModal extends React.Component { } return this.state.fields.map((field, idx) => { - const fieldUI = { - name: field.name === '' ? DEFAULT_FIELD.name : field.name, - type: field.type === '' ? DEFAULT_FIELD.type : field.type - }; return ( 1)} />); }); } @@ -254,11 +242,11 @@ class CreateIndexModal extends React.Component {

Configure the index definition

{this.getIndexFields()} -
+
diff --git a/src/internal-packages/indexes/styles/create-index-modal.less b/src/internal-packages/indexes/styles/create-index-modal.less index 51a80efacf8..b1edb002be2 100644 --- a/src/internal-packages/indexes/styles/create-index-modal.less +++ b/src/internal-packages/indexes/styles/create-index-modal.less @@ -36,13 +36,21 @@ .col-md-6 { .dropdown-menu { max-height: 400px; - overflow: scroll; + overflow: scroll; } } } + .create-index-field-add { + margin-top: 10px; + } + .create-index-field { + .dropdown-toggle.has-error { + border-color: #a94442; + } + .create-index-field-dropdown-name { width: 164px; text-align: left; @@ -55,10 +63,6 @@ text-transform: none; margin-left: -7px; } - - .create-index-field-add { - margin-top: 10px; - } } input { From 1630680c6e6a5ccfdf00ee69a1a94d920d0cbbb0 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Mon, 7 Nov 2016 12:52:02 +1100 Subject: [PATCH 14/17] fix index store test. --- test/indexes.store.test.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/test/indexes.store.test.js b/test/indexes.store.test.js index 9416577de52..68bb174d669 100644 --- a/test/indexes.store.test.js +++ b/test/indexes.store.test.js @@ -90,16 +90,17 @@ describe('CreateIndexesStore', function() { CreateIndexStore.updateFieldType(-1, '1 (asc)'); }); - /* it('won\'t change a field name if it already exists', function(done) { + CreateIndexStore.updateFieldName(0, 'location'); + CreateIndexStore.addIndexField(); + unsubscribe = CreateIndexStore.listen((fields) => { expect(fields[0].name).to.equal('location'); expect(fields[1].name).to.equal(''); unsubscribe(); done(); }); - CreateIndexStore.updateFieldName(0, 'location'); - CreateIndexStore.addIndexField(); + CreateIndexStore.updateFieldName(1, 'location'); - }); */ + }); }); From 77e74136376845e9c61abc83eb4524a5384ade2e Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Mon, 7 Nov 2016 15:54:50 +1100 Subject: [PATCH 15/17] COMPASS-221 disable fields that are already used --- .../lib/component/create-index-field.jsx | 26 ++++++++---- .../lib/component/create-index-modal.jsx | 6 ++- .../indexes/styles/create-index-modal.less | 40 ------------------- test/indexes.store.test.js | 17 ++++++++ 4 files changed, 40 insertions(+), 49 deletions(-) diff --git a/src/internal-packages/indexes/lib/component/create-index-field.jsx b/src/internal-packages/indexes/lib/component/create-index-field.jsx index 03d2b71986a..4c578ef17df 100644 --- a/src/internal-packages/indexes/lib/component/create-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-field.jsx @@ -5,7 +5,7 @@ const MenuItem = require('react-bootstrap').MenuItem; const StatusStore = require('../store/ddl-status-store'); const Action = require('../action/index-actions'); -const debug = require('debug')('mongodb-compass:indexes:create-index-field'); +// const debug = require('debug')('mongodb-compass:indexes:create-index-field'); /** * Current allowed types for indexes. @@ -47,14 +47,25 @@ class CreateIndexField extends React.Component { } /** - * Create React dropdown items for each element in the given array. + * Create React dropdown items for each element in the fields array. * - * @param {Array} arr - The array of options. + * @returns {Array} The React components for each item in the field and type dropdowns. + */ + getDropdownFields() { + return this.props.fields.map((elem, index) => ( + (field === elem))} + eventKey={elem}>{elem} + )); + } + + /** + * Create React dropdown items for each element in the INDEX_TYPES array. * * @returns {Array} The React components for each item in the field and type dropdowns. */ - getDropdownOptions(arr) { - return arr.map((elem, index) => ({elem})); + getDropdownTypes() { + return INDEX_TYPES.map((elem, index) => ({elem})); } /** @@ -122,7 +133,7 @@ class CreateIndexField extends React.Component { id="field-name-select-dropdown" className={`create-index-field-dropdown-name ${hasNameError}`} onSelect={this.selectName.bind(this)}> - {this.getDropdownOptions(this.props.fields)} + {this.getDropdownFields(this.props.fields)}
@@ -133,7 +144,7 @@ class CreateIndexField extends React.Component { id="field-type-select-dropdown" className={`create-index-field-dropdown-type ${hasTypeError}`} onSelect={this.selectType.bind(this)}> - {this.getDropdownOptions(INDEX_TYPES)} + {this.getDropdownTypes(INDEX_TYPES)}
@@ -155,6 +166,7 @@ CreateIndexField.propTypes = { fields: React.PropTypes.array.isRequired, field: React.PropTypes.object.isRequired, idx: React.PropTypes.number.isRequired, + disabledFields: React.PropTypes.array.isRequired, remove: React.PropTypes.bool.isRequired }; diff --git a/src/internal-packages/indexes/lib/component/create-index-modal.jsx b/src/internal-packages/indexes/lib/component/create-index-modal.jsx index e17c1213e63..6642d94a11b 100644 --- a/src/internal-packages/indexes/lib/component/create-index-modal.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-modal.jsx @@ -8,8 +8,7 @@ const CreateIndexField = require('./create-index-field'); 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'); +const _ = require('lodash'); /** * The index options and parameters to display. @@ -102,12 +101,15 @@ class CreateIndexModal extends React.Component { return null; } + const disabledFields = _.pluck(this.state.fields, 'name'); + return this.state.fields.map((field, idx) => { return ( 1)} />); }); } diff --git a/src/internal-packages/indexes/styles/create-index-modal.less b/src/internal-packages/indexes/styles/create-index-modal.less index b1edb002be2..1c75494a93c 100644 --- a/src/internal-packages/indexes/styles/create-index-modal.less +++ b/src/internal-packages/indexes/styles/create-index-modal.less @@ -147,46 +147,6 @@ } } - .selected-index { - .selected-index-panel { - margin-top: 8px; - margin-bottom: 0px; - margin-right: -11px; - - .panel-body { - padding: 8px; - } - - .selected-index-panel-field { - float: left; - margin-left: 4px; - } - - .selected-index-panel-type { - float: right; - margin-right: 25px; - } - } - - .selected-index-field-name { - width: 164px; - text-align: left; - text-transform: none; - } - - .selected-index-field-type { - width: 120px; - text-align: left; - text-transform: none; - margin-left: -7px; - } - - .selected-index-btn { - margin-top: 5px; - margin-bottom: 5px; - } - } - .index-field-dropdown-btn { text-transform: none; } diff --git a/test/indexes.store.test.js b/test/indexes.store.test.js index 68bb174d669..bb593d5787b 100644 --- a/test/indexes.store.test.js +++ b/test/indexes.store.test.js @@ -103,4 +103,21 @@ describe('CreateIndexesStore', function() { CreateIndexStore.updateFieldName(1, 'location'); }); + + it('maintains order of fields after removal', function(done) { + CreateIndexStore.updateFieldName(0, 'location'); + CreateIndexStore.addIndexField(); + CreateIndexStore.updateFieldName(1, 'address'); + CreateIndexStore.addIndexField(); + CreateIndexStore.updateFieldName(2, 'gender'); + + unsubscribe = CreateIndexStore.listen((fields) => { + expect(fields[0].name).to.equal('location'); + expect(fields[1].name).to.equal('gender'); + unsubscribe(); + done(); + }); + + CreateIndexStore.removeIndexField(1); + }); }); From 06d676aa1bfb427e8db82fe2085ddd8f62f5a5e3 Mon Sep 17 00:00:00 2001 From: Sean Oh Date: Mon, 7 Nov 2016 00:52:07 -0500 Subject: [PATCH 16/17] Added bottom margins for each row, truncate long field names in the dropdown, make highlight red same hex as error message --- .../indexes/styles/create-index-modal.less | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/internal-packages/indexes/styles/create-index-modal.less b/src/internal-packages/indexes/styles/create-index-modal.less index 1c75494a93c..6df0aaac7e6 100644 --- a/src/internal-packages/indexes/styles/create-index-modal.less +++ b/src/internal-packages/indexes/styles/create-index-modal.less @@ -29,8 +29,9 @@ margin-bottom: 10px; .caret { + position: absolute; margin-top: 8px; - float: right; + right: 10px; } .col-md-6 { @@ -46,15 +47,21 @@ } .create-index-field { + margin-bottom: 5px; .dropdown-toggle.has-error { - border-color: #a94442; + border-color: #ef4c4c; + color: #ef4c4c; } .create-index-field-dropdown-name { width: 164px; text-align: left; text-transform: none; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 25px; + white-space: nowrap; } .create-index-field-dropdown-type { From 358cf146eea06fca06b94037da4ddd0c7459608e Mon Sep 17 00:00:00 2001 From: KeyboardTsundoku Date: Mon, 7 Nov 2016 17:57:27 +1100 Subject: [PATCH 17/17] COMPASS-221 made some minor fixes after review --- src/internal-packages/indexes/lib/action/index-actions.js | 1 - .../indexes/lib/component/create-index-field.jsx | 4 ++-- .../indexes/lib/component/create-index-modal.jsx | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/internal-packages/indexes/lib/action/index-actions.js b/src/internal-packages/indexes/lib/action/index-actions.js index cb0d0efd036..01cf67e2823 100644 --- a/src/internal-packages/indexes/lib/action/index-actions.js +++ b/src/internal-packages/indexes/lib/action/index-actions.js @@ -7,7 +7,6 @@ const IndexActions = Reflux.createActions([ 'loadIndexes', 'sortIndexes', 'triggerIndexCreation', - 'updateField', 'updateOption', 'updateStatus', 'addIndexField', diff --git a/src/internal-packages/indexes/lib/component/create-index-field.jsx b/src/internal-packages/indexes/lib/component/create-index-field.jsx index 4c578ef17df..50ceac205f1 100644 --- a/src/internal-packages/indexes/lib/component/create-index-field.jsx +++ b/src/internal-packages/indexes/lib/component/create-index-field.jsx @@ -149,7 +149,7 @@ class CreateIndexField extends React.Component {
-