chore: switch from `yarn` to `pnpm` (#8822)

.github/actions/setup-node/action.yaml

@@ -10,14 +10,22 @@ inputs:
 runs:
   using: "composite"
   steps:
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: 8
     - name: Setup Node
       uses: buildjet/setup-node@v3
       with:
         node-version: 18.17.0
         # See https://github.com/actions/setup-node#caching-global-packages-data
-        cache: "yarn"
-        cache-dependency-path: ${{ inputs.directory }}/yarn.lock
+        cache: "pnpm"
+        cache-dependency-path: ${{ inputs.directory }}/pnpm-lock.yaml
+    - name: Install root node_modules
+      shell: bash
+      run: ./scripts/pnpm_install.sh
+
     - name: Install node_modules
       shell: bash
-      run: ../scripts/yarn_install.sh
+      run: ../scripts/pnpm_install.sh
       working-directory: ${{ inputs.directory }}

.github/workflows/ci.yaml

@@ -226,18 +226,6 @@ jobs:
           cache: false
           go-version: 1.20.6
 
-      - name: Install prettier
-        # We only need prettier for fmt, so do not install all dependencies.
-        # There is no way to install a single package with yarn, so we have to
-        # make a new package.json with only prettier listed as a dependency.
-        # Then running `yarn` will only install prettier.
-        run: |
-          cd site
-          mv package.json package.json.bak
-          jq '{dependencies: {prettier: .devDependencies.prettier}}' < package.json.bak > package.json
-          yarn --frozen-lockfile
-          mv package.json.bak package.json
-
       - name: Install shfmt
         run: go install mvdan.cc/sh/v3/cmd/shfmt@v3.5.0
 
@@ -508,7 +496,7 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/setup-node
 
-      - run: yarn test:ci --max-workers $(nproc)
+      - run: pnpm test:ci --max-workers $(nproc)
         working-directory: site
 
       - name: Check code coverage
@@ -546,13 +534,12 @@ jobs:
 
       - name: Build
         run: |
-          sudo npm install -g prettier
           make -B site/out/index.html
 
-      - run: yarn playwright:install
+      - run: pnpm playwright:install
         working-directory: site
 
-      - run: yarn playwright:test
+      - run: pnpm playwright:test
         env:
           DEBUG: pw:api
         working-directory: site
@@ -657,28 +644,19 @@ jobs:
         with:
           sqlc-version: "1.19.1"
 
-      - name: Install dependencies
-        run: |
-          cd offlinedocs
-          yarn
-          # Install prettier globally
-          prettier_version=$(jq -r '.devDependencies.prettier' < package.json)
-          yarn global add "prettier@${prettier_version}"
-
       - name: Format
         run: |
           cd offlinedocs
-          yarn format:check
+          pnpm format:check
 
       - name: Lint
         run: |
           cd offlinedocs
-          yarn lint
+          pnpm lint
 
       - name: Build
         run: |
-          version="$(./scripts/version.sh)"
-          make -j build/coder_docs_"$version".tgz
+          make -j build/coder_docs_"$(./scripts/version.sh)".tgz
 
   required:
     runs-on: ubuntu-latest

.github/workflows/typos.toml

@@ -17,15 +17,16 @@ encrypter = "encrypter"
 
 [files]
 extend-exclude = [
-    "**.svg",
-    "**.png",
-    "**.lock",
-    "go.sum",
-    "go.mod",
-    # These files contain base64 strings that confuse the detector
-    "**XService**.ts",
-    "**identity.go",
-    "scripts/ci-report/testdata/**",
-    "**/*_test.go",
-    "**/*.test.tsx"
+	"**.svg",
+	"**.png",
+	"**.lock",
+	"go.sum",
+	"go.mod",
+	# These files contain base64 strings that confuse the detector
+	"**XService**.ts",
+	"**identity.go",
+	"scripts/ci-report/testdata/**",
+	"**/*_test.go",
+	"**/*.test.tsx",
+	"**/pnpm-lock.yaml",
 ]

.prettierignore

@@ -78,3 +78,5 @@ scripts/apitypings/testdata/**/*.ts
 
 # Generated files shouldn't be formatted.
 site/e2e/provisionerGenerated.ts
+
+**/pnpm-lock.yaml

.prettierignore.include

@@ -11,3 +11,5 @@ scripts/apitypings/testdata/**/*.ts
 
 # Generated files shouldn't be formatted.
 site/e2e/provisionerGenerated.ts
+
+**/pnpm-lock.yaml

Makefile

@@ -50,7 +50,7 @@ endif
 # Note, all find statements should be written with `.` or `./path` as
 # the search path so that these exclusions match.
 FIND_EXCLUSIONS= \
-	-not \( \( -path '*/.git/*' -o -path './build/*' -o -path './vendor/*' -o -path './.coderv2/*' -o -path '*/node_modules/*' -o -path './site/out/*' -o -path './coderd/apidoc/*' \) -prune \)
+	-not \( \( -path '*/.git/*' -o -path './build/*' -o -path './vendor/*' -o -path './.coderv2/*' -o -path '*/node_modules/*' -o -path '*/out/*' -o -path './coderd/apidoc/*' -o -path '*/.next/*' \) -prune \)
 # Source files used for make targets, evaluated on use.
 GO_SRC_FILES := $(shell find . $(FIND_EXCLUSIONS) -type f -name '*.go' -not -name '*_test.go')
 # All the shell files in the repo, excluding ignored files.
@@ -357,13 +357,13 @@ build/coder_helm_$(VERSION).tgz:
 
 site/out/index.html: site/package.json $(shell find ./site $(FIND_EXCLUSIONS) -type f \( -name '*.ts' -o -name '*.tsx' \))
 	cd site
-	../scripts/yarn_install.sh
-	yarn build
+	../scripts/pnpm_install.sh
+	pnpm build
 
 offlinedocs/out/index.html: $(shell find ./offlinedocs $(FIND_EXCLUSIONS) -type f) $(shell find ./docs $(FIND_EXCLUSIONS) -type f | sed 's: :\\ :g')
 	cd offlinedocs
-	../scripts/yarn_install.sh
-	yarn export
+	../scripts/pnpm_install.sh
+	pnpm export
 
 build/coder_docs_$(VERSION).tgz: offlinedocs/out/index.html
 	tar -czf "$@" -C offlinedocs/out .
@@ -390,9 +390,9 @@ fmt/prettier:
 	cd site
 # Avoid writing files in CI to reduce file write activity
 ifdef CI
-	yarn run format:check
+	pnpm run format:check
 else
-	yarn run format:write
+	pnpm run format:write
 endif
 .PHONY: fmt/prettier
 
@@ -420,7 +420,7 @@ lint/site-icons:
 
 lint/ts:
 	cd site
-	yarn && yarn lint
+	pnpm i && pnpm lint
 .PHONY: lint/ts
 
 lint/go:
@@ -532,29 +532,26 @@ provisionerd/proto/provisionerd.pb.go: provisionerd/proto/provisionerd.proto
 site/src/api/typesGenerated.ts: scripts/apitypings/main.go $(shell find ./codersdk $(FIND_EXCLUSIONS) -type f -name '*.go')
 	go run scripts/apitypings/main.go > site/src/api/typesGenerated.ts
 	cd site
-	yarn run format:types
+	pnpm run format:types
 
 coderd/rbac/object_gen.go: scripts/rbacgen/main.go coderd/rbac/object.go
 	go run scripts/rbacgen/main.go ./coderd/rbac > coderd/rbac/object_gen.go
 
 docs/admin/prometheus.md: scripts/metricsdocgen/main.go scripts/metricsdocgen/metrics
 	go run scripts/metricsdocgen/main.go
-	cd site
-	yarn run format:write:only ../docs/admin/prometheus.md
+	pnpm run format:write:only ./docs/admin/prometheus.md
 
 docs/cli.md: scripts/clidocgen/main.go $(GO_SRC_FILES)
 	BASE_PATH="." go run ./scripts/clidocgen
-	cd site
-	yarn run format:write:only ../docs/cli.md ../docs/cli/*.md ../docs/manifest.json
+	pnpm run format:write:only ./docs/cli.md ./docs/cli/*.md ./docs/manifest.json
 
 docs/admin/audit-logs.md: scripts/auditdocgen/main.go enterprise/audit/table.go coderd/rbac/object_gen.go
 	go run scripts/auditdocgen/main.go
-	cd site
-	yarn run format:write:only ../docs/admin/audit-logs.md
+	pnpm run format:write:only ./docs/admin/audit-logs.md
 
 coderd/apidoc/swagger.json: $(shell find ./scripts/apidocgen $(FIND_EXCLUSIONS) -type f) $(wildcard coderd/*.go) $(wildcard enterprise/coderd/*.go) $(wildcard codersdk/*.go) $(wildcard enterprise/wsproxy/wsproxysdk/*.go) $(DB_GEN_FILES) .swaggo docs/manifest.json coderd/rbac/object_gen.go
 	./scripts/apidocgen/generate.sh
-	yarn run --cwd=site format:write:only ../docs/api ../docs/manifest.json ../coderd/apidoc/swagger.json
+	pnpm run format:write:only ./docs/api ./docs/manifest.json ./coderd/apidoc/swagger.json
 
 update-golden-files: cli/testdata/.gen-golden helm/tests/testdata/.gen-golden scripts/ci-report/testdata/.gen-golden enterprise/cli/testdata/.gen-golden
 .PHONY: update-golden-files

flake.nix

@@ -32,6 +32,7 @@
             kubernetes-helm
             mockgen
             nfpm
+            nodePackages.pnpm
             nodePackages.typescript
             nodePackages.typescript-language-server
             nodejs
@@ -39,8 +40,8 @@
             openssl
             pango
             pixman
-            postgresql
             pkg-config
+            postgresql
             protoc-gen-go
             ripgrep
             shellcheck
@@ -48,7 +49,6 @@
             sqlc
             terraform
             typos
-            yarn
             yq
             zip
             zstd

offlinedocs/.gitignore

@@ -21,9 +21,7 @@
 
 # debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
+pnpm-debug.log*
 
 # local env files
 .env*.local

offlinedocs/.prettierignore

@@ -0,0 +1 @@
+**/pnpm-lock.yaml

offlinedocs/package.json

@@ -3,21 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "yarn copy-images && next dev",
-    "build": "next build",
-    "start": "next start",
-    "export": "yarn copy-images && next build && next export",
+    "dev": "pnpm copy-images && next dev",
+    "build": "pnpm exec next build",
+    "start": "pnpm exec next start",
+    "export": "pnpm copy-images && next build && next export",
     "copy-images": "sh ./scripts/copyImages.sh",
-    "lint": "yarn run lint:types",
-    "lint:fix": "FIX=true yarn lint",
-    "lint:types": "tsc --noEmit",
-    "format:check": "prettier --cache --check './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
-    "format:write": "prettier --cache --write './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'"
+    "lint": "pnpm run lint:types",
+    "lint:fix": "FIX=true pnpm lint",
+    "lint:types": "pnpm exec tsc --noEmit",
+    "format:check": "pnpm exec prettier --cache --check './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
+    "format:write": "pnpm exec prettier --cache --write './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'"
   },
   "dependencies": {
     "@chakra-ui/react": "2.8.0",
     "@emotion/react": "11",
     "@emotion/styled": "11",
+    "@types/lodash": "4.14.196",
     "archiver": "5.3.1",
     "framer-motion": "10",
     "front-matter": "4.0.2",

package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "format:write:only": "pnpm exec prettier --write"
+  },
+  "devDependencies": {
+    "prettier": "3.0.0"
+  }
+}

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+devDependencies:
+  prettier:
+    specifier: 3.0.0
+    version: 3.0.0
+
+packages:
+
+  /prettier@3.0.0:
+    resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true

