fix(RecursivePermission): pass only one child to the tooltip by mcstepp · Pull Request #3288 · unkeyed/unkey

mcstepp · 2025-05-29T17:23:47Z

What does this PR do?

Fixes # ENG-1802

Root cause: When description exists, the tooltip receives 2 children, which causes React.Children.only to throw an error.

Solution: Wrap everything in a single container

Type of change

Bug fix (non-breaking change which fixes an issue)
Chore (refactoring code, technical debt, workflow improvements)
Enhancement (small improvements)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How should this be tested?

Have a workspace with at least 1 API, 1 role, 1 permission
On the Authorization > Roles screen, expand the the Role Permissions tree for a role that has at least one permission that has a description
Permission tree should expand without throwing an error.

A. Clicking to Expand

B. Clicking Expand All

C. With description

Checklist

Required

Appreciated

If a UI change was made: Added a screen recording or screenshots to this PR
Updated the Unkey Docs if changes were necessary

Summary by CodeRabbit

Style
- Improved the layout of permission toggles, labels, and descriptions for better visual alignment and readability in the roles authorization section.
New Features
- Added the ability to resume canceled subscriptions in billing settings.
- Introduced a loading state with a pulsing animation on the billing page for a smoother user experience.
Bug Fixes
- Enhanced dialog behavior by closing confirmation dialogs promptly before processing actions.

…ree component

linear · 2025-05-29T17:23:49Z

ENG-1802 Fix client side exception in roles and permissions section

changeset-bot · 2025-05-29T17:23:51Z

⚠️ No Changeset found

Latest commit: f4ad07b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-05-29T17:23:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2025 7:02pm
engineering	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2025 7:02pm

coderabbitai · 2025-05-29T17:23:54Z

📝 Walkthrough

"""

Walkthrough

The update restructures the layout of leaf permission nodes in the RecursivePermission component, adjusting how the toggle, label, and description are grouped and rendered. The visual hierarchy changes, but there are no modifications to logic, state, or event handling. Additionally, subscription mutation hooks in the billing client are consolidated into a single Mutations function, adding support for resuming canceled subscriptions. The billing page now wraps the Client component in a Suspense with a loading fallback. The confirmation button's click handler order was adjusted to close the dialog before awaiting confirmation.

Changes

File(s)	Change Summary
apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx	Refactored the rendering structure of leaf permission nodes to adjust layout and description placement.
apps/dashboard/app/(app)/settings/billing/client.tsx	Consolidated subscription mutation hooks into a `Mutations` function; added `uncancelSubscription` mutation; updated `Client` and `CancelAlert` to use this function.
apps/dashboard/app/(app)/settings/billing/components/confirmation.tsx	Changed button onClick handler to close dialog before awaiting confirmation function.
apps/dashboard/app/(app)/settings/billing/page.tsx	Wrapped `Client` component in a React `Suspense` with a loading fallback UI.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant RecursivePermission
    User->>RecursivePermission: Render permission leaf node
    RecursivePermission->>RecursivePermission: Render toggle and label in flex container
    RecursivePermission->>RecursivePermission: Conditionally render description below flex container

sequenceDiagram
    participant ClientComponent
    participant MutationsFunction
    ClientComponent->>MutationsFunction: Call to get mutation hooks
    MutationsFunction-->>ClientComponent: Return create, update, cancel, uncancel mutations
    ClientComponent->>MutationsFunction: Use mutations for subscription operations

sequenceDiagram
    participant ConfirmationButton
    participant Dialog
    ConfirmationButton->>Dialog: setOpen(false) to close dialog
    ConfirmationButton->>ConfirmationFunction: Await confirmation function

sequenceDiagram
    participant BillingPage
    participant Suspense
    participant ClientComponent
    BillingPage->>Suspense: Render Suspense with fallback
    Suspense->>ClientComponent: Render Client component

Possibly related PRs

fix: Enhance API Key Detail Page: Change Permissions Visualization to Tree Format #2238: Both PRs modify the RecursivePermission component in apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx, with the main PR adjusting its rendering structure and the retrieved PR exporting and updating its props for broader use.
feat: cancel subscriptions at the end of the period #2944: Related to subscription cancellation and mutation hooks in billing components, overlapping with the addition of uncancelSubscription and mutation consolidation in this PR.

Suggested labels

Bug, 🕹️ oss.gg, :joystick: 150 points

Suggested reviewers

perkinsjr
ogzhanolguncu
"""

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0442bf6 and a9bce24.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (3)

apps/dashboard/app/(app)/settings/billing/client.tsx (7 hunks)
apps/dashboard/app/(app)/settings/billing/components/confirmation.tsx (1 hunks)
apps/dashboard/app/(app)/settings/billing/page.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (25)

