Membership settings rework

[brendan-kellam]

Summary by CodeRabbit

• New Features

  • Introduced a new settings page for managing organization members, including pending invites and comprehensive team management.
  • Rolled out a custom dropdown component that enhances the selection experience.
  • Launched a dedicated invitation card to streamline inviting new members.

• Refactor

  • Improved role-based access control with refined permission checks and clearer error messaging.
  • Streamlined secret handling with more flexible form validations.

• Style

  • Updated layout and sidebar navigation for a cleaner, more responsive user interface.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This pull request introduces several changes across the codebase. A new dependency (@radix-ui/react-select) is added to the web package. The organization membership flow is updated by enhancing the withOrgMembership function with a new role parameter, additional invite and member management functions, and removal of redundant code. Changes are also made to UI components and layout files for settings, including new components for member and invite management. Additionally, a custom Select component is integrated using Radix UI, and error codes are updated. A new data function for fetching a user’s role is also added.

Changes

File(s)	Change Summary
packages/web/package.json	Added dependency @radix-ui/react-select version ^2.1.6.
packages/web/src/actions.ts	Updated withOrgMembership signature (added minRequiredRole and callback parameter change), removed withOwner, renamed removeMember to removeMemberFromOrg, and added functions: createInvites, cancelInvite, leaveOrg, getOrgMembers, getOrgInvites.
packages/web/src/app/[domain]/secrets/secretsTable.tsx	Modified the form schema (removed max length on value) and refactored secret key fetching logic into the useEffect hook.
packages/web/src/app/[domain]/settings/(general)/page.tsx packages/web/src/app/[domain]/settings/components/header.tsx	Added new GeneralSettingsPage and a new Header component with configurable top margin and class names.
packages/web/src/app/[domain]/settings/components/inviteTable.tsx .../inviteTableColumns.tsx .../memberInviteForm.tsx .../memberTable.tsx .../memberTableColumns.tsx	Removed various invite and member table components, associated interfaces, and functions to streamline the settings display.
packages/web/src/app/[domain]/settings/layout.tsx	Restructured layout: removed the Separator import, integrated the new Header component, updated sidebar navigation items, and reorganized the JSX structure for improved presentation.
packages/web/src/app/[domain]/settings/members/components/inviteMemberCard.tsx .../invitesList.tsx .../membersList.tsx .../members/page.tsx	Introduced new components and a page for managing organization invites and members with state management, filtering, and role-based checks.
packages/web/src/components/ui/select.tsx	Added a new custom Select component and its subcomponents (e.g., SelectTrigger, SelectContent) built with Radix UI primitives.
packages/web/src/data/user.ts	Introduced getUserRoleInOrg, an asynchronous function to retrieve a user’s role within an organization using Prisma.
packages/web/src/lib/errorCodes.ts	Updated error codes by removing SELF_INVITE and MEMBER_NOT_OWNER and adding INSUFFICIENT_PERMISSIONS, OWNER_CANNOT_LEAVE_ORG, and INVALID_INVITE.

Sequence Diagram(s)

Organization Membership Flow

sequenceDiagram
    participant User
    participant withOrgMembership
    participant RoleChecker as getAuthorizationPrecendence
    participant Service
    User->>withOrgMembership: Initiate action with orgId and userRole
    withOrgMembership->>RoleChecker: Compare userRole vs. minRequiredRole
    RoleChecker-->>withOrgMembership: Return precedence result
    alt Insufficient role
        withOrgMembership-->>User: Return ServiceError (403)
    else Sufficient role
        withOrgMembership->>Service: Execute callback with { orgId, userRole }
        Service-->>withOrgMembership: Return result
        withOrgMembership-->>User: Return success
    end

Loading

Invite Member Process

sequenceDiagram
    participant User
    participant InviteMemberCard
    participant API as createInvites
    participant Toast
    User->>InviteMemberCard: Submit invite form with emails
    InviteMemberCard->>API: Call createInvites with email list
    API-->>InviteMemberCard: Return success/failure response
    InviteMemberCard->>Toast: Display notification
    InviteMemberCard-->>User: Confirm invitation status

Loading

Possibly related PRs

• enforce owner perms #191: Enhances role-based access in the actions.ts file. This PR makes similar modifications by consolidating permission checks and streamlining the roles management functions.

Poem

I’m a little rabbit, hopping with glee,
Code carrots abound, fresh as can be.
New roles and invites now dance in the night,
With checks and balances, everything’s right.
In a field of code, I nibble and play—
Celebrating changes in a joyous way!
🥕🐇 Happy coding, have a brilliant day!

---

🪧 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.
  • Generate unit testing code for this file.
  • 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 generate unit testing code for this file.
  • @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 generate unit testing code.
  • @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.

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. (Beta)
• @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.

[brendan-kellam]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (14)

packages/web/src/app/[domain]/settings/members/page.tsx (4)

1-12: Ensure consistent error handling vs. returning null.
Here, when the session or data lookups fail, the function returns null, leading to a blank page. You might consider rendering a user-friendly error message or redirecting to a dedicated error page to improve the user experience.

---

22-27: Encapsulate fallback logic for session checks.
Lines 24–26 return null when no session exists. To improve clarity and reuse, consider extracting this logic into a helper, if repeated in multiple components.

---

28-46: Use consistent null checks or typed errors in data fetches.
Instead of returning null upon not finding org, user, or userRoleInOrg, you might throw or display an error message to the user. This would make it clear which part of the fetch logic failed.

---

55-94: UI structure and tabbed interface.
The tab setup for members and invites is properly segmented. Consider adding loading states for large organizations, especially if members and invites arrays can be large.

packages/web/src/actions.ts (4)

61-68: Refine naming for getAuthorizationPrecendence.
The helper function reliably returns numeric precedence, though consider a name like getRolePrecedence for clarity. Otherwise, logic is correct for current roles.

---

139-139: Check for potential key collisions.
When creating secrets, there’s no explicit check for existing keys. If overwriting an existing secret is undesired, add a check/unique constraint.

---

161-161: Deletion guard.
Similar to creation, consider verifying the secret exists before deleting it to improve error clarity or idempotency.

---

383-441: createInvites: validate concurrency and partial errors.
All invites are created in a single transaction. If any creation fails, they all roll back, which is good. However, partial successes aren’t possible if more than one email fails. Consider clarifying that behavior in user feedback.

packages/web/src/app/[domain]/settings/(general)/page.tsx (1)

1-6: Expand placeholder page.
The component currently returns just a <p>todo</p>. Consider implementing additional content or a clear layout for general settings, or remove until ready to avoid confusion.

packages/web/src/app/[domain]/settings/components/header.tsx (1)

11-22: Consider adding aria-role for better accessibility.

The component implementation looks good, but could benefit from accessibility improvements.

-        <div className={cn("mb-16", className)}>
+        <div role="banner" className={cn("mb-16", className)}>

packages/web/src/data/user.ts (1)

28-39: Add type safety and error handling.

The function implementation could be improved with:

1. Type safety for the role return value
2. Error handling for database failures

-export const getUserRoleInOrg = async (userId: string, orgId: number) => {
+import { Role } from '@prisma/client';
+
+export const getUserRoleInOrg = async (userId: string, orgId: number): Promise<Role | undefined> => {
+  try {
     const userToOrg = await prisma.userToOrg.findUnique({
         where: {
             orgId_userId: {
                 userId,
                 orgId,
             }
         },
     });
 
     return userToOrg?.role;
+  } catch (error) {
+    console.error('Failed to fetch user role:', error);
+    throw new Error('Failed to fetch user role');
+  }
 }

packages/web/src/app/[domain]/settings/members/components/inviteMemberCard.tsx (1)

20-28: Consider adding maximum length validation for email addresses.

While the current validation ensures unique email addresses, it's good practice to add a maximum length constraint to prevent potential abuse.

 const formSchema = z.object({
     emails: z.array(z.object({
-        email: z.string().email()
+        email: z.string().email().max(254)
     }))
     .refine((emails) => {
         const emailSet = new Set(emails.map(e => e.email.toLowerCase()));
         return emailSet.size === emails.length;
     }, "Duplicate email addresses are not allowed")
 });

packages/web/src/app/[domain]/settings/members/components/invitesList.tsx (1)

40-53: Consider memoizing filter predicates.

The useMemo implementation could be optimized by separating the filter predicates.

 const filteredInvites = useMemo(() => {
+    const filterBySearch = (invite: Invite) => {
+        const searchLower = searchQuery.toLowerCase();
+        return invite.email.toLowerCase().includes(searchLower);
+    };
+
+    const sortByDate = (a: Invite, b: Invite) => {
+        return dateSort === "newest"
+            ? b.createdAt.getTime() - a.createdAt.getTime()
+            : a.createdAt.getTime() - b.createdAt.getTime();
+    };
+
     return invites
-        .filter((invite) => {
-            const searchLower = searchQuery.toLowerCase();
-            const matchesSearch =
-                invite.email.toLowerCase().includes(searchLower);
-            return matchesSearch;
-        })
-        .sort((a, b) => {
-            return dateSort === "newest"
-                ? b.createdAt.getTime() - a.createdAt.getTime()
-                : a.createdAt.getTime() - b.createdAt.getTime()
-        });
+        .filter(filterBySearch)
+        .sort(sortByDate);
 }, [invites, searchQuery, dateSort]);

packages/web/src/app/[domain]/settings/members/components/membersList.tsx (1)

48-62: Consider extracting filter and sort logic into custom hooks.

The filtering and sorting logic is similar to invitesList.tsx. Consider creating reusable hooks.

Create a new hook useFilteredList.ts:

interface FilterOptions<T> {
  items: T[];
  searchFields: (item: T) => string[];
  searchQuery: string;
  dateField: keyof T;
  dateSort: "newest" | "oldest";
  additionalFilters?: (item: T) => boolean;
}

export function useFilteredList<T>({
  items,
  searchFields,
  searchQuery,
  dateField,
  dateSort,
  additionalFilters
}: FilterOptions<T>) {
  return useMemo(() => {
    return items
      .filter((item) => {
        const searchLower = searchQuery.toLowerCase();
        const matchesSearch = searchFields(item)
          .some(field => field.toLowerCase().includes(searchLower));
        return matchesSearch && (additionalFilters ? additionalFilters(item) : true);
      })
      .sort((a, b) => {
        const aDate = (a[dateField] as Date).getTime();
        const bDate = (b[dateField] as Date).getTime();
        return dateSort === "newest" ? bDate - aDate : aDate - bDate;
      });
  }, [items, searchQuery, dateSort, additionalFilters]);
}

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between e09b21f and 13d1c46.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (20)

• packages/web/package.json (1 hunks)
• packages/web/src/actions.ts (25 hunks)
• packages/web/src/app/[domain]/secrets/secretsTable.tsx (2 hunks)
• packages/web/src/app/[domain]/settings/(general)/page.tsx (1 hunks)
• packages/web/src/app/[domain]/settings/components/header.tsx (1 hunks)
• packages/web/src/app/[domain]/settings/components/inviteTable.tsx (0 hunks)
• packages/web/src/app/[domain]/settings/components/inviteTableColumns.tsx (0 hunks)
• packages/web/src/app/[domain]/settings/components/memberInviteForm.tsx (0 hunks)
• packages/web/src/app/[domain]/settings/components/memberTable.tsx (0 hunks)
• packages/web/src/app/[domain]/settings/components/memberTableColumns.tsx (0 hunks)
• packages/web/src/app/[domain]/settings/components/sidebar-nav.tsx (1 hunks)
• packages/web/src/app/[domain]/settings/layout.tsx (2 hunks)
• packages/web/src/app/[domain]/settings/members/components/inviteMemberCard.tsx (1 hunks)
• packages/web/src/app/[domain]/settings/members/components/invitesList.tsx (1 hunks)
• packages/web/src/app/[domain]/settings/members/components/membersList.tsx (1 hunks)
• packages/web/src/app/[domain]/settings/members/page.tsx (1 hunks)
• packages/web/src/app/[domain]/settings/page.tsx (0 hunks)
• packages/web/src/components/ui/select.tsx (1 hunks)
• packages/web/src/data/user.ts (1 hunks)
• packages/web/src/lib/errorCodes.ts (1 hunks)

💤 Files with no reviewable changes (6)

• packages/web/src/app/[domain]/settings/components/memberInviteForm.tsx
• packages/web/src/app/[domain]/settings/components/inviteTable.tsx
• packages/web/src/app/[domain]/settings/components/inviteTableColumns.tsx
• packages/web/src/app/[domain]/settings/components/memberTableColumns.tsx
• packages/web/src/app/[domain]/settings/page.tsx
• packages/web/src/app/[domain]/settings/components/memberTable.tsx

🔇 Additional comments (25)

packages/web/src/app/[domain]/settings/members/page.tsx (3)

13-21: Interface composition looks good.
The MembersSettingsPageProps interface is clearly defined and provides a strong contract for the function's parameters. No issues found here.

---

48-52: Validate invites data handling.
When invites is a service error, the function returns null. If there's important context to convey (e.g., “Couldn’t load invites”), consider a user-facing message to help debugging.

---

53-54: Tab logic defaults to "members".
Good approach to fallback on a default tab if none is specified. This ensures a consistent user experience.

packages/web/src/actions.ts (14)

37-42: Added minRequiredRole to withOrgMembership.
This enhances role-based access control, allowing fine-grained role requirements. The approach looks solid.

---

71-82: Permission check logic is straightforward.
Using numeric precedence simplifies comparisons. The fallback error for insufficient permissions is properly structured.

---

117-119: Integration with withOrgMembership.
Line 119 ensures secrets are fetched only by authenticated org members. This usage is consistent and secure.

---

188-188: Promote consistent pattern.
All connection fetch methods use withOrgMembership seamlessly. This line nicely follows the established pattern.

---

379-381: getCurrentUserRole usage.
The function now returns userRole. Ensure you handle any needed revalidation on the frontend or server for mission-critical actions.

---

443-467: cancelInvite function looks good.
It properly checks existences and permissions, ensuring only owners can cancel. The transaction scope is small, so the risk of concurrency issues is minimal.

---

532-532: Initial pointer to transferOwnership.
Ensure you reflect updated ownership in places that rely on OrgRole. This line alone doesn’t show an immediate issue, but continued checks in the function are crucial.

---

534-534: Minimum required role set to OWNER.
This is consistent with the concept that only an owner can transfer ownership. Good usage of the new minRequiredRole param.

---

795-816: getCustomerPortalSessionLink with minRequiredRole = OWNER.
This ensures only owners can manage billing details. The approach is consistent with your role model. Make sure the UI warns non-owners accordingly.

---

864-885: changeSubscriptionBillingEmail with minRequiredRole = OWNER.
Again, ensures that only an owner can modify billing. The changes appear consistent.

---

908-966: removeMemberFromOrg: concurrency caution.
Decrementing seats in Stripe subscription is performed inside a single transaction with Prisma. Though the seat update to Stripe is separate. If concurrency arises, consider implementing a lock or an external queue system for consistent seat counts.

---

968-1022: leaveOrg: Restricts owners from leaving directly.
Good safeguard to prevent an org without an owner. The seat count decrement is consistent with other membership changes.

---

1041-1062: getOrgMembers approach.
Fetching members with include: { user: true } is appropriate for gathering relevant user info. The returned structure is straightforward.

---

1065-1080: getOrgInvites approach.
Similarly straightforward for invites. No immediate concerns regarding performance or security.

packages/web/src/app/[domain]/settings/components/header.tsx (1)

5-9: LGTM! Well-structured interface definition.

The HeaderProps interface is well-defined with appropriate types and optional flags.

packages/web/src/lib/errorCodes.ts (1)

15-18: LGTM! Error codes align with membership rework.

The new error codes provide better granularity for permission handling and organization-specific scenarios.

packages/web/src/app/[domain]/settings/components/sidebar-nav.tsx (1)

21-21: LGTM! Improved layout behavior.

The class name changes improve the default layout while maintaining responsive behavior.

packages/web/src/app/[domain]/settings/layout.tsx (1)

32-46: Well-structured layout with improved organization!

The new layout structure with flex classes provides better responsiveness and visual hierarchy. The centered content with max-width constraint ensures consistent presentation across different screen sizes.

packages/web/src/components/ui/select.tsx (1)

1-160: Excellent implementation of the Select component!

The component is well-structured using Radix UI primitives, ensuring accessibility and proper keyboard navigation. The implementation includes:

• Type-safe components with proper ref forwarding
• Comprehensive set of subcomponents for different use cases
• Proper styling and animations

packages/web/src/app/[domain]/settings/members/components/invitesList.tsx (2)

20-29: LGTM! Well-defined types and interfaces.

The types are clear, concise, and properly structured.

---

122-135: Verify clipboard API availability.

The clipboard operations should be wrapped in a try-catch block with proper feature detection.

-navigator.clipboard.writeText(url)
+if (navigator?.clipboard?.writeText) {
+    try {
+        await navigator.clipboard.writeText(url)
+        toast({
+            description: `✅ Copied invite link for ${invite.email} to clipboard`
+        })
+    } catch (error) {
+        toast({
+            description: "❌ Failed to copy invite link"
+        })
+    }
+} else {
+    toast({
+        description: "❌ Clipboard API not supported in this browser"
+    })
+}

packages/web/package.json (1)

52-52:

✅ Verification successful

Verify Radix UI package version compatibility.

The new @radix-ui/react-select package is added with version ^2.1.6. Let's verify its compatibility with other Radix UI packages and check for any security advisories.

---

🏁 Script executed:

#!/bin/bash
# Check for compatibility issues and security advisories

# Get all installed Radix UI package versions
echo "Installed Radix UI package versions:"
npm list | grep "@radix-ui"

# Check for security advisories
gh api graphql -f query='
{
  securityVulnerabilities(first: 5, ecosystem: NPM, package: "@radix-ui/react-select") {
    nodes {
      advisory {
        summary
        severity
        publishedAt
      }
      vulnerableVersionRange
      firstPatchedVersion {
        identifier
      }
    }
  }
}'

Length of output: 466

---

Radix UI Dependency (@radix-ui/react-select) Verified: No Compatibility or Security Concerns

• The dependency was added at version ^2.1.6 in packages/web/package.json (line 52).
• Our compatibility check against other installed Radix UI packages did not reveal any version conflicts.
• A security scan using GitHub’s advisory API returned no vulnerabilities for this package.

No further action is required.