PMM-15216 fix ui build: bootstrap pnpm via corepack, drop yarn leftover

.devcontainer/setup.py

@@ -62,14 +62,15 @@ def install_go():
 
 
 def install_node():
-    """Installs Node.js 22 and Yarn."""
+    """Installs Node.js 22 and pnpm (via corepack)."""
 
     run_commands([
         "dnf module enable -y nodejs:22",
         "dnf install -y nodejs npm",
-        "npm install -g yarn@1.22.22",
+        "corepack enable",
+        "corepack prepare pnpm@11.1.3 --activate",
         "node --version",
-        "yarn --version",
+        "pnpm --version",
     ])
 
 

.github/workflows/ui.yml

@@ -31,12 +31,15 @@ jobs:
       - name: Check out code
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
 
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup nodejs
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.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

Makefile.devcontainer

@@ -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

build/docker/rpmbuild/Dockerfile.el8

@@ -29,6 +29,9 @@ RUN dnf update -y && \
     dnf install -y --enablerepo=ol8_codeready_builder glibc-static && \
     dnf clean all && rm -rf /var/cache/dnf
 
+# UI build uses pnpm (packageManager in ui/package.json); nodesource nodejs ships npm/yarn only.
+RUN npm install -g pnpm@11.1.3
+
 # 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,9 @@ RUN dnf update -y && \
     dnf install -y --enablerepo=ol9_codeready_builder glibc-static && \
     dnf clean all && rm -rf /var/cache/dnf
 
+# UI build uses pnpm (packageManager in ui/package.json); nodesource nodejs ships npm/yarn only.
+RUN npm install -g pnpm@11.1.3
+
 # 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,9 @@ RUN dnf update -y && \
     dnf install -y --enablerepo=crb glibc-static && \
     dnf clean all && rm -rf /var/cache/dnf
 
+# UI build uses pnpm (packageManager in ui/package.json); nodesource nodejs ships npm/yarn only.
+RUN npm install -g pnpm@11.1.3
+
 # 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/Makefile

@@ -1,27 +1,32 @@
 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
+	# Prefer corepack (honors packageManager pin). Fall back to a global npm
+	# install so feature builds work against the current rpmbuild image, which
+	# ships nodejs+yarn but not pnpm until rpmbuild:3 is republished.
+	corepack enable pnpm || sudo corepack enable pnpm || true
+	command -v pnpm >/dev/null 2>&1 || sudo npm install -g pnpm@11.1.3
+	pnpm install
 
 build: setup
-	yarn build
+	pnpm build
 
 release: build
 
 clean:
-	yarn clean
+	pnpm clean

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,55 @@
 {
   "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",
     "@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 +68,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,