PMM-15216 fix ui build: bootstrap pnpm via corepack, drop yarn leftover#5653
Open
fabio-silva wants to merge 20 commits into
Open
PMM-15216 fix ui build: bootstrap pnpm via corepack, drop yarn leftover#5653fabio-silva wants to merge 20 commits into
fabio-silva wants to merge 20 commits into
Conversation
added 11 commits
July 13, 2026 20:53
…ase 0) Phase 0 of the SEP→PMM frontend migration (MERGE-PLAN-V2). React stays 18; no app behavior change. Verified: pnpm install, turbo build/test/lint/ format:check/check-types all green (tests 44 files / 267 = pre-migration baseline). Package manager: yarn 1 → pnpm 11 (corepack) - pnpm-workspace.yaml (apps/*, packages/*, packages/plugins/*); resolutions → overrides; internal deps "*" → workspace:*. - blockExoticSubdeps:false (@grafana/ui pulls react-data-grid via git); allowBuilds for @swc/core, esbuild, protobufjs. - Pin @mui/* core to 7.3.7 (float to 7.3.11 breaks @mui/x-date-pickers deep-import of @mui/utils/generateUtilityClass). - Declare previously-phantom deps in apps/pmm: material-react-table, react-router. - Update Makefile, Makefile.devcontainer, .devcontainer/setup.py, ui.yml CI to pnpm. Lint/format: eslint 8 + prettier → oxlint / oxfmt - oxfmt config mirrors @percona/prettier-config (es5 / width 80); oxlintrc rules kept lenient (no-console/no-duplicate-imports/curly/eqeqeq → warn) so existing PMM code lints with 0 errors and minimal source churn. - Remove eslint/prettier deps + configs; drop eslint-webpack-plugin from pmm-compat webpack config. Exclude grafana-scaffolded **/.config/** from oxfmt. Fixes for pnpm's stricter resolution: - vitest.config.ts: drop hardcoded react node_modules path aliases (yarn-link hack that split React from react-dom under pnpm); rely on resolve.dedupe + inline react-dom/@testing-library/react/@percona/percona-ui. - SyntaxHighlighter.tsx: @ts-expect-error → @ts-ignore (TS2578 under pnpm). - pmm-compat tsconfig ts-node moduleResolution fix for webpack config load. pmm-compat stays React 18 / webpack / grafana tooling (isolated).
…ase 1) Version alignment (MERGE-PLAN-V2 Phase 1). apps/pmm + packages/shared move to the SEP-target stack; pmm-compat stays React 18 (Grafana plugin, isolated). All gates green: build, unit tests (44 files / 267 = pre-migration baseline), lint, format, check-types. apps/pmm: react/react-dom 18→19.1, react-is 19, @types/react* 19, @testing-library/react 15→16, react-router(-dom) 6.30→7.14, vite 5→8, vitest 2→4, typescript 5.8→6, jsdom 24→29, and Vite-8-compatible plugin bumps (plugin-react-swc 4, plugin-basic-ssl 2, vite-tsconfig-paths 6, vite-plugin-svgr 5). Root typescript → 6. Two-React-versions handling: - packages/shared imports no React; peer widened to ^18 || ^19. - pmm-compat pins its own react + @types/react 18. @grafana/* declare no @types/react peer, so pnpm packageExtensions add it, tying it to pmm-compat's 18 (else their .d.ts resolve apps/pmm's hoisted @types/react 19 → TS2786). - Dropped the react-router / @remix-run/router override pins. Source fixes for the new stack: - React 19 types: useRef<T>() needs an initial arg; RefObject<T> → RefObject<T|null>. - RR7 is ESM-only: useKioskMode.test uses vi.mock instead of default-import + spyOn. - TS6: keep baseUrl via ignoreDeprecations "6.0"; global → globalThis; declare module '@fontsource/*' for the untyped side-effect font import. - Vitest 4: give the real-time default-timeout test explicit headroom (it(..., 7000)).
…ion Phase 2) Migrate SEP's shared packages into pmm/ui/packages/sep/ (names unchanged), on the Phase 1 stack (React 19 / Vitest 4 / TS 6 / msw 2). All gates green: check-types, build, lint, format, and unit tests — @sep/api 6 files/69, @sep/framework 46 files/550 (the material-react-table 1.15.1 + MUI 7 + React 19 smoke test), apps/pmm 44/267 = baseline. Packages: under packages/sep/ (grouped subdir; packages/shared is already @pmm/shared). Workspace glob packages/sep/* added. New ui/tsconfig.base.json (target ES2022 + lib ES2023 — SEP uses Array.at()). @sep/framework: - Storybook stripped (deferred to Phase 4): .storybook/, *.stories.tsx, storybook deps/scripts, tsconfig include. - material-react-table pinned as a direct dep ^1.15.1 (framework's own copy; apps/pmm keeps 3.x). Peers needed at test time added as devDeps. - vitest.config: @vitejs/plugin-react → -swc; dropped hard react path aliases for resolve.dedupe + server.deps.inline (pnpm React-dup fix). - percona-ui 1.0.22 API drift (SEP built against 1.0.16): AutoCompleteInput controllerProps now omits `name` — removed the redundant `name` in Host/Schema/Service/Table selectors (still passed as a direct prop). apps/pmm: - @tanstack/react-query → ^5.100.7 (shared query context with the framework). - Dev proxy: SEP paths (/api, /sep_app, /stream-logs, /execution-events, /files) → SEP_BACKEND_URL (default http://localhost:8000). Interim auth (Option D): inject SEP_INTERNAL_TOKEN server-side as a Bearer header when set.
…ion Phase 3)
Mount the first two SEP apps as native PMM routes. Gates green: build,
check-types (6/6), lint, format, unit tests (snippets 3 files/31, framework
46/550, api 6/69, apps/pmm 44/267), and a Vite-8 dev-server smoke (index + full
main.tsx module graph + SnippetsPlugin transform all 200, no errors).
- @sep/plugins-snippets → packages/plugins/snippets (swc vitest, dedupe+inline,
test-time peer devDeps, oxlint/oxfmt).
- Router under MainWithNav: sep/snippets/* → <SnippetsPlugin isAdmin/>,
sep/mysql-backups/* → <SchemaDrivenPlugin pluginName="mysql_backups"/>. Splat
paths (both plugins compose their own <Routes>).
- Nav: addSepApps() builder (Snippets/CodeIcon, MySQL Backups/MySqlIcon) wired
into navTree when a session exists; rendered as client-side react-router links.
- Interim auth (Option D): src/sep/bootstrap.ts initSepAuth() stubs
setTokenProvider(()=>null) + no-op setOnUnauthorized, called from main.tsx.
- apps/pmm depends on @sep/{api,framework,plugins-snippets}; MRT 1.15.1
(framework) and 3.x (apps/pmm) coexist in the build.
Pending (need running stack / decisions): live "data loads from SEP backend"
gate (SEP_BACKEND_URL, open decision #3) and e2e specs (open decision #2 —
PMM has no in-repo Playwright).
Ports feature/bugfix changes made in SEP after the migration snapshot (base ~ SEP c65a3e26^), translated onto PMM's Plugin* naming. The SEP Plugin->App rename churn is intentionally not carried over. - SEP-1455: snippets Manager filters (search / approval / service type), service_type field on SnippetResponse, Service column, empty state, batch-select scoped to the filtered rows. - SEP-1397: "Executor Host" -> "Execution Host" default label; Logs tab relabelled "Execution History" (route /logs unchanged). - SEP-1496: expose separately-registered apps as sibling tabs via a new related_apps schema field (RelatedApp type + RelatedAppTabBar); fixes the MySQL Backups Restore section being unreachable in the migrated UI. - SEP-1398: surface post-create connectivity warnings on the task detail page with a run-script log link, threaded from the create response via navigation state. Also included: SepPage container wrapper for the mounted SEP routes (Page + Stack chrome) and the SchemaFormRenderer form maxWidth tweak (640 -> 800). Gates green: check-types, lint, format, and unit tests across snippets (40), framework (568), api (69), and apps/pmm (267).
Replace Page's inline width Stack with the shared PageContainer component.
Add a maxWidth prop (number | 'full', default 1000) to Page; keep fullWidth
as a deprecated alias mapping to maxWidth='full'. SepPage now requests full
width explicitly; Settings pins maxWidth={1000}.
SEP-1555 (SnippetExecutionAccordion): stop stripping the read-only `script_preview` field so the backend's "Script preview" collapsible renders its content instead of an empty body; add regression test. SEP-1556: drop MUI Button `color` props (warning/success/error/primary) in favor of `variant` only across the migrated snippets + schema-driven components (SnippetsListPage, ScheduledTaskRow, PluginDetailPage, DeleteConfirmDialog, SchemaFormRenderer, TaskHistoryTable). Preserves the PMM-specific SchemaFormRenderer maxWidth mod. Gates green: framework 569 tests, snippets 40, both typecheck + lint clean.
Move the addSepApps() nav push out of the early user-only block into the settings-gated user.isPMMAdmin block, alongside inventory/backups, so the SEP apps only surface for admins once settings have loaded.
SchemaDrivenPlugin navigates with an absolute routeBase (detail back/edit/ schedule links and the related-app tab bar). Without the prop it defaulted to the SEP path /apps/mysql_backups, which has no route under PMM's /pmm-ui basename — clicking the Restore tab (and detail nav) hit the catch-all NotFound. Pin routeBase to the actual mount /sep/mysql-backups.
…d minimumReleaseAgeExclude
Build image ships nodejs but not pnpm, breaking 'make release' in pmm-managed.spec %build. Enable pnpm through corepack (pins pnpm@11.1.3 from package.json) in the setup target. Also switch format-check from stale 'yarn format:check' to pnpm.
fabio-silva
requested review from
4nte,
matejkubinec,
mattiasimonato and
maxkondr
and removed request for
a team
July 16, 2026 10:14
Contributor
|
Ignacio Durand seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
Feature builds fail with `pnpm: No such file or directory` because public.ecr.aws/e7j3v3n0/rpmbuild:3 ships nodejs+yarn only. Install pnpm@11.1.3 in the rpmbuild Dockerfiles, and add an npm global fallback in ui/Makefile so FBs work before the image is republished. Co-authored-by: Fábio Silva <fabio-silva@users.noreply.github.com>
Resolve conflicts from main sync: - Keep both export-to-csv (RTA CSV export) and material-react-table - Keep InstallClientPage route plus SEP plugin routes - Drop yarn.lock (pnpm lockfile is authoritative) Co-authored-by: Fábio Silva <fabio-silva@users.noreply.github.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5653 +/- ##
==========================================
+ Coverage 43.59% 44.39% +0.80%
==========================================
Files 415 416 +1
Lines 43134 43144 +10
==========================================
+ Hits 18804 19155 +351
+ Misses 22454 22110 -344
- Partials 1876 1879 +3
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
React 19's useRef<T>() requires an argument; the install-client page brought in from main used the React 18 form and broke ui:build. Co-authored-by: Fábio Silva <fabio-silva@users.noreply.github.com>
Co-authored-by: Fábio Silva <fabio-silva@users.noreply.github.com>
Remove the migrated Snippets plugin and add the Collect Diagnostic Data (dipper) app migrated from SEP. - Delete packages/plugins/snippets and its @sep/plugins-snippets dep - Add packages/plugins/dipper (@sep/plugins-dipper) with DipperApp, hooks, types, and tests; AppSchema type -> PluginSchema for PMM's @sep/api surface - Mount /sep/dipper route (single-view, non-splat) in router - Swap sidebar nav item: Snippets -> Collect Diagnostic Data (MonitorHeart icon)
# Conflicts: # ui/apps/pmm/package.json # ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.tsx # ui/yarn.lock
Previous commit migrated the wrong SEP app. Replace the dipper plugin with ATW, the actual "Collect Diagnostic Data" app. - Remove packages/plugins/dipper and its @sep/plugins-dipper dep - Add packages/plugins/atw (@sep/plugins-atw) with AtwPage/AtwApp, useAtwCategories hook, types, and tests - Adapt SEP framework imports to PMM's names: snippetApp* -> snippetPlugin*, useSnippetApp* -> useSnippetPlugin* - Replace post-execution navigate to the removed snippets detail page with a notistack success snackbar - Mount /sep/atw route (single-view, non-splat) and point the "Collect Diagnostic Data" sidebar item at it
maxkondr
reviewed
Jul 23, 2026
| 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 |
Contributor
There was a problem hiding this comment.
Is it possible to pass ppm version during docker build (read from some file in repo)? It will simplify the maintenance in future (less files are required to be changed during version bump).
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket number: PMM-0
Feature build: SUBMODULES-0
If this PR adds, removes or alters one or more API endpoints, please review and update the relevant API documentation as well:
If this PR is related to other PRs, contributions, or ongoing work in this or other repositories, please reference them here: