fix: Fix UI issues in rate limiting Resources page

Open Ratheshan03 opened this issue 2 months ago • 1 comments

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 screenshot-1-api-level-text

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

Screenshot 2: Operation Level Text Fix screenshot-2-operation-level-text

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

Screenshot 3: Button Alignment Fix screenshot-3-button-alignment

Button properly aligned with adjacent elements

Video: Button Functionality

https://github.com/user-attachments/assets/3f5df893-d7ce-498b-bd93-36ee28cef95b

Checklist

[ ] e2e cypress tests locally verified. (for internal contributors)
[x] Manual test round performed and verified.
[x] UX/UI review done on the final implementation.
[x] 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

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