feat(billing): Move locked products to bottom of usage overview table#107701
Merged
feat(billing): Move locked products to bottom of usage overview table#107701
Conversation
github-actions
bot
added
the
Scope: Frontend
krithikravi
approved these changes
Feb 5, 2026
shashjar
approved these changes
Feb 5, 2026
| const filteredCategories = sortedCategories.filter( | ||
| categoryInfo => !addOnDataCategories.includes(categoryInfo.category) | ||
| ); | ||
| const enabledCategories = filteredCategories.filter(categoryInfo => |
Member
There was a problem hiding this comment.
non-blocking but if you prefer i think you could use lodash/partition to simplify the enabled/disabled filtering here and for the add-ons
| addOnInfo => !productIsEnabled(subscription, addOnInfo.apiName) | ||
| ); | ||
|
|
||
| const renderCategoryRow = (categoryInfo: (typeof sortedCategories)[number]) => { |
Member
There was a problem hiding this comment.
maybe worth extracting the type out here and in renderAddOnRows for clarity?
Extract inline rendering logic into `renderCategoryRow` and `renderAddOnRows` helper functions, and pre-compute `filteredCategories` and `availableAddOns` before the return statement. No behavior change.
Partition categories and add-ons into enabled/disabled groups using `productIsEnabled`, then render enabled products first followed by disabled (locked) products at the bottom. This improves the UX by grouping active products together instead of interspersing locked products throughout the list. BIL-2114
Add test that asserts all disabled product rows appear after all enabled product rows in DOM order, validating the locked-products- at-bottom behavior. BIL-2114
Address PR feedback: - Use `lodash/partition` instead of dual filter calls for enabled/disabled partitioning - Replace inline `typeof` expressions with named types (`BillingMetricHistory`, `AddOnCategoryInfo`) for clarity
Replace document.querySelectorAll with screen.getAllByTestId to follow React Testing Library conventions.
dashed
force-pushed
the
billing/BIL-2114
branch
from
c4a4280 to
f34f048
Compare
jaydgoss
pushed a commit
that referenced
this pull request
Feb 12, 2026
…#107701) Closes https://linear.app/getsentry/issue/BIL-2114/move-locked-products-to-bottom-of-subscription-overview-table ## Summary - Reorder the subscription overview usage table so that locked/disabled products are grouped at the bottom, instead of being interspersed with enabled products based on their backend `order` field - Extract inline rendering logic into reusable helpers (`renderCategoryRow`, `renderAddOnRows`) to support the partitioning without code duplication Fixes BIL-2114 ## How it works Uses the existing `productIsEnabled()` utility to partition both regular data categories and add-on categories into enabled/disabled groups at the table level. The rendering order becomes: 1. Enabled regular categories (sorted by existing `order`) 2. Enabled add-ons (with sub-category rows) 3. Disabled/locked regular categories (with lock icon) 4. Disabled/locked add-ons (with lock icon) No changes to individual row rendering, side panel behavior, or trial CTAs. <img width="1001" height="691" alt="Screenshot 2026-02-05 at 4 33 45 PM" src="https://github.com/user-attachments/assets/a9c18afc-b515-4c82-b10a-e925feb1d3bb" /> ## Test plan - [x] All 44 existing usage overview tests pass (5 test suites) - [x] New test verifies all disabled rows appear after all enabled rows in DOM order - [x] Pre-commit hooks pass (eslint, stylelint, prettier) - [ ] Visual verification on subscription overview page with a plan that has both enabled and disabled products
dcramer
pushed a commit
that referenced
this pull request
Feb 17, 2026
…#107701) Closes https://linear.app/getsentry/issue/BIL-2114/move-locked-products-to-bottom-of-subscription-overview-table ## Summary - Reorder the subscription overview usage table so that locked/disabled products are grouped at the bottom, instead of being interspersed with enabled products based on their backend `order` field - Extract inline rendering logic into reusable helpers (`renderCategoryRow`, `renderAddOnRows`) to support the partitioning without code duplication Fixes BIL-2114 ## How it works Uses the existing `productIsEnabled()` utility to partition both regular data categories and add-on categories into enabled/disabled groups at the table level. The rendering order becomes: 1. Enabled regular categories (sorted by existing `order`) 2. Enabled add-ons (with sub-category rows) 3. Disabled/locked regular categories (with lock icon) 4. Disabled/locked add-ons (with lock icon) No changes to individual row rendering, side panel behavior, or trial CTAs. <img width="1001" height="691" alt="Screenshot 2026-02-05 at 4 33 45 PM" src="https://github.com/user-attachments/assets/a9c18afc-b515-4c82-b10a-e925feb1d3bb" /> ## Test plan - [x] All 44 existing usage overview tests pass (5 test suites) - [x] New test verifies all disabled rows appear after all enabled rows in DOM order - [x] Pre-commit hooks pass (eslint, stylelint, prettier) - [ ] Visual verification on subscription overview page with a plan that has both enabled and disabled products
This was referenced Feb 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes https://linear.app/getsentry/issue/BIL-2114/move-locked-products-to-bottom-of-subscription-overview-table
Summary
orderfieldrenderCategoryRow,renderAddOnRows) to support the partitioning without code duplicationFixes BIL-2114
How it works
Uses the existing
productIsEnabled()utility to partition both regular data categories and add-on categories into enabled/disabled groups at the table level. The rendering order becomes:order)No changes to individual row rendering, side panel behavior, or trial CTAs.
Test plan