[Customer Portal Webapp] Prevent Add Product dropdown from capping at 20 items on scroll

[cloby99]

Summary

• The Product Name and Version dropdowns in the Add WSO2 Product modal stopped loading items beyond the second page (offset=10, ~20 items)
• Root cause: including products/versions state in the accumulation useEffect dependency array caused a re-run after each merge; the duplicate-ID guard found no new items and incorrectly set totalRecords to the current list length, blocking further scroll-triggered loads
• Fix: track the accumulated list via refs (productsRef, versionsRef) so the effect only fires when new API data arrives, not when state is updated

Test plan

• Open the Add WSO2 Product modal on a deployment with >20 products
• Open the Product Name dropdown and scroll to the bottom — verify items beyond 20 load continuously until all 48 are shown
• Verify the Version dropdown has the same behaviour when a product with many versions is selected
• Confirm selecting a product and version still submits correctly

Summary by CodeRabbit

• Bug Fixes
  • Improved the add-product flow so paginated product and version lists load more reliably without duplicate recomputation or stale results.
  • Reduced unnecessary updates while merging additional pages, helping keep the modal more responsive.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b4252f89-48a4-402e-8727-5c1addf9772b

📥 Commits

Reviewing files that changed from the base of the PR and between 957f23f and d1b005e.

📒 Files selected for processing (1)

• apps/customer-portal/webapp/src/features/project-details/components/deployments/AddProductModal.tsx

---

📝 Walkthrough

Walkthrough

The AddProductModal component's pagination merge logic now uses productsRef and versionsRef (updated via useLayoutEffect) as sources for previous items instead of state variables, allowing the merge effects' dependency arrays to be narrowed to avoid extra recomputation.

Changes

Pagination Merge Refactor

Layer / File(s)	Summary
Ref setup for tracking latest lists apps/customer-portal/webapp/src/features/project-details/components/deployments/AddProductModal.tsx	Introduces productsRef/versionsRef and accumulated-length refs, updated via two split useLayoutEffects whenever products/versions change.
Products page merge update apps/customer-portal/webapp/src/features/project-details/components/deployments/AddProductModal.tsx	Products merge now reads previous items from productsRef.current, and the merge effect's dependencies are narrowed to productsPage only.
Versions page merge update apps/customer-portal/webapp/src/features/project-details/components/deployments/AddProductModal.tsx	Versions merge now reads previous items from versionsRef.current, and the merge effect's dependencies are updated to form.productId and versionsPage.

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

Possibly related PRs

• wso2-open-operations/cs-tools#458: Same AddProductModal.tsx pagination merge logic and "load more" behavior for products/versions.
• wso2-open-operations/cs-tools#460: Modifies the same AddProductModal.tsx pagination/merge and dependency handling.
• wso2-open-operations/cs-tools#465: Overlaps in AddProductModal.tsx merge effects and accumulated-length ref/state tracking.

Suggested reviewers: Rashmika998

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	Only Summary and Test plan are provided; most required template sections are missing or unfilled.	Add the missing template sections, or mark inapplicable items as N/A with brief explanations, and include links or screenshots where needed.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing the Add Product dropdown pagination cap on scroll.
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

---

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