GitHub Check: Test Go API Local / Test (Shard 8/8)
GitHub Check: Test Go API Local / Test (Shard 6/8)
GitHub Check: Test Go API Local / Test (Shard 2/8)
GitHub Check: Test Go API Local / Test (Shard 7/8)
GitHub Check: Test Go API Local / Test (Shard 3/8)
GitHub Check: Test Go API Local / Test (Shard 4/8)
GitHub Check: Test Go API Local / Test (Shard 5/8)
GitHub Check: Test Go API Local / Test (Shard 1/8)
GitHub Check: Test API / API Test Local
GitHub Check: Build / Build
GitHub Check: Test Packages / Test ./internal/billing
GitHub Check: Test Packages / Test ./packages/rbac
GitHub Check: Test Packages / Test ./apps/dashboard
GitHub Check: Test Packages / Test ./packages/hono
GitHub Check: Test Packages / Test ./packages/cache
GitHub Check: Test Packages / Test ./internal/keys
GitHub Check: Test Packages / Test ./internal/id
GitHub Check: Test Packages / Test ./internal/clickhouse
GitHub Check: Test Packages / Test ./packages/nextjs
GitHub Check: Test Packages / Test ./packages/api
GitHub Check: Test Packages / Test ./internal/encryption
GitHub Check: Test Packages / Test ./internal/resend
GitHub Check: Test Packages / Test ./internal/hash
GitHub Check: autofix
GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (10)

apps/dashboard/app/(app)/settings/billing/components/confirmation.tsx (1)

39-40: Consider the UX implications of closing dialog before confirmation.

Closing the dialog before awaiting the confirmation provides immediate feedback to users, which improves perceived responsiveness. However, consider the error handling implications:

If props.onConfirm() fails, the dialog is already closed and users might miss error feedback

The loading state (setLoading(false)) will still execute, but the visual indicator might not be visible to users

Ensure that error handling in the calling components provides adequate user feedback when confirmation fails.

apps/dashboard/app/(app)/settings/billing/page.tsx (2)

10-10: Good addition of Suspense import.

The import is correctly added for the Suspense component usage below.

168-201: Excellent implementation of Suspense boundary.

This addition significantly improves the user experience by:

Providing immediate loading feedback while the Client component initializes

Handling any potential async operations in the Client component gracefully

Maintaining consistent UI with WorkspaceNavbar in the fallback

Using appropriate loading animation and placeholder styling

The fallback UI design is well-thought-out and maintains visual consistency with the rest of the application.

apps/dashboard/app/(app)/settings/billing/client.tsx (7)

43-84: Excellent refactoring to centralize mutation logic.

The introduction of the Mutations function provides several benefits:

DRY principle: Eliminates code duplication across components

Consistency: All mutations have consistent error handling and success messages

Maintainability: Single place to manage mutation definitions

Reusability: Multiple components can easily access the same mutations

The uncancelSubscription mutation is a valuable addition that enables users to resume canceled subscriptions, improving the user experience.

87-87: Clean integration of centralized mutations.

The Client component now uses the centralized mutation pattern consistently, maintaining the same functionality while improving code organization.

160-161: Consistent usage of centralized mutations for subscription updates.

The update subscription functionality correctly uses the new mutations.updateSubscription pattern.

179-181: Proper implementation of create subscription functionality.

The create subscription flow correctly uses the new mutations.createSubscription pattern.

240-240: Correct implementation of cancel subscription functionality.

The cancel subscription functionality properly uses the new mutations.cancelSubscription pattern.

273-273: Good adoption of centralized mutations in CancelAlert.

The CancelAlert component correctly adopts the new centralized mutation pattern, demonstrating the reusability of the Mutations function.

296-298: Proper implementation of uncancel subscription functionality.

The uncancel subscription feature is well-implemented with:

Proper loading state management

Disabled state during mutation

Clear user interaction through the "Resubscribe" button

This provides users with a seamless way to resume their canceled subscriptions.

✨ Finishing Touches

📝 Generate Docstrings

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

github-actions · 2025-05-29T17:23:59Z

Thank you for following the naming conventions for pull request titles! 🙏

ogzhanolguncu · 2025-05-29T17:56:56Z

@mcstepp Working great tested against prod. Can you update lock file so we can merge?

perkinsjr · 2025-05-29T17:57:47Z

Please don't update this branch with main for a few minutes

Fixes an issue where stripe is trying to render something before it's ready. I also did some change to the way mutations are stored. I also fixed the annoying double dialog on confirmation

mcstepp · 2025-05-29T17:58:59Z

oh shit

perkinsjr · 2025-05-29T17:59:13Z

Give me a few mins it should be fine

perkinsjr · 2025-05-29T18:02:02Z

You are good to merge

mcstepp · 2025-05-29T18:06:12Z

dang it. lemme see something

mcstepp · 2025-05-29T18:35:12Z

please sir may i have another approval?

Also some API tests are failing with 500 errors and i aint touched it

ogzhanolguncu · 2025-05-29T18:44:34Z

sure

ogzhanolguncu · 2025-05-29T18:44:38Z

🫡

ogzhanolguncu · 2025-05-29T18:44:57Z

@mcstepp is it normal to have that big lock file? 😄

perkinsjr · 2025-05-29T18:48:59Z

There shouldn’t be a lock file at all for a single file change

