Update to v4 of Ember Power Select (#10226)

This closes #10146.

Because of cibernox/ember-power-select#1203, which documents
the current impossibility of attaching test selectors to a
PowerSelect invocation, this uses test selectors on parent
containers instead, occasionally adding wrappers when needed.
I chose to leave the existing test selectors in the hopes that
we can return to using them eventually, but I could easily
remove them if it seems like extra noise now.

Presumably for the same reason, @class no longer works, so
this adjusts the scoping of global search CSS to preserve the style
of the search control.

I also included an update to the latest version of
ember-test-selectors, since we were far behind and I tried
that before finding the aforelinked issue.

Finally, this replaces ember-cli-uglify with ember-cli-terser to address
production build failures as described at ember-cli/ember-cli#9290.

ui/app/components/global-search/control.js

@@ -21,6 +21,7 @@ export default class GlobalSearchControl extends Component {
 
   constructor() {
     super(...arguments);
+    this['data-test-search-parent'] = true;
 
     this.jobSearch = JobSearch.create({
       dataSource: this,

ui/app/styles/components/global-search-container.scss

@@ -8,54 +8,52 @@
   justify-content: center;
   align-items: center;
 
-  .global-search {
+  .ember-basic-dropdown-trigger {
     width: 30em;
 
     @media #{$mq-hidden-gutter} {
       width: 20em;
     }
 
-    .ember-power-select-trigger {
-      background: $nomad-green-darker;
-      border: 0;
+    background: $nomad-green-darker;
+    border: 0;
+
+    .icon {
+      margin-top: 1px;
+      margin-left: 2px;
+
+      fill: white;
+      opacity: 0.7;
+    }
+
+    .placeholder {
+      opacity: 0.7;
+      display: inline-block;
+      padding-left: 2px;
+      transform: translateY(-1px);
+      font-weight: $weight-semibold;
+    }
+
+    .shortcut {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      bottom: 5px;
+      width: 1.4rem;
+      padding-top: 3px;
+      text-align: center;
+      opacity: 0.7;
+      background: $nomad-green-dark;
+      font-weight: $weight-semibold;
+    }
+
+    &.ember-power-select-trigger--active {
+      background: white;
+      border-color: white;
 
       .icon {
-        margin-top: 1px;
-        margin-left: 2px;
-
-        fill: white;
-        opacity: 0.7;
-      }
-
-      .placeholder {
-        opacity: 0.7;
-        display: inline-block;
-        padding-left: 2px;
-        transform: translateY(-1px);
-        font-weight: $weight-semibold;
-      }
-
-      .shortcut {
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        bottom: 5px;
-        width: 1.4rem;
-        padding-top: 3px;
-        text-align: center;
-        opacity: 0.7;
-        background: $nomad-green-dark;
-        font-weight: $weight-semibold;
-      }
-
-      &.ember-power-select-trigger--active {
-        background: white;
-        border-color: white;
-
-        .icon {
-          fill: black;
-          opacity: 1;
-        }
+        fill: black;
+        opacity: 1;
       }
     }
 

ui/app/templates/components/agent-monitor.hbs

@@ -1,5 +1,5 @@
 <div class="boxed-section">
-  <div class="boxed-section-head">
+  <div class="boxed-section-head" data-test-level-switcher-parent>
     <PowerSelect
       data-test-level-switcher
       @tagName="div"

ui/app/templates/components/drain-popover.hbs

@@ -24,7 +24,7 @@
       </label>
     </div>
     {{#if this.deadlineEnabled}}
-      <div class="field is-sub-field">
+      <div class="field is-sub-field" data-test-drain-deadline-option-select-parent>
         <PowerSelect
           data-test-drain-deadline-option-select
           @tagName="div"

ui/app/templates/components/global-search/control.hbs

@@ -1,6 +1,5 @@
   <PowerSelect
     @tagName="div"
-    class="global-search"
     data-test-search
     @searchEnabled={{true}}
     @search={{perform this.search}}

ui/app/templates/components/gutter-menu.hbs

@@ -26,7 +26,7 @@
       {{#if this.system.shouldShowNamespaces}}
         <ul class="menu-list">
           <li>
-            <div class="menu-item is-wide">
+            <div class="menu-item is-wide" data-test-namespace-switcher-parent>
               <PowerSelect
                 data-test-namespace-switcher
                 @options={{this.sortedNamespaces}}

ui/app/templates/components/page-size-select.hbs

@@ -1,4 +1,4 @@
-<div class="field is-horizontal">
+<div class="field is-horizontal" data-test-page-size-select-parent>
   <span class="field-label is-small">Per page</span>
   <PowerSelect
     @tagName="div"

ui/app/templates/components/region-switcher.hbs

@@ -1,12 +1,14 @@
 {{#if this.system.shouldShowRegions}}
-  <PowerSelect
-    data-test-region-switcher
-    @tagName="div"
-    @triggerClass={{this.decoration}}
-    @options={{this.sortedRegions}}
-    @selected={{this.system.activeRegion}}
-    @searchEnabled={{false}}
-    @onChange={{action this.gotoRegion}} as |region|>
-    <span class="ember-power-select-prefix">Region: </span>{{region}}
-  </PowerSelect>
+  <span data-test-region-switcher-parent>
+    <PowerSelect
+      data-test-region-switcher
+      @tagName="div"
+      @triggerClass={{this.decoration}}
+      @options={{this.sortedRegions}}
+      @selected={{this.system.activeRegion}}
+      @searchEnabled={{false}}
+      @onChange={{action this.gotoRegion}} as |region|>
+      <span class="ember-power-select-prefix">Region: </span>{{region}}
+    </PowerSelect>
+  </span>
 {{/if}}

ui/package.json

@@ -73,7 +73,7 @@
     "ember-cli-sass": "^10.0.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-string-helpers": "^1.5.0",
-    "ember-cli-uglify": "^3.0.0",
+    "ember-cli-terser": "^4.0.1",
     "ember-composable-helpers": "^4.4.1",
     "ember-concurrency": "^1.0.0",
     "ember-copy": "^1.0.0",
@@ -91,7 +91,7 @@
     "ember-named-blocks-polyfill": "^0.2.4",
     "ember-overridable-computed": "^1.0.0",
     "ember-page-title": "^6.0.3",
-    "ember-power-select": "^3.0.4",
+    "ember-power-select": "^4.1.3",
     "ember-qunit": "^4.6.0",
     "ember-qunit-nice-errors": "^1.2.0",
     "ember-resolver": "^8.0.0",
@@ -99,7 +99,7 @@
     "ember-sinon": "^4.0.0",
     "ember-source": "~3.20.2",
     "ember-template-lint": "^2.9.1",
-    "ember-test-selectors": "^2.1.0",
+    "ember-test-selectors": "^5.0.0",
     "ember-truth-helpers": "^2.0.0",
     "eslint": "^7.5.0",
     "eslint-plugin-ember": "^8.9.1",

ui/tests/acceptance/behaviors/page-size-select.js

@@ -33,7 +33,7 @@ export default function pageSizeSelect({ resourceName, pageObject, pageObjectLis
     assert.equal(pageObjectList.length, pageObject.pageSize);
     assert.equal(pageObject.pageSizeSelect.selectedOption, pageObject.pageSize);
 
-    await selectChoose('[data-test-page-size-select]', desiredPageSize);
+    await selectChoose('[data-test-page-size-select-parent]', desiredPageSize);
 
     assert.equal(window.localStorage.nomadPageSize, desiredPageSize);
     assert.equal(pageObjectList.length, desiredPageSize);

ui/tests/acceptance/job-detail-test.js

@@ -135,7 +135,7 @@ module('Acceptance | job detail (with namespaces)', function(hooks) {
     await JobDetail.visit({ id: job.id, namespace: namespace.name });
 
     // TODO: Migrate to Page Objects
-    await selectChoose('[data-test-namespace-switcher]', otherNamespace);
+    await selectChoose('[data-test-namespace-switcher-parent]', otherNamespace);
     assert.equal(currentURL().split('?')[0], '/jobs', 'Navigated to /jobs');
 
     const jobs = server.db.jobs

ui/tests/acceptance/namespaces-test.js

@@ -91,7 +91,7 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
     const namespace = server.db.namespaces[1];
 
     await JobsList.visit();
-    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+    await selectChoose('[data-test-namespace-switcher-parent]', namespace.name);
 
     assert.equal(
       window.localStorage.nomadActiveNamespace,
@@ -114,7 +114,7 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
     );
 
     // TODO: handle this with Page Objects
-    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+    await selectChoose('[data-test-namespace-switcher-parent]', namespace.name);
 
     requests = server.pretender.handledRequests.filter(req => req.url.startsWith('/v1/jobs'));
     assert.equal(requests.length, 2, 'Second request to jobs');
@@ -129,7 +129,7 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
     const namespace = server.db.namespaces[1];
 
     await ClientsList.visit();
-    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+    await selectChoose('[data-test-namespace-switcher-parent]', namespace.name);
 
     assert.equal(currentURL(), `/jobs?namespace=${namespace.name}`);
   });
@@ -139,7 +139,7 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
     const allocation = server.create('allocation', { job: server.db.jobs[0] });
 
     await Allocation.visit({ id: allocation.id });
-    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+    await selectChoose('[data-test-namespace-switcher-parent]', namespace.name);
 
     assert.equal(currentURL(), `/jobs?namespace=${namespace.name}`);
   });
@@ -148,7 +148,7 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
     const namespace = server.db.namespaces[1];
 
     await PluginsList.visit();
-    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+    await selectChoose('[data-test-namespace-switcher-parent]', namespace.name);
 
     assert.equal(currentURL(), `/csi/volumes?namespace=${namespace.name}`);
   });
@@ -165,7 +165,7 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
     assert.equal(requests[0].queryParams.namespace, undefined);
 
     // TODO: handle this with Page Objects
-    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+    await selectChoose('[data-test-namespace-switcher-parent]', namespace.name);
 
     requests = server.pretender.handledRequests.filter(req => req.url.startsWith('/v1/volumes'));
     assert.equal(requests.length, 2);

ui/tests/acceptance/regions-test.js

@@ -100,7 +100,7 @@ module('Acceptance | regions (many)', function(hooks) {
 
     await JobsList.visit();
 
-    await selectChoose('[data-test-region-switcher]', newRegion);
+    await selectChoose('[data-test-region-switcher-parent]', newRegion);
 
     assert.ok(
       currentURL().includes(`region=${newRegion}`),
@@ -115,7 +115,7 @@ module('Acceptance | regions (many)', function(hooks) {
 
     await JobsList.visit({ region: startingRegion });
 
-    await selectChoose('[data-test-region-switcher]', defaultRegion);
+    await selectChoose('[data-test-region-switcher-parent]', defaultRegion);
 
     assert.notOk(currentURL().includes('region='), 'No region query param for the default region');
     assert.equal(
@@ -130,7 +130,7 @@ module('Acceptance | regions (many)', function(hooks) {
 
     await Allocation.visit({ id: server.db.allocations[0].id });
 
-    await selectChoose('[data-test-region-switcher]', newRegion);
+    await selectChoose('[data-test-region-switcher-parent]', newRegion);
 
     assert.ok(currentURL().includes('/jobs?'), 'Back at the jobs page');
   });

ui/tests/integration/components/agent-monitor-test.js

@@ -50,7 +50,7 @@ module('Integration | Component | agent-monitor', function(hooks) {
 
     await render(commonTemplate);
 
-    assert.ok(find('[data-test-level-switcher]'));
+    assert.ok(find('[data-test-level-switcher-parent]'));
     assert.ok(find('[data-test-toggle]'));
     assert.ok(find('[data-test-log-box]'));
     assert.ok(find('[data-test-log-box].is-full-bleed.is-dark'));
@@ -109,7 +109,7 @@ module('Integration | Component | agent-monitor', function(hooks) {
     await render(commonTemplate);
     await settled();
 
-    const contentId = await selectOpen('[data-test-level-switcher]');
+    const contentId = await selectOpen('[data-test-level-switcher-parent]');
     run.later(run, run.cancelTimers, INTERVAL);
     await selectOpenChoose(contentId, newLevel.capitalize());
     await settled();
@@ -137,7 +137,7 @@ module('Integration | Component | agent-monitor', function(hooks) {
     await settled();
     assert.equal(find('[data-test-log-cli]').textContent, `[INFO] ${LOG_MESSAGE}\n`);
 
-    const contentId = await selectOpen('[data-test-level-switcher]');
+    const contentId = await selectOpen('[data-test-level-switcher-parent]');
     run.later(run, run.cancelTimers, INTERVAL);
     await selectOpenChoose(contentId, newLevel.capitalize());
     await settled();
@@ -173,7 +173,7 @@ module('Integration | Component | agent-monitor', function(hooks) {
     await settled();
     assert.equal(find('[data-test-log-cli]').textContent, '');
 
-    const contentId = await selectOpen('[data-test-level-switcher]');
+    const contentId = await selectOpen('[data-test-level-switcher-parent]');
     run.later(run, run.cancelTimers, INTERVAL);
     await selectOpenChoose(contentId, newLevel.capitalize());
     await settled();

ui/tests/pages/clients/detail.js

@@ -118,7 +118,7 @@ export default create({
 
     deadlineToggle: toggle('[data-test-drain-deadline-toggle]'),
     deadlineOptions: {
-      open: clickable('[data-test-drain-deadline-option-select] .ember-power-select-trigger'),
+      open: clickable('[data-test-drain-deadline-option-select-parent] .ember-power-select-trigger'),
       options: collection('.ember-power-select-option', {
         label: text(),
         choose: clickable(),

ui/tests/pages/clients/monitor.js

@@ -15,7 +15,7 @@ export default create({
   },
 
   async selectLogLevel(level) {
-    const contentId = await selectOpen('[data-test-level-switcher]');
+    const contentId = await selectOpen('[data-test-level-switcher-parent]');
     run.later(run, run.cancelTimers, 500);
     await selectOpenChoose(contentId, level);
   },

ui/tests/pages/components/page-size-select.js

@@ -1,9 +1,9 @@
 import { clickable, collection, isPresent, text } from 'ember-cli-page-object';
 
 export default () => ({
-  isPresent: isPresent('[data-test-page-size-select]'),
-  open: clickable('[data-test-page-size-select] .ember-power-select-trigger'),
-  selectedOption: text('[data-test-page-size-select] .ember-power-select-selected-item'),
+  isPresent: isPresent('[data-test-page-size-select-parent] .ember-power-select-trigger'),
+  open: clickable('[data-test-page-size-select-parent] .ember-power-select-trigger'),
+  selectedOption: text('[data-test-page-size-select-parent] .ember-power-select-selected-item'),
   options: collection('.ember-power-select-option', {
     testContainer: '#ember-testing',
     resetScope: true,

ui/tests/pages/jobs/list.js

@@ -59,8 +59,8 @@ export default create({
   },
 
   namespaceSwitcher: {
-    isPresent: isPresent('[data-test-namespace-switcher]'),
-    open: clickable('[data-test-namespace-switcher] .ember-power-select-trigger'),
+    isPresent: isPresent('[data-test-namespace-switcher-parent]'),
+    open: clickable('[data-test-namespace-switcher-parent] .ember-power-select-trigger'),
     options: collection('.ember-power-select-option', {
       testContainer: '#ember-testing',
       resetScope: true,

ui/tests/pages/layout.js

@@ -13,7 +13,7 @@ export default create({
     scope: '[data-test-global-header]',
 
     regionSwitcher: {
-      scope: '[data-test-region-switcher]',
+      scope: '[data-test-region-switcher-parent]',
       isPresent: isPresent(),
       open: clickable('.ember-power-select-trigger'),
       options: collection('.ember-power-select-option', {
@@ -22,7 +22,7 @@ export default create({
     },
 
     search: {
-      scope: '[data-test-search]',
+      scope: '[data-test-search-parent]',
 
       click: clickable('.ember-power-select-trigger'),
 
@@ -66,7 +66,7 @@ export default create({
   gutter: {
     scope: '[data-test-gutter-menu]',
     namespaceSwitcher: {
-      scope: '[data-test-namespace-switcher]',
+      scope: '[data-test-namespace-switcher-parent]',
       isPresent: isPresent(),
       open: clickable('.ember-power-select-trigger'),
       options: collection('.ember-power-select-option', {

ui/tests/pages/servers/monitor.js

@@ -15,7 +15,7 @@ export default create({
   },
 
   async selectLogLevel(level) {
-    const contentId = await selectOpen('[data-test-level-switcher]');
+    const contentId = await selectOpen('[data-test-level-switcher-parent]');
     run.later(run, run.cancelTimers, 500);
     await selectOpenChoose(contentId, level);
   },

ui/tests/pages/storage/volumes/list.js

@@ -42,8 +42,8 @@ export default create({
   pageSizeSelect: pageSizeSelect(),
 
   namespaceSwitcher: {
-    isPresent: isPresent('[data-test-namespace-switcher]'),
-    open: clickable('[data-test-namespace-switcher] .ember-power-select-trigger'),
+    isPresent: isPresent('[data-test-namespace-switcher-parent]'),
+    open: clickable('[data-test-namespace-switcher-parent] .ember-power-select-trigger'),
     options: collection('.ember-power-select-option', {
       testContainer: '#ember-testing',
       resetScope: true,

ui/tests/unit/utils/stream-logger-test.js

@@ -13,7 +13,7 @@ module('Unit | Util | StreamLogger', function() {
     });
 
     logger.start();
-    logger.stop();
+    await logger.stop();
 
     assert.notOk(logger.poll.isRunning);
     assert.equal(fetchMock.reader.cancel.callCount, 0);