Switch JS package manager to pnpm (#44167)

* Adjust `package.json`s to pnpm

* Convert resolutions (pnpm doesn't support `**/` syntax)

It also removes resolutions that are no longer relevant.

* Convert `yarn.lock` to `pnpm-lock.yaml` with `pnpm import`

* Always add `e/web/teleport` workspace to the lockfile

* Adjust `jest` to new node_modules structure

* Adjust `storybook` to new node_modules structure

* Replace `toHaveStyleRule` with `toHaveStyle`

`jest-styled-components` package is no longer global, so `toHaveStyleRule` matchers is not recognized by TS.
We use them only in three places, so it's simpler to convert them to `toHaveStyle`.

* Adjust README files

* Adjust GHA workflows

* Adjust build assets

* Remove remaining `yarn` mentions

I don't think anyone uses the debug configuration for electron (and we don't have `start-electron` script for a long time).

* `corepack enable` -> `corepack enable pnpm`

* Automatically enable pnpm when running `make build/teleport`

* Run `pnpm import` again

* Run `pnpm dedupe`

* Add `yarn.lock` to .gitignore

* Link to pnpm installation docs

* Add a better comment for `transformIgnorePatterns`

* Make pattern for `shared` stories more specific

* Change `corepack enable pnpm` in readmes

* Run `pnpm import && pnpm dedupe` again

.github/workflows/build-macos.yaml

@@ -54,9 +54,9 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
 
-      - name: Setup yarn
+      - name: Setup pnpm
         run: |
-          corepack enable yarn
+          corepack enable pnpm
 
       - name: Install Go Toolchain
         uses: actions/setup-go@v5

.github/workflows/lint-ui-bypass.yaml

@@ -18,7 +18,7 @@ on:
       - 'gen/proto/js/**'
       - 'gen/proto/ts/**'
       - 'package.json'
-      - 'yarn.lock'
+      - 'pnpm-lock.yaml'
       - 'Cargo.toml'
       - 'Cargo.lock'
       - 'tsconfig.json'
@@ -29,7 +29,7 @@ on:
       - 'gen/proto/js/**'
       - 'gen/proto/ts/**'
       - 'package.json'
-      - 'yarn.lock'
+      - 'pnpm-lock.yaml'
       - 'Cargo.toml'
       - 'Cargo.lock'
       - 'tsconfig.json'

.github/workflows/lint-ui.yaml

@@ -8,7 +8,7 @@ on:
       - 'gen/proto/js/**'
       - 'gen/proto/ts/**'
       - 'package.json'
-      - 'yarn.lock'
+      - 'pnpm-lock.yaml'
       - 'Cargo.toml'
       - 'Cargo.lock'
       - 'tsconfig.json'
@@ -19,7 +19,7 @@ on:
       - 'gen/proto/js/**'
       - 'gen/proto/ts/**'
       - 'package.json'
-      - 'yarn.lock'
+      - 'pnpm-lock.yaml'
       - 'Cargo.toml'
       - 'Cargo.lock'
       - 'tsconfig.json'
@@ -39,17 +39,17 @@ jobs:
         run: |
           node --version
 
-      - name: Install Yarn dependencies
+      - name: Install JS dependencies
-        run: bash web/packages/build/scripts/yarn-install-frozen-lockfile.sh
+        run: pnpm install --frozen-lockfile
 
       - name: Build WASM
-        run: yarn build-wasm
+        run: pnpm build-wasm
 
       - name: Run Type Check
-        run: yarn type-check
+        run: pnpm type-check
 
       - name: Run lint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Run Storybook smoke test
-        run: yarn storybook-smoke-test
+        run: pnpm storybook-smoke-test

.github/workflows/unit-tests-ui-bypass.yaml

@@ -19,7 +19,7 @@ on:
       - 'gen/proto/js/**'
       - 'gen/proto/ts/**'
       - 'package.json'
-      - 'yarn.lock'
+      - 'pnpm-lock.yaml'
       - 'Cargo.toml'
       - 'Cargo.lock'
       - 'tsconfig.json'
@@ -32,7 +32,7 @@ on:
       - 'gen/proto/js/**'
       - 'gen/proto/ts/**'
       - 'package.json'
-      - 'yarn.lock'
+      - 'pnpm-lock.yaml'
       - 'Cargo.toml'
       - 'Cargo.lock'
       - 'tsconfig.json'

.github/workflows/unit-tests-ui.yaml

@@ -9,7 +9,7 @@ on:
       - 'gen/proto/js/**'
       - 'gen/proto/ts/**'
       - 'package.json'
-      - 'yarn.lock'
+      - 'pnpm-lock.yaml'
       - 'Cargo.toml'
       - 'Cargo.lock'
       - 'tsconfig.json'
@@ -22,7 +22,7 @@ on:
       - 'gen/proto/js/**'
       - 'gen/proto/ts/**'
       - 'package.json'
-      - 'yarn.lock'
+      - 'pnpm-lock.yaml'
       - 'Cargo.toml'
       - 'Cargo.lock'
       - 'tsconfig.json'
@@ -46,11 +46,11 @@ jobs:
         run: |
           node --version
 
-      - name: Install Yarn dependencies
+      - name: Install JS dependencies
-        run: bash web/packages/build/scripts/yarn-install-frozen-lockfile.sh
+        run: pnpm install --frozen-lockfile
 
       - name: Build WASM
-        run: yarn build-wasm
+        run: pnpm build-wasm
 
       - name: Run tests
-        run: yarn test
+        run: pnpm test

.gitignore

@@ -103,3 +103,6 @@ web/certs/
 
 # Files produced by tests
 *.avi
+
+# We have switched to pnpm, ignore Yarn lockfile
+yarn.lock

.pnpmfile.cjs

@@ -0,0 +1,19 @@
+function afterAllResolved(lockfile, context) {
+  // The pnpm lockfile contains entries for all workspaces.
+  // This means that if the `e` repo is not cloned, we will get a different
+  // lockfile.
+  // The ugly workaround is to add an entry for e/web/teleport workspace manually.
+  // We pass an empty object because `e/web/teleport` package.json doesn't have
+  // any dependencies.
+  if (!lockfile.importers['e/web/teleport']) {
+    context.log(`Workspace 'e/web/teleport' is not present, patching lockfile.`);
+    lockfile.importers['e/web/teleport'] = {};
+  }
+  return lockfile;
+}
+
+module.exports = {
+  hooks: {
+    afterAllResolved,
+  },
+};

BUILD_macos.md

@@ -78,8 +78,8 @@ PRs with corrections and updates are welcome!
   ```
 
 * To install tools for building the UI:
-  * `brew install node yarn`
+  * `brew install node corepack`
-  * Currently, [`yarn`](https://classic.yarnpkg.com/en/docs/install) (< 2.0.0) is required
+  * `corepack enable pnpm`
   * The `Rust` and `Cargo` version in [build.assets/Makefile](https://github.com/gravitational/teleport/blob/master/build.assets/versions.mk#L11) (search for `RUST_VERSION`) are required.
   * The [`wasm-pack`](https://github.com/rustwasm/wasm-pack) version in [build.assets/Makefile](https://github.com/gravitational/teleport/blob/master/build.assets/versions.mk#L12) (search for `WASM_PACK_VERSION`) is required:
     `curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh`

Makefile

@@ -95,6 +95,11 @@ TARBINS = $(addprefix teleport/,$(BINS))
 CHECK_CARGO := $(shell cargo --version 2>/dev/null)
 CHECK_RUST := $(shell rustc --version 2>/dev/null)
 
+# Check if pnpm is enabled before using it
+CHECK_PNPM := $(shell pnpm --version 2>/dev/null)
+# Check if Corepack is installed before using it
+CHECK_COREPACK := $(shell corepack --version 2>/dev/null)
+
 RUST_TARGET_ARCH ?= $(CARGO_TARGET_$(OS)_$(ARCH))
 
 CARGO_TARGET_darwin_amd64 := x86_64-apple-darwin
@@ -350,7 +355,7 @@ ifeq ("$(GITHUB_REPOSITORY_OWNER)","gravitational")
 # This is done here to prevent any changes to the (BUI)LDFLAGS passed to the other binaries
 TELEPORT_LDFLAGS ?= -ldflags '$(GO_LDFLAGS) -X github.com/gravitational/teleport/lib/modules.teleportBuildType=community'
 endif
-$(BUILDDIR)/teleport: ensure-webassets bpf-bytecode rdpclient
+$(BUILDDIR)/teleport: ensure-js-package-manager ensure-webassets bpf-bytecode rdpclient
 	GOOS=$(OS) GOARCH=$(ARCH) $(CGOFLAG) go build -tags "webassets_embed $(PAM_TAG) $(FIPS_TAG) $(BPF_TAG) $(WEBASSETS_TAG) $(RDPCLIENT_TAG) $(PIV_BUILD_TAG) $(KUSTOMIZE_NO_DYNAMIC_PLUGIN)" -o $(BUILDDIR)/teleport $(BUILDFLAGS) $(TELEPORT_LDFLAGS) ./tool/teleport
 
 # NOTE: Any changes to the `tsh` build here must be copied to `build.assets/windows/build.ps1`
@@ -678,16 +683,16 @@ release-windows: release-windows-unsigned
 # Makefile. Linux uses the `teleterm` target in build.assets/Makefile.
 #
 # Either CONNECT_TSH_BIN_PATH or CONNECT_TSH_APP_PATH environment variable
-# should be defined for the `yarn package-term` command to succeed. CI sets
+# should be defined for the `pnpm package-term` command to succeed. CI sets
 # this appropriately depending on whether a push build is running, or a
 # proper release (a proper release needs the APP_PATH as that points to
 # the complete signed package). See web/packages/teleterm/README.md for
 # details.
 .PHONY: release-connect
 release-connect: | $(RELEASE_DIR)
-	yarn install --frozen-lockfile
+	pnpm install --frozen-lockfile
-	yarn build-term
+	pnpm build-term
-	yarn package-term -c.extraMetadata.version=$(VERSION) --$(ELECTRON_BUILDER_ARCH)
+	pnpm package-term -c.extraMetadata.version=$(VERSION) --$(ELECTRON_BUILDER_ARCH)
 	# Only copy proper builds with tsh.app to $(RELEASE_DIR)
 	# Drop -universal "arch" from dmg name when copying to $(RELEASE_DIR)
 	if [ -n "$$CONNECT_TSH_APP_PATH" ]; then \
@@ -1631,6 +1636,24 @@ ensure-webassets-e:
 	@if [[ "${WEBASSETS_SKIP_BUILD}" -eq 1 ]]; then mkdir -p webassets/teleport && mkdir -p webassets/e/teleport/app && cp web/packages/teleport/index.html webassets/e/teleport/index.html; \
 	else MAKE="$(MAKE)" "$(MAKE_DIR)/build.assets/build-webassets-if-changed.sh" Enterprise webassets/e/e-sha build-ui-e web e/web; fi
 
+# Enables the pnpm package manager if building webassets is not skipped,
+# pnpm is not already enabled and Corepack is available.
+# We check if pnpm is enabled, as the user may not have permission to
+# enable it, but it may already be available.
+.PHONY: ensure-js-package-manager
+ensure-js-package-manager:
+ifneq ($(WEBASSETS_SKIP_BUILD),1)
+	@if [ -z "$(CHECK_PNPM)" ]; then \
+		if [ -n "$(CHECK_COREPACK)" ]; then \
+			echo 'Info: pnpm is not enabled via Corepack. Enabling pnpm...'; \
+			corepack enable pnpm; \
+		else \
+			echo 'Error: Corepack is not installed, cannot enable pnpm. See the installation guide https://pnpm.io/installation#using-corepack'; \
+			exit 1; \
+		fi \
+	fi
+endif
+
 .PHONY: init-submodules-e
 init-submodules-e:
 	git submodule init e
@@ -1645,15 +1668,15 @@ backport:
 .PHONY: ensure-js-deps
 ensure-js-deps:
 	@if [[ "${WEBASSETS_SKIP_BUILD}" -eq 1 ]]; then mkdir -p webassets/teleport && touch webassets/teleport/index.html; \
-	else yarn install --ignore-scripts; fi
+	else pnpm install --frozen-lockfile; fi
 
 .PHONY: build-ui
 build-ui: ensure-js-deps
-	@[ "${WEBASSETS_SKIP_BUILD}" -eq 1 ] || yarn build-ui-oss
+	@[ "${WEBASSETS_SKIP_BUILD}" -eq 1 ] || pnpm build-ui-oss
 
 .PHONY: build-ui-e
 build-ui-e: ensure-js-deps
-	@[ "${WEBASSETS_SKIP_BUILD}" -eq 1 ] || yarn build-ui-e
+	@[ "${WEBASSETS_SKIP_BUILD}" -eq 1 ] || pnpm build-ui-e
 
 .PHONY: docker-ui
 docker-ui:

README.md

@@ -150,8 +150,8 @@ Ensure you have installed correct versions of necessary dependencies:
 * For `tsh` version > `10.x` with FIDO2 support, you will need `libfido2` and
   `pkg-config` installed locally
 * To build the web UI:
-  * [`yarn`](https://classic.yarnpkg.com/en/docs/install)(< 2.0.0) is required.
+  * [`pnpm`](https://pnpm.io/installation#using-corepack). If you have Node.js installed, run `corepack enable pnpm` to make `pnpm` available.
-  * If you prefer not to install/use yarn, but have docker available, you can run `make docker-ui` instead.
+  * If you prefer not to install/use pnpm, but have docker available, you can run `make docker-ui` instead.
   * The `Rust` and `Cargo` version in [build.assets/Makefile](https://github.com/gravitational/teleport/blob/master/build.assets/versions.mk#L11) (search for `RUST_VERSION`) are required.
   * The [`wasm-pack`](https://github.com/rustwasm/wasm-pack) version in [build.assets/Makefile](https://github.com/gravitational/teleport/blob/master/build.assets/versions.mk#L12) (search for `WASM_PACK_VERSION`) is required.
   * [`binaryen`](https://github.com/WebAssembly/binaryen) (which contains `wasm-opt`) is required to be installed manually

build.assets/Dockerfile-arm

@@ -57,7 +57,7 @@ RUN NODE_ARCH="$(if [ "$BUILDARCH" = 'amd64' ]; then echo 'x64'; else echo 'arm6
     curl -o "$NODE_FILE" -fsSL "$NODE_URL" && \
     tar -xJf "$NODE_FILE" -C /usr/local/lib/nodejs-linux --strip-components=1 && \
     rm -f "$NODE_FILE"
-RUN corepack enable yarn
+RUN corepack enable pnpm
 
 # Install Go.
 ARG GOLANG_VERSION

build.assets/Dockerfile-node

@@ -20,6 +20,8 @@ FROM node:${NODE_VERSION}-buster AS buildbox
 # https://docs.docker.com/engine/reference/builder/#automatic-platform-args-in-the-global-scope
 ARG BUILDARCH
 
+RUN corepack enable pnpm
+
 COPY locale.gen /etc/locale.gen
 COPY profile /etc/profile
 ENV LANGUAGE="en_US.UTF-8" \

build.assets/Makefile

@@ -247,16 +247,16 @@ buildbox-node:
 .PHONY:teleterm
 teleterm: buildbox-node
 	docker run $(DOCKERFLAGS) $(NOROOT) $(BUILDBOX_NODE) \
-		bash -c "cd $(SRCDIR) && export CONNECT_TSH_BIN_PATH=\$$PWD/../teleport/build/tsh && yarn install --frozen-lockfile && yarn build-term && yarn package-term -c.extraMetadata.version=$(CONNECT_VERSION)"
+		bash -c "cd $(SRCDIR) && export CONNECT_TSH_BIN_PATH=\$$PWD/../teleport/build/tsh && pnpm install --frozen-lockfile && pnpm build-term && pnpm package-term -c.extraMetadata.version=$(CONNECT_VERSION)"
 
 # Builds webassets inside Docker.
 .PHONY:ui
 ui: buildbox
 	docker run -u $(UID):$(GID) -v "$$(pwd)/../":/teleport $(BUILDBOX) \
-		bash -c "cd ../teleport && yarn install --frozen-lockfile && yarn build-ui"
+		bash -c "cd ../teleport && pnpm install --frozen-lockfile && pnpm build-ui"
 
 # Builds webassets inside the buildbox-node container via the
-# Makefile (instead of calling yarn directly as the ui target above does)
+# Makefile (instead of calling pnpm directly as the ui target above does)
 # as that computes a SHA to prevent unnecessary rebuilds. This is used by
 # the CentOS 7 build that does not have a new enough version of node.js
 # to build webassets. Enterprise webassets will only be built if the e

build.assets/build-webassets-if-changed.sh

@@ -55,14 +55,14 @@ for i in "${!SRC_DIRECTORIES[@]}"; do
   SRC_DIRECTORIES[i]="$ROOT_PATH/${SRC_DIRECTORIES[i]}"
 done
 
-# Calculate the current hash-of-hashes of the given source directories, package.json, and yarn.lock.
+# Calculate the current hash-of-hashes of the given source directories, package.json, and pnpm-lock.yaml.
-# We exclude node_modules as it's covered by package.json and yarn.lock.
+# We exclude node_modules as it's covered by package.json and pnpm-lock.yaml.
 # We also exclude .swc as it's a cache directory for the swc compiler,
 # and ironrdp/pkg as it's filled with the generated wasm files.
 function calculate_sha() {
   #shellcheck disable=SC2086
   #We want to split $SHASUM on spaces so we dont want it quoted.
-  find "${SRC_DIRECTORIES[@]}" "$ROOT_PATH/package.json" "$ROOT_PATH/yarn.lock" \
+  find "${SRC_DIRECTORIES[@]}" "$ROOT_PATH/package.json" "$ROOT_PATH/pnpm-lock.yaml" \
     -not \( -type d \( -name node_modules -o -name .swc -o -path '*ironrdp/pkg*' \) -prune \) \
     -type f -print0 | \
     LC_ALL=C sort -z | xargs -0 $SHASUM | awk '{print $1}' | $SHASUM | tr -d ' -'
@@ -86,10 +86,10 @@ if [ "$BUILD" = "true" ]; then \
   print_for_user "detected changes in $TYPE webassets. Rebuilding..."
   "$MAKE" -C "$ROOT_PATH" "$BUILD_TARGET"; \
   # Recalculate the current SHA and record into the LAST_SHA_FILE. The make target is expected to have
-  # created any necessary directories here. The recalculation is necessary as yarn.lock may have been
+  # created any necessary directories here. The recalculation is necessary as pnpm-lock.yaml may have been
   # updated by the build process.
   mkdir -p "$(dirname "$LAST_SHA_FILE")"
-  # Save SHA with yarn.lock before yarn install
+  # Save SHA with pnpm-lock.yaml before installing dependencies.
   echo "$CURRENT_SHA" > "$LAST_SHA_FILE"
   print_for_user "$TYPE webassets successfully updated."
 else

build.assets/windows/build.ps1

@@ -144,7 +144,7 @@ function Install-Node {
         Expand-Archive -Path $NodeZipfile -DestinationPath $ToolchainDir
         Rename-Item -Path "$ToolchainDir/node-v$NodeVersion-win-x64" -NewName "$ToolchainDir/node"
         Enable-Node -ToolchainDir $ToolchainDir
-        corepack enable yarn
+        corepack enable pnpm
         Write-Host "::endgroup::"
     }
 }
@@ -440,9 +440,9 @@ function Build-Connect {
     $CommandDuration = Measure-Block {
         Write-Host "::group::Building Teleport Connect..."
         $env:CONNECT_TSH_BIN_PATH = "$SignedTshBinaryPath"
-        yarn install --frozen-lockfile
+        pnpm install --frozen-lockfile
-        yarn build-term
+        pnpm build-term
-        yarn package-term "-c.extraMetadata.version=$TeleportVersion"
+        pnpm package-term "-c.extraMetadata.version=$TeleportVersion"
         $BinaryName = "Teleport Connect Setup-$TeleportVersion.exe"
         Invoke-SignBinary -UnsignedBinaryPath "$TeleportSourceDirectory\web\packages\teleterm\build\release\$BinaryName" `
             -SignedBinaryPath "$ArtifactDirectory\$BinaryName"

jest.config.js

@@ -8,12 +8,14 @@ const esModules = [
   'd3-color',
   'd3-scale',
   'd3-interpolate',
+  'd3-time-format',
   'd3-array',
   'd3-format',
   'd3-time',
   'd3-shape',
   'd3-path',
   'internmap',
+  '@nivo/bar',
 ].join('|');
 
 /** @type {import('@jest/types').Config.InitialOptions} */
@@ -27,7 +29,12 @@ module.exports = {
     // '**/packages/design/src/**/*.jsx',
     '**/packages/shared/components/**/*.jsx',
   ],
-  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
+  // Copied from https://jestjs.io/docs/configuration#transformignorepatterns-arraystring
+  // Because in pnpm packages are symlinked to node_modules/.pnpm,
+  // we need to transform packages in that directory.
+  // We use a relative pattern to match the second 'node_modules/' in
+  // 'node_modules/.pnpm/@[email protected]/node_modules/@scope/pkg-b/'.
+  transformIgnorePatterns: [`node_modules/(?!.pnpm|${esModules})`],
   coverageReporters: ['text-summary', 'lcov'],
   testPathIgnorePatterns: ['e2e'],
   setupFilesAfterEnv: [

package.json

@@ -2,42 +2,38 @@
   "name": "teleport-ui",
   "version": "1.0.0",
   "scripts": {
-    "build-ui": "yarn build-ui-oss && yarn build-ui-e",
+    "build-ui": "pnpm build-ui-oss && pnpm build-ui-e",
-    "build-ui-oss": "yarn workspace @gravitational/teleport build",
+    "build-ui-oss": "pnpm --filter=@gravitational/teleport build",
-    "build-ui-e": "yarn workspace @gravitational/teleport.e build",
+    "build-ui-e": "pnpm --filter=@gravitational/teleport.e build",
-    "build-wasm": "yarn workspace @gravitational/teleport build-wasm",
+    "build-wasm": "pnpm --filter=@gravitational/teleport build-wasm",
-    "start-teleport": "yarn workspace @gravitational/teleport start",
+    "start-teleport": "pnpm --filter=@gravitational/teleport start",
-    "start-teleport-e": "yarn workspace @gravitational/teleport.e start",
+    "start-teleport-e": "pnpm --filter=@gravitational/teleport.e start",
-    "build-term": "yarn workspace @gravitational/teleterm build",
+    "build-term": "pnpm --filter=@gravitational/teleterm build",
-    "start-term": "yarn workspace @gravitational/teleterm start",
+    "start-term": "pnpm --filter=@gravitational/teleterm start",
-    "package-term": "yarn workspace @gravitational/teleterm package",
+    "package-term": "pnpm --filter=@gravitational/teleterm package",
     "storybook": "start-storybook -p 9002 -c web/.storybook -s web/.storybook/public",
-    "storybook-smoke-test": "yarn storybook --ci --smoke-test",
+    "storybook-smoke-test": "pnpm storybook --ci --smoke-test",
     "test": "jest",
     "test-coverage": "jest --coverage && web/scripts/print-coverage-link.sh",
-    "test-update-snapshot": "yarn test --updateSnapshot",
+    "test-update-snapshot": "pnpm run test --updateSnapshot",
     "tdd": "jest --watch",
-    "lint": "yarn prettier-check && yarn eslint",
+    "lint": "pnpm prettier-check && pnpm eslint",
-    "lint-fix": "yarn prettier-write && yarn eslint --fix",
+    "lint-fix": "pnpm prettier-write && pnpm eslint --fix",
     "eslint": "eslint --quiet '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
     "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc",
-    "prettier-check": "yarn prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
+    "prettier-check": "prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
-    "prettier-write": "yarn prettier --write --log-level silent '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
+    "prettier-write": "prettier --write --log-level silent '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
-    "process-icons": "node web/packages/design/src/Icon/script/script.js & yarn prettier --loglevel silent --write 'web/packages/design/src/Icon/Icons/*.tsx'",
+    "process-icons": "node web/packages/design/src/Icon/script/script.js & pnpm prettier --loglevel silent --write 'web/packages/design/src/Icon/Icons/*.tsx'",
     "nop": "exit 0"
   },
   "private": true,
-  "resolutions": {
+  "pnpm": {
-    "esbuild": "^0.20.2",
+    "overrides": {
-    "react": "^18.2.0",
+      "minimist": "^1.2.8",
-    "react-dom": "^18.2.0",
+      "trim": "0.0.3",
-    "**/d3-color": "^3.1.0",
+      "webpack": "^5.88.2",
-    "**/minimist": "^1.2.8",
+      "x-default-browser": "^0.5.2"
-    "**/@types/react": "^18.2.39",
+    }
-    "**/@types/react-dom": "^18.2.17",
-    "**/trim": "0.0.3",
-    "webpack": "^5.88.2",
-    "x-default-browser": "^0.5.2"
   },
   "devDependencies": {
     "@storybook/react": "^6.5.16",
@@ -91,10 +87,5 @@
     "tslib": "^2.6.3",
     "whatwg-fetch": "^3.6.20"
   },
-  "workspaces": {
+  "packageManager": "[email protected]"
-    "packages": [
-      "web/packages/*",
-      "e/web/*"
-    ]
-  }
 }

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'web/packages/*'
+  - 'e/web/*'

web/.github/actions/docker-build-webassets/action.yaml

@@ -8,4 +8,4 @@ runs:
   entrypoint: sh
   args:
     - -c
-    - yarn install && yarn run build-teleport
+    - pnpm install --frozen-lockfile && pnpm build-teleport

web/.storybook/main.js

@@ -20,8 +20,23 @@ const path = require('path');
 const fs = require('fs');
 const configFactory = require('@gravitational/build/webpack/webpack.base');
 
-// include open source stories
+// Include open source stories.
-const stories = ['../packages/**/*.story.@(js|jsx|ts|tsx)'];
+//
+// When pnpm is used, storybook appears to load stories from workspaces in
+// node_modules, which causes it to fail with the following Node.js cryptic error
+// (probably out of memory):
+//
+// Fatal error in , line 0
+// Fatal JavaScript invalid size error 169220804 (see crbug.com/1201626)
+//
+// The paths are as specific as possible to avoid loading unnecessary stories.
+// TODO(gzdunek): Check if this still need in storybook > v6 .
+const stories = [
+  '../packages/teleport/src/**/*.story.@(js|jsx|ts|tsx)',
+  '../packages/teleterm/src/**/*.story.@(js|jsx|ts|tsx)',
+  '../packages/design/src/**/*.story.@(js|jsx|ts|tsx)',
+  '../packages/shared/@(components|hooks)/**/*.story.@(js|jsx|ts|tsx)',
+];
 
 const tsconfigPath = path.join(__dirname, '../../tsconfig.json');
 
@@ -31,7 +46,7 @@ const enterpriseTeleportExists = fs.existsSync(
 
 // include enterprise stories if available (**/* pattern ignores dot dir names)
 if (enterpriseTeleportExists) {
-  stories.unshift('../../e/web/**/*.story.@(js|jsx|ts|tsx)');
+  stories.unshift('../../e/web/teleport/src/**/*.story.@(js|jsx|ts|tsx)');
 }
 
 module.exports = {

web/.vscode/launch.json

@@ -16,14 +16,6 @@
       "internalConsoleOptions": "neverOpen",
       "port": 9229,
       "skipFiles": ["<node_internals>/**"]
-    },
-    {
-      "name": "Electron: Main",
-      "type": "node",
-      "request": "launch",
-      "protocol": "inspector",
-      "runtimeExecutable": "yarn",
-      "runtimeArgs": ["start-electron --inspect=5858 --remote-debugging-port=9223"]
     }
   ]
 }

web/README.md

@@ -7,23 +7,23 @@ This directory contains the source code for:
 - the Electron app of [Teleport Connect](https://goteleport.com/connect/)
   - [`packages/teleterm`](packages/teleterm)
 
-The code is organized in terms of independent yarn packages which reside in
+The code is organized in terms of independent packages (workspaces) which reside in
 the [packages directory](packages).
 
 ## Getting Started with Teleport Web UI
 
-You can make production builds locally or you can use Docker to do that.
+You can make production builds locally, or you can use Docker to do that.
 
 ### Local Build
 
-Make sure that you have [Yarn 1](https://classic.yarnpkg.com/en/docs/install/) installed. The
+Install Node.js (you can take the version by executing 
-Node.js version should match the one reported by executing `make -C build.assets print-node-version`
+`make -C build.assets print-node-version` from the root directory).
-from the root directory.
+After that, run `corepack enable pnpm` to enable installing a package manager.
 
 Then you need to download and initialize JavaScript dependencies.
 
 ```
-yarn install
+pnpm install
 ```
 
 You will also need the following tools installed:
@@ -36,7 +36,7 @@ You will also need the following tools installed:
 To build the Teleport open source version
 
 ```
-yarn build-ui-oss
+pnpm build-ui-oss
 ```
 
 The resulting output will be in the `webassets` folder.
@@ -110,13 +110,13 @@ For example, if `https://example.com:3080` is the URL of your cluster then:
 To start your local Teleport development server
 
 ```
-PROXY_TARGET=example.com:3080 yarn start-teleport
+PROXY_TARGET=example.com:3080 pnpm start-teleport
 ```
 
 If you're running a local cluster at `https://localhost:3080`, you can just run
 
 ```
-yarn start-teleport
+pnpm start-teleport
 ```
 
 This service will serve your local javascript files and proxy network
@@ -130,7 +130,7 @@ requests to the given target.
 The web UI includes a WASM module built from a Rust codebase located in `packages/teleport/src/ironrdp`.
 It is built with the help of [wasm-pack](https://github.com/rustwasm/wasm-pack).
 
-Running `yarn build-wasm` builds the WASM binary as well as the appropriate Javascript/Typescript
+Running `pnpm build-wasm` builds the WASM binary as well as the appropriate Javascript/Typescript
 bindings and types in `web/packages/teleport/src/ironrdp/pkg`.
 
 ### Unit-Tests
@@ -140,13 +140,13 @@ We use [jest](https://jestjs.io/) as our testing framework.
 To run all jest unit-tests:
 
 ```
-yarn run test
+pnpm test
 ```
 
 To run jest in watch-mode
 
 ```
-yarn run tdd
+pnpm tdd
 ```
 
 ### Interactive Testing
@@ -158,7 +158,7 @@ each component, and interactively develop and test components.
 To start a storybook:
 
 ```
-yarn run storybook
+pnpm storybook
 ```
 
 This command will open a new browser window with storybook in it. There
@@ -170,7 +170,7 @@ and iterate on shared functionality.
 We are targeting last 2 versions of all major browsers. To quickly find out which ones exactly, use the following command:
 
 ```
-yarn browserslist 'last 2 chrome version, last 2 edge version, last 2 firefox version, last 2 safari version'
+pnpm dlx browserslist 'last 2 chrome version, last 2 edge version, last 2 firefox version, last 2 safari version'
 ```
 
 ### Setup Prettier on VSCode
@@ -243,7 +243,7 @@ proxy_service:
   public_addr: ['proxy.127.0.0.1.nip.io']
 ```
 
-Then start the dev server like `PROXY_TARGET=https://proxy.127.0.0.1.nip.io:3080 yarn start-teleport` and access it at https://proxy.127.0.0.1.nip.io:8080.
+Then start the dev server like `PROXY_TARGET=https://proxy.127.0.0.1.nip.io:3080 pnpm start-teleport` and access it at https://proxy.127.0.0.1.nip.io:8080.
 
 #### Local cluster with /etc/hosts
 
@@ -277,7 +277,7 @@ Generate certs for your proxy's domain as described in [Local HTTPS](#local-http
 dev UI server:
 
 ```
-PROXY_TARGET=alpha.devteleport.com:443 yarn start-teleport
+PROXY_TARGET=alpha.devteleport.com:443 pnpm start-teleport
 ```
 
 This makes your browser, tsh, and anything else on your system that respects `/etc/hosts` think it's
@@ -289,16 +289,11 @@ not own.
 
 ### Adding Packages/Dependencies
 
-We use Yarn Workspaces to manage dependencies.
+We use [pnpm workspaces](https://pnpm.io/workspaces) to manage dependencies.
 
-- [Introducing Workspaces](https://yarnpkg.com/blog/2017/08/02/introducing-workspaces)
+To add a package to the workspace, run `pnpm --filter=<workspace-name> add <package-name>`.
-- [Workspaces Documentation](https://yarnpkg.com/en/docs/workspaces)
+Alternatively, you can add a line to the workspace's `package.json` file and then 
-
+run `pnpm install` (or `pnpm i`) from the root of this repository.
-The easiest way to add a package is to add a line to the workspace's `package.json` file and then run `yarn install` from
-the root of this repository.
-
-Keep in mind that there should only be a single `yarn.lock` in this repository, here at the top level. If you add packages
-via `yarn workspace <workspace-name> add <package-name>`, it will create a `packages/<package-name>/yarn.lock` file, which should not be checked in.
 
 Dependencies should generally be added to the specific workspaces that use them.
 For instance, if you need a new dependency for Web UI, add it to `packages/teleport/package.json`.
@@ -325,6 +320,6 @@ When a new event is added to Teleport, the web UI has to be updated to display i
 3. Add a new entry in [Formatters](https://github.com/gravitational/webapps/blob/8a0201667f045be7a46606189a6deccdaee2fe1f/packages/teleport/src/services/audit/makeEvent.ts) to format the event on the events table. The `format` function will receive the event you added to `RawEvents` as parameter.
 4. Define an icon to the event on [`EventIconMap`](https://github.com/gravitational/webapps/blob/8a0201667f045be7a46606189a6deccdaee2fe1f/packages/teleport/src/Audit/EventList/EventTypeCell.tsx).
 5. Add an entry to the [`events`](https://github.com/gravitational/webapps/blob/8a0201667f045be7a46606189a6deccdaee2fe1f/packages/teleport/src/Audit/fixtures/index.ts) array so it will show up on the [`AllEvents` story](https://github.com/gravitational/webapps/blob/8a0201667f045be7a46606189a6deccdaee2fe1f/packages/teleport/src/Audit/Audit.story.tsx)
-6. Check fixture is rendered in storybook, then update snapshot for `Audit.story.test.tsx` using `yarn test-update-snapshot`.
+6. Check fixture is rendered in storybook, then update snapshot for `Audit.story.test.tsx` using `pnpm test-update-snapshot`.
 
 You can see an example in [this pr](https://github.com/gravitational/webapps/pull/561).

web/packages/build/README.md

@@ -28,37 +28,6 @@ Add `@gravitational/build` to your package.json file.
   },
 ```
 
-Create `./src` directory and place `boot.js` file in it which is the default
-webpack entry point for Gravitational web applications.
-
-Then you can run
-
-```
-$ yarn g-build
-```
-
-## Custom webpack config
-
-If you want to use your own `webpack.config.js` file and override the defaults.
-
-For example, if this is your webpack config:
-
-```
-const defaultCfg = require('@gravitational/build/webpack/webpack.prod.config');
-
-defaultCfg.entry = {
-  app: ['./src/myentry.js'],
-},
-
-module.exports = defaultCfg;
-```
-
-Then you can use `--config` parameter.
-
-```
-$ yarn g-build --config webpack.config.js
-```
-
 ## Aliases
 
 To make it easier for us to migrate legacy code and work on refactoring,

web/packages/build/scripts/yarn-install-frozen-lockfile.sh

@@ -1,16 +0,0 @@
-#!/bin/bash
-
-set -ex
-
-# Install JavaScript dependencies and manually check if yarn.lock needs an update.
-# Yarn v1 doesn't respect the --frozen-lockfile flag when using workspaces.
-# https://github.com/yarnpkg/yarn/issues/4098
-
-message="yarn.lock needs an update. Run yarn install, verify that the correct dependencies were \
-installed and commit the updated version of yarn.lock. If you are making changes to enterprise \
-dependencies, make sure those changes are reflected in web/packages/e-imports/package.json as well."
-
-cp yarn.lock yarn-before-install.lock
-yarn install
-git diff --no-index --exit-code yarn-before-install.lock yarn.lock ||
-  { echo "$message" ; exit 1; }

web/packages/design/package.json

@@ -15,7 +15,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@gravitational/build": "^1.0.0",
+    "@gravitational/build": "workspace:*",
     "@types/styled-system": "^5.1.22"
   }
 }

web/packages/design/src/Icon/README.md

@@ -9,6 +9,6 @@
       unpredictable rendering, such as the fill color not being updated or the entire shape being 
       filled in with color, rather than just the outlines.
 2. Add the file to the `assets/` folder in this directory.
-3. Run `$ yarn process-icons`.
+3. Run `pnpm process-icons`.
 
 A full collection of exported icons ready for download can be found in [Google Drive](https://drive.google.com/drive/folders/19068OCcyob6iqjpY3JB4t2NGiRmnuw2D?usp=drive_link). The same icons and others that require preparation before exporting can be found [in Figma](https://www.figma.com/file/Gpjs9vjhzUKF1GDbeG9JGE/Application-Design-System?type=design&node-id=7371-35911&mode=design&t=ior9gA5q20atPjr9-0).

web/packages/shared/package.json

@@ -10,7 +10,7 @@
     "directory": "packages/shared"
   },
   "dependencies": {
-    "@gravitational/design": "1.0.0",
+    "@gravitational/design": "workspace:*",
     "ace-builds": "1.35.2",
     "events": "3.3.0",
     "highlight-words-core": "^1.2.2"

web/packages/teleport/README.md

@@ -4,12 +4,7 @@ This package contains the source code of Teleport Web UI.
 
 ## Development
 
-If `https://example.com:3080/web` is the URL of your teleport cluster UI
+Follow the instructions from `web/README.md`.
-then you can start your local development server:
-
-```
-$ yarn run start --target=https://example.com:3080/web
-```
 
 #### wasm-pack
 

web/packages/teleport/package.json

@@ -4,9 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "yarn build-wasm && vite",
+    "start": "pnpm build-wasm && vite",
     "build-wasm": "RUST_MIN_STACK=16777216 wasm-pack build ./src/ironrdp --target web",
-    "build": "yarn build-wasm && vite build"
+    "build": "pnpm build-wasm && vite build"
   },
   "author": "Gravitational, Inc.",
   "license": "Apache-2.0",
@@ -16,8 +16,8 @@
     "directory": "packages/teleport"
   },
   "dependencies": {
-    "@gravitational/design": "1.0.0",
+    "@gravitational/design": "workspace:*",
-    "@gravitational/shared": "1.0.0",
+    "@gravitational/shared": "workspace:*",
     "@opentelemetry/api": "1.9.0",
     "@opentelemetry/context-zone": "1.25.1",
     "@opentelemetry/core": "^1.8.0",
@@ -41,7 +41,8 @@
     "xterm-addon-webgl": "^0.16.0"
   },
   "devDependencies": {
-    "@gravitational/build": "^1.0.0",
+    "@gravitational/build": "workspace:*",
+    "@gravitational/teleport": "workspace:*",
     "babel-plugin-transform-import-meta": "^2.2.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "jest-canvas-mock": "^2.5.2",

web/packages/teleport/src/components/BannerList/Banner.test.tsx

@@ -45,7 +45,7 @@ describe('components/BannerList/Banner', () => {
       />
     );
     expect(screen.getByRole('icon')).toHaveClass('icon-info');
-    expect(container.firstChild).toHaveStyleRule('background-color', '#039be5');
+    expect(container.firstChild).toHaveStyle('background-color: #039be5');
   });
 
   it('renders a warning banner', () => {
@@ -58,7 +58,7 @@ describe('components/BannerList/Banner', () => {
       />
     );
     expect(screen.getByRole('icon')).toHaveClass('icon-info');
-    expect(container.firstChild).toHaveStyleRule('background-color', '#FFAB00');
+    expect(container.firstChild).toHaveStyle('background-color: #FFAB00');
   });
 
   it('renders a danger banner', () => {
@@ -71,7 +71,7 @@ describe('components/BannerList/Banner', () => {
       />
     );
     expect(screen.getByRole('icon')).toHaveClass('icon-warning');
-    expect(container.firstChild).toHaveStyleRule('background-color', '#FF6257');
+    expect(container.firstChild).toHaveStyle('background-color: #FF6257');
   });
 
   it('calls onClose when the X is clicked', () => {

web/packages/teleterm/README.md

@@ -25,8 +25,8 @@ Next, we're going to build the Electron app.
 
 ```bash
 cd teleport
-yarn install
+pnpm install
-yarn build-term && CONNECT_TSH_BIN_PATH=$PWD/build/tsh yarn package-term
+pnpm build-term && CONNECT_TSH_BIN_PATH=$PWD/build/tsh pnpm package-term
 ```
 
 The resulting package can be found at `web/packages/teleterm/build/release`.
@@ -38,7 +38,7 @@ process](#build-process) section.
 
 ```sh
 cd teleport
-yarn install && make build/tsh
+pnpm install && make build/tsh
 ```
 
 To launch `teleterm` in development mode:
@@ -46,10 +46,10 @@ To launch `teleterm` in development mode:
 ```sh
 cd teleport
 # By default, the dev version assumes that the tsh binary is at build/tsh.
-yarn start-term
+pnpm start-term
 
 # You can provide a different absolute path to the tsh binary though the CONNECT_TSH_BIN_PATH env var.
-CONNECT_TSH_BIN_PATH=$PWD/build/tsh yarn start-term
+CONNECT_TSH_BIN_PATH=$PWD/build/tsh pnpm start-term
 ```
 
 To automatically restart the app when tsh gets rebuilt or
@@ -57,7 +57,7 @@ To automatically restart the app when tsh gets rebuilt or
 use [watchexec](https://github.com/watchexec/watchexec):
 
 ```sh
-watchexec --restart --watch build --filter tsh --no-project-ignore -- yarn start-term -w
+watchexec --restart --watch build --filter tsh --no-project-ignore -- pnpm start-term -w
 ```
 
 This can be combined with a tool like [gow](https://github.com/mitranim/gow) to automatically rebuild tsh:
@@ -99,7 +99,7 @@ Resulting files can be found in `sharedProcess/api/protogen`.
 
 ## Build process
 
-`yarn package-term` is responsible for packaging the app code for distribution.
+`pnpm package-term` is responsible for packaging the app code for distribution.
 
 On all platforms, with the exception of production builds on macOS, the `CONNECT_TSH_BIN_PATH` env
 var is used to provide the path to the tsh binary that will be included in the package.
@@ -125,7 +125,7 @@ To make a fully-fledged build on macOS with Touch ID support, you need two thing
 - a signed version of tsh.app
 - an Apple Developer ID certificate in your Keychain
 
-When running `yarn package-term`, you need to provide these environment variables:
+When running `pnpm package-term`, you need to provide these environment variables:
 
 - `APPLE_USERNAME`
 - `APPLE_PASSWORD`

web/packages/teleterm/package.json

@@ -33,9 +33,9 @@
     "winston": "^3.13.0"
   },
   "devDependencies": {
-    "@gravitational/build": "^1.0.0",
+    "@gravitational/build": "workspace:*",
-    "@gravitational/design": "1.0.0",
+    "@gravitational/design": "workspace:*",
-    "@gravitational/shared": "1.0.0",
+    "@gravitational/shared": "workspace:*",
     "@protobuf-ts/grpc-transport": "^2.9.4",
     "@types/node-forge": "^1.3.11",
     "@types/tar-fs": "^2.0.4",

web/packages/teleterm/src/mainProcess/runtimeSettings.ts

@@ -52,7 +52,7 @@ const insecure =
   // --insecure is already in our docs, but let's add --connect-insecure too in case Node or
   // Electron reserves it one day.
   argv.includes('--connect-insecure') ||
-  // The flag is needed because it's not easy to pass a flag to the app in dev mode. `yarn
+  // The flag is needed because it's not easy to pass a flag to the app in dev mode. `pnpm
   // start-term` causes a bunch of package scripts to be executed and each would have to pass the
   // flag one level down.
   (dev && !!env.CONNECT_INSECURE);