[UI] - migrate to pnpm for JS package management (#11651) (#11661)

* move from yarn to pnpm for package management

* remove lodash.template patch override

* remove .yarn folder

* update GHA to use pnpm

* add @babel/plugin-proposal-decorators

* remove .yarnrc.yml

* add lock file to copywrite ignore

* add @codemirror/view as a dep for its types

* use more strict setting about peerDeps

* address some peerDep issues with ember-power-select and ember-basic-dropdown

* enable TS compilation for the kubernetes engine

* enable TS compilation in kv engine

* ignore workspace file

* use new headless mode in CI

* update enos CI scenarios

* add qs and express resolutions

* run 'pnpm up glob' and 'pnpm up js-yaml' to upgrade those packages

* run 'pnpm up preact' because posthog-js had a vulnerable install. see https://github.com/advisories/GHSA-36hm-qxxp-pg3

* add work around for browser timeout errors in test

* update other references of yarn to pnpm

Co-authored-by: Matthew Irish <39469+meirish@users.noreply.github.com>

.copywrite.hcl

@@ -11,6 +11,8 @@ project {
   header_ignore = [
     "helper/pkcs7/**",
     "ui/node_modules/**",
+    "ui/pnpm-lock.yaml",
+    "ui/pnpm-workspace.yaml",
     "enos/modules/k8s_deploy_vault/raft-config.hcl",
     "plugins/database/postgresql/scram/**",
     "enos/.enos/**",

.github/workflows/build.yml

@@ -312,12 +312,18 @@ jobs:
           # Never do a partial restore of the web_ui if we don't get a cache hit.
           key: ui-${{ steps.ui-hash.outputs.ui-hash }}
       - if: steps.cache-ui-assets.outputs.cache-hit != 'true'
-        name: Set up node and yarn
+        name: Install PNPM
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          run_install: false
+          package_json_file: './ui/package.json'
+      - if: steps.cache-ui-assets.outputs.cache-hit != 'true'
+        name: Set up node and pnpm
         uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
           node-version-file: ui/package.json
-          cache: yarn
+          cache: pnpm
-          cache-dependency-path: ui/yarn.lock
+          cache-dependency-path: ui/pnpm-lock.yaml
       - if: steps.cache-ui-assets.outputs.cache-hit != 'true'
         name: Build UI
         run: make ci-build-ui

.github/workflows/ci.yml

@@ -271,17 +271,19 @@ jobs:
       - uses: ./.github/actions/set-up-go
         with:
           github-token: ${{ secrets.ELEVATED_GITHUB_TOKEN }}
-      # Setup node.js without caching to allow running npm install -g yarn (next step)
+      - name: Install PNPM
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          run_install: false
+          package_json_file: './ui/package.json'
+
+      # Setup node.js with caching using the pnpm-lock.yaml file
       - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
           node-version-file: './ui/package.json'
-      - run: npm install -g yarn
+          cache: pnpm
-      # Setup node.js with caching using the yarn.lock file
+          cache-dependency-path: ui/pnpm-lock.yaml
-      - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+
-        with:
-          node-version-file: './ui/package.json'
-          cache: yarn
-          cache-dependency-path: ui/yarn.lock
       - uses: browser-actions/setup-chrome@b94431e051d1c52dcbe9a7092a4f10f827795416 # v2.1.0
         with:
           # Temporarily pin our Chrome version while we sort out a broken test on latest
@@ -289,7 +291,7 @@ jobs:
       - name: ui-dependencies
         working-directory: ./ui
         run: |
-          yarn install --frozen-lockfile
+          pnpm i
           npm rebuild node-sass
       - if: needs.setup.outputs.is-ent-repo != 'true'
         name: Rebuild font cache on Github hosted runner
@@ -330,7 +332,7 @@ jobs:
           # Run Ember tests
           cd ui
           mkdir -p test-results/qunit
-          yarn ${{ needs.setup.outputs.is-ent-branch == 'true' && 'test' || 'test:oss' }}
+          pnpm ${{ needs.setup.outputs.is-ent-branch == 'true' && 'test' || 'test:oss' }}
       - if: always()
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:

.github/workflows/test-enos-scenario-ui.yml

@@ -91,6 +91,12 @@ jobs:
         uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
           node-version-file: './ui/package.json'
+          cache: pnpm
+          cache-dependency-path: ui/pnpm-lock.yaml
+      - name: Install PNPM
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          package_json_file: './ui/package.json'
       - name: Set Up Terraform
         uses: hashicorp/setup-terraform@b9cd54a3c349d3f38e8881555d616ced269862dd # v3.1.2
         with:

.github/workflows/test-run-enos-scenario.yml

@@ -69,8 +69,14 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
-          node-version: 14
+          node-version-file: './ui/package.json'
-          cache-dependency-path: ui/yarn.lock
+          cache: pnpm
+          cache-dependency-path: ui/pnpm-lock.yaml
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          package_json_file: './ui/package.json'
       - uses: hashicorp/setup-terraform@b9cd54a3c349d3f38e8881555d616ced269862dd # v3.1.2
         with:
           # the Terraform wrapper will break Terraform execution in Enos because

Makefile

@@ -198,26 +198,26 @@ static-assets-dir:
 
 install-ui-dependencies:
 	@echo "==> Installing JavaScript assets"
-	@cd ui && yarn
+	@cd ui && pnpm i
 
 test-ember: install-ui-dependencies
 	@echo "==> Running ember tests"
-	@cd ui && yarn run test:oss
+	@cd ui && pnpm run test:oss
 
 test-ember-enos: install-ui-dependencies
 	@echo "==> Running ember tests with a real backend"
-	@cd ui && yarn run test:enos
+	@cd ui && pnpm run test:enos
 
 ember-dist: install-ui-dependencies
 	@cd ui && npm rebuild node-sass
 	@echo "==> Building Ember application"
-	@cd ui && yarn run build
+	@cd ui && pnpm run build
 	@rm -rf ui/if-you-need-to-delete-this-open-an-issue-async-disk-cache
 
 ember-dist-dev: install-ui-dependencies
 	@cd ui && npm rebuild node-sass
 	@echo "==> Building Ember application"
-	@cd ui && yarn run build:dev
+	@cd ui && pnpm run build:dev
 
 static-dist: ember-dist
 static-dist-dev: ember-dist-dev

enos/modules/build_local/scripts/build.sh

@@ -16,9 +16,6 @@
 
 set -eux -o pipefail
 
-# Install yarn so we can build the UI
-npm install --global yarn || true
-
 export CGO_ENABLED=0
 
 root_dir="$(git rev-parse --show-toplevel)"

scripts/ci-helper.sh

@@ -97,9 +97,9 @@ function build_ui() {
     mkdir -p http/web_ui
     popd
     pushd "$repo_root/ui"
-    yarn install
+  pnpm install
     npm rebuild node-sass
-    yarn run build
+  pnpm run build
     popd
 }
 

ui/.yarn/patches/lodash.template-npm-4.5.0-5272df3039.patch

@@ -1,45 +0,0 @@
-diff --git a/index.js b/index.js
-index f051141e362679e1cc12f3dca924d8f6e7f5459b..63815c4c53412263de74fd4d779cfd198be87c8e 100644
---- a/index.js
-+++ b/index.js
-@@ -17,6 +17,9 @@ var HOT_COUNT = 800,
- var INFINITY = 1 / 0,
-     MAX_SAFE_INTEGER = 9007199254740991;
- 
-+/** Error message constants. */
-+var INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`';
-+
- /** `Object#toString` result references. */
- var argsTag = '[object Arguments]',
-     arrayTag = '[object Array]',
-@@ -1343,6 +1346,18 @@ function keysIn(object) {
-   return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
- }
- 
-+/**
-+   * Used to validate the `validate` option in `_.template` variable.
-+   *
-+   * Forbids characters which could potentially change the meaning of the function argument definition:
-+   * - "()," (modification of function parameters)
-+   * - "=" (default value)
-+   * - "[]{}" (destructuring of function parameters)
-+   * - "/" (beginning of a comment)
-+   * - whitespace
-+   */
-+var reForbiddenIdentifierChars = /[()=,{}\[\]\/\s]/;
-+
- /**
-  * Creates a compiled template function that can interpolate data properties
-  * in "interpolate" delimiters, HTML-escape interpolated data properties in
-@@ -1522,6 +1537,11 @@ function template(string, options, guard) {
-   if (!variable) {
-     source = 'with (obj) {\n' + source + '\n}\n';
-   }
-+  // Throw an error if a forbidden character was found in `variable`, to prevent
-+  // potential command injection attacks.
-+  else if (reForbiddenIdentifierChars.test(variable)) {
-+    throw new Error(INVALID_TEMPL_VAR_ERROR_TEXT);
-+  }
-   // Cleanup code by stripping empty strings.
-   source = (isEvaluating ? source.replace(reEmptyStringLeading, '') : source)
-     .replace(reEmptyStringMiddle, '$1')

ui/.yarnrc.yml

@@ -1,6 +0,0 @@
-# Copyright IBM Corp. 2016, 2025
-# SPDX-License-Identifier: BUSL-1.1
-
-nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-3.5.0.cjs

ui/README.md

@@ -44,20 +44,17 @@ You will need the following things properly installed on your computer.
 
 - [Git](https://git-scm.com/)
 - [Node.js](https://nodejs.org/)
-- [Yarn](https://yarnpkg.com/)
+- [pnpm](https://pnpm.io/)
 - [Ember CLI](https://cli.emberjs.com/release/)
 - [Google Chrome](https://google.com/chrome/)
 
-In order to enforce the same version of `yarn` across installs, the `yarn` binary is included in the repo
-in the `.yarn/releases` folder. To update to a different version of `yarn`, use the `yarn policies set-version VERSION` command. For more information on this, see the [documentation](https://yarnpkg.com/en/docs/cli/policies).
-
 ## Running a Vault Server
 
 Before running Vault UI locally, a Vault server must be running. First, ensure
 Vault dev is built according the instructions in `../README.md`.
 
-- To start a single local Vault server: `yarn vault`
+- To start a single local Vault server: `pnpm vault`
-- To start a local Vault cluster: `yarn vault:cluster`
+- To start a local Vault cluster: `pnpm vault:cluster`
 
 These commands may also be [aliased on your local device](https://github.com/hashicorp/vault-tools/blob/master/users/noelle/vault_aliases).
 
@@ -72,11 +69,11 @@ _All of the commands below assume you're in the `ui/` directory._
 
 1. Install dependencies:
 
-`yarn`
+`pnpm i`
 
 2. Run Vault UI and proxy back to a Vault server running on the default port, 8200:
 
-`yarn start`
+`pnpm start`
 
 > If your Vault server is running on a different port you can use the
 > long-form version of the npm script:
@@ -88,11 +85,11 @@ _All of the commands below assume you're in the `ui/` directory._
 [Mirage](https://miragejs.com/docs/getting-started/introduction/) can be helpful for mocking backend endpoints.
 Look in [mirage/handlers](mirage/handlers/) for existing mocked backends.
 
-Run yarn with mirage: `export MIRAGE_DEV_HANDLER=<handler> && yarn start`
+Run pnpm with mirage: `export MIRAGE_DEV_HANDLER=<handler> && pnpm start`
 
 Where `handlername` is one of the options exported in [mirage/handlers/index](mirage/handlers/index.js)
 
-To stop using the handler, kill the yarn process (Ctrl+c) and then unset the environment variable.
+To stop using the handler, kill the pnpm process (Ctrl+c) and then unset the environment variable.
 `unset MIRAGE_DEV_HANDLER`
 
 ## Building Vault UI into a Vault Binary
@@ -114,13 +111,13 @@ setting `VAULT_UI` environment variable.
 
 | Command                                           | Description                                                             |
 | ------------------------------------------------- | ----------------------------------------------------------------------- |
-| `yarn start`                                      | start the app with live reloading (vault must be running on port :8200) |
+| `pnpm start`                                      | start the app with live reloading (vault must be running on port :8200) |
-| `export MIRAGE_DEV_HANDLER=<handler>; yarn start` | start the app with the mocked mirage backend, with handler provided     |
+| `export MIRAGE_DEV_HANDLER=<handler>; pnpm start` | start the app with the mocked mirage backend, with handler provided     |
 | `make static-dist && make dev-ui`                 | build a Vault binary with UI assets (run from root directory not `/ui`) |
 | `ember g component foo -ir core`                  | generate a component in the /addon engine                               |
-| `yarn test:filter`                                | run non-enterprise in the browser                                       |
+| `pnpm test:filter`                                | run non-enterprise in the browser                                       |
-| `yarn test:filter -f='<test name>'`               | run tests in the browser, filtering by test name                        |
+| `pnpm test:filter -f='<test name>'`               | run tests in the browser, filtering by test name                        |
-| `yarn lint:js`                                    | lint javascript files                                                   |
+| `pnpm lint:js`                                    | lint javascript files                                                   |
 
 ### Code Generators
 
@@ -136,20 +133,20 @@ The above command creates a template-only component by default. If you'd like to
 
 ### Running Tests
 
-Running tests will spin up a Vault dev server on port :9200 via a pretest script that testem (the test runner) executes. All of the acceptance tests then run, which proxy requests back to that server. The normal test scripts use `ember-exam` which split into parallel runs, which is excellent for speed but makes it harder to debug. So we have a custom yarn script that automatically opens all the tests in a browser, and we can pass the `-f` flag to target the test(s) we're debugging.
+Running tests will spin up a Vault dev server on port :9200 via a pretest script that testem (the test runner) executes. All of the acceptance tests then run, which proxy requests back to that server. The normal test scripts use `ember-exam` which split into parallel runs, which is excellent for speed but makes it harder to debug. So we have a custom package script that automatically opens all the tests in a browser, and we can pass the `-f` flag to target the test(s) we're debugging.
 
-- `yarn run test` lint & run all the tests (CI uses this)
+- `pnpm run test` lint & run all the tests (CI uses this)
-- `yarn run test:oss` lint & run all the non-enterprise tests (CI uses this)
+- `pnpm run test:oss` lint & run all the non-enterprise tests (CI uses this)
-- `yarn run test:quick` run all the tests without linting
+- `pnpm run test:quick` run all the tests without linting
-- `yarn run test:quick-oss` run all the non-enterprise tests without linting
+- `pnpm run test:quick-oss` run all the non-enterprise tests without linting
-- `yarn run test:filter -f="policies"` run the filtered test in the browser with no splitting. `-f` is set to `!enterprise` by default
+- `pnpm run test:filter -f="policies"` run the filtered test in the browser with no splitting. `-f` is set to `!enterprise` by default
   [QUnit's `filter` config](https://api.qunitjs.com/config/QUnit.config#qunitconfigfilter-string--default-undefined)
 
 ### Linting
 
-- `yarn lint:js`
+- `pnpm lint:js`
-- `yarn lint:hbs`
+- `pnpm lint:hbs`
-- `yarn lint:fix`
+- `pnpm lint:fix`
 
 ### Contributing / Best Practices
 

ui/app/services/flags.ts

@@ -6,7 +6,7 @@
 import Service, { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { keepLatestTask } from 'ember-concurrency';
-import { DEBUG } from '@glimmer/env';
+import { macroCondition, isDevelopingApp } from '@embroider/macros';
 
 import type Store from '@ember-data/store';
 import type VersionService from 'vault/services/version';
@@ -48,7 +48,9 @@ export default class FlagsService extends Service {
         this.featureFlags = body.feature_flags || [];
       }
     } catch (error) {
-      if (DEBUG) console.error(error); // eslint-disable-line no-console
+      if (macroCondition(isDevelopingApp())) {
+        console.error(error); // eslint-disable-line no-console
+      }
     }
   });
 
@@ -71,7 +73,9 @@ export default class FlagsService extends Service {
       this.activatedFlags = response.data?.activated;
       return;
     } catch (error) {
-      if (DEBUG) console.error(error); // eslint-disable-line no-console
+      if (macroCondition(isDevelopingApp())) {
+        console.error(error); // eslint-disable-line no-console
+      }
     }
   });
 

ui/app/utils/forms/validate.ts

@@ -60,7 +60,11 @@ export const validate = (
         continue;
       }
       // dot notation may be used to define key for nested property
-      const passedValidation = useCustomValidator ? validator(data) : validator(get(data, key), options);
+      const passedValidation = useCustomValidator
+        ? // @ts-expect-error - options may or may not be defined
+          validator(data, options)
+        : // @ts-expect-error - options may or may not be defined
+          validator(get(data, key), options);
 
       if (!passedValidation) {
         // message can also be a function

ui/config/ember-cli-update.json

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

ui/docs/ember-engines.md

@@ -170,7 +170,7 @@ If you used `ember g in-repo-engine <engine-name>` to generate the engine’s bl
 
 ### Important Notes:
 
-- Anytime a new engine is created, you will need to `yarn install` and **RESTART** ember server!
+- Anytime a new engine is created, you will need to `pnpm install` and **RESTART** ember server!
 - To add `package.json` **dependencies** or **devDependencies**, you can copy + paste the dependency into corresponding sections. Most of the time, we will want to use "\*" in place of the version number to ensure all the dependencies have the latest version.
 
 ### Common blueprint commands:

ui/docs/how-to-docfy.md

@@ -9,26 +9,26 @@ http://localhost:4200/ui/docs (navigate to directly or click the present icon in
 
 ## `docs/` markdown files
 
-Side nav links correspond to the file + directory structure within the `docs/` directory. These top-level markdown files **can** be edited directly and any updates should be saved and pushed to main. (Component docs are generated by the `yarn docs` command, see below.)
+Side nav links correspond to the file + directory structure within the `docs/` directory. These top-level markdown files **can** be edited directly and any updates should be saved and pushed to main. (Component docs are generated by the `pnpm docs` command, see below.)
 
 ## generating component docs
 
-The `docs/components` directory is where _generated_ component markdown files are located after running `yarn docs`. **Do not edit component markdown files directly**. Instead, update markdown by making changes to the `jsdoc` and then re-running the generate command. The `docs/components/*` files are included in `.gitignore` so they are not pushed to main. `jsdoc-to-markdown` errors log in the console.
+The `docs/components` directory is where _generated_ component markdown files are located after running `pnpm docs`. **Do not edit component markdown files directly**. Instead, update markdown by making changes to the `jsdoc` and then re-running the generate command. The `docs/components/*` files are included in `.gitignore` so they are not pushed to main. `jsdoc-to-markdown` errors log in the console.
 
-> _If you have never run the `yarn docs` command before, you need to create the `docs/components` directory locally before running `yarn docfy-md` so the markdown has a place to go. `mkdir docs/components`_
+> _If you have never run the `pnpm docs` command before, you need to create the `docs/components` directory locally before running `pnpm docfy-md` so the markdown has a place to go. `mkdir docs/components`_
 
 ```
-yarn docfy-md <component name> <addon or engine> <full filepath>
+pnpm docfy-md <component name> <addon or engine> <full filepath>
 ```
 
 > _Note: the above command takes three args, if passing the full filepath for a component then the second arg is unnecessary_
 
 | Command                                                                   | Description                                                                                  |
 | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `yarn docs`                                                               | generate markdown file for every\* component in the `addon/core` directory                   |
+| `pnpm docs`                                                               | generate markdown file for every\* component in the `addon/core` directory                   |
-| `yarn docfy-md some-component-name`                                       | generate markdown file for **specific** component                                            |
+| `pnpm docfy-md some-component-name`                                       | generate markdown file for **specific** component                                            |
-| `yarn docfy-md read-more core`                                            | generate markdown for `read-more` component in the `core` addon                              |
+| `pnpm docfy-md read-more core`                                            | generate markdown for `read-more` component in the `core` addon                              |
-| `yarn docfy-md pki-test null ./lib/pki/addon/components/pki-key-usage.ts` | optional third arg is the full component filepath (first arg will become markdown file name) |
+| `pnpm docfy-md pki-test null ./lib/pki/addon/components/pki-key-usage.ts` | optional third arg is the full component filepath (first arg will become markdown file name) |
 | `mkdir docs/components`                                                   | create directory where the generated component markdown files will go                        |
 | `rm -f ./docs/components/*`                                               | cleanup and delete generated component markdown files                                        |
 
@@ -36,7 +36,7 @@ yarn docfy-md <component name> <addon or engine> <full filepath>
 
 ## Writing documentation for a component
 
-Component docs are generated by the script `yarn docs`. Accurate `jsdoc` syntax is important so `jsdoc-to-markdown` properly generates the markdown file for that component. **Do not edit component markdown files directly**.
+Component docs are generated by the script `pnpm docs`. Accurate `jsdoc` syntax is important so `jsdoc-to-markdown` properly generates the markdown file for that component. **Do not edit component markdown files directly**.
 
 | jsdoc examples                           |                                                                                                            |                                                               |
 | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |

ui/jsconfig.json

@@ -5,7 +5,6 @@
   },
   "exclude": [
     "node_modules",
-    ".yarn",
     "public"
   ]
-}
+}

ui/lib/config-ui/index.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+/* eslint-env node */
 /* eslint-disable n/no-extraneous-require */
 const { buildEngine } = require('ember-engines/lib/engine-addon');
 

ui/lib/core/index.js

@@ -12,6 +12,12 @@ module.exports = {
     plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
   },
 
+  options: {
+    'ember-cli-babel': {
+      enableTypeScriptTransform: true,
+    },
+  },
+
   isDevelopingAddon() {
     return true;
   },

ui/lib/core/package.json

@@ -15,7 +15,6 @@
     "ember-cli-clipboard": "*",
     "ember-cli-htmlbars": "*",
     "ember-cli-string-helpers": "*",
-    "ember-cli-typescript": "*",
     "ember-composable-helpers": "*",
     "ember-concurrency": "*",
     "@ember/render-modifiers": "*",

ui/lib/kmip/index.js

@@ -4,13 +4,12 @@
  */
 
 /* eslint-env node */
-/* eslint-disable ember/avoid-leaking-state-in-ember-objects */
 /* eslint-disable n/no-extraneous-require */
 'use strict';
 
-const EngineAddon = require('ember-engines/lib/engine-addon');
+const { buildEngine } = require('ember-engines/lib/engine-addon');
 
-module.exports = EngineAddon.extend({
+module.exports = buildEngine({
   name: 'kmip',
 
   lazyLoading: {

ui/lib/kubernetes/index.js

@@ -5,8 +5,6 @@
 
 /* eslint-env node */
 /* eslint-disable n/no-extraneous-require */
-'use strict';
-
 const { buildEngine } = require('ember-engines/lib/engine-addon');
 
 module.exports = buildEngine({
@@ -17,6 +15,9 @@ module.exports = buildEngine({
   babel: {
     plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
   },
+  'ember-cli-babel': {
+    enableTypeScriptTransform: true,
+  },
   isDevelopingAddon() {
     return true;
   },

ui/lib/kubernetes/package.json

@@ -13,6 +13,7 @@
     "@hashicorp/design-system-components": "*",
     "ember-auto-import": "*",
     "ember-cli-typescript": "*",
+    "@codemirror/view": "*",
     "@types/ember": "latest",
     "@types/ember__array": "latest",
     "@types/ember__component": "latest",

ui/lib/kv/index.js

@@ -5,8 +5,6 @@
 
 /* eslint-env node */
 /* eslint-disable n/no-extraneous-require */
-'use strict';
-
 const { buildEngine } = require('ember-engines/lib/engine-addon');
 
 module.exports = buildEngine({
@@ -20,6 +18,10 @@ module.exports = buildEngine({
     plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
   },
 
+  'ember-cli-babel': {
+    enableTypeScriptTransform: true,
+  },
+
   isDevelopingAddon() {
     return true;
   },

ui/lib/ldap/index.js

@@ -5,8 +5,6 @@
 
 /* eslint-env node */
 /* eslint-disable n/no-extraneous-require */
-'use strict';
-
 const { buildEngine } = require('ember-engines/lib/engine-addon');
 
 module.exports = buildEngine({
@@ -19,6 +17,9 @@ module.exports = buildEngine({
   babel: {
     plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
   },
+  'ember-cli-babel': {
+    enableTypeScriptTransform: true,
+  },
 
   isDevelopingAddon() {
     return true;

ui/lib/ldap/package.json

@@ -11,7 +11,6 @@
     "ember-concurrency": "*",
     "@ember/test-waiters": "*",
     "ember-auto-import": "*",
-    "ember-cli-typescript": "*",
     "@types/ember": "latest",
     "@types/ember__array": "latest",
     "@types/ember__component": "latest",

ui/lib/open-api-explorer/index.js

@@ -8,9 +8,9 @@
 /* eslint-disable n/no-extraneous-require */
 'use strict';
 
-const EngineAddon = require('ember-engines/lib/engine-addon');
+const { buildEngine } = require('ember-engines/lib/engine-addon');
 
-module.exports = EngineAddon.extend({
+module.exports = buildEngine({
   name: 'open-api-explorer',
 
   included() {

ui/lib/pki/index.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+/* eslint-env node */
 /* eslint-disable n/no-extraneous-require */
 const { buildEngine } = require('ember-engines/lib/engine-addon');
 
@@ -14,6 +15,9 @@ module.exports = buildEngine({
   babel: {
     plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
   },
+  'ember-cli-babel': {
+    enableTypeScriptTransform: true,
+  },
   isDevelopingAddon() {
     return true;
   },

ui/lib/pki/package.json

@@ -9,7 +9,6 @@
     "ember-basic-dropdown": "*",
     "ember-cli-babel": "*",
     "ember-cli-htmlbars": "*",
-    "ember-cli-typescript": "*",
     "ember-concurrency": "*",
     "ember-auto-import": "*",
     "@hashicorp/design-system-components": "*",

ui/lib/replication/index.js

@@ -4,13 +4,12 @@
  */
 
 /* eslint-env node */
-/* eslint-disable ember/avoid-leaking-state-in-ember-objects */
 /* eslint-disable n/no-extraneous-require */
 'use strict';
 
-const EngineAddon = require('ember-engines/lib/engine-addon');
+const { buildEngine } = require('ember-engines/lib/engine-addon');
 
-module.exports = EngineAddon.extend({
+module.exports = buildEngine({
   name: 'replication',
 
   lazyLoading: {

ui/lib/sync/addon/components/secrets/page/overview.ts

@@ -9,7 +9,7 @@ import { service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { action } from '@ember/object';
 import Ember from 'ember';
-import { DEBUG } from '@glimmer/env';
+import { macroCondition, isDevelopingApp } from '@embroider/macros';
 import { findDestination } from 'core/helpers/sync-destinations';
 
 import type FlashMessageService from 'vault/services/flash-messages';
@@ -107,7 +107,9 @@ export default class SyncSecretsDestinationsPageComponent extends Component<Args
 
   @action
   onModalError(errorMsg: string) {
-    if (DEBUG) console.error(errorMsg); // eslint-disable-line no-console
+    if (macroCondition(isDevelopingApp())) {
+      console.error(errorMsg); // eslint-disable-line no-console
+    }
 
     const errors = [errorMsg];
 

ui/lib/sync/index.js

@@ -20,6 +20,10 @@ module.exports = buildEngine({
     plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
   },
 
+  'ember-cli-babel': {
+    enableTypeScriptTransform: true,
+  },
+
   isDevelopingAddon() {
     return true;
   },

ui/lib/sync/package.json

@@ -10,7 +10,7 @@
     "ember-cli-babel": "*",
     "ember-concurrency": "*",
     "@ember/test-waiters": "*",
-    "ember-cli-typescript": "*",
+    "@embroider/macros": "*",
     "ember-auto-import": "*",
     "@types/ember": "latest",
     "@types/ember__array": "latest",

ui/package.json

@@ -9,15 +9,15 @@
     "test": "tests"
   },
   "scripts": {
-    "postinstall": "yarn build:jsondiffpatch",
+    "postinstall": "pnpm build:jsondiffpatch",
-    "build": "yarn build:jsondiffpatch && ember build --environment=production && cp metadata.json ../http/web_ui/metadata.json",
+    "build": "pnpm build:jsondiffpatch && ember build --environment=production && cp metadata.json ../http/web_ui/metadata.json",
-    "build:dev": "yarn build:jsondiffpatch && ember build",
+    "build:dev": "pnpm build:jsondiffpatch && ember build",
     "build:jsondiffpatch": "webpack --config webpack.jsondiffpatch.config.js",
     "docs": "sh scripts/generate-docs.sh",
     "docfy-md": "node scripts/docfy-md.js",
     "lint:css": "stylelint \"**/*.css\"",
-    "lint:css:fix": "yarn lint:css --fix",
+    "lint:css:fix": "pnpm lint:css --fix",
-    "lint:fix": "concurrently -c \"auto\" -n lint: \"yarn:lint:*:fix\"",
+    "lint:fix": "concurrently -c \"auto\" -n lint: \"pnpm:lint:*:fix\"",
     "lint:hbs": "ember-template-lint '**/*.hbs'",
     "lint:hbs:quiet": "ember-template-lint '**/*.hbs' --quiet",
     "lint:hbs:fix": "ember-template-lint . --fix",
@@ -25,17 +25,17 @@
     "lint:js:quiet": "eslint . --cache --quiet",
     "lint:js:fix": "eslint . --fix",
     "lint:types": "tsc --noEmit",
-    "fmt": "concurrently -c \"auto\" -n fmt: \"yarn:fmt:*\"",
+    "fmt": "concurrently -c \"auto\" -n fmt: \"pnpm:fmt:*\"",
     "fmt:js": "prettier --config .prettierrc.js --write '{app,tests,config,lib}/**/*.js'",
     "fmt:hbs": "prettier --config .prettierrc.js --write '**/*.hbs'",
     "fmt:styles": "prettier --write app/styles/**/*.*",
-    "start": "VAULT_ADDR=http://127.0.0.1:8200; yarn build:jsondiffpatch && ember server --proxy=$VAULT_ADDR",
+    "start": "VAULT_ADDR=http://127.0.0.1:8200; pnpm build:jsondiffpatch && ember server --proxy=$VAULT_ADDR",
-    "start2": "yarn build:jsondiffpatch && ember server --proxy=http://127.0.0.1:8202 --port=4202",
+    "start2": "pnpm build:jsondiffpatch && ember server --proxy=http://127.0.0.1:8202 --port=4202",
     "start:chroot": "ember server --proxy=http://127.0.0.1:8300 --port=4300",
-    "lint": "concurrently --kill-others-on-fail -P -c \"auto\" -n lint:js,lint:hbs,lint:types \"yarn:lint:js:quiet\" \"yarn:lint:hbs:quiet\" \"yarn:lint:types\"",
+    "lint": "concurrently --kill-others-on-fail -P -c \"auto\" -n lint:js,lint:hbs,lint:types \"pnpm:lint:js:quiet\" \"pnpm:lint:hbs:quiet\" \"pnpm:lint:types\"",
-    "test": "yarn lint && node scripts/start-vault.js",
+    "test": "pnpm lint && node scripts/start-vault.js",
-    "test:enos": "concurrently --kill-others-on-fail -P -c \"auto\" -n lint:js,lint:hbs,lint:types,enos \"yarn:lint:js:quiet\" \"yarn:lint:hbs:quiet\" \"yarn:lint:types\" \"node scripts/enos-test-ember.js {@}\" --",
+    "test:enos": "concurrently --kill-others-on-fail -P -c \"auto\" -n lint:js,lint:hbs,lint:types,enos \"pnpm:lint:js:quiet\" \"pnpm:lint:hbs:quiet\" \"pnpm:lint:types\" \"node scripts/enos-test-ember.js {@}\" --",
-    "test:oss": "yarn test -f='!enterprise'",
+    "test:oss": "pnpm test -f='!enterprise'",
     "test:ent": "node scripts/start-vault.js -f='enterprise'",
     "test:quick": "node scripts/start-vault.js --split=8 --preserve-test-name --parallel=1",
     "test:filter": "node scripts/start-vault.js --server -f='!enterprise'",
@@ -47,13 +47,13 @@
   "devDependencies": {
     "@babel/cli": "~7.27.0",
     "@babel/core": "~7.26.10",
-    "@babel/eslint-parser": "~7.27.0",
     "@babel/plugin-proposal-class-properties": "~7.18.6",
-    "@babel/plugin-proposal-decorators": "~7.25.9",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-proposal-object-rest-spread": "~7.20.7",
     "@babel/plugin-transform-block-scoping": "~7.27.0",
     "@babel/preset-env": "~7.26.9",
     "@babel/preset-typescript": "~7.27.0",
+    "@codemirror/view": "^6.36.2",
     "@docfy/ember": "~0.8.5",
     "@ember/legacy-built-in-components": "~0.4.2",
     "@ember/optional-features": "~2.2.0",
@@ -61,8 +61,10 @@
     "@ember/string": "~4.0.1",
     "@ember/test-helpers": "~5.2.1",
     "@ember/test-waiters": "~4.1.0",
+    "@embroider/macros": "1.15.0",
     "@glimmer/component": "~1.1.2",
     "@glimmer/tracking": "~1.1.2",
+    "@glint/template": "^1.7.3",
     "@icholy/duration": "~5.1.0",
     "@lineal-viz/lineal": "~0.5.1",
     "@tsconfig/ember": "~2.0.0",
@@ -79,6 +81,7 @@
     "base64-js": "~1.5.1",
     "broccoli-asset-rev": "~3.0.0",
     "broccoli-sri-hash": "meirish/broccoli-sri-hash#rooturl",
+    "chalk": "^4.1.2",
     "columnify": "~1.6.0",
     "concurrently": "~9.1.2",
     "d3-array": "~3.2.4",
@@ -92,7 +95,7 @@
     "doctoc": "~2.2.1",
     "dompurify": "~3.2.5",
     "ember-a11y-testing": "~7.1.2",
-    "ember-basic-dropdown": "~8.6.0",
+    "ember-basic-dropdown": "~8.7.0",
     "ember-cli": "~5.8.0",
     "ember-cli-babel": "~8.2.0",
     "ember-cli-clean-css": "~3.0.0",
@@ -116,7 +119,7 @@
     "ember-inflector": "4.0.2",
     "ember-load-initializers": "~3.0.1",
     "ember-modifier": "~4.2.0",
-    "ember-power-select": "~8.7.0",
+    "ember-power-select": "~8.12.0",
     "ember-qrcode-shim": "~0.4.0",
     "ember-qunit": "~8.1.1",
     "ember-resolver": "~13.1.0",
@@ -128,7 +131,7 @@
     "ember-template-lint": "~6.1.0",
     "ember-template-lint-plugin-prettier": "~5.0.0",
     "ember-test-selectors": "7.1.0",
-    "ember-tether": "3.0.0",
+    "ember-tether": "3.1.1",
     "ember-truth-helpers": "4.0.3",
     "escape-string-regexp": "~2.0.0",
     "eslint": "~8.57.1",
@@ -138,6 +141,7 @@
     "eslint-plugin-n": "~16.6.2",
     "eslint-plugin-prettier": "~5.2.6",
     "eslint-plugin-qunit": "~8.1.2",
+    "execa": "^5.1.1",
     "filesize": "~4.2.1",
     "jsdoc-babel": "~0.5.0",
     "jsdoc-to-markdown": "~8.0.3",
@@ -161,32 +165,32 @@
     "swagger-ui-dist": "~5.21.0",
     "text-encoder-lite": "2.0.0",
     "tracked-built-ins": "~3.4.0",
-    "typescript": "~5.8.3",
+    "typescript": "~5.5.4",
     "webpack": "5.94.0",
     "webpack-cli": "^6.0.1"
   },
-  "resolutions": {
+  "pnpm": {
-    "ansi-html": "0.0.8",
+    "overrides": {
-    "async": "2.6.4",
+      "@babel/runtime": "7.27.0",
-    "body-parser": "1.20.3",
+      "@embroider/macros": "1.15.0",
-    "braces": "3.0.3",
+      "@messageformat/runtime": "3.0.2",
-    "eslint-utils": "1.4.3",
+      "ansi-html": "0.0.8",
-    "https-proxy-agent": "2.2.4",
+      "async": "2.6.4",
-    "ini": "1.3.8",
+      "braces": "3.0.3",
-    "kind-of": "6.0.3",
+      "eslint-utils": "1.4.3",
-    "micromatch": "4.0.8",
+      "express": "4.22.1",
-    "prismjs": "1.30.0",
+      "https-proxy-agent": "2.2.4",
-    "rollup": "2.79.2",
+      "ini": "1.3.8",
-    "serialize-javascript": "3.1.0",
+      "json5": "1.0.2",
-    "underscore": "1.13.7",
+      "kind-of": "6.0.3",
-    "@embroider/macros": "1.15.0",
+      "micromatch": "4.0.8",
-    "@babel/runtime": "7.27.0",
+      "prismjs": "1.30.0",
-    "@messageformat/runtime": "3.0.2",
+      "qs": "6.14.1",
-    "socket.io": "4.8.1",
+      "rollup": "2.79.2",
-    "json5": "1.0.2",
+      "serialize-javascript": "3.1.0",
-    "ember-cli-typescript": "5.3.0",
+      "socket.io": "4.8.1",
-    "lodash.template@^4.4.0": "patch:lodash.template@npm%3A4.5.0#./.yarn/patches/lodash.template-npm-4.5.0-5272df3039.patch",
+      "underscore": "1.13.7"
-    "lodash.template@^4.5.0": "patch:lodash.template@npm%3A4.5.0#./.yarn/patches/lodash.template-npm-4.5.0-5272df3039.patch"
+    }
   },
   "engines": {
     "node": "20"
@@ -213,15 +217,17 @@
   },
   "dependencies": {
     "@babel/core": "7.26.10",
+    "@babel/eslint-parser": "^7.28.5",
     "@hashicorp-internal/vault-reporting": "file:vault-reporting/0.8.0.tgz",
     "@hashicorp/design-system-components": "4.24.1",
+    "@hashicorp/design-system-tokens": "3.0.0",
     "@hashicorp/vault-client-typescript": "hashicorp/vault-client-typescript",
     "ember-auto-import": "2.10.0",
     "handlebars": "4.7.8",
     "posthog-js": "1.236.1",
     "uuid": "9.0.1"
   },
-  "packageManager": "yarn@3.5.0",
+  "packageManager": "pnpm@10.22.0+sha512.bf049efe995b28f527fd2b41ae0474ce29186f7edcb3bf545087bd61fbbebb2bf75362d1307fda09c2d288e1e499787ac12d4fcb617a974718a6051f2eee741c",
   "scarfSettings": {
     "defaultOptIn": false,
     "enabled": false,

ui/pnpm-workspace.yaml

@@ -0,0 +1,14 @@
+autoInstallPeers: false
+strictPeerDependencies: true
+resolvePeersFromWorkspaceRoot: false
+
+peerDependencyRules:
+  allowedVersions:
+    # for @typescript-eslint/parser
+    eslint: '*'
+
+dedupeInjectedDeps: true
+publicHoistPattern:
+  - ember-source
+
+verifyDepsBeforeRun: 'install'

ui/scripts/docfy-md.js

@@ -9,10 +9,10 @@
 
 /*
 run from the ui directory:
-yarn docfy-md some-component
+pnpm docfy-md some-component
 
 or if the docs are for a component in an in-repo-addon or an engine:
-yarn docfy-md some-component name-of-engine
+pnpm docfy-md some-component name-of-engine
 
 see the readme ui/docs/how-to-docfy.md for more info
 */

ui/scripts/generate-docs.sh

@@ -3,20 +3,20 @@
 # SPDX-License-Identifier: BUSL-1.1
 
 echo "Create components/ directory"
-mkdir docs/components/ 
+mkdir docs/components/
 
-echo "Generating markdown files for components in core addon..." 
+echo "Generating markdown files for components in core addon..."
 
 # iterate over every .ts and .js file in core/addon/components (including nested files)
-# skip .hbs files and shamir/ directory 
+# skip .hbs files and shamir/ directory
 find "./lib/core/addon/components" -type f ! -name "*.hbs" -not -path "*/shamir*"  -print0 | while IFS= read -r -d '' file; do
-  component=`eval "echo $file | cut -d/ -f6"`; 
+  component=`eval "echo $file | cut -d/ -f6"`;
 
  # skip replication components
   if [[ "$component" == replication* ]]; then
-    echo "🔃 skipping $component" 
+    echo "🔃 skipping $component"
     continue
   fi
 
-  yarn docfy-md $component core $file
+  pnpm docfy-md $component core $file
-done
+done

ui/scripts/update-vault-reporting-addon.sh

@@ -48,4 +48,4 @@ find vault-reporting -name "*.tgz" ! -name "$LATEST_VERSION.tgz" -delete
 FILENAME="$LATEST_VERSION.tgz"
 jq --arg version "$LATEST_VERSION" --arg filename "$FILENAME" '.dependencies["@hashicorp-internal/vault-reporting"] = "file:vault-reporting/" + $filename' package.json > tmp.json && mv tmp.json package.json
 # Install dependencies
-yarn install
+pnpm install

ui/testem.js

@@ -12,14 +12,18 @@ module.exports = {
   disable_watching: true,
   launch_in_ci: ['Chrome'],
   browser_start_timeout: 120,
+  socket_server_options: {
+    maxHttpBufferSize: 1e8, // set socket.io server max buffer size to 100MB
+  },
   browser_args: {
     Chrome: {
       ci: [
         // --no-sandbox is needed when running Chrome inside a container
         process.env.CI ? '--no-sandbox' : null,
-        '--headless',
+        '--headless=new',
         '--disable-dev-shm-usage',
         '--disable-software-rasterizer',
+        '--disable-search-engine-choice-screen', // needed from Chrome 127
         '--mute-audio',
         '--remote-debugging-port=0',
         '--window-size=1440,900',

ui/types/generate-declaration.md

@@ -1,5 +1,5 @@
-To generate a declaration file run `yarn tsc <javascript file to declare>  --declaration --allowJs --emitDeclarationOnly --outDir <type file location>`
+To generate a declaration file run `pnpm tsc <javascript file to declare>  --declaration --allowJs --emitDeclarationOnly --outDir <type file location>`
 
 For example, the following command generates a declaration file called base.d.ts for the pki certificate base.js model:
 
-`yarn tsc ./app/models/pki/certificate/base.js  --declaration --allowJs --emitDeclarationOnly --outDir types/vault/models/pki/certificate`
+`pnpm tsc ./app/models/pki/certificate/base.js  --declaration --allowJs --emitDeclarationOnly --outDir types/vault/models/pki/certificate`