feat(frontend): group organization settings tabs - #3019
Conversation
Collapse members/groups/security and plans/credits/billing into nested sub-tabs so the organization settings bar stays readable. Co-authored-by: Cursor <cursoragent@cursor.com>
|
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in: 50 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughOrganization settings now use nested team and billing tabs. The settings layout filters nested tabs by organization state and permissions, resolves active routes, and passes tertiary navigation state to ChangesOrganization settings navigation
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant SettingsLayout
participant OrganizationTabUtils
participant Tabs
SettingsLayout->>OrganizationTabUtils: Clone and filter nested organization tabs
SettingsLayout->>OrganizationTabUtils: Resolve active parent and child tabs from the route
SettingsLayout->>Tabs: Provide secondary and tertiary tab state
Tabs->>SettingsLayout: Emit tertiary tab updates
SettingsLayout->>SettingsLayout: Activate route or tab callback
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
Comment |
Visual diff passedVisual changesGenerated at 2026-08-12T18:36:08.067Z. Threshold: 0.1% pixel difference.
Commit: Open |
Merging this PR will not alter performance
Comparing 
Footnotes
|
The unit test was importing the icon-backed tab constants, which made backend tsgo resolve ~icons modules. Co-authored-by: Cursor <cursoragent@cursor.com>
|
Closing as duplicate of #3018 (same org settings tab grouping; that PR has screenshots + green CI). |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
All reported issues were addressed across 12 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
File-based routes still expose mixed-case paths like /settings/organization/Credits, so tab grouping must ignore casing. Co-authored-by: Cursor <cursoragent@cursor.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@playwright/visual-diff.config.ts`:
- Around line 24-25: Update the visual-diff setup for the org-settings-team and
org-settings-billing entries to set capgo_current_org_id to the seeded Demo
organization ID before navigation, using a pre-navigation hook or context init
script rather than prepare. Ensure both routes consistently use organization
046a36ac-e03c-4590-9257-bd6c9dba9ee8.
In `@src/components/Tabs.vue`:
- Around line 45-49: Align Tabs.vue with the interactive primitive guideline by
migrating all three tab rows—not only the tertiary row—from the hand-rolled
button classes buttonPrimaryClass, buttonSecondaryClass, and buttonTertiaryClass
to DaisyUI d-tab primitives, or explicitly establish this component as an
approved exception if migration is not intended.
In `@tests/organization-tabs.unit.test.ts`:
- Around line 59-67: Add an explicit isolation assertion in the test using
cloneTabs, verifying the cloned team's children array is distinct from the
corresponding baseOrgTabs children array while preserving the existing
active-child and path-matching assertions.
🪄 Autofix
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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 8bc24a98-10a0-4f9d-9dcf-26bf7558086d
📒 Files selected for processing (12)
.github/pr-assets/org-billing-plans.webp.github/pr-assets/org-general.webp.github/pr-assets/org-team-members.webpmessages/en.context.jsonmessages/en.jsonplaywright/visual-diff.config.tssrc/components/Tabs.vuesrc/components/comp_def.tssrc/constants/organizationTabs.tssrc/layouts/settings.vuesrc/utils/organizationTabs.tstests/organization-tabs.unit.test.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
Cap-go/capacitor-updater(manual)
There was a problem hiding this comment.
All reported issues were addressed across 2 files (changes from recent commits).
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
settings.vue mutates cloned children when filtering permissions, so a shallow copy would leak those edits into the base tab list. Co-authored-by: Cursor <cursoragent@cursor.com>
|
1 participant
Summary (AI generated)
Motivation (AI generated)
Organization settings had too many top-level tabs in one row. Related pages belong together, and nested tabs keep the existing URLs so bookmarks and in-app links keep working.
Business Impact (AI generated)
Console users can find members and billing settings faster, with less tab clutter, without changing any billing or permission behavior.
Visual changes (AI generated)
Live local demo after the change (
test@capgo.app, Demo org):Fewer main tabs
Team defaults to Members
Billing defaults to Plans
Test Plan (AI generated)
/settings/organizationand confirm the main row is General, Team, Billing, Usage, Notifications, Audit Logs, Webhooks/settings/organization/groups,/security,/credits, and/plansstill open the right page with the parent tab selectedGenerated with AI
Made with Cursor
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.Summary by CodeRabbit
New Features
Bug Fixes
Localization