PMM-14508: QAN light mode support #1732
Merged
Conversation
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
dmitri-saricev-3pillargloball
requested a review
from a team
as a code owner
dmitri-saricev-3pillargloball
requested review from
YashSartanpara1
and removed request for
a team
YashSartanpara1
approved these changes
Nov 20, 2025
…lace hardcoded colors
- Remove key={theme.type} from Filters and CheckboxGroup components (no longer needed for theme switching)
- Replace all 'any' types with proper TypeScript interfaces (FilterGroup, FilterItem, Filters)
- Create Filters.types.ts with type definitions
- Replace hardcoded colors with theme variables:
- #3d3d3d → theme.colors.border2 (divider)
- rgb(50, 179, 227) → theme.colors.linkExternal (counter)
- rgba(40, 40, 40) → theme.colors.border2 (border)
- #c6c6c6 → theme.colors.textWeak (icon fill)
These changes address code review feedback and improve theme reactivity without force remounting components.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
…type safety
- Remove key={grafanaTheme.type} from QueryAnalytics.tsx (theme updates work correctly without force remount)
- Update getAntdTheme parameter type to accept GrafanaTheme | undefined for better type safety
- Improve JSDoc to clarify that grafanaTheme may be undefined during initialization
These changes address additional code review feedback from matejkubinec.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
… updates
The key={grafanaTheme.type} on the main QAN component div is necessary to force
remount when theme changes. Without it, Ant Design components (Table, Select,
Checkbox) do not pick up the new theme from ConfigProvider and render with
incorrect colors until page refresh (e.g., dark mode table in light theme).
The key prop was correctly removed from child components (Filters, CheckboxGroup)
as their styles update reactively via useTheme() hook. Only the top-level component
wrapping ConfigProvider needs the key prop.
Added detailed comment explaining why force remount is required for future maintainers.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
matejkubinec
approved these changes
Nov 26, 2025
dmitri-saricev-3pillargloball
merged commit 09fe320
into
PMM-13652-native-navigation
5 checks passed
dmitri-saricev-3pillargloball
deleted the
PMM-14508-QAN-light-mode-support
branch
matejkubinec
added a commit
that referenced
this pull request
Dec 3, 2025
* PMM-13699 Removed dashboard upper side navigation (#1704) * PMM-14508: QAN light mode support (#1732) * QAN light mode support * delete commit * PMM-14508: improve areas of the user interface that may be less intuitive for users * PMM-14508: Remove unnecessary key prop, fix TypeScript types, and replace hardcoded colors - Remove key={theme.type} from Filters and CheckboxGroup components (no longer needed for theme switching) - Replace all 'any' types with proper TypeScript interfaces (FilterGroup, FilterItem, Filters) - Create Filters.types.ts with type definitions - Replace hardcoded colors with theme variables: - #3d3d3d → theme.colors.border2 (divider) - rgb(50, 179, 227) → theme.colors.linkExternal (counter) - rgba(40, 40, 40) → theme.colors.border2 (border) - #c6c6c6 → theme.colors.textWeak (icon fill) These changes address code review feedback and improve theme reactivity without force remounting components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]> * PMM-14508: Remove key prop from main QAN component and improve theme type safety - Remove key={grafanaTheme.type} from QueryAnalytics.tsx (theme updates work correctly without force remount) - Update getAntdTheme parameter type to accept GrafanaTheme | undefined for better type safety - Improve JSDoc to clarify that grafanaTheme may be undefined during initialization These changes address additional code review feedback from matejkubinec. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]> * PMM-14508: Revert removal of key prop - required for Ant Design theme updates The key={grafanaTheme.type} on the main QAN component div is necessary to force remount when theme changes. Without it, Ant Design components (Table, Select, Checkbox) do not pick up the new theme from ConfigProvider and render with incorrect colors until page refresh (e.g., dark mode table in light theme). The key prop was correctly removed from child components (Filters, CheckboxGroup) as their styles update reactively via useTheme() hook. Only the top-level component wrapping ConfigProvider needs the key prop. Added detailed comment explaining why force remount is required for future maintainers. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]> * PMM-14508: change theme * PMM-14508: resolve test failed --------- Co-authored-by: Claude <[email protected]> --------- Co-authored-by: ioana-maniga <[email protected]> Co-authored-by: dmitri-saricev-3pillargloball <[email protected]> Co-authored-by: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
https://perconadev.atlassian.net/browse/PMM-14508
Improve presentation of QAN in a light theme, use variables available through grafana theme rather than hardcoded color values, keep current (dark mode) colors the same if possible.
Screenshots (current state)
Result of work:
https://github.com/user-attachments/assets/4fa489ae-6dc8-42ce-a0ff-1fce076587f7
FB:
Percona-Lab/pmm-submodules#4115
https://pmm.cd.percona.com/blue/organizations/jenkins/pmm3-submodules/detail/pmm3-submodules/1921/pipeline/