Skip to content

Revert "PMM-15180 Replace local custom SVG icons with peak-ui and MUI… - #5741

Merged
fabio-silva merged 2 commits into
mainfrom
revert-PMM-15180
Aug 7, 2026
Merged

Revert "PMM-15180 Replace local custom SVG icons with peak-ui and MUI…#5741
fabio-silva merged 2 commits into
mainfrom
revert-PMM-15180

Conversation

@fabio-silva

Copy link
Copy Markdown
Contributor

This reverts commit 3e6737f.

@fabio-silva
fabio-silva marked this pull request as ready for review August 7, 2026 09:38
@fabio-silva
fabio-silva requested a review from a team as a code owner August 7, 2026 09:38
@fabio-silva
fabio-silva requested review from matejkubinec and mattiasimonato and removed request for a team, matejkubinec and mattiasimonato August 7, 2026 09:38
@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

The PMM UI replaces @percona/peak-ui with @percona/percona-ui, expands the shared icon registry, converts navigation icons to string identifiers, and updates component icon rendering.

Changes

Percona UI migration

Layer / File(s) Summary
UI package imports
ui/apps/pmm/package.json, ui/apps/pmm/src/App.tsx, ui/apps/pmm/src/hooks/*, ui/apps/pmm/src/pages/alerting/..., ui/apps/pmm/src/pages/rta/..., ui/apps/pmm/src/pages/settings/..., ui/apps/pmm/src/utils/testWrapper.tsx, ui/apps/pmm/vitest.config.ts
The application dependency and UI imports now use @percona/percona-ui.
Icon and navigation contracts
ui/apps/pmm/src/components/icon/Icon.constants.ts, ui/apps/pmm/src/contexts/navigation/*, ui/apps/pmm/src/components/sidebar/...
The icon registry supports additional icons. Navigation definitions and test fixtures use string icon identifiers.
Shared icon component usage
ui/apps/pmm/src/components/app-bar/*, ui/apps/pmm/src/components/ha-icon/*, ui/apps/pmm/src/pages/alerting/..., ui/apps/pmm/src/pages/help-center/..., ui/apps/pmm/src/pages/rta/..., ui/apps/pmm/src/pages/updates/...
MUI and legacy UI icon components are replaced with the shared Icon component while existing visual properties and behavior remain in place.

Possibly related PRs

  • percona/pmm#5731: Modifies the same UI imports, icon mappings, navigation constants, and icon usages.
  • percona/pmm#5732: Modifies the same package configuration and UI imports in the opposite migration direction.
🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description states the revert intent but omits the required ticket number, feature build, API documentation status, and related-work sections. Add the template sections with the ticket number, feature build, API documentation checkbox, and related-work links or an explicit statement that none apply.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the pull request as a revert of the icon replacement change.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx (1)

5-5: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Keep MRT types on the same Percona UI table boundary.

Both files now use Table from @percona/percona-ui, but their MRT types are split between the shared package and direct material-react-table imports. Percona UI 1.0.23 re-exports the relevant types from its table entry point. Move each type import to the shared package to prevent dependency-version drift. (github.com)

  • ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx#L5-L5: Move MRT_Row and MaterialReactTableProps from Lines 1-4 into the @percona/percona-ui import.
  • ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx#L1-L2: Move MRT_Row from Line 2 into the @percona/percona-ui import.

As per coding guidelines: “Prefer existing dependencies; justify new dependencies and ensure AGPL-3-compatible licensing.”

🤖 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/table/OverviewTable.tsx` at line 5, Keep
MRT types on the shared Percona UI boundary: in
ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx lines 1-5, move
MRT_Row and MaterialReactTableProps into the `@percona/percona-ui` import and
remove their direct material-react-table imports; in
ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx lines 1-2, move
MRT_Row into the `@percona/percona-ui` import and remove its direct import.
Preserve the existing Table and useNavigableRows usage.

Source: Coding guidelines

ui/apps/pmm/src/contexts/navigation/navigation.constants.ts (1)

22-22: 🎯 Functional Correctness | 🔵 Trivial

Complete the required UI validation before merge.

These edits change user-visible navigation and account flows. Run cd ui && make lint. Then verify the changed navigation entries on a live PMM server with real data in light and dark modes. Capture evidence for the migrated icons and navigation behavior.

As per coding guidelines, unit tests are insufficient for user-visible changes; run PMM on a live server and verify behavior against real data with evidence.

Also applies to: 37-54, 123-141, 191-209, 237-249, 296-296, 306-306, 317-377, 388-399, 409-416, 466-466, 535-542, 558-558, 588-588, 621-621, 681-681, 717-717, 747-755, 782-782, 791-791, 804-804

🤖 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/contexts/navigation/navigation.constants.ts` at line 22, Run
the required UI validation with cd ui && make lint, then start PMM against a
live server with real data and verify every changed navigation and account-flow
entry in both light and dark modes. Capture evidence showing the migrated icons
and resulting navigation behavior before merge.

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.

Nitpick comments:
In `@ui/apps/pmm/src/contexts/navigation/navigation.constants.ts`:
- Line 22: Run the required UI validation with cd ui && make lint, then start
PMM against a live server with real data and verify every changed navigation and
account-flow entry in both light and dark modes. Capture evidence showing the
migrated icons and resulting navigation behavior before merge.

In `@ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx`:
- Line 5: Keep MRT types on the shared Percona UI boundary: in
ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx lines 1-5, move
MRT_Row and MaterialReactTableProps into the `@percona/percona-ui` import and
remove their direct material-react-table imports; in
ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx lines 1-2, move
MRT_Row into the `@percona/percona-ui` import and remove its direct import.
Preserve the existing Table and useNavigableRows usage.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a3dcd36b-7e46-4640-b72f-985a0ef54e00

📥 Commits

Reviewing files that changed from the base of the PR and between 3e6737f and e45a655.

⛔ Files ignored due to path filters (50)
  • ui/apps/pmm/src/icons/account.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/alerts.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/arrow-link.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/backups.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/bottom-panel-close.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/bottom-panel-open.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/browse-dashboards.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/check.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/cluster.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/collapse-content.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/configuration.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/dashboards.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/dynamic-feed.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/electric-bolt-off.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/electric-bolt.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/expand-content.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/explore.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/file-download.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/graph-6.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/haproxy.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/help-fill.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/help.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/high-availability.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/home.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/inventory.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/knowledge-base.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/memory.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/my-organization.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/network.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/operating-system.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/overview.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/pause.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/percona-intelligence.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/percona-mo.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/percona-my.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/percona-po.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/percona-va.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/percona.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/play-arrow.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/proxysql.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/qan.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/real-time-database-off.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/refresh.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/search.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/sign-out.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/summary.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/theme-dark.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/theme-light.svg is excluded by !**/*.svg
  • ui/apps/pmm/src/icons/users-and-access.svg is excluded by !**/*.svg
  • ui/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (40)
  • ui/apps/pmm/package.json
  • ui/apps/pmm/src/App.tsx
  • ui/apps/pmm/src/components/app-bar/AppBar.tsx
  • ui/apps/pmm/src/components/details-pane/DataPoint.tsx
  • ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx
  • ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx
  • ui/apps/pmm/src/components/icon/Icon.constants.ts
  • ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx
  • ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx
  • ui/apps/pmm/src/components/sidebar/nav-item/nav-item-icon/NavItemIcon.test.tsx
  • ui/apps/pmm/src/contexts/navigation/navigation.constants.ts
  • ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx
  • ui/apps/pmm/src/hooks/theme.ts
  • ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx
  • ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx
  • ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx
  • ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx
  • ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx
  • ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx
  • ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx
  • ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts
  • ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx
  • ui/apps/pmm/src/pages/rta/overview/auto-refresh-select/AutoRefreshSelect.tsx
  • ui/apps/pmm/src/pages/rta/overview/details-pane/DetailsPane.tsx
  • ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx
  • ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx
  • ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx
  • ui/apps/pmm/src/pages/rta/selection/empty-state/RealtimeSelectionViewerEmptyState.tsx
  • ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx
  • ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-new-session/NewSessionModal.tsx
  • ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-multiple-sessions/StopMultipleSessionsModal.tsx
  • ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-session/StopSessionModal.tsx
  • ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsx
  • ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsx
  • ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsx
  • ui/apps/pmm/src/pages/update-clients/UpdateClients.tsx
  • ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx
  • ui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.constants.tsx
  • ui/apps/pmm/src/utils/testWrapper.tsx
  • ui/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)

@fabio-silva
fabio-silva merged commit 0415b33 into main Aug 7, 2026
8 checks passed
@fabio-silva
fabio-silva deleted the revert-PMM-15180 branch August 7, 2026 10:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants