Skip to content

[API Portal] Fix multiple UI/UX issues - #3065

Merged
Piumal1999 merged 28 commits into
wso2:mainfrom
Piumal1999:rb-bug-fixes
Aug 3, 2026
Merged

[API Portal] Fix multiple UI/UX issues#3065
Piumal1999 merged 28 commits into
wso2:mainfrom
Piumal1999:rb-bug-fixes

Conversation

@Piumal1999

@Piumal1999 Piumal1999 commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Purpose

$subject
Fixes #3086
Fixes #3079
Fixes #3090

Also a set of issues reported under following issue are also fixed:

Summary

  • Improve the API creation UI and the tags field.
  • Disable the Save button until required fields are filled, and show a loading state while saving.
  • Remove unrelated types from the API type dropdown.
  • Remove the artifact-types field from the org edit form.
  • Remove the handle field from the webhook config UI.
  • Make the API Workflows UI consistent with the other admin screens.
  • Correct the column order in the views table.
  • Use label display names in the views form.
  • Fix the logout button clicking issue
  • Fix image loading in custom content.
  • Fix the docs page active-tab highlight.
  • Fix the MCP button colour, and the AI-ready button and chips on MCPs.
  • Fix the API Workflows breadcrumb alignment.
  • Fix a TLS issue with self-signed-cert webhook delivery in the Docker setup.
  • Fix the submenu item width.
  • Fix homepage whitespace issue
  • Improve the alert popup colours
  • Improve the API type chips and update the GraphQL and WebSocket icons.

@coderabbitai

coderabbitai Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@Piumal1999, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 44 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 617f2137-73bd-40e0-b60f-bf3842e23f03

📥 Commits

Reviewing files that changed from the base of the PR and between f95ac3d and b540165.

⛔ Files ignored due to path filters (2)
  • portals/api-portal/src/defaultContent/images/graphql-icon.svg is excluded by !**/*.svg
  • portals/api-portal/src/defaultContent/images/websocket-icon.svg is excluded by !**/*.svg
📒 Files selected for processing (51)
  • distribution/all-in-one/docker-compose.yaml
  • portals/api-portal/src/controllers/apiContentController.js
  • portals/api-portal/src/controllers/apiKeysPageController.js
  • portals/api-portal/src/controllers/apiWorkflowsController.js
  • portals/api-portal/src/controllers/viewConfigureController.js
  • portals/api-portal/src/defaultContent/pages/api-landing/page.hbs
  • portals/api-portal/src/defaultContent/pages/api-landing/partials/api-detail-banner.hbs
  • portals/api-portal/src/defaultContent/pages/api-workflows/detail/page.hbs
  • portals/api-portal/src/defaultContent/pages/api-workflows/page.hbs
  • portals/api-portal/src/defaultContent/pages/api-workflows/partials/workflow-card.hbs
  • portals/api-portal/src/defaultContent/pages/apis/partials/api-listing.hbs
  • portals/api-portal/src/defaultContent/pages/docs/partials/docs-nav.hbs
  • portals/api-portal/src/defaultContent/pages/home/page.hbs
  • portals/api-portal/src/defaultContent/pages/home/partials/home.hbs
  • portals/api-portal/src/defaultContent/pages/mcp-landing/page.hbs
  • portals/api-portal/src/defaultContent/pages/mcp-landing/partials/mcp-detail-banner.hbs
  • portals/api-portal/src/defaultContent/pages/mcp/partials/mcp-listing.hbs
  • portals/api-portal/src/defaultContent/partials/header.hbs
  • portals/api-portal/src/defaultContent/partials/sidebar.hbs
  • portals/api-portal/src/defaultContent/styles/components.css
  • portals/api-portal/src/defaultContent/styles/header.css
  • portals/api-portal/src/defaultContent/styles/home.css
  • portals/api-portal/src/defaultContent/styles/side-bar.css
  • portals/api-portal/src/middlewares/registerPartials.js
  • portals/api-portal/src/pages/settings/page.hbs
  • portals/api-portal/src/pages/settings/partials/api-workflows.hbs
  • portals/api-portal/src/pages/settings/partials/cfg-apis-panel.hbs
  • portals/api-portal/src/pages/settings/partials/cfg-modals.hbs
  • portals/api-portal/src/pages/settings/partials/cfg-nav.hbs
  • portals/api-portal/src/pages/settings/partials/cfg-organization-panel.hbs
  • portals/api-portal/src/pages/settings/partials/cfg-views-panel.hbs
  • portals/api-portal/src/pages/settings/partials/cfg-webhook-form.hbs
  • portals/api-portal/src/pages/settings/partials/cfg-webhooks-panel.hbs
  • portals/api-portal/src/scripts/alert.js
  • portals/api-portal/src/scripts/api-agent-prompt.js
  • portals/api-portal/src/scripts/api-workflow-detail.js
  • portals/api-portal/src/scripts/common.js
  • portals/api-portal/src/scripts/manage-api-workflows.js
  • portals/api-portal/src/scripts/paginate.js
  • portals/api-portal/src/scripts/settings-apis.js
  • portals/api-portal/src/scripts/settings-keymanagers.js
  • portals/api-portal/src/scripts/settings-labels.js
  • portals/api-portal/src/scripts/settings-organization.js
  • portals/api-portal/src/scripts/settings-plans.js
  • portals/api-portal/src/scripts/settings-views.js
  • portals/api-portal/src/scripts/settings-webhooks.js
  • portals/api-portal/src/scripts/warning.js
  • portals/api-portal/src/styles/alert.css
  • portals/api-portal/src/styles/api-workflows.css
  • portals/api-portal/src/styles/settings-layout.css
  • portals/api-portal/src/utils/util.js
