fix: Fix UI issues in rate limiting Resources page

[Ratheshan03]

Purpose

Fixed UI issues in the rate limiting section of the Publisher Portal Resources page where non-interactive text appeared as clickable links and a button was misaligned.

Root Cause

Issue 1: Misleading Blue Text

The "API Level" and "Operation Level" text elements had color='primary.main' prop applied, making them appear in blue color. In WSO2 APIM portals, blue colored text consistently indicates clickable/interactive elements. Additionally, "API Level" had cursor='pointer' which showed a hand cursor on hover, further reinforcing the false impression of clickability.

Issue 2: Button Misalignment

The "Change rate limiting level ↑" button lacked proper flex alignment properties, causing it to be vertically misaligned with adjacent elements in the flex container. It also lacked appropriate size and style variants.

Solution

Removed the misleading styling from non-interactive text elements and added proper Material-UI styling props to the button for correct alignment and appearance.

Changes Made

• Fixed "API Level" Text Styling

• Fixed "Operation Level" Text Styling

• Fixed Button Alignment, functionality and Styling

Code Changes

Change 1: API Level Text (Lines 161-173)

// Before (Broken):
<Box
    fontWeight='fontWeightBold'
    display='inline'
    color='primary.main'         
    cursor='pointer'               
    sx={{ marginLeft: '4px' }}
>

// After (Fixed):
<Box
    fontWeight='fontWeightBold'
    display='inline'
    sx={{ marginLeft: '4px' }}    
>

Change 2: Operation Level Text (Lines 200-206)

// Before (Broken):
<Box fontWeight='fontWeightBold' display='inline' color='primary.main'>

// After (Fixed):
<Box fontWeight='fontWeightBold' display='inline'>

Change 3: Button Alignment (Lines 244-264)

// Before (Broken):
<Button onClick={scrollToTop}>

// After (Fixed):
<Button
    onClick={scrollToTop}
    variant='text'                
    size='small'                
    sx={{
        alignSelf: 'center',      
        ml: 1,                     
        textTransform: 'none'  
    }}
>

Related Issues

Fixes UI issue when setting Rate limiting level in Resources page - wso2/api-manager#4383

Related PRs

N/A

Testing

Test Environment

• OS: Windows 11
• Browser: Google Chrome
• WSO2 API Manager: 4.5.0
• Node.js: 22.x
• npm: 10.x

Manual Test Round using Production build

✅ Test #1: API Level Text Color

• Created test API and navigated to Resources page
• Expanded operation and located "API Level" text
• Verified text appears in normal black/gray color (not blue)
• Verified no pointer cursor on hover
• Result: ✅ PASS - Users no longer confused by non-interactive text

✅ Test #2: Operation Level Text Color

• Located "Operation Level" text in helper text section
• Verified text appears in normal black/gray color (not blue)
• Verified consistent styling with surrounding text
• Result: ✅ PASS - Visual consistency maintained

✅ Test #3: Button Alignment & Functionality

• Switched to API Level rate limiting
• Verified button is vertically centered with gray info box
• Verified button styling is appropriate (text variant, small size)
• Clicked button and verified smooth scroll to Rate Limiting Level section
• Result: ✅ PASS - Button properly aligned and functional

Test Evidence

Screenshot 1: API Level Text Fix

"API Level" text now appears in normal color, not blue

Screenshot 2: Operation Level Text Fix

"Operation Level" text now appears in normal color, not blue

Screenshot 3: Button Alignment Fix

Button properly aligned with adjacent elements

Video: Button Functionality

Publisher.-.WSO2.APIM.-.Google.Chrome.mp4

Checklist

• e2e cypress tests locally verified. (for internal contributors)
• Manual test round performed and verified.
• UX/UI review done on the final implementation.
• Documentation provided. (Test results documented in branch)
• Relevant backend changes deployed and verified (N/A - Frontend only)
• Unit tests provided. (N/A - UI styling changes)
• Integration tests provided. (N/A - UI styling changes)

Note: Changes are purely CSS/styling modifications using Material-UI props. ESLint validation passed. Production build succeeded with no errors. All three fixes verified through manual testing with screenshots and video evidence.

Security Checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines
• Ran FindSecurityBugs plugin and verified report (N/A - No Java/backend changes)
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets

Developer Checklist (Mandatory)

• Complete the Developer Checklist in the related product-is issue to track any behavioral change or migration impact.

Note: No behavioral changes or migration impact. Pure UI styling improvements.

---

[tharikaGitHub]

@Ratheshan03 Regarding this change, I have applied your fix locally and observed the behaviour. The button has gone a little down and the alignment looks a bit off from the bottom level compared with the input box. And also clicking on the button does not scroll to the top with the fix still. Will it be possible to check and fix?

[Ratheshan03]

Hi @tharikaGitHub, Made the changes that you requested above, now the alignement is fixed more precisly and the functionality of the button is already seemed working and i also verified its working and scrolls to thte top. the evidence to the testing has been given below:

---

Publisher.-.WSO2.APIM.-.Google.Chrome.2025-10-30.14-27-46.mp4

Thanks.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud