Enhance API settings with managed label picker and submission

[lahiruudayakumara]

Purpose

APIs configured with labels through Admin Settings → APIs were not associated with the managed labels used by Developer Portal Views. The existing field was labelled “Labels” but submitted its values as API tags, so APIs did not appear in Views configured with the corresponding labels.

Resolves #2966

Goals

• Allow administrators to associate APIs with existing managed labels.
• Ensure labelled APIs appear in Views configured with matching labels.
• Clearly distinguish managed labels from free-form API tags.
• Preserve API label selections when editing an API.

Approach

• Added a managed-label picker to the API create/edit wizard.
• Loaded existing API label mappings into the settings-page API data.
• Restored selected labels when editing an API.
• Included selected labels in API create and update requests.
• Renamed the existing comma-separated field to Tags to avoid confusion.
• Selected the default label initially for newly created APIs.

UI screenshot/GIF: To be attached to the PR.

User stories

• As an administrator, I can assign managed labels to an API.
• As an administrator, I can see and update an API’s existing label assignments.
• As a portal user, I can see APIs in Views whose labels match the API’s assigned labels.
• As an administrator, I can distinguish API tags from labels used for View visibility.

Documentation

N/A — this fixes existing Developer Portal behaviour and clarifies the existing UI without introducing new product concepts or APIs.

Automation tests

• Unit tests

  • All 40 Developer Portal unit tests passed.
  • Code coverage was not measured as part of this change.

• Integration tests

  • Existing integration tests cover API label mappings and label-based View filtering.
  • The integration test suite was not executed locally for this change.

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? Yes
• Ran FindSecurityBugs plugin and verified report? No — not applicable to this JavaScript/UI-only change
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? Yes

Samples

N/A — no samples are required for this bug fix.

Related PRs

N/A

Test environment

• JDK: N/A
• Operating system: macOS 26.5.2
• Node.js: 24.6.0
• npm: 11.5.1
• Database: N/A for the executed unit tests
• Browser: No manual browser testing performed

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

The API/MCP settings wizard now supports managed label selection. Labels are mapped from API data, rendered as toggle controls when available, initialized for add/edit flows, and submitted in the request metadata.

Managed API labels

Layer / File(s)	Summary
Label data mapping and persistence portals/developer-portal/src/controllers/viewConfigureController.js, portals/developer-portal/src/scripts/settings-apis.js	API label handles are passed to the settings template, existing labels are restored during edits, new APIs default to default, and selected labels are included in saved metadata.
Labels picker interaction portals/developer-portal/src/pages/settings/partials/cfg-apis-panel.hbs, portals/developer-portal/src/scripts/settings-apis.js	The static Labels field is replaced with conditional toggle buttons and client-side helpers for selecting and reading managed labels.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: anugayan, arshardh, ashera96

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes address #2966 by loading managed labels, letting admins select them, and sending them with API create/update requests.
Out of Scope Changes check	✅ Passed	The changes stay focused on managed labels, label loading, UI selection, and submission needed for the reported view-visibility bug.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly summarizes the main change: adding a managed label picker and submitting selected labels.
Description check	✅ Passed	The description follows the template closely and includes all required sections with relevant details.

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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