feat(ui): yarn -> pnpm (#26309)

.copywrite.hcl

@@ -11,6 +11,8 @@ project {
     "command/asset/*.hcl",
     "command/agent/bindata_assetfs.go",
     "ui/node_modules",
+    "pnpm-workspace.yaml",
+    "pnpm-lock.yaml"
 
     // Enterprise files do not fall under the open source licensing. CE-ENT
     // merge conflicts might happen here, please be sure to put new CE

.git-blame-ignore-revs

@@ -1,5 +1,5 @@
 # This commit just fixes some typos and isn't useful
 b0a20b4dc965a38b0c843f47c16685ccad7439da
 
-# giant copywrite headers commit
+# giant copyright headers commit
 f005448366ed3e796a2f22696d8c063dff4677f8

.github/actions/setup-js/action.yml

@@ -2,36 +2,22 @@
 # SPDX-License-Identifier: BUSL-1.1
 
 name: setup-js
-description: install node and yarn, and run yarn install
-inputs:
-  node-version:
-    description: 'node version'
-    # https://github.com/ember-cli/ember-cli/blob/master/docs/node-support.md
-    # package.json has ember-cli at version ~3.28.5 currently
-    default: '20'
+description: install node and pnpm, and run pnpm install
+
 runs:
   using: composite
   steps:
-    - name: Install yarn
-      run: |-
-        # install yarn if not present
-        yarn --version && exit
-        # note: can't `npm install -g` on self-hosted runners
-        npm install yarn --no-package-lock --no-save
-        cd node_modules/.bin
-          ./yarn --version
-          echo "$PWD" >> "$GITHUB_PATH"
-      working-directory: /tmp
-      shell: bash
-    # enforce node version (self-hosted default is not necessarily what we want)
-    # after yarn, so we can use yarn for cache.
+    - name: Install PNPM
+      uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      with:
+        run_install: false
+
     - name: Setup node
       uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
       with:
-        node-version: ${{ inputs.node-version }}
-        cache: yarn
-        cache-dependency-path: ui/yarn.lock
-    - name: Yarn install
-      run: yarn install --frozen-lockfile
-      working-directory: ui
+        node-version-file: package.json
+        cache: pnpm
+
+    - name: PNPM install
+      run: pnpm install
       shell: bash

.github/workflows/build.yml

@@ -116,16 +116,16 @@ jobs:
 
       - name: Build dependencies
         run: make deps
-
-      - name: Setup node and yarn
+      
+      - name: Install PNPM
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          run_install: false
+      - name: Setup node
         uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
-          node-version: "20"
-          cache-dependency-path: "ui/yarn.lock"
-
-      - name: Install Yarn
-        run: |
-          npm install -g yarn
+          node-version-file: package.json
+          cache: pnpm
 
       - name: Build prerelease
         run: make prerelease
@@ -177,15 +177,15 @@ jobs:
       - name: Build dependencies
         run: make deps
 
-      - name: Setup node and yarn
+      - name: Install PNPM
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          run_install: false
+      - name: Setup node
         uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
-          node-version: "20"
-          cache-dependency-path: "ui/yarn.lock"
-
-      - name: Install Yarn
-        run: |
-          npm install -g yarn
+          node-version-file: package.json
+          cache: pnpm
 
       - name: Build prerelease
         run: make prerelease
@@ -299,15 +299,15 @@ jobs:
       - name: Build dependencies
         run: make deps
 
-      - name: Setup node and yarn
+      - name: Install PNPM
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          run_install: false
+      - name: Setup node
         uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
-          node-version: "20"
-          cache-dependency-path: "ui/yarn.lock"
-
-      - name: Install Yarn
-        run: |
-          npm install -g yarn
+          node-version-file: package.json
+          cache: pnpm
 
       - name: Build prerelease
         run: make prerelease

.github/workflows/release.yml

@@ -86,15 +86,15 @@ jobs:
         with:
           go-version: ${{ steps.get-go-version.outputs.go-version }}
 
-      - name: Setup node and yarn
+      - name: Install PNPM
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          run_install: false
+      - name: Setup node
         uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
-          node-version: "20"
-          cache-dependency-path: "ui/yarn.lock"
-
-      - name: Install Yarn
-        run: |
-          npm install -g yarn
+          node-version-file: package.json
+          cache: pnpm
 
       - name: Install dependencies
         run: |

.github/workflows/test-ui.yml

@@ -24,9 +24,9 @@ jobs:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - uses: ./.github/actions/setup-js
       - name: lint:js
-        run: yarn run lint:js
+        run: pnpm lint:js
       - name: lint:hbs
-        run: yarn run lint:hbs
+        run: pnpm lint:hbs
       - id: nonce
         name: nonce
         run: echo "nonce=${{ github.run_id }}-$(date +%s)" >> "$GITHUB_OUTPUT"
@@ -67,7 +67,7 @@ jobs:
           PERCY_TOKEN: ${{ env.PERCY_TOKEN || secrets.PERCY_TOKEN }}
           PERCY_PARALLEL_NONCE: ${{ needs.pre-test.outputs.nonce }}
         run: |
-          yarn exam:parallel --split=${{ matrix.split }} --partition=${{ matrix.partition }} --json-report=test-results/test-results.json
+          pnpm exam:parallel --split=${{ matrix.split }} --partition=${{ matrix.partition }} --json-report=test-results/test-results.json
         continue-on-error: true
       - name: Express failure
         if: steps.ember_exam.outcome == 'failure'
@@ -134,7 +134,7 @@ jobs:
         env:
           PERCY_TOKEN: ${{ env.PERCY_TOKEN || secrets.PERCY_TOKEN }}
           PERCY_PARALLEL_NONCE: ${{ needs.pre-test.outputs.nonce }}
-        run: yarn percy build:finalize
+        run: pnpm percy build:finalize
 
   handle-failure:
     needs:

.gitignore

@@ -92,6 +92,7 @@ rkt-*
 /ui/tmp
 
 # dependencies
+/node_modules/
 /ui/node_modules
 /ui/bower_components
 

.npmrc

@@ -0,0 +1,27 @@
+####################
+# super strict mode
+####################
+auto-install-peers=false
+strict-peer-dependents=true
+resolve-peers-from-workspace-root=false
+
+################
+# Optimizations
+################
+# Less strict, but required for tooling to not barf on duplicate peer trees.
+# (many libraries declare the same peers, which resolve to the same
+#  versions)
+dedupe-peer-dependents=true
+public-hoist-pattern[]=ember-source
+
+################
+# Compatibility
+################
+# highest is what everyone is used to, but
+# not ensuring folks are actually compatible with declared ranges.
+resolution-mode=highest
+
+################
+# Misc
+################
+verify-deps-before-run=install # always verify deps before running any scripts

GNUmakefile

@@ -379,18 +379,18 @@ static-assets: ## Compile the static routes to serve alongside the API
 .PHONY: test-ui
 test-ui: ## Run Nomad UI test suite
 	@echo "==> Installing JavaScript assets"
-	@cd ui && npm rebuild node-sass
-	@cd ui && yarn install
+	@pnpm rebuild node-sass
+	@pnpm install --silent --fetch-timeout 300000
 	@echo "==> Running ember tests"
-	@cd ui && npm test
+	@pnpm -F nomad-ui test
 
 .PHONY: ember-dist
 ember-dist: ## Build the static UI assets from source
 	@echo "==> Installing JavaScript assets"
-	@cd ui && yarn install --silent --network-timeout 300000
-	@cd ui && npm rebuild node-sass
+	@pnpm install --silent --fetch-timeout 300000
+	@pnpm rebuild node-sass
 	@echo "==> Building Ember application"
-	@cd ui && npm run build
+	@pnpm -F nomad-ui build
 
 .PHONY: dev-ui
 dev-ui: ember-dist static-assets ## Build a dev UI binary

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nomad-ui",
+  "private": true,
+  "scripts": {},
+  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b",
+  "engines": {
+    "node": ">= 22.17.1",
+    "pnpm": ">= 10"
+  },
+  "pnpm": {
+    "overrides": {
+      "cross-spawn": "7.0.5",
+      "ember-auto-import": "^2.7.3",
+      "prop-types": "^15.8.1",
+      "clean-css@<4.1.11": ">=4.1.11",
+      "markdown-it@<12.3.2": ">=12.3.2",
+      "json5@<1.0.2": ">=1.0.2",
+      "braces@<3.0.3": ">=3.0.3",
+      "micromatch@<4.0.8": ">=4.0.8",
+      "ansi-html@<0.0.8": ">=0.0.8",
+      "@babel/runtime@<7.26.10": ">=7.26.10",
+      "on-headers@<1.1.0": ">=1.1.0"
+    }
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'ui'

ui/README.md

@@ -7,16 +7,17 @@ The official Nomad UI.
 This is an [ember.js](https://emberjs.com/) project, and you will need the following tools installed on your computer.
 
 - [The current Node.js LTS release](https://nodejs.org/)
-- [Yarn](https://yarnpkg.com)
 - [Ember CLI](https://ember-cli.com/)
+- Make sure you have `corepack` installed wither via `node` as it usually comes bundled with it or install manually with homebrew.
 
 ## Installation
 
 The Nomad UI gets cloned along with the rest of Nomad. To install dependencies, do the following from the root of the Nomad project:
 
-```
-$ cd ui
-$ yarn
+```shell
+corepack enable
+corepack prepare pnpm@latest --activate
+pnpm i
 ```
 
 ## Running / Development
@@ -60,8 +61,8 @@ In the test environment, the fake data is generated with a random seed. If you w
 
 ### Linting
 
-- `yarn lint`
-- `yarn lint:fix`
+- `pnpm lint`
+- `pnpm lint:fix`
 
 ### Building
 

ui/app/components/agent-monitor.hbs

@@ -7,6 +7,8 @@
   <div class="boxed-section-head" data-test-level-switcher-parent>
     <PowerSelect
       data-test-level-switcher
+      @ariaLabel="label-level-switcher"
+      @ariaLabelledBy="label-level-switcher"
       @tagName="div"
       @triggerClass="is-compact pull-left"
       @options={{this.levels}}

ui/app/components/drain-popover.hbs

@@ -48,6 +48,8 @@
       >
         <PowerSelect
           data-test-drain-deadline-option-select
+          @ariaLabel="label-drain-deadline-option-select"
+          @ariaLabelledBy="label-drain-deadline-option-select"
           @tagName="div"
           @options={{this.durationQuickOptions}}
           @selected={{this.selectedDurationQuickOption}}

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

@@ -6,6 +6,8 @@
   <PowerSelect
     @tagName="div"
     data-test-search
+    @ariaLabel="label-global-search"
+    @ariaLabelledBy="label-global-search"
     @searchEnabled={{true}}
     @search={{perform this.search}}
     @onInput={{action 'ensureMinimumLength'}}

ui/app/components/multi-select-dropdown.hbs

@@ -4,6 +4,8 @@
 ~}}
 
 <BasicDropdown
+  @ariaLabel="label-multi-select-dropdown"
+  @ariaLabelledBy="{{this.elementId}}-label"
   @horizontalPosition="auto"
   @onOpen={{action
     (queue (action (mut this.isOpen) true) (action this.capture))

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

@@ -11,6 +11,8 @@
     @tagName="div"
     class="field-body"
     data-test-page-size-select
+    @ariaLabel="label-page-size-select"
+    @ariaLabelledBy="label-page-size-select"
     @options={{this.pageSizeOptions}}
     @selected={{this.userSettings.pageSize}}
     @onChange={{action (queue (action (mut this.userSettings.pageSize)) (action this.onChange))

ui/app/components/popover-menu.hbs

@@ -4,6 +4,8 @@
 ~}}
 
 <BasicDropdown
+  @ariaLabel="label-popover-menu"
+  @ariaLabelledBy="label-popover-menu"
   @horizontalPosition="right"
   @disabled={{this.isDisabled}}
   @onOpen={{action

ui/app/components/region-switcher.hbs

@@ -9,6 +9,8 @@
   <span data-test-region-switcher-parent>
     <PowerSelect
       data-test-region-switcher
+      @ariaLabel="label-region-switcher"
+      @ariaLabelledBy="label-region-switcher"
       @tagName="div"
       @triggerClass={{this.decoration}}
       @options={{this.sortedRegions}}

ui/app/components/single-select-dropdown/index.hbs

@@ -5,6 +5,8 @@
 
 <div data-test-single-select-dropdown class="dropdown" ...attributes>
   <PowerSelect
+    @ariaLabel="label-single-select-dropdown-{{@label}}"
+    @ariaLabelledBy="label-single-select-dropdown-{{@label}}"
     @options={{@options}}
     @disabled={{@disabled}}
     @selected={{this.activeOption}}

ui/app/controllers/evaluations/index.js

@@ -10,7 +10,6 @@ import { tracked } from '@glimmer/tracking';
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import { useMachine } from 'ember-statecharts';
-import { use } from 'ember-usable';
 import evaluationsMachine from '../../machines/evaluations';
 
 const ALL_NAMESPACE_WILDCARD = '*';
@@ -20,19 +19,22 @@ export default class EvaluationsController extends Controller {
   @service userSettings;
 
   // We use statecharts here to manage complex user flows for the sidebar logic
-  @use
-  statechart = useMachine(evaluationsMachine).withConfig({
-    services: {
-      loadEvaluation: this.loadEvaluation,
-    },
-    actions: {
-      updateEvaluationQueryParameter: this.updateEvaluationQueryParameter,
-      removeCurrentEvaluationQueryParameter:
-        this.removeCurrentEvaluationQueryParameter,
-    },
-    guards: {
-      sidebarIsOpen: this._sidebarIsOpen,
-    },
+  statechart = useMachine(this, () => {
+    return {
+      machine: evaluationsMachine.withConfig({
+        services: {
+          loadEvaluation: this.loadEvaluation,
+        },
+        actions: {
+          updateEvaluationQueryParameter: this.updateEvaluationQueryParameter,
+          removeCurrentEvaluationQueryParameter:
+            this.removeCurrentEvaluationQueryParameter,
+        },
+        guards: {
+          sidebarIsOpen: this._sidebarIsOpen,
+        },
+      }),
+    };
   });
 
   queryParams = [

ui/app/index.html

@@ -16,7 +16,7 @@
 
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link rel="stylesheet" href="{{rootURL}}assets/nomad-ui.css">
-    <link rel="icon" type="image/png" href="{{rootURL}}/favicon.ico" />
+    <link rel="icon" type="image/png" href="{{rootURL}}favicon.ico" />
 
     {{content-for "head-footer"}}
   </head>

ui/app/styles/app.scss

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+@use 'ember-basic-dropdown.css';
+@use 'ember-power-select.css';
+
 @import './core';
-
-@import 'ember-power-select';
-
-@import './components';
 @import '@hashicorp/design-system-components';
+@import './components';
 @import './charts';

ui/app/styles/components/job-status-panel.scss

@@ -2,7 +2,7 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
-@import '~@hashicorp/design-system-tokens/dist/products/css/helpers/colors.css';
+@use 'helpers/color.css'; // HDS tokens
 
 .job-status-panel {
   // #region layout

ui/app/styles/core.scss

@@ -11,13 +11,13 @@
 @import './utils/layout';
 
 // Start with Bulma variables as a foundation
-@import 'bulma/sass/utilities/initial-variables';
+@import 'sass/utilities/initial-variables';
 
 // Override variables where appropriate
 @import './core/variables.scss';
 
 // Bring in the rest of Bulma
-@import 'bulma/bulma';
+@import 'bulma';
 
 @import './utils/structure-colors';
 

ui/app/templates/allocations.hbs

@@ -5,4 +5,4 @@
 
 <PageLayout>
   {{outlet}}
-</PageLayout>
+</PageLayout>

ui/app/templates/application.hbs

@@ -3,6 +3,8 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
+<BasicDropdownWormhole />
+
 {{page-title
   (if this.system.shouldShowRegions (concat this.system.activeRegion " - "))
   (if this.system.agent.config.UI.Label.Text (concat this.system.agent.config.UI.Label.Text " - "))

ui/config/ember-cli-update.json

@@ -11,7 +11,7 @@
           "codemodsSource": "ember-app-codemods-manifest@1",
           "isBaseBlueprint": true,
           "options": [
-            "--yarn",
+            "--pnpm",
             "--no-welcome"
           ]
         }

ui/ember-cli-build.js

@@ -30,8 +30,11 @@ module.exports = function (defaults) {
     sassOptions: {
       precision: 4,
       includePaths: [
+        './node_modules/bulma',
         './node_modules/@hashicorp/design-system-tokens/dist/products/css',
         './node_modules/@hashicorp/design-system-components/dist/styles',
+        './node_modules/ember-basic-dropdown/vendor',
+        './node_modules/ember-power-select/vendor',
       ],
     },
   });

ui/lib/bulma/index.js

@@ -1,38 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-/* eslint-env node */
-'use strict';
-
-var path = require('path');
-var Funnel = require('broccoli-funnel');
-
-module.exports = {
-  name: 'bulma',
-
-  isDevelopingAddon: function () {
-    return true;
-  },
-
-  included: function (app) {
-    this._super.included.apply(this, arguments);
-
-    // see: https://github.com/ember-cli/ember-cli/issues/3718
-    while (typeof app.import !== 'function' && app.app) {
-      app = app.app;
-    }
-
-    this.bulmaPath = path.dirname(require.resolve('bulma'));
-    return app;
-  },
-
-  treeForStyles: function () {
-    return new Funnel(this.bulmaPath, {
-      srcDir: '/',
-      destDir: 'app/styles/bulma',
-      annotation: 'Funnel (bulma)',
-    });
-  },
-};

ui/lib/bulma/package.json

@@ -1,10 +0,0 @@
-{
-  "name": "bulma",
-  "keywords": [
-    "ember-addon"
-  ],
-  "devDependencies": {
-    "broccoli-funnel": "^2.0.1",
-    "bulma": "0.6.1"
-  }
-}

ui/package.json

@@ -1,6 +1,7 @@
 {
   "name": "nomad-ui",
   "version": "0.0.0",
+  "private": true,
   "description": "The web ui for Nomad, by HashiCorp.",
   "repository": "",
   "directories": {
@@ -9,22 +10,22 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "precommit": "lint-staged",
+    "exam": "percy exec -- ember exam --split=4 --parallel",
+    "exam:parallel": "percy exec --parallel -- ember exam",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "local:exam": "ember exam --server --load-balance --parallel=4",
+    "local:qunitdom": "ember test --server --query=dockcontainer",
+    "percy": "percy",
+    "precommit": "lint-staged",
+    "seedless-test": "USE_PERCY=false ember test",
     "start": "ember server",
     "test": "npm-run-all lint test:*",
-    "exam": "percy exec -- ember exam --split=4 --parallel",
-    "exam:parallel": "percy exec --parallel -- ember exam",
-    "percy": "percy",
-    "test:ember": "percy exec -- ember test",
-    "local:qunitdom": "ember test --server --query=dockcontainer",
-    "local:exam": "ember exam --server --load-balance --parallel=4",
-    "seedless-test": "USE_PERCY=false ember test"
+    "test:ember": "percy exec -- ember test"
   },
   "husky": {
     "hooks": {
@@ -40,6 +41,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/helper-string-parser": "^7.19.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
     "@ember/legacy-built-in-components": "^0.4.1",
     "@ember/optional-features": "2.0.0",
@@ -47,6 +49,10 @@
     "@ember/test-helpers": "^3.0.3",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
+    "@hashicorp/design-system-components": "4.13.0",
+    "@hashicorp/design-system-tokens": "^2.3.0",
+    "@percy/cli": "^1.30.0",
+    "@percy/ember": "^4.2.0",
     "anser": "^2.1.1",
     "babel-eslint": "^10.1.0",
     "base64-js": "^1.3.1",
@@ -54,6 +60,8 @@
     "bulma": "0.9.3",
     "codemirror": "^5.58.2",
     "core-js": "3.19.1",
+    "curved-arrows": "^0.1.0",
+    "d3": "^7.3.0",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
     "d3-format": "^3.0.1",
@@ -62,9 +70,11 @@
     "d3-shape": "^3.0.1",
     "d3-time-format": "^4.0.0",
     "d3-transition": "^3.0.1",
+    "dompurify": "^3.2.5",
     "duration-js": "^4.0.0",
     "ember-a11y-testing": "^7.0.0",
     "ember-auto-import": "^2.4.0",
+    "ember-basic-dropdown": "^8.6.2",
     "ember-can": "^4.1.0",
     "ember-classic-decorator": "^3.0.0",
     "ember-cli": "~3.28.5",
@@ -78,14 +88,14 @@
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-mirage": "2.2.0",
     "ember-cli-moment-shim": "^3.8.0",
-    "ember-cli-page-object": "^2.0.0-beta.3",
+    "ember-cli-page-object": "^2.3.1",
     "ember-cli-sass": "^11.0.1",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-string-helpers": "^6.1.0",
     "ember-cli-terser": "^4.0.2",
     "ember-click-outside": "^5.0.0",
     "ember-composable-helpers": "^5.0.0",
-    "ember-concurrency": "^2.2.1",
+    "ember-concurrency": "^4.0.4",
     "ember-copy": "^2.0.1",
     "ember-data": "~3.24",
     "ember-data-model-fragments": "5.0.0-beta.3",
@@ -96,12 +106,12 @@
     "ember-inflector": "^4.0.2",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^1.0.0",
-    "ember-modifier": "3.2.7",
+    "ember-modifier": "3.2.6",
     "ember-moment": "^9.0.1",
     "ember-on-resize-modifier": "^1.0.0",
     "ember-overridable-computed": "^1.0.0",
     "ember-page-title": "^7.0.0",
-    "ember-power-select": "^7.2.0",
+    "ember-power-select": "^8.6.2",
     "ember-qunit": "^9.0.2",
     "ember-render-helpers": "^0.2.0",
     "ember-resolver": "^8.0.3",
@@ -109,13 +119,13 @@
     "ember-sinon": "^5.0.0",
     "ember-source": "~3.28.10",
     "ember-stargate": "^0.4.1",
-    "ember-statecharts": "^0.13.2",
+    "ember-statecharts": "0.14.0",
     "ember-template-lint": "^3.15.0",
     "ember-test-selectors": "^6.0.0",
     "ember-truth-helpers": "^3.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-ember": "^10.5.9",
+    "eslint-plugin-ember": "^11.12.0",
     "eslint-plugin-ember-a11y-testing": "a11y-tool-sandbox/eslint-plugin-ember-a11y-testing#ca31c9698c7cb105f1c9761d98fcaca7d6874459",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.1",
@@ -130,7 +140,10 @@
     "loader.js": "^4.7.0",
     "lodash.intersection": "^4.4.0",
     "lodash.isequal": "^4.5.0",
+    "lru_map": "^0.4.1",
+    "marked": "^12.0.2",
     "morgan": "^1.3.2",
+    "no-case": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "pretender": "^3.0.1",
     "prettier": "^2.5.1",
@@ -140,8 +153,11 @@
     "sass": "^1.17.3",
     "testem": "^3.15.2",
     "testem-multi-reporter": "^1.2.0",
+    "tether": "^2.0.0",
     "text-encoder-lite": "^2.0.0",
+    "title-case": "^4.3.2",
     "webpack": "^5.86.0",
+    "xstate": "^4.12.0",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "0.8.0"
   },
@@ -156,33 +172,5 @@
   },
   "ember": {
     "edition": "octane"
-  },
-  "private": true,
-  "ember-addon": {
-    "paths": [
-      "lib/bulma"
-    ]
-  },
-  "dependencies": {
-    "@babel/helper-string-parser": "^7.19.4",
-    "@hashicorp/design-system-components": "^4.13.0",
-    "@percy/cli": "^1.30.0",
-    "@percy/ember": "^4.2.0",
-    "curved-arrows": "^0.1.0",
-    "d3": "^7.3.0",
-    "dompurify": "^3.2.5",
-    "lru_map": "^0.4.1",
-    "marked": "^12.0.2",
-    "no-case": "^3.0.4",
-    "tether": "^2.0.0",
-    "title-case": "^3.0.3"
-  },
-  "resolutions": {
-    "ember-auto-import": "^2.7.3",
-    "prop-types": "^15.8.1",
-    "**/express/**/path-to-regexp": "0.1.10",
-    "**/nise/**/path-to-regexp": "1.9.0",
-    "cross-spawn": "7.0.5",
-    "**/socket.io/**/ws": "^8.18.0"
   }
 }

ui/tests/acceptance/evaluations-test.js

@@ -18,10 +18,8 @@ import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { Response } from 'ember-cli-mirage';
 import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
-import {
-  selectChoose,
-  clickTrigger,
-} from 'ember-power-select/test-support/helpers';
+import { selectChoose } from 'ember-power-select/test-support';
+import { clickTrigger } from 'ember-power-select/test-support/helpers';
 import { generateAcceptanceTestEvalMock } from '../../mirage/utils';
 import percySnapshot from '@percy/ember';
 import faker from 'nomad-ui/mirage/faker';

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

@@ -14,10 +14,8 @@ import {
 } from '@ember/test-helpers';
 import { assign } from '@ember/polyfills';
 import { module, test } from 'qunit';
-import {
-  selectChoose,
-  clickTrigger,
-} from 'ember-power-select/test-support/helpers';
+import { selectChoose } from 'ember-power-select/test-support';
+import { clickTrigger } from 'ember-power-select/test-support/helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';

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

@@ -20,6 +20,9 @@ module('Acceptance | server detail', function (hooks) {
 
   hooks.beforeEach(async function () {
     server.createList('agent', 3);
+    let managementToken = server.create('token');
+
+    window.localStorage.nomadTokenSecret = managementToken.secretId;
     server.create('region', { id: 'global' });
     agent = server.db.agents[0];
     await ServerDetail.visit({ name: agent.name });

ui/tests/acceptance/token-test.js

@@ -27,10 +27,8 @@ import faker from 'nomad-ui/mirage/faker';
 import moment from 'moment';
 import { run } from '@ember/runloop';
 import { allScenarios } from '../../mirage/scenarios/default';
-import {
-  selectChoose,
-  clickTrigger,
-} from 'ember-power-select/test-support/helpers';
+import { selectChoose } from 'ember-power-select/test-support';
+import { clickTrigger } from 'ember-power-select/test-support/helpers';
 
 let job;
 let node;

ui/tests/integration/components/single-select-dropdown-test.js

@@ -6,10 +6,8 @@
 import { findAll, find, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import {
-  selectChoose,
-  clickTrigger,
-} from 'ember-power-select/test-support/helpers';
+import { selectChoose } from 'ember-power-select/test-support';
+import { clickTrigger } from 'ember-power-select/test-support/helpers';
 import sinon from 'sinon';
 import hbs from 'htmlbars-inline-precompile';
 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';

ui/tests/pages/components/facet.js

@@ -4,10 +4,8 @@
  */
 
 import { clickable, collection, text, attribute } from 'ember-cli-page-object';
-import {
-  selectChoose,
-  clickTrigger,
-} from 'ember-power-select/test-support/helpers';
+import { selectChoose } from 'ember-power-select/test-support';
+import { clickTrigger } from 'ember-power-select/test-support/helpers';
 
 export const multiFacet = (scope) => ({
   scope,