scripts/apidocgen/.prettierignore

@@ -0,0 +1 @@
+**/pnpm-lock.yaml

scripts/apidocgen/generate.sh

@@ -27,12 +27,12 @@ go run github.com/swaggo/swag/cmd/swag@v1.8.9 init \
 popd
 
 pushd "${APIDOCGEN_DIR}"
-yarn
+pnpm i
 
 # Make sure that widdershins is installed correctly.
-yarn exec -- widdershins --version
+pnpm exec -- widdershins --version
 # Render the Markdown file.
-yarn exec -- widdershins \
+pnpm exec -- widdershins \
 	--user_templates "./markdown-template" \
 	--search false \
 	--omitHeader true \

scripts/develop.sh

@@ -48,7 +48,7 @@ if [ "${CODER_BUILD_AGPL:-0}" -gt "0" ] && [ "${use_proxy}" -gt "0" ]; then
 fi
 
 # Preflight checks: ensure we have our required dependencies, and make sure nothing is listening on port 3000 or 8080
-dependencies curl git go make yarn
+dependencies curl git go make pnpm
 curl --fail http://127.0.0.1:3000 >/dev/null 2>&1 && echo '== ERROR: something is listening on port 3000. Kill it and re-run this script.' && exit 1
 curl --fail http://127.0.0.1:8080 >/dev/null 2>&1 && echo '== ERROR: something is listening on port 8080. Kill it and re-run this script.' && exit 1
 
