PMM-15180 Replace local custom SVG icons with peak-ui and MUI components (2nd try) - #5742
Merged
Conversation
Replace PMM's bundled SVG icons with design-system and Material components and adopt the @percona/percona-ui -> @percona/peak-ui rename (@percona/peak-ui@1.0.25). - 7 brand icons + 14 custom glyphs -> @percona/peak-ui components - 24 standard glyphs -> @mui/icons-material - RTA empty state -> RealTimeDatabaseOffIllustration - remove 3 unreferenced icons + the dead `node` map alias - src/icons/ trimmed to the status icons and PMM logos, kept by design Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GvaaWAnYeGgjBFDcrFv9Jx
Signed-off-by: Claude <noreply@anthropic.com>
Signed-off-by: Claude <noreply@anthropic.com>
pmcf-percona
requested review from
fabio-silva and
mattiasimonato
and removed request for
a team
August 7, 2026 10:23
pmcf-percona
changed the title
pmcf-percona
changed the title
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
🚧 Files skipped from review as they are similar to previous changes (3)
WalkthroughPMM updates its UI dependency from ChangesPeak UI migration
Possibly related PRs
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Comment |
fabio-silva
approved these changes
Aug 7, 2026
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
ui/apps/pmm/package.json (1)
29-29: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMake it so: update the stale PMM UI guidance.
@percona/peak-ui@1.0.25is declared, locked, and used by the application. Replace obsolete@percona/percona-uireferences inAGENTS.md,ui/AGENTS.md,ui/apps/pmm/README.md, andui/apps/pmm/vite.config.ts. Before merge, runcd ui && make lintand complete live PMM verification for the theme, snackbar, and icon changes.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@ui/apps/pmm/package.json` at line 29, Update the stale PMM UI guidance by replacing all `@percona/percona-ui` references with `@percona/peak-ui` in AGENTS.md, ui/AGENTS.md, ui/apps/pmm/README.md, and ui/apps/pmm/vite.config.ts, keeping the declared 1.0.25 dependency consistent. Before merging, run cd ui && make lint and complete live PMM verification for the theme, snackbar, and icon changes.Source: Coding guidelines
ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx (1)
8-18: 🎯 Functional Correctness | 🔵 TrivialComplete the required UI validation before release.
Run
cd ui && make lint. Then run PMM on a live server with real RTA data. Verify pause, resume, refresh, export, and all-sessions controls in light and dark themes. Verify keyboard focus and accessible labels.As per coding guidelines:
**/*.{go,ts,tsx,json}changes require the matching linter, and user-visible changes require PMM on a live server with real data.Also applies to: 152-152, 170-170, 183-183, 210-210
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx` around lines 8 - 18, Validate the RealtimeOverview controls before release: run the matching UI lint, then test pause, resume, refresh, export, and all-sessions behavior on a live PMM server with real RTA data in both light and dark themes. Verify keyboard focus and accessible labels for the controls associated with DynamicFeed, FileDownloadOutlined, Pause, PlayArrow, and Refresh.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@ui/apps/pmm/src/pages/rta/overview/auto-refresh-select/AutoRefreshSelect.tsx`:
- Around line 42-47: Add fontSize="inherit" to the ElectricBoltIcon rendered in
AutoRefreshSelect, matching ElectricBoltOffIcon so both electric-bolt states
inherit the button’s size while preserving the existing animation and color.
In
`@ui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.constants.tsx`:
- Around line 17-18: Update the release-note icon definitions for danger and
note in ReleaseNotes.constants.tsx to use theme-aware MUI color props or sx
values instead of fixed htmlColor values. Match the corresponding alert style
tokens already used in ReleaseNotes.tsx, preserving the existing icon mappings.
---
Nitpick comments:
In `@ui/apps/pmm/package.json`:
- Line 29: Update the stale PMM UI guidance by replacing all `@percona/percona-ui`
references with `@percona/peak-ui` in AGENTS.md, ui/AGENTS.md,
ui/apps/pmm/README.md, and ui/apps/pmm/vite.config.ts, keeping the declared
1.0.25 dependency consistent. Before merging, run cd ui && make lint and
complete live PMM verification for the theme, snackbar, and icon changes.
In `@ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx`:
- Around line 8-18: Validate the RealtimeOverview controls before release: run
the matching UI lint, then test pause, resume, refresh, export, and all-sessions
behavior on a live PMM server with real RTA data in both light and dark themes.
Verify keyboard focus and accessible labels for the controls associated with
DynamicFeed, FileDownloadOutlined, Pause, PlayArrow, and Refresh.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 5b4c62a3-da71-4c8b-8667-a66e87a21a6d
⛔ Files ignored due to path filters (50)
ui/apps/pmm/src/icons/account.svgis excluded by!**/*.svgui/apps/pmm/src/icons/alerts.svgis excluded by!**/*.svgui/apps/pmm/src/icons/arrow-link.svgis excluded by!**/*.svgui/apps/pmm/src/icons/backups.svgis excluded by!**/*.svgui/apps/pmm/src/icons/bottom-panel-close.svgis excluded by!**/*.svgui/apps/pmm/src/icons/bottom-panel-open.svgis excluded by!**/*.svgui/apps/pmm/src/icons/browse-dashboards.svgis excluded by!**/*.svgui/apps/pmm/src/icons/check.svgis excluded by!**/*.svgui/apps/pmm/src/icons/cluster.svgis excluded by!**/*.svgui/apps/pmm/src/icons/collapse-content.svgis excluded by!**/*.svgui/apps/pmm/src/icons/configuration.svgis excluded by!**/*.svgui/apps/pmm/src/icons/dashboards.svgis excluded by!**/*.svgui/apps/pmm/src/icons/dynamic-feed.svgis excluded by!**/*.svgui/apps/pmm/src/icons/electric-bolt-off.svgis excluded by!**/*.svgui/apps/pmm/src/icons/electric-bolt.svgis excluded by!**/*.svgui/apps/pmm/src/icons/expand-content.svgis excluded by!**/*.svgui/apps/pmm/src/icons/explore.svgis excluded by!**/*.svgui/apps/pmm/src/icons/file-download.svgis excluded by!**/*.svgui/apps/pmm/src/icons/graph-6.svgis excluded by!**/*.svgui/apps/pmm/src/icons/haproxy.svgis excluded by!**/*.svgui/apps/pmm/src/icons/help-fill.svgis excluded by!**/*.svgui/apps/pmm/src/icons/help.svgis excluded by!**/*.svgui/apps/pmm/src/icons/high-availability.svgis excluded by!**/*.svgui/apps/pmm/src/icons/home.svgis excluded by!**/*.svgui/apps/pmm/src/icons/inventory.svgis excluded by!**/*.svgui/apps/pmm/src/icons/knowledge-base.svgis excluded by!**/*.svgui/apps/pmm/src/icons/memory.svgis excluded by!**/*.svgui/apps/pmm/src/icons/my-organization.svgis excluded by!**/*.svgui/apps/pmm/src/icons/network.svgis excluded by!**/*.svgui/apps/pmm/src/icons/operating-system.svgis excluded by!**/*.svgui/apps/pmm/src/icons/overview.svgis excluded by!**/*.svgui/apps/pmm/src/icons/pause.svgis excluded by!**/*.svgui/apps/pmm/src/icons/percona-intelligence.svgis excluded by!**/*.svgui/apps/pmm/src/icons/percona-mo.svgis excluded by!**/*.svgui/apps/pmm/src/icons/percona-my.svgis excluded by!**/*.svgui/apps/pmm/src/icons/percona-po.svgis excluded by!**/*.svgui/apps/pmm/src/icons/percona-va.svgis excluded by!**/*.svgui/apps/pmm/src/icons/percona.svgis excluded by!**/*.svgui/apps/pmm/src/icons/play-arrow.svgis excluded by!**/*.svgui/apps/pmm/src/icons/proxysql.svgis excluded by!**/*.svgui/apps/pmm/src/icons/qan.svgis excluded by!**/*.svgui/apps/pmm/src/icons/real-time-database-off.svgis excluded by!**/*.svgui/apps/pmm/src/icons/refresh.svgis excluded by!**/*.svgui/apps/pmm/src/icons/search.svgis excluded by!**/*.svgui/apps/pmm/src/icons/sign-out.svgis excluded by!**/*.svgui/apps/pmm/src/icons/summary.svgis excluded by!**/*.svgui/apps/pmm/src/icons/theme-dark.svgis excluded by!**/*.svgui/apps/pmm/src/icons/theme-light.svgis excluded by!**/*.svgui/apps/pmm/src/icons/users-and-access.svgis excluded by!**/*.svgui/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (40)
ui/apps/pmm/package.jsonui/apps/pmm/src/App.tsxui/apps/pmm/src/components/app-bar/AppBar.tsxui/apps/pmm/src/components/details-pane/DataPoint.tsxui/apps/pmm/src/components/feature-check/FeatureCheck.tsxui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsxui/apps/pmm/src/components/icon/Icon.constants.tsui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsxui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsxui/apps/pmm/src/components/sidebar/nav-item/nav-item-icon/NavItemIcon.test.tsxui/apps/pmm/src/contexts/navigation/navigation.constants.tsui/apps/pmm/src/contexts/navigation/navigation.utils.tsxui/apps/pmm/src/hooks/theme.tsui/apps/pmm/src/pages/alerting/status/AlertsPage.tsxui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsxui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsxui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsxui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsxui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsxui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsxui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.tsui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsxui/apps/pmm/src/pages/rta/overview/auto-refresh-select/AutoRefreshSelect.tsxui/apps/pmm/src/pages/rta/overview/details-pane/DetailsPane.tsxui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsxui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsxui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsxui/apps/pmm/src/pages/rta/selection/empty-state/RealtimeSelectionViewerEmptyState.tsxui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsxui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-new-session/NewSessionModal.tsxui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-multiple-sessions/StopMultipleSessionsModal.tsxui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-session/StopSessionModal.tsxui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsxui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsxui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsxui/apps/pmm/src/pages/update-clients/UpdateClients.tsxui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsxui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.constants.tsxui/apps/pmm/src/utils/testWrapper.tsxui/apps/pmm/vitest.config.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
percona/pmm-qa(manual)percona/pmm(manual)
mattiasimonato
approved these changes
Aug 7, 2026
Resolve conflict in OverviewTable.tsx: keep main's reworked import block and useTableUrlState wiring, applying only this branch's package rename (@percona/percona-ui -> @percona/peak-ui). Also repoint references that main introduced or that the original rename missed, since @percona/percona-ui is no longer a dependency: - useTableUrlState.ts / .test.ts (added by main on the useTableUrlState PR) imported the old package, which would break the build and tests. - vite.config.ts dev-server watch path and the yarn-link comment. - ui/AGENTS.md and ui/apps/pmm/README.md package references. Repository and Storybook URLs keep the percona-ui name, which did not change. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PcYkaNipfTzkHvcGrrWbfs Signed-off-by: Claude <noreply@anthropic.com>
The tracked Cursor rule still told agents to import from @percona/percona-ui, which is no longer a dependency. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PcYkaNipfTzkHvcGrrWbfs Signed-off-by: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
ui/apps/pmm/src/hooks/utils/useTableUrlState.test.ts (1)
3-3: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winReplace the default React Router import.
react-router-dom@6.30.2exposes named exports only. Use a namespace import forvi.spyOn:-import reactRouter from 'react-router-dom'; +import * as reactRouter from 'react-router-dom';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@ui/apps/pmm/src/hooks/utils/useTableUrlState.test.ts` at line 3, Update the reactRouter import in the useTableUrlState test to use a namespace import from react-router-dom, so vi.spyOn can target the module’s named exports while preserving the existing test behavior.Source: MCP tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@ui/AGENTS.md`:
- Line 107: Update all canonical Peak UI references: in ui/AGENTS.md lines 96–97
and 107, replace the outdated Storybook and repository links; in
ui/apps/pmm/README.md lines 20, 44, and 49, update the checkout URL and
percona-ui paths to the current peak-ui locations.
---
Outside diff comments:
In `@ui/apps/pmm/src/hooks/utils/useTableUrlState.test.ts`:
- Line 3: Update the reactRouter import in the useTableUrlState test to use a
namespace import from react-router-dom, so vi.spyOn can target the module’s
named exports while preserving the existing test behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 318a47b7-2f53-44bb-b79f-b145a041751f
⛔ Files ignored due to path filters (1)
ui/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (9)
ui/.cursor/rules/percona_ui-styling.mdcui/AGENTS.mdui/apps/pmm/README.mdui/apps/pmm/src/hooks/utils/useTableUrlState.test.tsui/apps/pmm/src/hooks/utils/useTableUrlState.tsui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsxui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsxui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsxui/apps/pmm/vite.config.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
percona/pmm-qa(manual)percona/pmm(manual)
🚧 Files skipped from review as they are similar to previous changes (3)
- ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx
- ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx
- ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx
ElectricBoltOffIcon passed fontSize="inherit" but ElectricBoltIcon did not, so it fell back to MUI's medium (24px) and the bolt could change size when auto-refresh toggled. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PcYkaNipfTzkHvcGrrWbfs Signed-off-by: Claude <noreply@anthropic.com>
The percona/percona-ui repository was renamed to percona/peak-ui, so the repository links only resolved via GitHub's redirect and the GitHub Pages Storybook URL no longer resolves at all. Update the repository and Storybook links, the yarn-link checkout paths in the PMM UI README, and the matching commented bind mount in docker-compose.dev.yml that the README's devcontainer flow tells you to uncomment. Also repoint the last @percona/percona-ui package reference in the root AGENTS.md. The percona-ui#37 TODO comments are left alone: they cite a pull request number that survived the rename, and they predate this branch. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PcYkaNipfTzkHvcGrrWbfs Signed-off-by: Claude <noreply@anthropic.com>
pmcf-percona
requested review from
ademidoff and
maxkondr
and removed request for
a team
August 11, 2026 10:20
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5742 +/- ##
==========================================
+ Coverage 43.59% 46.50% +2.91%
==========================================
Files 415 200 -215
Lines 43134 15559 -27575
==========================================
- Hits 18804 7236 -11568
+ Misses 22454 7718 -14736
+ Partials 1876 605 -1271
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:
|
Revert the docker-compose.dev.yml bind-mount path and the root AGENTS.md package reference to match main. Both are unrelated to the icon migration, and touching files outside ui/ pulls the Go unit tests and the whole database integration matrix into this PR's CI for no benefit. The remaining peak-ui link updates in ui/AGENTS.md and the PMM UI README stay, since those URLs were genuinely broken. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PcYkaNipfTzkHvcGrrWbfs Signed-off-by: Claude <noreply@anthropic.com>
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.
Note: accidentally merged, then reverted, and now formed as a new PR here.
Ticket number: PMM-15180
Feature build: Percona-Lab/pmm-submodules#4509
Summary
PMM kept its own copies of ~50 brand and UI icons as local SVGs in
src/icons/, wired through a localIconcomponent andDYNAMIC_ICON_IMPORT_MAP. Most duplicated icons the design system or Material already provide. This PR sources them properly instead.The design system was renamed from
@percona/percona-uito@percona/peak-ui, so this also adopts@percona/peak-ui@1.0.25(the first release carrying the custom Peak Design icon suite) and repoints every existing import.Also in this PR:
@percona/peak-uicomponents (PerconaIcon,HaproxyIcon,ProxyIcon,PerconaMyIcon/MoIcon/PoIcon/VaIcon), and the RTA empty state usesRealTimeDatabaseOffIllustrationfrom the design system in place of a local 192px SVG.@mui/icons-materialacross the sidebar, theme toggle, app bar, release notes and RTA controls.collapse-content,expand-content,bottom-panel-open) and the deadnodemap alias.perconamarker is now a theme-aware monochrome icon instead of a fixed orange–gold gradient, matching the other markers.How to test
In both light and dark themes, scan the left sidebar (MySQL/MongoDB/PostgreSQL/Valkey, OS, HAProxy/ProxySQL, Dashboards, Explore, Alerts, Advisors, Inventory, Backups, Configuration, Users and access, Account, Help, theme toggle) plus the app-bar logo and support icon. Then check the Help Center "PMM docs" card, the Updates → release-notes icons, and Real-Time Analysis (overview play/pause/refresh/export, the auto-refresh bolt, the details-pane collapse button, and the empty-state illustration).
No API changes.
Related work:
@percona/peak-ui@1.0.25.Testing screenshots: