feat: relax admin role (#1019)

Author: olzhik11

frontend/components/workspace/purchase-seats-dialog.tsx

@@ -1,8 +1,16 @@
 import { Loader2 } from "lucide-react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
@@ -23,6 +31,20 @@ export default function PurchaseSeatsDialog({
   const [quantity, setQuantity] = useState<number | null>(0);
   const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
+
+  const handleUpdateSeats = useCallback(async () => {
+    setIsLoading(true);
+    await fetch(`/api/workspaces/${workspaceId}/update-seats`, {
+      method: "POST",
+      body: JSON.stringify({
+        quantity: quantity,
+      }),
+    });
+    setIsLoading(false);
+    setIsOpen(false);
+    onUpdate?.();
+  }, [onUpdate, quantity, workspaceId]);
+
   return (
     <Dialog
       onOpenChange={(open) => {
@@ -38,38 +60,29 @@ export default function PurchaseSeatsDialog({
           Add seats
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>Add seats</DialogTitle>
+          <DialogDescription>Purchase additional seats for your workspace.</DialogDescription>
         </DialogHeader>
-        <p>Purchase additional seats for your workspace.</p>
-        <Label className="text-sm text-secondary-foreground">
-          Your current tier includes {seatsIncludedInTier} seats. You have {currentQuantity - seatsIncludedInTier}{" "}
-          additional seats. Purchasing seats will charge your payment method on file.
-        </Label>
-        <Input
-          type="number"
-          onChange={(e) =>
-            e.target.value === "" ? setQuantity(null) : setQuantity(Math.max(0, parseInt(e.target.value)))
-          }
-          value={quantity?.toString() ?? ""}
-        />
+        <div className="grid gap-2">
+          <Label className="text-secondary-foreground text-xs">
+            Your current tier includes {seatsIncludedInTier} seats. You have {currentQuantity - seatsIncludedInTier}{" "}
+            additional seats. Purchasing seats will charge your payment method on file.
+          </Label>
+          <Input
+            type="number"
+            onChange={(e) =>
+              e.target.value === "" ? setQuantity(null) : setQuantity(Math.max(0, parseInt(e.target.value)))
+            }
+            value={quantity?.toString() ?? ""}
+          />
+        </div>
         <DialogFooter>
           <Button
             className="flex flex-row items-center"
             disabled={isLoading || quantity === null || quantity <= 0}
-            onClick={async () => {
-              setIsLoading(true);
-              await fetch(`/api/workspaces/${workspaceId}/update-seats`, {
-                method: "POST",
-                body: JSON.stringify({
-                  quantity: quantity,
-                }),
-              });
-              setIsLoading(false);
-              setIsOpen(false);
-              onUpdate?.();
-            }}
+            onClick={handleUpdateSeats}
           >
             {isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
             Purchase

frontend/components/workspace/workspace-users.tsx

@@ -108,7 +108,7 @@ export default function WorkspaceUsers({
 
   const renderRoleCell = useCallback(
     (user: WorkspaceUser) => {
-      if (isOwner && user.role !== "owner" && !isCurrentUser(user)) {
+      if (canManageUsers && user.role !== "owner" && !isCurrentUser(user)) {
         return (
           <Select
             value={user.role}
@@ -128,7 +128,7 @@ export default function WorkspaceUsers({
 
       return <span className="text-sm">{user.role}</span>;
     },
-    [handleRoleChange, isCurrentUser, isOwner, updatingRoleUserId]
+    [canManageUsers, handleRoleChange, isCurrentUser, updatingRoleUserId]
   );
 
   const renderActionCell = useCallback(
@@ -193,7 +193,7 @@ export default function WorkspaceUsers({
     <>
       <SettingsSectionHeader title="Members" description="Manage workspace members and their roles" />
 
-      {isOwner && (
+      {canManageUsers && (
         <SettingsSection>
           <SettingsSectionHeader
             size="sm"

frontend/lib/actions/workspace/index.ts

@@ -249,7 +249,7 @@ export const getWorkspaceUsage = async (workspaceId: string): Promise<WorkspaceU
 export const updateRole = async (input: z.infer<typeof UpdateRoleSchema>) => {
   const { workspaceId, userId, role } = UpdateRoleSchema.parse(input);
 
-  const currentRole = await checkUserWorkspaceRole({ workspaceId, roles: ["owner"] });
+  await checkUserWorkspaceRole({ workspaceId, roles: ["owner", "admin"] });
 
   const [targetUser] = await db
     .select({ memberRole: membersOfWorkspaces.memberRole })