Fix application dropdown in branding page not showing all applications

[KaveeshaPiumini]

Purpose

Fixes the application dropdown on the Branding page (/console/branding, Application mode) not showing all non-M2M applications when the first page of results is M2M-heavy.

Related Issue

• Application dropdown in Branding page does not show all applications product-is#27768

Root cause

The dropdown uses react-infinite-scroll-component, which fires its next() callback only on a scroll event. M2M apps are filtered out client-side, so when the first API page is M2M-heavy (e.g. 7 M2M + 3 OIDC) only a few options remain visible — too few to overflow the 250px listbox. With no overflow there is no scroll, next() never fires, and applications on later pages (e.g. SAML apps) are permanently unreachable.

Solution

Added a useEffect that, while the dropdown is open, measures whether the scroll container actually overflows (scrollHeight <= clientHeight) once its options are laid out, and proactively loads the next page until the container can scroll or there are no more pages. This measures the real overflow rather than estimating from a fixed item count/height, and gates re-fetching on shouldFetchApplications/isValidating to avoid duplicate requests.

Testing

Verified on a tenant seeded with 3 SAML, 7 M2M and 3 OIDC apps (page 1 = 3 OIDC + 7 M2M, page 2 = 5 SAML): the dropdown now auto-loads later pages and shows all OIDC and SAML apps with no manual scroll, while M2M apps remain filtered out.

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 43 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 89e62031-93f2-4da1-b8f5-121660b4c061

📥 Commits

Reviewing files that changed from the base of the PR and between 4fec73d and 5c65ff2.

📒 Files selected for processing (1)

• .changeset/strong-terms-retire.md

📝 Walkthrough

Walkthrough

Adds proactive pagination to the branding page application Autocomplete. Selectable-application filtering is centralized, page-size handling is shared, and dropdown open state gates additional application-list requests.

Changes

Application dropdown pagination

Layer / File(s)	Summary
Selectable application pagination features/admin.branding.v1/components/branding-page-layout.tsx	Filters out system, default, and M2M applications, uses a shared page size, and loads additional pages when the dropdown has too few selectable options.
Dropdown visibility wiring features/admin.branding.v1/components/branding-page-layout.tsx, .changeset/strong-terms-retire.md	Tracks Autocomplete open and close events to control pagination and records a patch release for the dropdown fix.

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 1 warning)

Check name	Status	Explanation	Resolution
Changeset Required	❌ Error	HEAD changes only features/admin.branding.v1/components/branding-page-layout.tsx; no .changeset/*.md appears in the PR diff.	Add a new .changeset/*.md file to the PR diff, with the affected package(s) and an appropriate version bump (e.g. @wso2is/console patch).
Description check	⚠️ Warning	The description covers purpose, issue, root cause, solution, and testing, but it misses several required template sections.	Add the missing template sections for Related PRs, Checklist, Security checks, and the Developer Checklist, or fill them with N/A where appropriate.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing the branding page application dropdown to show all applications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

• 🛠️ create changeset

---

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

[coderabbitai]

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 @.changeset/branding-application-dropdown-overflow.md:
- Around line 1-3: The changeset file branding-application-dropdown-overflow.md
currently only includes `@wso2is/admin.branding.v1` with a patch update, but since
this PR modifies code in the features directory, you must also add the consuming
app-level package to the changeset. Determine the appropriate app package
(likely `@wso2is/console` based on the branding feature context) and add it to the
changeset file with a patch version update, following the same format as the
existing `@wso2is/admin.branding.v1` entry to ensure the feature changes are
properly released through the app package.

🪄 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.yml

Review profile: CHILL

Plan: Pro

Run ID: b19f1258-cad0-46fc-8491-4975b874440b

📥 Commits

Reviewing files that changed from the base of the PR and between 62a2911 and 9d5310e.

📒 Files selected for processing (2)

• .changeset/branding-application-dropdown-overflow.md
• features/admin.branding.v1/components/branding-page-layout.tsx

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.91%. Comparing base (315e6ea) to head (5c65ff2).
⚠️ Report is 452 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10427      +/-   ##
==========================================
+ Coverage   72.62%   72.91%   +0.28%     
==========================================
  Files         469      470       +1     
  Lines       70633    71389     +756     
  Branches      453      240     -213     
==========================================
+ Hits        51300    52053     +753     
- Misses      19037    19225     +188     
+ Partials      296      111     -185     

see 222 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.