Fix UI issues in developer portal Try Out API Console page

[ranuka-laksika]

Fixes issue #3724 - UI issues in the developer portal Try Out > API Console page

Issue URL: wso2/api-manager#3724

Changes Made

• Fixed additional quotation marks in the query complexity analyzer (QueryComplexityView.jsx:201)
  • Removed ‘ and ’ HTML entities, keeping only the colon character :
• Fixed misalignment in the query add button (GraphQLUI.jsx:48-51)
  • Added CSS styling for .graphiql-toolbar-button to ensure proper alignment with flexbox

Build Information

• Built using Java 11 and Maven 3.6.3
• Generated artifacts: devportal.war (23MB)
• Build command: mvn clean install -DskipTests

Artifact Replacement

• Replaced devportal folder in wso2am-4.6.0 pack
• Location: wso2am-4.6.0/repository/deployment/server/webapps/devportal

Modified wso2am-4.6.0 Pack (GitHub Actions Artifact)

The complete modified wso2am-4.6.0 pack with all updated artifacts has been uploaded as a GitHub Actions artifact.

Download Link:
🔗 Download from GitHub Actions Run

Artifact Details:

• Artifact Name: wso2am-4.6.0-issue-33.zip
• Size: 508MB
• Location: Available in the GitHub Actions workflow run linked above
• How to Download:
  1. Click the GitHub Actions run link above
  2. Scroll down to the "Artifacts" section at the bottom of the page
  3. Download the artifact: wso2am-4.6.0-issue-33.zip
  4. Extract and use the modified pack directly

What's included:

• Updated devportal.war file with UI fixes
• Complete wso2am-4.6.0 directory structure
• Ready to use without any additional build steps

Files Modified

• portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/QueryComplexityView.jsx
• portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/GraphQLUI.jsx

Testing

• Since this is a frontend fix, no backend testing is required
• Visual verification recommended for the GraphQL console UI

[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