📝 Walkthrough

Walkthrough

The portal updates API and MCP settings, chip-based tags, URL validation, AI and tryout visibility, workflow management, mobile navigation, pagination, shared form handling, alerts, and certificate trust.

Changes

API settings and workflow management

Layer / File(s) Summary
API wizard types, tags, and URL validation
portals/api-portal/src/pages/settings/partials/cfg-apis-panel.hbs, portals/api-portal/src/scripts/settings-apis.js
The wizard preserves MCP and legacy types, manages tag chips, validates required fields, and validates production and sandbox URLs.
Settings contracts and operations
portals/api-portal/src/controllers/viewConfigureController.js, portals/api-portal/src/pages/settings/..., portals/api-portal/src/scripts/settings-*.js
Settings forms update fields and labels. Save and delete operations use shared validity and busy-button handling.
Workflow management and pagination
portals/api-portal/src/pages/settings/partials/api-workflows.hbs, portals/api-portal/src/scripts/manage-api-workflows.js, portals/api-portal/src/scripts/paginate.js
Workflow management uses a table and custom delete modal. API and MCP lists use client-side pagination.

AI and tryout rendering

Layer / File(s) Summary
AI enablement propagation
portals/api-portal/src/utils/util.js, portals/api-portal/src/controllers/apiWorkflowsController.js, portals/api-portal/src/defaultContent/pages/...
AI controls use resolved aiEnabled values and remain hidden when agent visibility is HIDDEN.
Tryout capability and navigation
portals/api-portal/src/controllers/apiContentController.js, portals/api-portal/src/defaultContent/pages/docs/partials/docs-nav.hbs
Document rendering exposes tryout capability based on API type. Documentation navigation uses that capability.
Agent resources and badges
portals/api-portal/src/scripts/api-agent-prompt.js, portals/api-portal/src/defaultContent/...
Agent prompts support configurable resource paths. API and MCP badges use dedicated icons and conditional AI states.

Mobile sidebar navigation

Layer / File(s) Summary
Drawer structure and responsive styling
portals/api-portal/src/defaultContent/partials/header.hbs, portals/api-portal/src/defaultContent/partials/sidebar.hbs, portals/api-portal/src/defaultContent/styles/..., portals/api-portal/src/styles/settings-layout.css
The header and sidebar expose drawer controls. Responsive styles define the off-canvas drawer, backdrop, mobile navigation strip, scrolling, and reduced-motion behavior.
Drawer interaction handling
portals/api-portal/src/scripts/common.js
The drawer opens and closes through controls, navigation, Escape, and breakpoint changes while updating ARIA state, focus, and scrolling.

Portal runtime, feedback, and TLS

Layer / File(s) Summary
Shared alerts and deletion feedback
portals/api-portal/src/scripts/alert.js, portals/api-portal/src/scripts/warning.js, portals/api-portal/src/styles/alert.css
Alerts support warnings and themed icons. Application deletion uses alert feedback instead of message overlays.
Image paths and runtime cleanup
portals/api-portal/src/controllers/apiKeysPageController.js, portals/api-portal/src/middlewares/registerPartials.js, portals/api-portal/src/scripts/api-workflow-detail.js
Image paths use metadata identifiers. The unused workflow notification helper is removed.
Platform API certificate trust
distribution/all-in-one/docker-compose.yaml, tests/integration-e2e/docker-compose.yaml
Containers mount the generated platform API certificate and use NODE_EXTRA_CA_CERTS instead of TLS verification bypasses.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

  • wso2/api-platform#3062: Shares API Portal settings UI files, including the API configuration panel, API settings script, and settings layout styles.

Suggested reviewers: thushani-jayasekera, virajsalaka, lasanthas

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 42.86% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check ⚠️ Warning The description lists many changes but omits most required template sections and leaves the Purpose section as "$subject". Complete the Purpose, Goals, Approach, User stories, Documentation, tests, Security checks, Samples, Related PRs, and Test environment sections.
✅ Passed checks (3 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title identifies the API Portal UI and UX fixes, but it is broad rather than specific.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@portals/api-portal/src/scripts/settings-apis.js`:
- Around line 308-313: Update the paste handler around the input element and
addTag flow to preserve pending input: insert the clipboard text into the input
before committing tags, then call commitTagInput() so existing text such as
“foo” is retained alongside pasted values. Keep the comma-separated parsing and
default paste prevention behavior intact.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e411b102-8443-42cf-bb74-ff1d74a1b6fe

📥 Commits

Reviewing files that changed from the base of the PR and between 95ebb37 and 3eba83d.

📒 Files selected for processing (3)
  • portals/api-portal/src/pages/settings/partials/cfg-apis-panel.hbs
  • portals/api-portal/src/scripts/settings-apis.js
  • portals/api-portal/src/styles/settings-layout.css

Comment thread portals/api-portal/src/scripts/settings-apis.js Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@portals/api-portal/src/defaultContent/styles/side-bar.css`:
- Around line 303-317: Update the sidebar open/close and breakpoint
synchronization logic for the .sidebar element so the closed drawer is inert and
marked aria-hidden="true", while the open drawer removes inert and restores
aria-hidden="false"; apply both states consistently during opening, closing, and
responsive breakpoint changes, preserving the existing .mobile-open visual
behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 8d9f2f54-93cb-401d-9b20-965d71416fc8

📥 Commits

Reviewing files that changed from the base of the PR and between 3eba83d and 59e8d85.

📒 Files selected for processing (7)
  • portals/api-portal/src/defaultContent/partials/header.hbs
  • portals/api-portal/src/defaultContent/partials/sidebar.hbs
  • portals/api-portal/src/defaultContent/styles/header.css
  • portals/api-portal/src/defaultContent/styles/side-bar.css
  • portals/api-portal/src/scripts/common.js
  • portals/api-portal/src/scripts/settings-apis.js
  • portals/api-portal/src/styles/settings-layout.css
🚧 Files skipped from review as they are similar to previous changes (1)
  • portals/api-portal/src/scripts/settings-apis.js

Comment thread portals/api-portal/src/defaultContent/styles/side-bar.css
coderabbitai[bot]
coderabbitai Bot previously approved these changes Aug 3, 2026
@Piumal1999
Piumal1999 merged commit d34d96f into wso2:main Aug 3, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

3 participants