[Dashboard] Restrict billing actions to team owners only #7274
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
""" WalkthroughThe changes introduce an Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Page
participant Auth
participant Team
participant Member
participant UIComponents
User->>Page: Visit billing/invoices page
Page->>Auth: getValidAccount()
Auth-->>Page: accountId
Page->>Team: getTeam(team_slug)
Page->>Member: getMemberById(team_slug, accountId)
Team-->>Page: team
Member-->>Page: member (with role)
Page->>Page: Determine isOwnerAccount = (member.role == "OWNER")
Page->>UIComponents: Render with isOwnerAccount prop
UIComponents->>User: Show/hide/disable controls based on isOwnerAccount
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (13)
🚧 Files skipped from review as they are similar to previous changes (11)
🧰 Additional context used🧬 Code Graph Analysis (1)apps/dashboard/src/components/settings/Account/Billing/CancelPlanModal/CancelPlanModal.tsx (2)
⏰ Context from checks skipped due to timeout of 90000ms (7)
🔇 Additional comments (6)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7274 +/- ##
=======================================
Coverage 55.57% 55.57%
=======================================
Files 909 909
Lines 58667 58667
Branches 4158 4158
=======================================
Hits 32606 32606
Misses 25954 25954
Partials 107 107
🚀 New features to boost your workflow:
|
jnsdls
force-pushed
the
_Dashboard_Restrict_billing_actions_to_team_owners_only
branch
from
7950a92 to
a105282
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 1
🛑 Comments failed to post (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/page.tsx (1)
31-35: 🛠️ Refactor suggestion
Add error handling for team member lookup.
The
getMemberByIdcall could fail or return null, which would cause issues with the ownership check. Consider adding proper error handling.const [team, authToken, teamMember] = await Promise.all([ getTeamBySlug(params.team_slug), getAuthToken(), getMemberById(params.team_slug, account.id), ]); + + if (!teamMember) { + // Handle case where user is not a team member + redirect("/team"); + }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.const [team, authToken, teamMember] = await Promise.all([ getTeamBySlug(params.team_slug), getAuthToken(), getMemberById(params.team_slug, account.id), ]); if (!teamMember) { // Handle case where user is not a team member redirect("/team"); }🤖 Prompt for AI Agents
In apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/page.tsx around lines 31 to 35, the call to getMemberById may fail or return null, which can break the ownership check logic. Add error handling by wrapping the Promise.all call in a try-catch block or by checking if the teamMember result is null after the call. If an error occurs or teamMember is null, handle it gracefully, such as by showing an error message or redirecting, to prevent runtime issues.
jnsdls
force-pushed
the
_Dashboard_Restrict_billing_actions_to_team_owners_only
branch
from
a105282 to
61178d9
Compare
jnsdls
force-pushed
the
_Dashboard_Restrict_billing_actions_to_team_owners_only
branch
from
61178d9 to
1a675e4
Compare
size-limit report 📦
|
MananTank
approved these changes
Jun 4, 2025
Merge activity
|
graphite-app bot
pushed a commit
that referenced
this pull request
Jun 4, 2025
# Improve Billing UI for Non-Owner Team Members
This PR enhances the billing UI to properly handle permissions for team members who aren't owners. It:
- Restricts billing actions to team owners only
- Adds tooltips explaining why certain actions are disabled
- Properly disables buttons for non-owner team members
- Improves the Button component to handle disabled state for non-button elements
## Key Changes:
- Added `isOwnerAccount` flag to billing components to conditionally render or disable actions
- Enhanced Button component to properly handle disabled state for non-button elements (like anchor tags)
- Added tooltips to explain why actions are disabled for non-owners
- Restricted the following actions to team owners only:
- Selecting/changing plans
- Managing billing
- Topping up credits
- Paying invoices
These changes ensure a better UX for team members who don't have billing permissions while maintaining full functionality for team owners.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added owner-only restrictions for billing and payment actions. Only team owners can change plans, manage billing, top up credits, or pay invoices. Non-owner users now see disabled buttons with tooltips explaining these restrictions.
- **Accessibility**
- Improved accessibility for disabled buttons by adding appropriate ARIA attributes and visual indicators.
- **User Interface**
- Updated tooltips and button states to clearly communicate permission-based access to billing features.
- Enhanced button behavior to consistently reflect disabled states across different elements and contexts.
- **Bug Fixes**
- Standardized disabled state handling for buttons and interactive elements, ensuring consistent visual and functional behavior.
- **Chores**
- Replaced internal navigation links with standard anchor elements for external billing-related links, improving security with added link attributes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on enhancing user experience by adding an `isOwnerAccount` boolean prop to various components. This prop controls the visibility and functionality of certain actions, ensuring that only team owners can perform specific tasks.
### Detailed summary
- Changed `<Link>` to `<a>` in `billing.tsx` for proper link behavior.
- Added `isOwnerAccount` prop to multiple components and updated their functionality based on ownership status.
- Introduced `ToolTipLabel` to provide contextual information for actions restricted to team owners.
- Updated button states to reflect whether actions are enabled or disabled based on `isOwnerAccount`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
_Dashboard_Restrict_billing_actions_to_team_owners_only
branch
from
1a675e4 to
4abbefa
Compare
MananTank
requested changes
Jun 4, 2025
# Improve Billing UI for Non-Owner Team Members
This PR enhances the billing UI to properly handle permissions for team members who aren't owners. It:
- Restricts billing actions to team owners only
- Adds tooltips explaining why certain actions are disabled
- Properly disables buttons for non-owner team members
- Improves the Button component to handle disabled state for non-button elements
## Key Changes:
- Added `isOwnerAccount` flag to billing components to conditionally render or disable actions
- Enhanced Button component to properly handle disabled state for non-button elements (like anchor tags)
- Added tooltips to explain why actions are disabled for non-owners
- Restricted the following actions to team owners only:
- Selecting/changing plans
- Managing billing
- Topping up credits
- Paying invoices
These changes ensure a better UX for team members who don't have billing permissions while maintaining full functionality for team owners.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added owner-only restrictions for billing and payment actions. Only team owners can change plans, manage billing, top up credits, or pay invoices. Non-owner users now see disabled buttons with tooltips explaining these restrictions.
- **Accessibility**
- Improved accessibility for disabled buttons by adding appropriate ARIA attributes and visual indicators.
- **User Interface**
- Updated tooltips and button states to clearly communicate permission-based access to billing features.
- Enhanced button behavior to consistently reflect disabled states across different elements and contexts.
- **Bug Fixes**
- Standardized disabled state handling for buttons and interactive elements, ensuring consistent visual and functional behavior.
- **Chores**
- Replaced internal navigation links with standard anchor elements for external billing-related links, improving security with added link attributes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on enhancing user experience by adding an `isOwnerAccount` boolean prop to various components. This prop controls the visibility and functionality of certain actions, ensuring that only team owners can perform specific tasks.
### Detailed summary
- Changed `<Link>` to `<a>` in `billing.tsx` for proper link behavior.
- Added `isOwnerAccount` prop to multiple components and updated their functionality based on ownership status.
- Introduced `ToolTipLabel` to provide contextual information for actions restricted to team owners.
- Updated button states to reflect whether actions are enabled or disabled based on `isOwnerAccount`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
jnsdls
force-pushed
the
_Dashboard_Restrict_billing_actions_to_team_owners_only
branch
from
4abbefa to
a920d1e
Compare
MananTank
approved these changes
Jun 4, 2025
graphite-app
bot
deleted the
_Dashboard_Restrict_billing_actions_to_team_owners_only
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Improve Billing UI for Non-Owner Team Members
This PR enhances the billing UI to properly handle permissions for team members who aren't owners. It:
Key Changes:
isOwnerAccountflag to billing components to conditionally render or disable actionsThese changes ensure a better UX for team members who don't have billing permissions while maintaining full functionality for team owners.
Summary by CodeRabbit
PR-Codex overview
This PR focuses on enhancing the user interface and experience by improving accessibility and functionality for owner accounts in various billing and subscription components.
Detailed summary
<Link>to<a>inbilling.tsxfor better link handling.isOwnerAccountprop to multiple components for owner-specific functionality.disabledstates and tooltips.