PMM-15046 Move NavItem component to percona-ui and fix PMM sidebar inconsistencies#5328
Open
pmcf-percona wants to merge 81 commits into
Open
PMM-15046 Move NavItem component to percona-ui and fix PMM sidebar inconsistencies#5328pmcf-percona wants to merge 81 commits into
pmcf-percona wants to merge 81 commits into
Conversation
…tings hook with query invalidation Made-with: Cursor
… forms - Add Settings page with SSH Key, Metrics Resolution, Advanced Settings tabs - Add Settings.messages.ts with all copy from Grafana - Add placeholder form components (to be implemented in next commits) - Fix useUpdateSettings onSuccess signature for react-query v5 - Fix updateSnoozeDuration optional handling in useSnooze Made-with: Cursor
…dateSettings Made-with: Cursor
Made-with: Cursor
…M_SETTINGS_URL Made-with: Cursor
…ding test Made-with: Cursor
- Updated esbuild packages in yarn.lock from version 0.21.5 to 0.25.12. - Added scrollbar stability in GlobalStyles for improved UI experience. - Refactored Page component layout to ensure proper flex behavior and added a Divider for better separation of the footer. - Enhanced Sidebar component for better usability on narrow screens, so now it overlaps, instead of pushing, to open it in smaller screens.
- Promoted Metrics resolution as the 1st tab. - Updated text capitalization in Settings.messages. - Improved layout and styling in MetricsResolutionForm for better accessibility. - Transformed the MetricsResolutionForm into inline info, for better accessibility.
- Updated tooltip texts and labels in Settings.messages for clarity. - Refined layout and styling in AdvancedSettingsForm and SshKeyForm for better accessibility and usability. - Added a sticky footer to all tabs for improved action visibility during form submission. - Adjusted spacing and alignment in various components to enhance overall UI consistency.
- Added a new 'surface' prop to the Page component for customizable background styling. - Integrated GlobalStyles to manage background color based on the 'surface' prop. - Updated Settings page to utilize the new 'surface' prop for improved visual consistency.
Bumps [golang.org/x/sys](https://github.com/golang/sys) from 0.42.0 to 0.43.0. - [Commits](golang/sys@v0.42.0...v0.43.0) --- updated-dependencies: - dependency-name: golang.org/x/sys dependency-version: 0.43.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
pmcf-percona
requested review from
matejkubinec and
mattiasimonato
and removed request for
a team
pmcf-percona
changed the title
Contributor
Author
|
UI/CI test fails due to percona/percona-ui#16 |
matejkubinec
requested review from
4nte and
maxkondr
and removed request for
a team
maxkondr
approved these changes
May 15, 2026
- Wrap renders with ThemeContextProvider/pmmThemeOptions: the upstream
NavItem consumes the menuText typography variant from the percona-ui
theme, which the bare MemoryRouter wrap did not provide.
- Replace getByTestId('navitem-dot') with querySelector('.MuiBadge-dot'):
NavItemDot was removed in favor of MUI's Badge variant="dot".
|
|
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
7 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.
Refactors the sidebar navigation component to delegate leaf-item rendering to the upstream NavItem from @percona/percona-ui, reducing code at PMM level and making management of styling easier at a global level.
The old NavItem handled both sidebar behavior (collapse, tooltips, drawer state) and visual presentation (icon layout, text styling, dot indicators, badges). This made it fragile. Visual changes risked breaking sidebar logic and vice versa.
This refactor separates concerns:
https://perconadev.atlassian.net/browse/PMM-15046
Dependencies
Based on #5163 to avoid collisions with previous changes in navigation.
Requires percona/percona-ui#new/navitem-and-chip-reorg to be merged and released first.
Non-breaking
The rendered output is visually very close/similar, as in, not drastic. This is a structural refactor with no user-facing behavior changes.