Fix Devportal button text casing inconsistency#1360
Conversation
Perera1325
requested review from
HeshanSudarshana,
Krishanx92,
PasanT9,
RakhithaRR,
ashera96,
hisanhunais,
lasanthaS,
piyumaldk and
tharikaGitHub
as code owners
📝 WalkthroughWalkthroughThe PR adds a Material UI theme override in the default theme configuration that disables text transformation on buttons. This allows button text to render in Title Case (as authored) instead of being automatically converted to ALL UPPERCASE by Material UI's default styling. ChangesButton Text Transform Override
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
portals/devportal/src/main/webapp/source/src/app/data/defaultTheme.js (2)
410-419: ⚡ Quick winConsider consolidating overrides at the root level for consistency.
The new
overridesconfiguration (lines 43-49) is correctly placed at the root level of the theme object, as expected by Material-UI. However, theseMuiOutlinedInputoverrides are nested inside thecustomproperty, which may not be processed by Material-UI's theme system.For consistency and to ensure these overrides are applied, consider moving them to the root-level
overridesobject:♻️ Suggested refactor to consolidate overrides
overrides: { MuiButton: { root: { textTransform: 'none', }, }, + MuiOutlinedInput: { + root: { + borderColor: '`#444`', + }, + notchedOutline: { + borderColor: '`#444`', + }, + }, }, custom: { // ... rest of custom config showSwaggerDescriptionOnOverview: false, - overrides: { - MuiOutlinedInput: { - root: { - borderColor: '`#444`', - }, - notchedOutline: { - borderColor: '`#444`', - }, - }, - }, },🤖 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 `@portals/devportal/src/main/webapp/source/src/app/data/defaultTheme.js` around lines 410 - 419, The MuiOutlinedInput overrides currently live inside the theme's custom property and therefore may not be applied; move the entire MuiOutlinedInput block (the entries for root and notchedOutline with borderColor '`#444`') from the custom object into the theme's top-level overrides object so Material-UI can pick them up, ensuring you update any references to overrides and keep the same property names (overrides, MuiOutlinedInput, root, notchedOutline) when relocating.
43-49: ⚡ Quick winApprove:
MuiButtontextTransform: 'none'is correctly applied app-wide
DefaultConfigurations.overrides.MuiButton.root.textTransform: 'none'(lines 43-49) is the correct root-leveloverridesshape, andDevPortal.jsxwraps the app withcreateTheme(adaptV4Theme(theme))after merging inDefaultConfigurations, so this will apply across DevPortal@mui/material/Buttoninstances.- The earlier mixed MUI versions concern isn’t applicable here: the portal uses
@mui/material/@mui/icons-materialv5, withadaptV4Themeto support the v4-styleoverridesconfig.- Optional: the nested
custom.overrides.MuiOutlinedInput(lines ~410-419) is unlikely to be picked up by MUI since it lives undertheme.custom(not roottheme.overrides); move it to rootoverridesif you want it to take effect.🤖 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 `@portals/devportal/src/main/webapp/source/src/app/data/defaultTheme.js` around lines 43 - 49, The MuiButton textTransform override is correct but the nested custom.overrides.MuiOutlinedInput will not be applied because it lives under theme.custom; move the custom.overrides.MuiOutlinedInput block up into the root DefaultConfigurations.overrides as overrides.MuiOutlinedInput so MUI picks it up, keeping the existing keys/styles intact; verify DevPortal.jsx still calls createTheme(adaptV4Theme(theme)) after merging DefaultConfigurations so the moved overrides are applied app-wide.
🤖 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 `@portals/devportal/src/main/webapp/source/src/app/data/defaultTheme.js`:
- Around line 410-419: The MuiOutlinedInput overrides currently live inside the
theme's custom property and therefore may not be applied; move the entire
MuiOutlinedInput block (the entries for root and notchedOutline with borderColor
'`#444`') from the custom object into the theme's top-level overrides object so
Material-UI can pick them up, ensuring you update any references to overrides
and keep the same property names (overrides, MuiOutlinedInput, root,
notchedOutline) when relocating.
- Around line 43-49: The MuiButton textTransform override is correct but the
nested custom.overrides.MuiOutlinedInput will not be applied because it lives
under theme.custom; move the custom.overrides.MuiOutlinedInput block up into the
root DefaultConfigurations.overrides as overrides.MuiOutlinedInput so MUI picks
it up, keeping the existing keys/styles intact; verify DevPortal.jsx still calls
createTheme(adaptV4Theme(theme)) after merging DefaultConfigurations so the
moved overrides are applied app-wide.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: ec4bb5f3-4c93-4256-a9a1-23b4838b7d46
📒 Files selected for processing (1)
portals/devportal/src/main/webapp/source/src/app/data/defaultTheme.js
Fixes wso2/api-manager#3858. This PR updates the Devportal's defaultTheme.js to disable the default uppercase textTransform on MuiButton, bringing it into consistency with Publisher's title casing.