Backport of [ui] Search results are overloading filter with sorted results into release/1.6.x (#18105)

This pull request was automerged via backport-assistant

.changelog/18053.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: search results are no longer overridden by sorting preferences on the jobs index page
+```

ui/app/controllers/jobs/index.js

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+//@ts-check
+
 /* eslint-disable ember/no-incorrect-calls-with-inline-anonymous-functions */
 import { inject as service } from '@ember/service';
 import { alias, readOnly } from '@ember/object/computed';
@@ -18,6 +20,9 @@ import {
 } from 'nomad-ui/utils/qp-serialize';
 import classic from 'ember-classic-decorator';
 
+const DEFAULT_SORT_PROPERTY = 'modifyIndex';
+const DEFAULT_SORT_DESCENDING = true;
+
 @classic
 export default class IndexController extends Controller.extend(
   Sortable,
@@ -65,8 +70,8 @@ export default class IndexController extends Controller.extend(
   currentPage = 1;
   @readOnly('userSettings.pageSize') pageSize;
 
-  sortProperty = 'modifyIndex';
-  sortDescending = true;
+  sortProperty = DEFAULT_SORT_PROPERTY;
+  sortDescending = DEFAULT_SORT_DESCENDING;
 
   @computed
   get searchProps() {
@@ -292,9 +297,47 @@ export default class IndexController extends Controller.extend(
     });
   }
 
+  // eslint-disable-next-line ember/require-computed-property-dependencies
+  @computed('searchTerm')
+  get sortAtLastSearch() {
+    return {
+      sortProperty: this.sortProperty,
+      sortDescending: this.sortDescending,
+      searchTerm: this.searchTerm,
+    };
+  }
+
+  @computed(
+    'searchTerm',
+    'sortAtLastSearch.{sortDescending,sortProperty}',
+    'sortDescending',
+    'sortProperty'
+  )
+  get prioritizeSearchOrder() {
+    let shouldPrioritizeSearchOrder =
+      !!this.searchTerm &&
+      this.sortAtLastSearch.sortProperty === this.sortProperty &&
+      this.sortAtLastSearch.sortDescending === this.sortDescending;
+    if (shouldPrioritizeSearchOrder) {
+      /* eslint-disable ember/no-side-effects */
+      this.set('sortDescending', DEFAULT_SORT_DESCENDING);
+      this.set('sortProperty', DEFAULT_SORT_PROPERTY);
+      this.set('sortAtLastSearch.sortProperty', DEFAULT_SORT_PROPERTY);
+      this.set('sortAtLastSearch.sortDescending', DEFAULT_SORT_DESCENDING);
+    }
+    /* eslint-enable ember/no-side-effects */
+    return shouldPrioritizeSearchOrder;
+  }
+
   @alias('filteredJobs') listToSearch;
   @alias('listSearched') listToSort;
-  @alias('listSorted') sortedJobs;
+
+  // sortedJobs is what we use to populate the table;
+  // If the user has searched but not sorted, we return the (fuzzy) searched list verbatim
+  // If the user has sorted, we allow the fuzzy search to filter down the list, but return it in a sorted order.
+  get sortedJobs() {
+    return this.prioritizeSearchOrder ? this.listSearched : this.listSorted;
+  }
 
   isShowingDeploymentDetails = false;
 

ui/tests/acceptance/jobs-list-test.js

@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable qunit/require-expect */
-import { currentURL } from '@ember/test-helpers';
+import { currentURL, click } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
@@ -172,6 +172,47 @@ module('Acceptance | jobs list', function (hooks) {
     assert.equal(currentURL(), '/jobs?search=foobar', 'No page query param');
   });
 
+  test('Search order overrides Sort order', async function (assert) {
+    server.create('job', { name: 'car', modifyIndex: 1, priority: 200 });
+    server.create('job', { name: 'cat', modifyIndex: 2, priority: 150 });
+    server.create('job', { name: 'dog', modifyIndex: 3, priority: 100 });
+    server.create('job', { name: 'dot', modifyIndex: 4, priority: 50 });
+
+    await JobsList.visit();
+
+    // Expect list to be in reverse modifyIndex order by default
+    assert.equal(JobsList.jobs.objectAt(0).name, 'dot');
+    assert.equal(JobsList.jobs.objectAt(1).name, 'dog');
+    assert.equal(JobsList.jobs.objectAt(2).name, 'cat');
+    assert.equal(JobsList.jobs.objectAt(3).name, 'car');
+
+    // When sorting by name, expect list to be in alphabetical order
+    await click('[data-test-sort-by="name"]'); // sorts desc
+    await click('[data-test-sort-by="name"]'); // sorts asc
+
+    assert.equal(JobsList.jobs.objectAt(0).name, 'car');
+    assert.equal(JobsList.jobs.objectAt(1).name, 'cat');
+    assert.equal(JobsList.jobs.objectAt(2).name, 'dog');
+    assert.equal(JobsList.jobs.objectAt(3).name, 'dot');
+
+    // When searching, the "name" sort is locked in. Fuzzy results for cat return both car and cat, but cat first.
+    await JobsList.search.fillIn('cat');
+    assert.equal(JobsList.jobs.length, 2);
+    assert.equal(JobsList.jobs.objectAt(0).name, 'cat'); // higher fuzzy
+    assert.equal(JobsList.jobs.objectAt(1).name, 'car');
+
+    // Clicking priority sorter will maintain the search filter, but change the order
+    await click('[data-test-sort-by="priority"]'); // sorts desc
+    assert.equal(JobsList.jobs.objectAt(0).name, 'car'); // higher priority first
+    assert.equal(JobsList.jobs.objectAt(1).name, 'cat');
+
+    // Modifying search again will prioritize search "fuzzy" order
+    await JobsList.search.fillIn(''); // trigger search reset
+    await JobsList.search.fillIn('cat');
+    assert.equal(JobsList.jobs.objectAt(0).name, 'cat'); // higher fuzzy
+    assert.equal(JobsList.jobs.objectAt(1).name, 'car');
+  });
+
   test('when a cluster has namespaces, each job row includes the job namespace', async function (assert) {
     server.createList('namespace', 2);
     server.createList('job', 2);