@@ -190,7 +190,7 @@ fatal() {
 	fi
 
 	# Start the frontend once we have a template up and running
-	CODER_HOST=http://127.0.0.1:3000 start_cmd SITE date yarn --cwd=./site dev --host
+	CODER_HOST=http://127.0.0.1:3000 start_cmd SITE date pnpm --cwd=./site dev --host
 
 	interfaces=(localhost)
 	if command -v ip >/dev/null; then

scripts/pnpm_install.sh

@@ -1,14 +1,14 @@
 #!/usr/bin/env bash
 #
-# Run "yarn install" with flags appropriate to the environment (local
+# Run "pnpm install" with flags appropriate to the environment (local
 # development vs build system). The install is always run within the current
 # directory.
 #
-# Usage: yarn_install.sh [optional extra flags]
+# Usage: pnpm_install.sh [optional extra flags]
 
 set -euo pipefail
 
-yarn_flags=(
+pnpm_flags=(
 	# Do not execute install scripts
 	# TODO: check if build works properly with this enabled
 	# --ignore-scripts
@@ -19,19 +19,17 @@ yarn_flags=(
 )
 
 if [[ -n ${CI:-} ]]; then
-	yarn_flags+=(
+	pnpm_flags+=(
 		# Install dependencies from lockfile, ensuring builds are fully
 		# reproducible
 		--frozen-lockfile
-		# Suppress progress information
-		--silent
-		# Disable interactive prompts for build
-		--non-interactive
+		# Disable interactive prompts.
+		--reporter append-only
 	)
 fi
 
 # Append whatever is specified on the command line
-yarn_flags+=("$@")
+pnpm_flags+=("$@")
 
-echo "+ yarn install ${yarn_flags[*]}"
-yarn install "${yarn_flags[@]}"
+echo "+ pnpm install ${pnpm_flags[*]}"
+pnpm install "${pnpm_flags[@]}"

site/.eslintignore

@@ -78,3 +78,5 @@ stats/
 
 # Generated files shouldn't be formatted.
 e2e/provisionerGenerated.ts
+
+**/pnpm-lock.yaml

site/.prettierignore

@@ -78,3 +78,5 @@ stats/
 
 # Generated files shouldn't be formatted.
 e2e/provisionerGenerated.ts
+
+**/pnpm-lock.yaml

site/.yarnrc

@@ -1 +0,0 @@
-network-timeout 300000

site/package.json

@@ -5,17 +5,17 @@
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
-    "postinstall": "yarn typegen",
-    "build": "NODE_ENV=production yarn vite build",
-    "check:all": "yarn format:check && yarn lint && yarn test",
+    "postinstall": "pnpm typegen",
+    "build": "NODE_ENV=production pnpm vite build",
+    "check:all": "pnpm format:check && pnpm lint && pnpm test",
     "chromatic": "chromatic",
     "dev": "vite",
-    "format:check": "prettier --cache --check '../**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
-    "format:types": "prettier --cache --write 'src/api/typesGenerated.ts'",
-    "format:write": "prettier --cache --write '../**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
-    "format:write:only": "prettier --write",
-    "lint": "yarn typegen && yarn run lint:types && jest --selectProjects lint",
-    "lint:fix": "FIX=true yarn lint",
+    "format:check": "pnpm exec prettier --cache --check '../**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
+    "format:types": "pnpm exec prettier --cache --write './src/api/typesGenerated.ts'",
+    "format:write": "pnpm exec prettier --cache --write '../**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
+    "format:write:only": "pnpm exec prettier --write",
+    "lint": "pnpm typegen && pnpm run lint:types && pnpm exec jest --selectProjects lint",
+    "lint:fix": "FIX=true pnpm lint",
     "lint:types": "tsc --noEmit",
     "playwright:install": "playwright install --with-deps chromium",
     "playwright:test": "playwright test --config=e2e/playwright.config.ts",
@@ -27,7 +27,7 @@
     "test:coverage": "jest --selectProjects test --collectCoverage",
     "test:watch": "jest --selectProjects test --watch",
     "typegen": "xstate typegen 'src/**/*.ts'",
-    "stats": "STATS=true yarn build && npx http-server ./stats -p 8081 -c-1",
+    "stats": "STATS=true pnpm build && npx http-server ./stats -p 8081 -c-1",
     "deadcode": "ts-prune | grep -v \".stories\\|.typegen\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo \"No deadcode found.\""
   },
   "dependencies": {
@@ -43,9 +43,10 @@
     "@mui/lab": "5.0.0-alpha.129",
     "@mui/material": "5.14.0",
     "@mui/styles": "5.14.0",
+    "@mui/system": "5.14.0",
     "@tanstack/react-query": "4.32.0",
-    "@testing-library/react-hooks": "8.0.1",
     "@types/color-convert": "2.0.0",
+    "@types/lodash": "4.14.196",
     "@types/react-color": "3.0.6",
     "@types/semver": "7.5.0",
     "@vitejs/plugin-react": "4.0.1",
@@ -69,8 +70,6 @@
     "front-matter": "4.0.2",
     "i18next": "22.5.0",
     "jest-environment-jsdom": "29.5.0",
-    "jest-location-mock": "1.0.9",
-    "just-debounce-it": "3.2.0",
     "lodash": "4.17.21",
     "monaco-editor": "0.40.0",
     "pretty-bytes": "6.1.0",
@@ -112,13 +111,16 @@
     "@storybook/addon-essentials": "7.2.0",
     "@storybook/addon-links": "7.2.0",
     "@storybook/addon-mdx-gfm": "7.2.0",
+    "@storybook/react": "7.2.0",
     "@storybook/react-vite": "7.2.0",
     "@swc/core": "1.3.38",
     "@swc/jest": "0.2.24",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
+    "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
     "@types/chroma-js": "2.4.0",
+    "@types/express": "4.17.17",
     "@types/jest": "29.5.2",
     "@types/node": "18.17.0",
     "@types/react": "18.2.6",
@@ -128,6 +130,7 @@
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.5",
     "@types/ssh2": "1.11.13",
+    "@types/testing-library__jest-dom": "5.14.9",
     "@types/ua-parser-js": "0.7.36",
     "@types/uuid": "9.0.2",
     "@typescript-eslint/eslint-plugin": "6.2.1",
@@ -146,19 +149,25 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.12",
     "eslint-plugin-unicorn": "48.0.0",
-    "jest": "29.5.0",
+    "express": "4.18.2",
+    "jest": "29.6.2",
     "jest-canvas-mock": "2.4.0",
     "jest-fetch-mock": "3.0.3",
+    "jest-location-mock": "1.0.9",
     "jest-runner-eslint": "2.1.0",
     "jest-websocket-mock": "2.4.0",
     "jest_workaround": "0.1.14",
+    "just-debounce-it": "3.2.0",
     "msw": "1.2.2",
     "prettier": "3.0.0",
+    "protobufjs": "7.2.4",
     "resize-observer": "1.0.4",
+    "rxjs": "7.8.1",
     "ssh2": "1.14.0",
     "storybook": "7.2.0",
     "storybook-addon-react-router-v6": "1.0.2",
     "storybook-react-context": "0.6.0",
+    "ts-node": "10.9.1",
     "ts-proto": "1.156.0",
     "typescript": "5.1.6",
     "vite-plugin-checker": "0.6.0"

site/src/components/RequireAuth/RequireAuth.tsx

@@ -1,7 +1,6 @@
 import { useAuth } from "components/AuthProvider/AuthProvider"
 import { FC } from "react"
-import { Navigate, useLocation } from "react-router"
-import { Outlet } from "react-router-dom"
+import { Outlet, Navigate, useLocation } from "react-router-dom"
 import { embedRedirect } from "../../utils/redirect"
 import { FullScreenLoader } from "../Loader/FullScreenLoader"
 import { DashboardProvider } from "components/Dashboard/DashboardProvider"

site/src/components/RequirePermission/RequirePermission.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react"
-import { Navigate } from "react-router"
+import { Navigate } from "react-router-dom"
 
 export interface RequirePermissionProps {
   children: JSX.Element

site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

@@ -2,7 +2,7 @@ import { useMachine } from "@xstate/react"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
-import { useNavigate } from "react-router"
+import { useNavigate } from "react-router-dom"
 import { createUserMachine } from "xServices/users/createUserXService"
 import * as TypesGen from "../../../api/typesGenerated"
 import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"

site/src/pages/UsersPage/UsersPage.tsx

@@ -9,8 +9,7 @@ import { useMe } from "hooks/useMe"
 import { usePermissions } from "hooks/usePermissions"
 import { FC, ReactNode, useEffect } from "react"
 import { Helmet } from "react-helmet-async"
-import { useNavigate } from "react-router"
-import { useSearchParams } from "react-router-dom"
+import { useSearchParams, useNavigate } from "react-router-dom"
 import { siteRolesMachine } from "xServices/roles/siteRolesXService"
 import { usersMachine } from "xServices/users/usersXService"
 import { ConfirmDialog } from "../../components/Dialogs/ConfirmDialog/ConfirmDialog"

site/tsconfig.json

@@ -17,5 +17,6 @@
     "baseUrl": "./src"
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "_jest"]
+  "exclude": ["node_modules", "_jest"],
+  "types": ["node", "jest", "@testing-library/jest-dom"]
 }