From 3d9464023dbde64417468f4e623643d31fc3e7a5 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 26 Mar 2021 08:55:12 -0500 Subject: [PATCH] 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 | 1 + .../components/global-search-container.scss | 78 +- ui/app/templates/components/agent-monitor.hbs | 2 +- ui/app/templates/components/drain-popover.hbs | 2 +- .../components/global-search/control.hbs | 1 - ui/app/templates/components/gutter-menu.hbs | 2 +- .../templates/components/page-size-select.hbs | 2 +- .../templates/components/region-switcher.hbs | 22 +- ui/package.json | 6 +- .../acceptance/behaviors/page-size-select.js | 2 +- ui/tests/acceptance/job-detail-test.js | 2 +- ui/tests/acceptance/namespaces-test.js | 12 +- ui/tests/acceptance/regions-test.js | 6 +- .../components/agent-monitor-test.js | 8 +- ui/tests/pages/clients/detail.js | 2 +- ui/tests/pages/clients/monitor.js | 2 +- ui/tests/pages/components/page-size-select.js | 6 +- ui/tests/pages/jobs/list.js | 4 +- ui/tests/pages/layout.js | 6 +- ui/tests/pages/servers/monitor.js | 2 +- ui/tests/pages/storage/volumes/list.js | 4 +- ui/tests/unit/utils/stream-logger-test.js | 2 +- ui/yarn.lock | 730 +++++++++++++++--- 23 files changed, 731 insertions(+), 173 deletions(-) diff --git a/ui/app/components/global-search/control.js b/ui/app/components/global-search/control.js index 603c29131..a72f2ef1c 100644 --- a/ui/app/components/global-search/control.js +++ b/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, diff --git a/ui/app/styles/components/global-search-container.scss b/ui/app/styles/components/global-search-container.scss index 47e8dd646..bb54ca20a 100644 --- a/ui/app/styles/components/global-search-container.scss +++ b/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; } } diff --git a/ui/app/templates/components/agent-monitor.hbs b/ui/app/templates/components/agent-monitor.hbs index f462c9ad8..aa0c7a47e 100644 --- a/ui/app/templates/components/agent-monitor.hbs +++ b/ui/app/templates/components/agent-monitor.hbs @@ -1,5 +1,5 @@
-
+
{{#if this.deadlineEnabled}} -
+
  • -