PMM-15288 Migrate UI toolchain to pnpm + oxlint/oxfmt

.devcontainer/Makefile

@@ -62,17 +62,17 @@ run: run-all                         ## Aliased to "run-all"
 	echo "run is aliased to run-all"
 
 ui-setup:                            ## Install UI dependencies
-	cd ui && yarn install
+	cd ui && pnpm install
 
 run-ui: ui-setup setup-livereload    ## Start vite dev server for UI with HMR
 	mv /srv/grafana/plugins/pmm-compat-app /srv/grafana/plugins/pmm-compat-app.bak; \
 	ln -sfn $(CURDIR)/ui/apps/pmm-compat/dist /srv/grafana/plugins/pmm-compat-app; \
 	supervisorctl restart grafana; \
 	trap 'rm -f /srv/grafana/plugins/pmm-compat-app; mv /srv/grafana/plugins/pmm-compat-app.bak /srv/grafana/plugins/pmm-compat-app; supervisorctl restart grafana' EXIT; \
-	cd ui && yarn dev
+	cd ui && pnpm dev
 
 build-ui: ui-setup               ## Build UI and deploy to system dirs
-	cd ui && yarn build
+	cd ui && pnpm build
 	rm -rf /usr/share/pmm-ui
 	cp -r ui/apps/pmm/dist /usr/share/pmm-ui
 	rm -rf /usr/share/percona-dashboards/panels/pmm-compat-app /srv/grafana/plugins/pmm-compat-app

.devcontainer/setup.sh

@@ -47,11 +47,14 @@ install_go() {
     go env
 }
 
-# Installs Node.js 22 and Yarn.
+# Installs Node.js 22, pnpm (for ui/) and Yarn (for dashboards/pmm-app).
 install_node() {
     dnf module enable -y nodejs:22
     dnf install -y nodejs npm
     npm install -g yarn@1.22.22
+    # pnpm is not pinned here: corepack resolves it from the `packageManager`
+    # field in ui/package.json on first use.
+    corepack enable pnpm
     node --version
     yarn --version
 }

.github/workflows/ui.yml

@@ -31,12 +31,15 @@ jobs:
       - name: Check out code
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup nodejs
         uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           node-version-file: ui/.nvmrc
-          cache: yarn
-          cache-dependency-path: ui/yarn.lock
+          cache: pnpm
+          cache-dependency-path: ui/pnpm-lock.yaml
 
       - name: Check formatting
         run: make format-check

AGENTS.md

@@ -408,7 +408,7 @@ PMM Server talks to pmm-agents and API clients already deployed in the field, so
 
 ### Dependencies and new files
 - Prefer the standard library and deps already in `go.mod` / `ui/package.json`; a new dependency needs justification and an AGPL-3-compatible license (CI runs a license check).
-- Go: `go get` then `go mod tidy` (both in `make prepare-pr`). UI: `yarn add` from `ui/`.
+- Go: `go get` then `go mod tidy` (both in `make prepare-pr`). UI: `pnpm add` from `ui/` (or `pnpm --filter <pkg> add` for one workspace package).
 - New Go source files need the AGPL-3 Percona license header — copy it from an existing `.go` file or run `go tool license-eye -c .licenserc.yaml header fix`. Enforced by `make check-license` (exemptions: `agent/`, `admin/`, `utils/`, mocks).
 
 ### Graceful Shutdown

build/docker/rpmbuild/Dockerfile.el8

@@ -29,6 +29,12 @@ RUN dnf update -y && \
     dnf install -y --enablerepo=ol8_codeready_builder glibc-static && \
     dnf clean all && rm -rf /var/cache/dnf
 
+# The UI workspace (ui/) builds with pnpm; the QAN Grafana plugin (dashboards/pmm-app)
+# is still on yarn 1, so both are needed. corepack ships with nodesource's nodejs 22
+# and resolves pnpm from the `packageManager` field in ui/package.json, so the version
+# is pinned in exactly one place and needs no change here on a bump.
+RUN corepack enable
+
 # Copy Go from official golang image to avoid QEMU extraction issues
 COPY --from=golang /usr/local/go /usr/local/go
 

build/docker/rpmbuild/Dockerfile.el9

@@ -29,6 +29,12 @@ RUN dnf update -y && \
     dnf install -y --enablerepo=ol9_codeready_builder glibc-static && \
     dnf clean all && rm -rf /var/cache/dnf
 
+# The UI workspace (ui/) builds with pnpm; the QAN Grafana plugin (dashboards/pmm-app)
+# is still on yarn 1, so both are needed. corepack ships with nodesource's nodejs 22
+# and resolves pnpm from the `packageManager` field in ui/package.json, so the version
+# is pinned in exactly one place and needs no change here on a bump.
+RUN corepack enable
+
 # Copy Go from official golang image to avoid QEMU extraction issues
 COPY --from=golang /usr/local/go /usr/local/go
 

build/docker/rpmbuild/Dockerfile.hetzner-el9

@@ -42,6 +42,12 @@ RUN dnf update -y && \
     dnf install -y --enablerepo=crb glibc-static && \
     dnf clean all && rm -rf /var/cache/dnf
 
+# The UI workspace (ui/) builds with pnpm; the QAN Grafana plugin (dashboards/pmm-app)
+# is still on yarn 1, so both are needed. corepack ships with nodesource's nodejs 22
+# and resolves pnpm from the `packageManager` field in ui/package.json, so the version
+# is pinned in exactly one place and needs no change here on a bump.
+RUN corepack enable
+
 # Configure EPEL to use European mirror
 RUN sed -i 's|metalink=|#metalink=|g' /etc/yum.repos.d/epel*.repo && \
     sed -i 's|#baseurl=.*|baseurl=https://ftp.fau.de/epel/9/Everything/$basearch/|g' /etc/yum.repos.d/epel.repo || true

ui/.oxfmtrc.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "ignorePatterns": [
+    "dist",
+    "node_modules",
+    "pnpm-lock.yaml",
+    "storybook-static",
+    "**/.config/**"
+  ]
+}

ui/.vscode/settings.json

@@ -1,8 +1,5 @@
 {
   "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^@mui/[^/]+$"],
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ]
+  "oxc.configPath": "oxlintrc.json",
+  "oxc.fmt.experimental": true
 }

ui/Makefile

@@ -1,27 +1,33 @@
+.PHONY: dev ci format format-check lint test setup build release clean
+
 dev:
-	yarn dev
+	pnpm dev
 
 ci: setup format-check lint test build
 
 format: setup
-	yarn format
+	pnpm format
 
 format-check: setup
-	yarn format:check
+	pnpm format:check
 
 lint: setup
-	yarn lint
+	pnpm lint
 
 test: setup
-	yarn test
+	pnpm test
 
 setup:
-	yarn install
+	# corepack ships with Node 22 and resolves pnpm from the `packageManager`
+	# field in package.json, so the version is pinned in exactly one place.
+	# The sudo fallback covers images where corepack's shim dir is root-owned.
+	corepack enable pnpm 2>/dev/null || sudo corepack enable pnpm
+	pnpm install
 
 build: setup
-	yarn build
+	pnpm build
 
 release: build
 
 clean:
-	yarn clean
+	pnpm clean

ui/README.md

