COMPASS-564: Indexes Tab order gets reversed on create and delete index

src/internal-packages/indexes/lib/component/index-header-column.jsx

@@ -68,7 +68,7 @@ class IndexHeaderColumn extends React.Component {
   render() {
     return (
       <th
-        data-test-id={this.props.hook}
+        data-test-id={this.props.dataTestId}
         className={this._renderClassName()}
         onClick={this.handleIndexSort.bind(this)}>
         {this.props.name}
@@ -82,7 +82,7 @@ IndexHeaderColumn.displayName = 'IndexHeaderColumn';
 
 IndexHeaderColumn.propTypes = {
   sortOrder: React.PropTypes.string.isRequired,
-  hook: React.PropTypes.string.isRequired,
+  dataTestId: React.PropTypes.string.isRequired,
   name: React.PropTypes.string.isRequired
 };
 

src/internal-packages/indexes/lib/component/index-header.jsx

@@ -55,13 +55,19 @@ class IndexHeader extends React.Component {
     return (
       <thead>
         <tr>
-          <IndexHeaderColumn hook="th-name" name="Name and Definition" sortOrder={this.state.sortOrder} />
-          <IndexHeaderColumn hook="th-type" name="Type" sortOrder={this.state.sortOrder} />
-          <IndexHeaderColumn hook="th-size" name="Size" sortOrder={this.state.sortOrder} />
-          <IndexHeaderColumn hook="th-usage" name="Usage" sortOrder={this.state.sortOrder} />
-          <IndexHeaderColumn hook="th-properties" name="Properties" sortOrder={this.state.sortOrder} />
+          <IndexHeaderColumn
+            dataTestId="index-header-name" name="Name and Definition" sortOrder={this.state.sortOrder} />
+          <IndexHeaderColumn
+            dataTestId="index-header-type" name="Type" sortOrder={this.state.sortOrder} />
+          <IndexHeaderColumn
+            dataTestId="index-header-size" name="Size" sortOrder={this.state.sortOrder} />
+          <IndexHeaderColumn
+            dataTestId="index-header-usage" name="Usage" sortOrder={this.state.sortOrder} />
+          <IndexHeaderColumn
+            dataTestId="index-header-properties" name="Properties" sortOrder={this.state.sortOrder} />
           {this.CollectionStore.isWritable() ?
-            <IndexHeaderColumn hook="th-drop" name="Drop" sortOrder={this.state.sortOrder}/>
+            <IndexHeaderColumn
+              dataTestId="index-header-drop" name="Drop" sortOrder={this.state.sortOrder}/>
             : null}
         </tr>
       </thead>

src/internal-packages/indexes/lib/store/sort-indexes-store.js

@@ -17,6 +17,8 @@ const SortIndexesStore = Reflux.createStore({
    * Initialize the sort indexes store.
    */
   init: function() {
+    this.sortField = DEFAULT;
+    this.sortOrder = ASC;
     this.listenTo(LoadIndexesStore, this.loadIndexes);
     this.listenTo(UpdateIndexesStore, this.loadIndexes);
     this.listenTo(Action.sortIndexes, this.sortIndexes);
@@ -29,16 +31,19 @@ const SortIndexesStore = Reflux.createStore({
    */
   loadIndexes(indexes) {
     this.indexes = indexes;
-    this.sortIndexes(DEFAULT);
+    this.sortIndexes(this.sortField, false);
   },
 
   /**
    * Sort the indexes
    *
    * @param {String} column - The column to sort on.
+   * @param {Boolean} reverse - If we should reverse the order.
    */
-  sortIndexes: function(column) {
-    this._setOrder(column);
+  sortIndexes: function(column, reverse = true) {
+    if (reverse) {
+      this._setOrder(column);
+    }
     this.indexes.sort(this._comparator(this._field()));
     this.trigger(this.indexes, this.sortOrder, this.sortField);
   },

test/compass-functional.test.js

@@ -591,13 +591,42 @@ describe('Compass Functional Test Suite #spectron', function() {
           });
 
           context('when the index is valid', function() {
-            it('adds the index to the list', function() {
-              return client
-                .inputCreateIndexDetails({ name: 'name_1', field: 'name' })
-                .clickCreateIndexModalButton()
-                .waitForIndexCreation('name_1')
-                .getIndexNames()
-                .should.eventually.deep.equal([ 'name_1', '_id_' ]);
+            context('when the indexes are sorted', function() {
+              it('adds the index to the list', function() {
+                return client
+                  .inputCreateIndexDetails({ name: 'name_1', field: 'name' })
+                  .clickCreateIndexModalButton()
+                  .waitForIndexCreation('name_1')
+                  .clickIndexTableHeader('index-header-name')
+                  .getIndexNames()
+                  .should.eventually.include('name_1');
+              });
+
+              it('retains the previous sorting of the list', function() {
+                return client
+                  .getIndexNames()
+                  .should.eventually.deep.equal([ 'name_1', '_id_' ]);
+              });
+            });
+
+            context('when adding another index', function() {
+              it('allows another index to be added', function() {
+                return client
+                  .clickCreateIndexButton()
+                  .waitForCreateIndexModal()
+                  .inputCreateIndexDetails({ type: '-1 (desc)' })
+                  .inputCreateIndexDetails({ name: 'name_-1', field: 'name'})
+                  .clickCreateIndexModalButton()
+                  .waitForIndexCreation('name_-1')
+                  .getIndexNames()
+                  .should.eventually.include('name_-1');
+              });
+
+              it('retains the current index table sort order', function() {
+                return client
+                  .getIndexNames()
+                  .should.eventually.deep.equal([ 'name_1', 'name_-1', '_id_' ]);
+              });
             });
           });
         });
@@ -606,9 +635,9 @@ describe('Compass Functional Test Suite #spectron', function() {
           context('when clicking on the name header', function() {
             it('sorts the indexes by name', function() {
               return client
-                .clickIndexTableNameHeader()
+                .clickIndexTableHeader('index-header-name')
                 .getIndexNames()
-                .should.eventually.deep.equal([ '_id_', 'name_1' ]);
+                .should.eventually.deep.equal([ '_id_', 'name_-1', 'name_1' ]);
             });
           });
         });

test/support/spectron-support.js

@@ -562,7 +562,6 @@ function addClickCommands(client) {
    * Click the create index button in the modal.
    */
   client.addCommand('clickCreateIndexModalButton', function() {
-    const base = selector('create-index-button');
     const form = selector('create-index-modal');
     return this.submitForm(`${form} form`);
   });
@@ -666,11 +665,11 @@ function addClickCommands(client) {
   });
 
   /**
-   * Click on the name header in the index table.
+   * Click on the header in the index table.
    */
-  client.addCommand('clickIndexTableNameHeader', function() {
+  client.addCommand('clickIndexTableHeader', function(columnName) {
     const base = selector('indexes-table');
-    const column = selector('th-name');
+    const column = selector(columnName);
     return this.click(`${base} ${column}`);
   });