mcstepp · 2025-05-29T18:49:12Z

I had to update my packages

mcstepp · 2025-05-29T18:49:30Z

i just ran pnpm i to make sure I picked up stuff from the last two weeks

mcstepp · 2025-05-29T18:49:45Z

on main

perkinsjr · 2025-05-29T18:50:15Z

pnpm i shouldn’t generate a new lock file unless you explicitly upgrade a package or your using a different pnpm version than we are

perkinsjr · 2025-05-29T18:51:17Z

e.g you aren’t using corepack to make sure you are on the same version.

ogzhanolguncu · 2025-05-29T18:51:24Z

I just double checked them most them look innocent minor updates

ogzhanolguncu · 2025-05-29T18:51:40Z

but yes we should use corepack

perkinsjr · 2025-05-29T18:52:05Z

innocent minor changes shouldn’t go in a file change. That’s a recipe for fixing one thing and breaking ten.

mcstepp · 2025-05-29T18:52:51Z

I can yeet the lock file

perkinsjr · 2025-05-29T18:53:40Z

Please. 🙏

ogzhanolguncu · 2025-05-29T19:00:31Z

Now Meg's branch is mixed with James latest PR I'm so confused 😄

mcstepp · 2025-05-29T19:00:40Z

its fiiiiiine

ogzhanolguncu · 2025-05-29T19:00:58Z

is it or you baiting me? 😄

perkinsjr · 2025-05-29T19:01:30Z

It is fine; you can merge those changes were mine

ogzhanolguncu · 2025-05-29T19:02:25Z

good to go

fix: pass only one child to the tooltip in the recursive permission t…

0442bf6

…ree component

mcstepp requested review from MichaelUnkey, chronark, ogzhanolguncu and perkinsjr as code owners May 29, 2025 17:23

[autofix.ci] apply automated fixes

f60fe9e

vercel bot deployed to Preview – engineering May 29, 2025 17:29 View deployment

vercel bot deployed to Preview – dashboard May 29, 2025 17:29 View deployment

ogzhanolguncu self-assigned this May 29, 2025

Fixes Stripe

a9bce24

Fixes an issue where stripe is trying to render something before it's ready. I also did some change to the way mutations are stored. I also fixed the annoying double dialog on confirmation

vercel bot deployed to Preview – dashboard May 29, 2025 18:01 View deployment

ogzhanolguncu approved these changes May 29, 2025

View reviewed changes

mcstepp added 2 commits May 29, 2025 14:54

delete lock to use main's lock

a2c1a01

revert lock

f4ad07b

mcstepp force-pushed the ENG-1802-permissions-roles branch from 8a92af9 to f4ad07b Compare May 29, 2025 18:58

vercel bot deployed to Preview – engineering May 29, 2025 19:00 View deployment

vercel bot deployed to Preview – dashboard May 29, 2025 19:02 View deployment

ogzhanolguncu approved these changes May 29, 2025

View reviewed changes

ogzhanolguncu added this pull request to the merge queue May 29, 2025

Merged via the queue into main with commit 1bc4f95 May 29, 2025
30 checks passed

ogzhanolguncu deleted the ENG-1802-permissions-roles branch May 29, 2025 19:07

coderabbitai bot mentioned this pull request Oct 21, 2025

fix: User can add a credit card and select their tier #4128

Merged

18 tasks

Conversation

mcstepp commented May 29, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

How should this be tested?

Checklist

Required

Appreciated

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

linear bot commented May 29, 2025

Uh oh!

changeset-bot bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested labels

Suggested reviewers

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

github-actions bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ogzhanolguncu commented May 29, 2025

Uh oh!

perkinsjr commented May 29, 2025

Uh oh!

mcstepp commented May 29, 2025

Uh oh!

perkinsjr commented May 29, 2025

Uh oh!

perkinsjr commented May 29, 2025

Uh oh!

mcstepp commented May 29, 2025

Uh oh!

mcstepp commented May 29, 2025

Uh oh!

ogzhanolguncu commented May 29, 2025

Uh oh!

ogzhanolguncu commented May 29, 2025

Uh oh!

ogzhanolguncu commented May 29, 2025

Uh oh!

perkinsjr commented May 29, 2025

Uh oh!

mcstepp commented May 29, 2025

Uh oh!

mcstepp commented May 29, 2025

Uh oh!

mcstepp commented May 29, 2025

Uh oh!

perkinsjr commented May 29, 2025

Uh oh!

perkinsjr commented May 29, 2025

Uh oh!

ogzhanolguncu commented May 29, 2025

Uh oh!

ogzhanolguncu commented May 29, 2025

Uh oh!

perkinsjr commented May 29, 2025

Uh oh!

mcstepp commented May 29, 2025

Uh oh!

perkinsjr commented May 29, 2025

mcstepp commented May 29, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented May 29, 2025 •

edited

Loading

vercel bot commented May 29, 2025 •

edited

Loading

coderabbitai bot commented May 29, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

github-actions bot commented May 29, 2025 •

edited

Loading