Upgrade desktop UI to Ember 4.12.2 (#1990)

* Upgrade desktop UI to Ember 4.12.2

* refactor: 💡 refactor scripts

Refactor concurrently scripts, and removed duplicate entries in
`eslintrc.js`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11747

* refactor: 💡 peer dependencies

Revert changes to `peerDependencies`.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11747

* refactor: 💡 revert config back before upgrade

Revert `styelint-standard-config-scss` back to 6.0.0 so that it can be
put into seperate ticket.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11747

* Update _notify.scss

fix misspelling

* refactor: 💡 revert dependency

Revert `stylelint-config-standard-scss` back to original version

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11747

package.json

@@ -22,14 +22,14 @@
     "build:ui:desktop:win": "docker-compose -f docker-compose-embedding.yml run build-desktop-production && yarn build:ui:desktop:app",
     "build:ui:desktop:production": "yarn --cwd ui/desktop build:production",
     "build:ui:desktop:app": "yarn --cwd ui/desktop build:desktop",
-    "lint": "npm-run-all -p lint:*",
+    "lint": "concurrently \"yarn:lint:*\" --names \"lint:\"",
     "lint:addons-api": "yarn --cwd addons/api lint",
     "lint:addons-auth": "yarn --cwd addons/auth lint",
     "lint:addons-core": "yarn --cwd addons/core lint",
     "lint:addons-rose": "yarn --cwd addons/rose lint",
     "lint:ui-admin": "yarn --cwd ui/admin lint",
     "lint:ui-desktop": "yarn --cwd ui/desktop lint",
-    "test": "npm-run-all -p test:*",
+    "test": "concurrently \"yarn:test:*\" --names \"test:\"",
     "test:addons-api": "yarn --cwd addons/api test",
     "test:addons-auth": "yarn --cwd addons/auth test",
     "test:addons-core": "yarn --cwd addons/core test",

ui/admin/package.json

@@ -31,7 +31,7 @@
     "start": "ember serve",
     "clean:coverage": "rm -rf coverage_*",
     "pretest": "yarn clean:coverage",
-    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
+    "test": "concurrently \"npm:test:*\" --names \"test:\"",
     "test:ember": "COVERAGE=true ember exam --test-port 0 --split=4 --parallel=1 --random",
     "e2e": "yarn playwright test --config ./tests/e2e/playwright.config.js",
     "e2e:dev:chrome": "yarn run e2e --project=chromium --headed",

ui/desktop/.ember-cli

@@ -8,8 +8,8 @@
   "disableAnalytics": false,
 
   /**
-  Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+    Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
-  rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+    rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
   "isTypeScriptProject": false
 }

ui/desktop/.eslintrc.js

@@ -9,12 +9,14 @@ module.exports = {
   root: true,
   parser: '@babel/eslint-parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 'latest',
     sourceType: 'module',
     // This is specific babel-config. If grows consider creating a babel config file
     requireConfigFile: false,
     babelOptions: {
-      plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+      ],
     },
     // end of babel-config
   },
@@ -36,8 +38,8 @@ module.exports = {
       files: [
         './.eslintrc.js',
         './.prettierrc.js',
+        './.stylelintrc.js',
         './.template-lintrc.js',
-        '.stylelintrc.js',
         './ember-cli-build.js',
         './testem.js',
         './testem-electron.js',
@@ -53,13 +55,7 @@ module.exports = {
         browser: false,
         node: true,
       },
-      plugins: ['node'],
+      extends: ['plugin:n/recommended'],
-      extends: ['plugin:node/recommended'],
-      rules: {
-        // this can be removed once the following is fixed
-        // https://github.com/mysticatea/eslint-plugin-node/issues/77
-        'node/no-unpublished-require': 'off',
-      },
     },
     {
       // test files

ui/desktop/.stylelintignore

@@ -0,0 +1,8 @@
+# unconventional files
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# addons
+/.node_modules.ember-try/

ui/desktop/.template-lintrc.js

@@ -15,4 +15,12 @@ module.exports = {
     'no-implicit-this': { allow: ['app-name', 'is-loading'] },
     'no-route-action': false,
   },
+  overrides: [
+    {
+      files: '**/tests/**/*.{js,gts,gjs}',
+      rules: {
+        prettier: false,
+      },
+    },
+  ],
 };

ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs

@@ -214,9 +214,11 @@
         </:body>
       </Hds::Table>
 
-    {{else if (has-resource-filter-selections
+    {{else if
-      'scopes.scope.projects.sessions.index' 'status' 'project'
+      (has-resource-filter-selections
-    )}}
+        'scopes.scope.projects.sessions.index' 'status' 'project'
+      )
+    }}
       <Rose::Layout::Centered>
         <Rose::Message @title={{t 'titles.no-results'}} as |message|>
           <message.description>

ui/desktop/config/ember-cli-update.json

@@ -3,7 +3,7 @@
   "packages": [
     {
       "name": "ember-cli",
-      "version": "4.4.1",
+      "version": "4.12.2",
       "blueprints": [
         {
           "name": "app",

ui/desktop/config/environment.js

@@ -8,21 +8,17 @@
 const APP_NAME = process.env.APP_NAME || 'Boundary';
 
 module.exports = function (environment) {
-  let ENV = {
+  const ENV = {
     modulePrefix: 'desktop',
     environment,
     rootURL: process.env.EMBER_CLI_ELECTRON ? '' : '/',
     locationType: process.env.EMBER_CLI_ELECTRON ? 'hash' : 'auto',
     EmberENV: {
+      EXTEND_PROTOTYPES: false,
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
         // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
       },
-      EXTEND_PROTOTYPES: false,
-      // EXTEND_PROTOTYPES: {
-      //   // Prevent Ember Data from overriding Date.parse.
-      //   Date: false
-      // }
     },
 
     APP: {

ui/desktop/ember-cli-build.js

@@ -8,7 +8,7 @@
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
-  let app = new EmberApp(defaults, {
+  const app = new EmberApp(defaults, {
     hinting: false,
     'ember-cli-babel': {
       includeExternalHelpers: true,

ui/desktop/package.json

@@ -18,8 +18,8 @@
     "build:desktop": "yarn build:desktop:install && yarn --cwd electron-app make",
     "build:desktop:debianOnMacOS": "yarn build:desktop:install && BUILD_DEBIAN=true yarn --cwd electron-app make --platform linux --arch x64",
     "build:desktop:install": "yarn install --cwd electron-app",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint .",
@@ -27,7 +27,7 @@
     "lint:sass": "stylelint '**/*.scss'",
     "lint:sass:fix": "stylelint '**/*.scss' --fix",
     "lint:electron": "electronegativity -r -i ./electron-app",
-    "format": "npm-run-all format:*",
+    "format": "concurrently \"npm:format:*\" --names \"format:\"",
     "format:hbs": "prettier --write 'app/**/*.hbs'",
     "format:js": "prettier --write '{app,config,stories,tests,electron-app/src}/**/*.js' *.js",
     "format:sass": "prettier --write app/**/*.scss",
@@ -36,7 +36,7 @@
     "start:desktop": "ember electron",
     "clean:coverage": "rm -rf coverage_*",
     "pretest": "yarn clean:coverage",
-    "test": "npm-run-all test:*",
+    "test": "concurrently \"npm:test:*\" --names \"test:\"",
     "test:ember": "cross-env COVERAGE=true ember exam --test-port 0 --split=4 --parallel=1 --random",
     "e2e": "yarn run build && yarn run e2e:dev",
     "e2e:dev": "npx playwright test --headed",
@@ -51,12 +51,13 @@
     "xterm-addon-fit": "^0.7.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.18.2",
+    "@babel/eslint-parser": "^7.21.3",
-    "@babel/plugin-proposal-decorators": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
     "@doyensec/electronegativity": "^1.10.2",
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^2.0.4",
-    "@ember/test-helpers": "^2.8.1",
+    "@ember/string": "^3.0.1",
+    "@ember/test-helpers": "^2.9.3",
     "@embroider/macros": "^1.13.1",
     "@faker-js/faker": "^8.0.2",
     "@glimmer/component": "^1.1.2",
@@ -65,49 +66,48 @@
     "babel-loader": "^8.2.5",
     "broccoli-asset-rev": "^3.0.0",
     "clipboard": "^2.0.8",
+    "concurrently": "^8.0.1",
     "core": "*",
     "cross-env": "^7.0.3",
     "doctoc": "^2.2.0",
     "ember-a11y-testing": "^4.2.0",
-    "ember-auto-import": "^2.4.2",
+    "ember-auto-import": "^2.6.3",
     "ember-autofocus-modifier": "^4.0.1",
-    "ember-cli": "^4.4.1",
+    "ember-cli": "^4.12.2",
-    "ember-cli-app-version": "^5.0.0",
+    "ember-cli-app-version": "^6.0.0",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-code-coverage": "^1.0.3",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-flash": "^4.0.0",
-    "ember-cli-htmlbars": "^6.1.0",
+    "ember-cli-htmlbars": "^6.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sass": "^11.0.1",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-electron": "^3.1.1",
     "ember-exam": "^8.0.0",
-    "ember-export-application-global": "^2.0.1",
     "ember-inline-svg": "^1.0.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-modifier": "^3.2.7",
+    "ember-modifier": "^4.1.0",
     "ember-page-title": "^7.0.0",
     "ember-pollster": "https://github.com/hashicorp/ember-pollster.git#718db797382b04aca281216319885c5ff625f539",
-    "ember-qunit": "^6.0.0",
+    "ember-qunit": "^6.2.0",
-    "ember-resolver": "^8.0.3",
+    "ember-resolver": "^10.0.0",
-    "ember-source": "~4.4.0",
+    "ember-source": "~4.12.0",
-    "ember-template-lint": "^4.14.0",
+    "ember-template-lint": "^5.7.2",
-    "ember-template-lint-plugin-prettier": "^4.0.0",
+    "ember-template-lint-plugin-prettier": "^5.0.0",
     "ember-wormhole": "^0.6.0",
-    "eslint": "^8.18.0",
+    "eslint": "^8.37.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-ember": "^10.6.1",
+    "eslint-plugin-ember": "^11.5.0",
-    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-n": "^15.7.0",
-    "eslint-plugin-qunit": "^7.3.0",
+    "eslint-plugin-qunit": "^7.3.4",
     "js-bexpr": "hashicorp/js-bexpr#9b4a4b54d85eba67fdfc0990133d1518d890b1e1",
     "loader.js": "^4.7.0",
     "lodash": "4.17.21",
-    "npm-run-all": "^4.1.5",
     "playwright": "^1.30.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.0",
-    "qunit": "^2.19.1",
+    "qunit": "^2.19.4",
     "qunit-dom": "^2.0.0",
     "rose": "*",
     "sass": "^1.55.0",
@@ -115,8 +115,10 @@
     "sinon": "^14.0.0",
     "stylelint": "^15.10.1",
     "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-config-standard": "^32.0.0",
-    "webpack": "^5.76.0"
+    "stylelint-config-standard-scss": "^6.0.0",
+    "tracked-built-ins": "^3.1.1",
+    "webpack": "^5.78.0"
   },
   "engines": {
     "node": "16.* || 18.*"

ui/desktop/tests/integration/components/copyable-test.js

@@ -12,8 +12,9 @@ module('Integration | Component | copyable', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
+    this.set('actionText', 'text');
     await render(
-      hbs`<Copyable @buttonText="Copy me" @text="foo">text</Copyable>`
+      hbs`<Copyable @buttonText="Copy me" @text="foo">{{this.actionText}}</Copyable>`,
     );
     assert.ok(find('.copyable'));
     assert.strictEqual(find('.copyable-content').textContent.trim(), 'text');

ui/desktop/tests/integration/components/dialog-detail-test.js

@@ -17,11 +17,12 @@ module('Integration | Component | dialog-detail', function (hooks) {
   });
 
   test('it renders with content', async function (assert) {
+    this.set('value', 'Test');
     await render(hbs`
       <DialogDetail as |dialogDetail|>
         <dialogDetail.notification />
         <dialogDetail.body>
-          <h2>Test</h2>
+          <h2>{{this.value}}</h2>
         </dialogDetail.body>
         <dialogDetail.footer></dialogDetail.footer>
       </DialogDetail>