@@ -13,7 +13,7 @@ See the [PMM Documentation](https://www.percona.com/doc/percona-monitoring-and-m
 
 This repo uses the following stack across its packages:
 
-- Yarn (https://yarnpkg.com/)
+- pnpm (https://pnpm.io/)
 - Turborepo (https://turborepo.com/)
 - Typescript (https://www.typescriptlang.org/)
 - React (https://react.dev/)
@@ -94,10 +94,10 @@ Use this when you want to drive Vite from your IDE without `make env`. You still
 Prerequisites:
 
 - [Node 22](https://nodejs.org/en) (e.g. via [nvm](https://github.com/nvm-sh/nvm))
-- [Yarn](https://yarnpkg.com/) 1.x
+- [pnpm](https://pnpm.io/) 11.x (`corepack enable pnpm` picks up the pinned version)
 
 ```bash
-make setup       # yarn install across the workspace
+make setup       # pnpm install across the workspace
 make dev         # turbo dev → Vite on https://localhost:5174 (or 5173 if nginx certs are present)
 ```
 

ui/apps/pmm-compat/.config/webpack/webpack.config.ts

@@ -6,7 +6,6 @@
  */
 
 import CopyWebpackPlugin from 'copy-webpack-plugin';
-import ESLintPlugin from 'eslint-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import path from 'path';
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
@@ -247,10 +246,6 @@ const config = async (env): Promise<Configuration> => {
               },
               typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
             }),
-            new ESLintPlugin({
-              extensions: ['.ts', '.tsx'],
-              lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
-            }),
           ]
         : []),
     ],

ui/apps/pmm-compat/package.json

@@ -1,51 +1,56 @@
 {
   "name": "pmm-compat",
   "version": "1.0.0",
+  "license": "AGPL-3.0-only",
+  "author": "Percona LLC",
   "scripts": {
     "build": "webpack -c ./webpack.config.ts --env production",
     "dev": "webpack -w -c ./webpack.config.ts --env development",
     "test:watch": "jest --watch --onlyChanged",
     "test": "jest --passWithNoTests --maxWorkers 4",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
-    "lint:fix": "yarn run lint --fix && prettier --write --list-different .",
+    "check-types": "tsc --noEmit",
+    "lint": "oxlint --config ../../oxlintrc.json src",
+    "lint:fix": "oxlint --config ../../oxlintrc.json --fix src && oxfmt --write src",
+    "format": "oxfmt --write src",
     "e2e": "playwright test",
     "sign": "npx --yes @grafana/sign-plugin@latest",
     "clean": "rm -rf dist"
   },
-  "author": "Percona LLC",
-  "license": "AGPL-3.0-only",
+  "dependencies": {
+    "@emotion/css": "11.10.6",
+    "@grafana/data": "12.4.2",
+    "@grafana/runtime": "12.4.2",
+    "@grafana/schema": "12.4.2",
+    "@grafana/ui": "12.4.2",
+    "@pmm/shared": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.2",
+    "rxjs": "7.8.1"
+  },
   "devDependencies": {
-    "@grafana/eslint-config": "^8.0.0",
     "@grafana/plugin-e2e": "^1.17.1",
     "@grafana/tsconfig": "^2.0.0",
-    "@stylistic/eslint-plugin-ts": "^2.9.0",
+    "@jest/globals": "^29.5.0",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@types/jest": "^29.5.0",
     "@types/node": "^20.8.7",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/testing-library__jest-dom": "5.14.8",
-    "@typescript-eslint/eslint-plugin": "^6.18.0",
-    "@typescript-eslint/parser": "^6.18.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
-    "eslint": "^8.0.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-plugin-jsdoc": "^46.8.0",
-    "eslint-plugin-react": "^7.33.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-webpack-plugin": "^4.0.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "glob": "^10.5.0",
     "identity-obj-proxy": "3.0.0",
     "imports-loader": "^5.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "prettier": "^2.8.7",
     "replace-in-file-webpack-plugin": "^1.0.6",
     "sass": "1.63.2",
     "sass-loader": "13.3.1",
@@ -64,17 +69,5 @@
   },
   "engines": {
     "node": ">=18"
-  },
-  "dependencies": {
-    "@emotion/css": "11.10.6",
-    "@grafana/data": "12.4.2",
-    "@grafana/runtime": "12.4.2",
-    "@grafana/schema": "12.4.2",
-    "@grafana/ui": "12.4.2",
-    "@pmm/shared": "*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.30.2",
-    "rxjs": "7.8.1"
   }
 }

ui/apps/pmm-compat/src/compat.test.ts

@@ -21,7 +21,10 @@ describe('compat', () => {
   const replaceMock = jest.fn();
   const originalLocation = window.location;
 
-  const setLocation = (search: string, pathname = '/graph/d/some-dashboard') => {
+  const setLocation = (
+    search: string,
+    pathname = '/graph/d/some-dashboard'
+  ) => {
     Object.defineProperty(window, 'location', {
       value: {
         ...originalLocation,