mirror of
https://github.com/andwati/dokploy.git
synced 2026-11-06 04:02:16 +00:00
feat: add comprehensive permission tests and enhance permission checks in components
- Introduced new test files for permission checks, including `check-permission.test.ts`, `enterprise-only-resources.test.ts`, `resolve-permissions.test.ts`, and `service-access.test.ts`. - Implemented permission checks in various components to ensure actions are gated by user permissions, including `ShowTraefikConfig`, `UpdateTraefikConfig`, `ShowVolumes`, `ShowDomains`, and others. - Enhanced the logic for displaying UI elements based on user permissions, ensuring that only authorized users can access or modify resources.
This commit is contained in:
Mauricio Siu
@@ -32,7 +32,6 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
const addInvitation = z.object({
|
||||
@@ -40,7 +39,7 @@ const addInvitation = z.object({
|
||||
.string()
|
||||
.min(1, "Email is required")
|
||||
.email({ message: "Invalid email" }),
|
||||
role: z.enum(["member", "admin"]),
|
||||
role: z.string().min(1, "Role is required"),
|
||||
notificationId: z.string().optional(),
|
||||
});
|
||||
|
||||
@@ -49,13 +48,14 @@ type AddInvitation = z.infer<typeof addInvitation>;
|
||||
export const AddInvitation = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const utils = api.useUtils();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { data: isCloud } = api.settings.isCloud.useQuery();
|
||||
const { data: emailProviders } =
|
||||
api.notification.getEmailProviders.useQuery();
|
||||
const { mutateAsync: inviteMember, isPending: isInviting } =
|
||||
api.organization.inviteMember.useMutation();
|
||||
const { mutateAsync: sendInvitation } = api.user.sendInvitation.useMutation();
|
||||
const { data: customRoles } = api.customRole.all.useQuery();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { data: activeOrganization } = api.organization.active.useQuery();
|
||||
|
||||
const form = useForm<AddInvitation>({
|
||||
defaultValues: {
|
||||
@@ -70,19 +70,15 @@ export const AddInvitation = () => {
|
||||
}, [form, form.formState.isSubmitSuccessful, form.reset]);
|
||||
|
||||
const onSubmit = async (data: AddInvitation) => {
|
||||
setIsLoading(true);
|
||||
const result = await authClient.organization.inviteMember({
|
||||
email: data.email.toLowerCase(),
|
||||
role: data.role,
|
||||
organizationId: activeOrganization?.id,
|
||||
});
|
||||
try {
|
||||
const result = await inviteMember({
|
||||
email: data.email.toLowerCase(),
|
||||
role: data.role,
|
||||
});
|
||||
|
||||
if (result.error) {
|
||||
setError(result.error.message || "");
|
||||
} else {
|
||||
if (!isCloud && data.notificationId) {
|
||||
await sendInvitation({
|
||||
invitationId: result.data.id,
|
||||
invitationId: result!.id,
|
||||
notificationId: data.notificationId || "",
|
||||
})
|
||||
.then(() => {
|
||||
@@ -96,10 +92,11 @@ export const AddInvitation = () => {
|
||||
}
|
||||
setError(null);
|
||||
setOpen(false);
|
||||
} catch (error: any) {
|
||||
setError(error.message || "Failed to create invitation");
|
||||
}
|
||||
|
||||
utils.organization.allInvitations.invalidate();
|
||||
setIsLoading(false);
|
||||
};
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
@@ -159,6 +156,11 @@ export const AddInvitation = () => {
|
||||
<SelectContent>
|
||||
<SelectItem value="member">Member</SelectItem>
|
||||
<SelectItem value="admin">Admin</SelectItem>
|
||||
{customRoles?.map((role) => (
|
||||
<SelectItem key={role.role} value={role.role}>
|
||||
{role.role}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
@@ -212,7 +214,7 @@ export const AddInvitation = () => {
|
||||
)}
|
||||
<DialogFooter className="flex w-full flex-row">
|
||||
<Button
|
||||
isLoading={isLoading}
|
||||
isLoading={isInviting}
|
||||
form="hook-form-add-invitation"
|
||||
type="submit"
|
||||
>
|
||||
|
||||
@@ -173,9 +173,11 @@ type AddPermissions = z.infer<typeof addPermissions>;
|
||||
|
||||
interface Props {
|
||||
userId: string;
|
||||
role?: string;
|
||||
}
|
||||
|
||||
export const AddUserPermissions = ({ userId }: Props) => {
|
||||
export const AddUserPermissions = ({ userId, role }: Props) => {
|
||||
const isCustomRole = !!role && !["owner", "admin", "member"].includes(role);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { data: projects } = api.project.allForPermissions.useQuery(undefined, {
|
||||
enabled: isOpen,
|
||||
@@ -284,226 +286,237 @@ export const AddUserPermissions = ({ userId }: Props) => {
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="grid grid-cols-1 md:grid-cols-2 w-full gap-4"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canCreateProjects"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Create Projects</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to create projects
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canDeleteProjects"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Delete Projects</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to delete projects
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canCreateServices"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Create Services</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to create services
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canDeleteServices"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Delete Services</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to delete services
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canCreateEnvironments"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Create Environments</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to create environments
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canDeleteEnvironments"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Delete Environments</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to delete environments
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToTraefikFiles"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to Traefik Files</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to access to the Traefik Tab Files
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToDocker"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to Docker</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to access to the Docker Tab
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToAPI"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to API/CLI</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to access to the API/CLI
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToSSHKeys"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to SSH Keys</FormLabel>
|
||||
<FormDescription>
|
||||
Allow to users to access to the SSH Keys section
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToGitProviders"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to Git Providers</FormLabel>
|
||||
<FormDescription>
|
||||
Allow to users to access to the Git Providers section
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{isCustomRole && (
|
||||
<div className="md:col-span-2 rounded-lg border p-3 bg-muted/50 text-sm text-muted-foreground">
|
||||
This user has a custom role assigned. Capabilities are defined
|
||||
by the role. You can still manage which projects, environments,
|
||||
and services they can access below.
|
||||
</div>
|
||||
)}
|
||||
{!isCustomRole && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canCreateProjects"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Create Projects</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to create projects
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canDeleteProjects"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Delete Projects</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to delete projects
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canCreateServices"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Create Services</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to create services
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canDeleteServices"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Delete Services</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to delete services
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canCreateEnvironments"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Create Environments</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to create environments
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canDeleteEnvironments"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Delete Environments</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to delete environments
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToTraefikFiles"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to Traefik Files</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to access to the Traefik Tab Files
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToDocker"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to Docker</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to access to the Docker Tab
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToAPI"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to API/CLI</FormLabel>
|
||||
<FormDescription>
|
||||
Allow the user to access to the API/CLI
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToSSHKeys"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to SSH Keys</FormLabel>
|
||||
<FormDescription>
|
||||
Allow to users to access to the SSH Keys section
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="canAccessToGitProviders"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Access to Git Providers</FormLabel>
|
||||
<FormDescription>
|
||||
Allow to users to access to the Git Providers section
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="accessedProjects"
|
||||
|
||||
@@ -34,14 +34,14 @@ import {
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
const changeRoleSchema = z.object({
|
||||
role: z.enum(["admin", "member"]),
|
||||
role: z.string().min(1),
|
||||
});
|
||||
|
||||
type ChangeRoleSchema = z.infer<typeof changeRoleSchema>;
|
||||
|
||||
interface Props {
|
||||
memberId: string;
|
||||
currentRole: "admin" | "member";
|
||||
currentRole: string;
|
||||
userEmail: string;
|
||||
}
|
||||
|
||||
@@ -49,6 +49,10 @@ export const ChangeRole = ({ memberId, currentRole, userEmail }: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const utils = api.useUtils();
|
||||
|
||||
const { data: customRoles } = api.customRole.all.useQuery(undefined, {
|
||||
enabled: isOpen,
|
||||
});
|
||||
|
||||
const { mutateAsync, isError, error, isPending } =
|
||||
api.organization.updateMemberRole.useMutation();
|
||||
|
||||
@@ -125,6 +129,14 @@ export const ChangeRole = ({ memberId, currentRole, userEmail }: Props) => {
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Admin</SelectItem>
|
||||
<SelectItem value="member">Member</SelectItem>
|
||||
{customRoles?.map((customRole) => (
|
||||
<SelectItem
|
||||
key={customRole.role}
|
||||
value={customRole.role}
|
||||
>
|
||||
{customRole.role}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
@@ -132,6 +144,13 @@ export const ChangeRole = ({ memberId, currentRole, userEmail }: Props) => {
|
||||
<br />
|
||||
<strong>Member:</strong> Limited permissions, can be
|
||||
customized.
|
||||
{customRoles && customRoles.length > 0 && (
|
||||
<>
|
||||
<br />
|
||||
<strong>Custom roles:</strong> Enterprise-defined
|
||||
permissions.
|
||||
</>
|
||||
)}
|
||||
<br />
|
||||
<em className="text-muted-foreground text-xs">
|
||||
Note: Owner role is intransferible.
|
||||
|
||||
@@ -0,0 +1,891 @@
|
||||
import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
|
||||
import { Loader2, PlusIcon, ShieldCheck, TrashIcon, Users } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { EnterpriseFeatureGate } from "@/components/proprietary/enterprise-feature-gate";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AlertBlock } from "@/components/shared/alert-block";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
/** Labels and descriptions for each resource */
|
||||
const RESOURCE_META: Record<string, { label: string; description: string }> = {
|
||||
project: {
|
||||
label: "Projects",
|
||||
description: "Manage project creation and deletion",
|
||||
},
|
||||
service: {
|
||||
label: "Services",
|
||||
description:
|
||||
"Manage services (applications, databases, compose) within projects",
|
||||
},
|
||||
environment: {
|
||||
label: "Environments",
|
||||
description: "Manage environment creation, viewing, and deletion",
|
||||
},
|
||||
docker: {
|
||||
label: "Docker",
|
||||
description: "Access to Docker containers, images, and volumes management",
|
||||
},
|
||||
sshKeys: {
|
||||
label: "SSH Keys",
|
||||
description: "Manage SSH key configurations for servers and repositories",
|
||||
},
|
||||
gitProviders: {
|
||||
label: "Git Providers",
|
||||
description: "Access to Git providers (GitHub, GitLab, Bitbucket, Gitea)",
|
||||
},
|
||||
traefikFiles: {
|
||||
label: "Traefik Files",
|
||||
description: "Access to the Traefik file system configuration",
|
||||
},
|
||||
api: {
|
||||
label: "API / CLI",
|
||||
description: "Access to API keys and CLI usage",
|
||||
},
|
||||
// Enterprise-only resources
|
||||
volume: {
|
||||
label: "Volumes",
|
||||
description: "Manage persistent volumes and mounts attached to services",
|
||||
},
|
||||
deployment: {
|
||||
label: "Deployments",
|
||||
description: "Trigger, view, and cancel service deployments",
|
||||
},
|
||||
envVars: {
|
||||
label: "Service Env Vars",
|
||||
description: "View and edit environment variables of services",
|
||||
},
|
||||
projectEnvVars: {
|
||||
label: "Project Shared Env Vars",
|
||||
description: "View and edit shared environment variables at project level",
|
||||
},
|
||||
environmentEnvVars: {
|
||||
label: "Environment Shared Env Vars",
|
||||
description:
|
||||
"View and edit shared environment variables at environment level",
|
||||
},
|
||||
server: {
|
||||
label: "Servers",
|
||||
description: "Manage remote servers and nodes",
|
||||
},
|
||||
registry: {
|
||||
label: "Registries",
|
||||
description: "Manage Docker image registries",
|
||||
},
|
||||
certificate: {
|
||||
label: "Certificates",
|
||||
description: "Manage SSL/TLS certificates",
|
||||
},
|
||||
backup: {
|
||||
label: "Backups",
|
||||
description: "Manage database backups and restores",
|
||||
},
|
||||
volumeBackup: {
|
||||
label: "Volume Backups",
|
||||
description: "Manage Docker volume backups and restores",
|
||||
},
|
||||
schedule: {
|
||||
label: "Schedules",
|
||||
description: "Manage scheduled jobs (commands, deployments, scripts)",
|
||||
},
|
||||
domain: {
|
||||
label: "Domains",
|
||||
description: "Manage custom domains assigned to services",
|
||||
},
|
||||
destination: {
|
||||
label: "S3 Destinations",
|
||||
description:
|
||||
"Manage S3-compatible backup destinations (AWS, Cloudflare R2, etc.)",
|
||||
},
|
||||
notification: {
|
||||
label: "Notifications",
|
||||
description:
|
||||
"Manage notification providers (Slack, Discord, Telegram, etc.)",
|
||||
},
|
||||
member: {
|
||||
label: "Users",
|
||||
description: "Manage organization members, invitations, and roles",
|
||||
},
|
||||
logs: {
|
||||
label: "Logs",
|
||||
description: "View service and deployment logs",
|
||||
},
|
||||
monitoring: {
|
||||
label: "Monitoring",
|
||||
description: "View server and service metrics (CPU, RAM, disk)",
|
||||
},
|
||||
auditLog: {
|
||||
label: "Audit Logs",
|
||||
description: "View the audit log of actions performed in the organization",
|
||||
},
|
||||
};
|
||||
|
||||
/** Descriptions for each action within a resource */
|
||||
const ACTION_META: Record<
|
||||
string,
|
||||
Record<string, { label: string; description: string }>
|
||||
> = {
|
||||
project: {
|
||||
create: { label: "Create", description: "Create new projects" },
|
||||
delete: {
|
||||
label: "Delete",
|
||||
description: "Delete projects and all their content",
|
||||
},
|
||||
},
|
||||
service: {
|
||||
create: {
|
||||
label: "Create",
|
||||
description: "Create new services inside projects",
|
||||
},
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View services, logs, and deployments",
|
||||
},
|
||||
delete: {
|
||||
label: "Delete",
|
||||
description: "Delete services from projects",
|
||||
},
|
||||
},
|
||||
environment: {
|
||||
create: {
|
||||
label: "Create",
|
||||
description: "Create new environments in projects",
|
||||
},
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View environments and their services",
|
||||
},
|
||||
delete: {
|
||||
label: "Delete",
|
||||
description: "Delete environments and their content",
|
||||
},
|
||||
},
|
||||
docker: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View Docker containers, images, networks, and volumes",
|
||||
},
|
||||
},
|
||||
sshKeys: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View SSH key configurations",
|
||||
},
|
||||
create: {
|
||||
label: "Create",
|
||||
description: "Create and edit SSH keys",
|
||||
},
|
||||
delete: {
|
||||
label: "Delete",
|
||||
description: "Remove SSH keys",
|
||||
},
|
||||
},
|
||||
gitProviders: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View Git provider connections",
|
||||
},
|
||||
create: {
|
||||
label: "Create",
|
||||
description: "Create and update Git provider connections",
|
||||
},
|
||||
delete: {
|
||||
label: "Delete",
|
||||
description: "Remove Git provider connections",
|
||||
},
|
||||
},
|
||||
traefikFiles: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View Traefik configuration files",
|
||||
},
|
||||
write: {
|
||||
label: "Write",
|
||||
description: "Edit and save Traefik configuration files",
|
||||
},
|
||||
},
|
||||
api: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "Create and manage API keys for CLI access",
|
||||
},
|
||||
},
|
||||
volume: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View volumes and mounts attached to services",
|
||||
},
|
||||
create: { label: "Create", description: "Add and edit volumes and mounts" },
|
||||
delete: {
|
||||
label: "Delete",
|
||||
description: "Remove volumes and mounts from services",
|
||||
},
|
||||
},
|
||||
deployment: {
|
||||
read: { label: "Read", description: "View deployment history and status" },
|
||||
create: {
|
||||
label: "Deploy",
|
||||
description: "Trigger new deployments manually",
|
||||
},
|
||||
cancel: { label: "Cancel", description: "Cancel running deployments" },
|
||||
},
|
||||
envVars: {
|
||||
read: { label: "Read", description: "View environment variable values" },
|
||||
write: {
|
||||
label: "Write",
|
||||
description: "Create, update, and delete environment variables",
|
||||
},
|
||||
},
|
||||
projectEnvVars: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View project-level shared environment variables",
|
||||
},
|
||||
write: {
|
||||
label: "Write",
|
||||
description: "Edit project-level shared environment variables",
|
||||
},
|
||||
},
|
||||
environmentEnvVars: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View environment-level shared environment variables",
|
||||
},
|
||||
write: {
|
||||
label: "Write",
|
||||
description: "Edit environment-level shared environment variables",
|
||||
},
|
||||
},
|
||||
server: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View server list and connection details",
|
||||
},
|
||||
create: { label: "Create", description: "Add new remote servers" },
|
||||
delete: {
|
||||
label: "Delete",
|
||||
description: "Remove servers from the organization",
|
||||
},
|
||||
},
|
||||
registry: {
|
||||
read: { label: "Read", description: "View configured Docker registries" },
|
||||
create: { label: "Create", description: "Add new Docker registries" },
|
||||
delete: { label: "Delete", description: "Remove Docker registries" },
|
||||
},
|
||||
certificate: {
|
||||
read: { label: "Read", description: "View SSL/TLS certificates" },
|
||||
create: {
|
||||
label: "Create",
|
||||
description: "Issue and configure new certificates",
|
||||
},
|
||||
delete: { label: "Delete", description: "Remove certificates" },
|
||||
},
|
||||
backup: {
|
||||
read: { label: "Read", description: "View backup history and status" },
|
||||
create: { label: "Create", description: "Trigger manual backups" },
|
||||
delete: { label: "Delete", description: "Delete backup files" },
|
||||
restore: {
|
||||
label: "Restore",
|
||||
description: "Restore a database from a backup",
|
||||
},
|
||||
},
|
||||
volumeBackup: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View volume backup history and status",
|
||||
},
|
||||
create: {
|
||||
label: "Create",
|
||||
description: "Create and trigger volume backups",
|
||||
},
|
||||
update: {
|
||||
label: "Update",
|
||||
description: "Update volume backup configuration",
|
||||
},
|
||||
delete: { label: "Delete", description: "Delete volume backup files" },
|
||||
restore: {
|
||||
label: "Restore",
|
||||
description: "Restore a Docker volume from a backup",
|
||||
},
|
||||
},
|
||||
schedule: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View scheduled jobs and their history",
|
||||
},
|
||||
create: { label: "Create", description: "Create and run scheduled jobs" },
|
||||
update: {
|
||||
label: "Update",
|
||||
description: "Update scheduled job configuration",
|
||||
},
|
||||
delete: { label: "Delete", description: "Delete scheduled jobs" },
|
||||
},
|
||||
domain: {
|
||||
read: { label: "Read", description: "View domains assigned to services" },
|
||||
create: { label: "Create", description: "Assign new domains to services" },
|
||||
delete: { label: "Delete", description: "Remove domains from services" },
|
||||
},
|
||||
destination: {
|
||||
read: { label: "Read", description: "View S3 backup destinations" },
|
||||
create: { label: "Create", description: "Add and edit S3 destinations" },
|
||||
delete: { label: "Delete", description: "Remove S3 destinations" },
|
||||
},
|
||||
notification: {
|
||||
read: { label: "Read", description: "View notification providers" },
|
||||
create: {
|
||||
label: "Create",
|
||||
description: "Add and edit notification providers",
|
||||
},
|
||||
delete: { label: "Delete", description: "Remove notification providers" },
|
||||
},
|
||||
member: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View the list of organization members",
|
||||
},
|
||||
create: {
|
||||
label: "Create",
|
||||
description: "Invite new members to the organization",
|
||||
},
|
||||
update: {
|
||||
label: "Update",
|
||||
description: "Change member roles and permissions",
|
||||
},
|
||||
delete: {
|
||||
label: "Delete",
|
||||
description: "Remove members from the organization",
|
||||
},
|
||||
},
|
||||
logs: {
|
||||
read: { label: "Read", description: "View real-time and historical logs" },
|
||||
},
|
||||
monitoring: {
|
||||
read: {
|
||||
label: "Read",
|
||||
description: "View CPU, RAM, disk, and network metrics",
|
||||
},
|
||||
},
|
||||
auditLog: {
|
||||
read: { label: "Read", description: "View the audit log history" },
|
||||
},
|
||||
};
|
||||
|
||||
/** Resources that should be hidden from the custom role editor (better-auth internals) */
|
||||
const HIDDEN_RESOURCES = ["organization", "invitation", "team", "ac"];
|
||||
|
||||
const createRoleSchema = z.object({
|
||||
roleName: z
|
||||
.string()
|
||||
.min(1, "Role name is required")
|
||||
.max(50, "Role name must be 50 characters or less")
|
||||
.regex(
|
||||
/^[a-zA-Z0-9_-]+$/,
|
||||
"Only letters, numbers, hyphens, and underscores allowed",
|
||||
),
|
||||
});
|
||||
|
||||
type CreateRoleSchema = z.infer<typeof createRoleSchema>;
|
||||
|
||||
export const ManageCustomRoles = () => {
|
||||
return (
|
||||
<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto w-full">
|
||||
<div className="rounded-xl bg-background shadow-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl flex flex-row gap-2">
|
||||
<ShieldCheck className="size-6 text-muted-foreground self-center" />
|
||||
Custom Roles
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Create and manage custom roles with fine-grained permissions
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="border-t pt-6">
|
||||
<EnterpriseFeatureGate
|
||||
lockedProps={{
|
||||
title: "Custom Roles",
|
||||
description:
|
||||
"Custom roles with fine-grained permissions are part of Dokploy Enterprise. Add a valid license to create and assign custom roles.",
|
||||
ctaLabel: "Go to License",
|
||||
}}
|
||||
>
|
||||
<CustomRolesContent />
|
||||
</EnterpriseFeatureGate>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
interface HandleCustomRoleProps {
|
||||
roleName?: string;
|
||||
initialPermissions?: Record<string, string[]>;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
function HandleCustomRole({
|
||||
roleName,
|
||||
initialPermissions,
|
||||
onSuccess,
|
||||
}: HandleCustomRoleProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [permissions, setPermissions] = useState<Record<string, string[]>>({});
|
||||
const { data: statements } = api.customRole.getStatements.useQuery();
|
||||
const isEdit = !!roleName;
|
||||
|
||||
const form = useForm<CreateRoleSchema>({
|
||||
defaultValues: { roleName: "" },
|
||||
resolver: zodResolver(createRoleSchema),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setPermissions(initialPermissions ? { ...initialPermissions } : {});
|
||||
form.reset({ roleName: isEdit ? (roleName ?? "") : "" });
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const { mutateAsync: createRole, isPending: isCreating } =
|
||||
api.customRole.create.useMutation();
|
||||
const { mutateAsync: updateRole, isPending: isUpdating } =
|
||||
api.customRole.update.useMutation();
|
||||
|
||||
const visibleResources = statements
|
||||
? Object.entries(statements).filter(
|
||||
([key]) => !HIDDEN_RESOURCES.includes(key),
|
||||
)
|
||||
: [];
|
||||
|
||||
const togglePermission = (resource: string, action: string) => {
|
||||
setPermissions((prev) => {
|
||||
const current = prev[resource] || [];
|
||||
const has = current.includes(action);
|
||||
return {
|
||||
...prev,
|
||||
[resource]: has
|
||||
? current.filter((a) => a !== action)
|
||||
: [...current, action],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (data: CreateRoleSchema) => {
|
||||
try {
|
||||
if (isEdit) {
|
||||
const newName = data.roleName !== roleName ? data.roleName : undefined;
|
||||
await updateRole({
|
||||
roleName: roleName!,
|
||||
newRoleName: newName,
|
||||
permissions,
|
||||
});
|
||||
toast.success(`Role "${newName ?? roleName}" updated`);
|
||||
} else {
|
||||
await createRole({ roleName: data.roleName, permissions });
|
||||
toast.success(`Role "${data.roleName}" created`);
|
||||
}
|
||||
if (!isEdit) {
|
||||
setOpen(false);
|
||||
}
|
||||
onSuccess();
|
||||
} catch (error) {
|
||||
let message = `Error ${isEdit ? "updating" : "creating"} role`;
|
||||
if (error instanceof Error) {
|
||||
try {
|
||||
const parsed = JSON.parse(error.message);
|
||||
if (Array.isArray(parsed) && parsed[0]?.message) {
|
||||
message = parsed[0].message;
|
||||
} else {
|
||||
message = error.message;
|
||||
}
|
||||
} catch {
|
||||
message = error.message;
|
||||
}
|
||||
}
|
||||
toast.error(message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
{isEdit ? (
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs">
|
||||
Edit
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="sm">
|
||||
<PlusIcon className="size-4 mr-1" />
|
||||
Create Role
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-[85vh] sm:max-w-5xl overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isEdit ? "Edit Role" : "Create Custom Role"}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEdit
|
||||
? "Update permissions for this role"
|
||||
: "Define a new role with specific permissions"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form
|
||||
id="handle-role-form"
|
||||
onSubmit={form.handleSubmit(handleSubmit)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="roleName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Role Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="e.g. developer, viewer, deployer"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
<PermissionEditor
|
||||
resources={visibleResources}
|
||||
permissions={permissions}
|
||||
onToggle={togglePermission}
|
||||
/>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
isLoading={isEdit ? isUpdating : isCreating}
|
||||
form="handle-role-form"
|
||||
type="submit"
|
||||
>
|
||||
{isEdit ? "Save Changes" : "Create Role"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
const CustomRolesContent = () => {
|
||||
const {
|
||||
data: customRoles,
|
||||
isPending,
|
||||
refetch,
|
||||
} = api.customRole.all.useQuery();
|
||||
const { mutateAsync: deleteRole } = api.customRole.remove.useMutation();
|
||||
|
||||
const handleDelete = async (roleName: string) => {
|
||||
try {
|
||||
await deleteRole({ roleName });
|
||||
toast.success(`Role "${roleName}" deleted`);
|
||||
refetch();
|
||||
} catch (error) {
|
||||
let message = "Error deleting role";
|
||||
if (error instanceof Error) {
|
||||
try {
|
||||
const parsed = JSON.parse(error.message);
|
||||
message =
|
||||
Array.isArray(parsed) && parsed[0]?.message
|
||||
? parsed[0].message
|
||||
: error.message;
|
||||
} catch {
|
||||
message = error.message;
|
||||
}
|
||||
}
|
||||
toast.error(message);
|
||||
}
|
||||
};
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[15vh]">
|
||||
<span>Loading...</span>
|
||||
<Loader2 className="animate-spin size-4" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-end">
|
||||
<HandleCustomRole onSuccess={refetch} />
|
||||
</div>
|
||||
|
||||
{customRoles?.length === 0 ? (
|
||||
<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center text-center py-8">
|
||||
<div className="rounded-full bg-muted p-4">
|
||||
<ShieldCheck className="size-7 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">No custom roles yet</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Create a role to define fine-grained access for your team members.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3">
|
||||
{customRoles?.map((role) => {
|
||||
const totalPermissions = Object.values(role.permissions).flat()
|
||||
.length;
|
||||
const enabledResources = Object.entries(role.permissions).filter(
|
||||
([, actions]) => (actions as string[]).length > 0,
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={role.role}
|
||||
className="rounded-lg border bg-muted/20 p-4 space-y-3"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<div className="rounded-md bg-primary/10 p-1.5 shrink-0">
|
||||
<ShieldCheck className="size-4 text-primary" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-semibold text-sm truncate">
|
||||
{role.role}
|
||||
</p>
|
||||
{role.memberCount > 0 && (
|
||||
<MembersBadge
|
||||
roleName={role.role}
|
||||
count={role.memberCount}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{enabledResources.length} resource
|
||||
{enabledResources.length !== 1 ? "s" : ""} ·{" "}
|
||||
{totalPermissions} permission
|
||||
{totalPermissions !== 1 ? "s" : ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
<HandleCustomRole
|
||||
roleName={role.role}
|
||||
initialPermissions={role.permissions}
|
||||
onSuccess={refetch}
|
||||
/>
|
||||
<DialogAction
|
||||
title="Delete Role"
|
||||
description={
|
||||
<div className="space-y-3">
|
||||
{role.memberCount > 0 && (
|
||||
<AlertBlock type="error">
|
||||
<strong>
|
||||
{role.memberCount} member
|
||||
{role.memberCount !== 1 ? "s are" : " is"}{" "}
|
||||
currently assigned
|
||||
</strong>{" "}
|
||||
to this role. Reassign them before deleting.
|
||||
</AlertBlock>
|
||||
)}
|
||||
<span>
|
||||
Are you sure you want to delete the{" "}
|
||||
<strong>"{role.role}"</strong> role? This action
|
||||
cannot be undone.
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
disabled={role.memberCount > 0}
|
||||
type="destructive"
|
||||
onClick={() => handleDelete(role.role)}
|
||||
>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7">
|
||||
<TrashIcon className="size-3.5 text-red-500" />
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{enabledResources.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 pt-1 border-t">
|
||||
{enabledResources.map(([resource, actions]) => (
|
||||
<div
|
||||
key={resource}
|
||||
className="flex items-center gap-1 rounded-md bg-background border px-2 py-1"
|
||||
>
|
||||
<span className="text-xs font-medium text-foreground">
|
||||
{RESOURCE_META[resource]?.label || resource}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">·</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{(actions as string[])
|
||||
.map((a) => ACTION_META[resource]?.[a]?.label || a)
|
||||
.join(", ")}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function MembersBadge({
|
||||
roleName,
|
||||
count,
|
||||
}: {
|
||||
roleName: string;
|
||||
count: number;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { data: members, isLoading } = api.customRole.membersByRole.useQuery(
|
||||
{ roleName },
|
||||
{ enabled: open },
|
||||
);
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted/80 transition-colors cursor-pointer"
|
||||
>
|
||||
<Users className="size-3" />
|
||||
{count}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-2" align="start">
|
||||
<p className="text-xs font-medium text-muted-foreground mb-2 px-1">
|
||||
Assigned members
|
||||
</p>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<Loader2 className="size-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : members && members.length > 0 ? (
|
||||
<ul className="space-y-1">
|
||||
{members.map((m) => (
|
||||
<li
|
||||
key={m.id}
|
||||
className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
|
||||
>
|
||||
<div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
|
||||
{(m.firstName?.[0] || m.email?.[0] || "?").toUpperCase()}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
{(m.firstName || m.lastName) && (
|
||||
<p className="text-xs font-medium truncate">
|
||||
{[m.firstName, m.lastName].filter(Boolean).join(" ")}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{m.email}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground px-1 py-2">
|
||||
No members found.
|
||||
</p>
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
/** Reusable permission toggle grid with descriptions */
|
||||
function PermissionEditor({
|
||||
resources,
|
||||
permissions,
|
||||
onToggle,
|
||||
}: {
|
||||
resources: [string, readonly string[]][];
|
||||
permissions: Record<string, string[]>;
|
||||
onToggle: (resource: string, action: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium">Permissions</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{resources.map(([resource, actions]) => {
|
||||
const meta = RESOURCE_META[resource];
|
||||
return (
|
||||
<div key={resource} className="rounded-lg border p-3 space-y-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium">{meta?.label || resource}</p>
|
||||
{meta?.description && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{meta.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{actions.map((action) => {
|
||||
const actionMeta = ACTION_META[resource]?.[action];
|
||||
return (
|
||||
<div
|
||||
key={action}
|
||||
className="flex items-center gap-3 cursor-pointer rounded-md border p-2 hover:bg-muted/50 transition-colors"
|
||||
onClick={() => onToggle(resource, action)}
|
||||
>
|
||||
<Switch
|
||||
checked={
|
||||
permissions[resource]?.includes(action) ?? false
|
||||
}
|
||||
onCheckedChange={() => onToggle(resource, action)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-medium">
|
||||
{actionMeta?.label || action}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -35,6 +35,7 @@ export const ShowUsers = () => {
|
||||
const { data: isCloud } = api.settings.isCloud.useQuery();
|
||||
const { data, isPending, refetch } = api.user.all.useQuery();
|
||||
const { mutateAsync } = api.user.remove.useMutation();
|
||||
const { data: permissions } = api.user.getPermissions.useQuery();
|
||||
|
||||
const utils = api.useUtils();
|
||||
const { data: session } = api.user.session.useQuery();
|
||||
@@ -89,40 +90,39 @@ export const ShowUsers = () => {
|
||||
)?.role;
|
||||
|
||||
// Owner never has "Edit Permissions" (they're absolute owner)
|
||||
// Other users can edit permissions if target is not themselves and target is a member
|
||||
// Other users can edit permissions if target is not themselves and target is a member/custom role
|
||||
const isStaticAdminOrOwner =
|
||||
member.role === "owner" || member.role === "admin";
|
||||
const canEditPermissions =
|
||||
member.role !== "owner" &&
|
||||
member.role === "member" &&
|
||||
!isStaticAdminOrOwner &&
|
||||
member.user.id !== session?.user?.id;
|
||||
|
||||
// Can change role based on hierarchy:
|
||||
// - Owner: Can change anyone's role (except themselves and other owners)
|
||||
// - Admin: Can only change member roles (not other admins or owners)
|
||||
// - Admin: Can only change member/custom roles (not other admins or owners)
|
||||
// - Owner role is intransferible
|
||||
const canChangeRole =
|
||||
member.role !== "owner" &&
|
||||
member.user.id !== session?.user?.id &&
|
||||
(currentUserRole === "owner" ||
|
||||
(currentUserRole === "admin" &&
|
||||
member.role === "member"));
|
||||
member.role !== "admin"));
|
||||
|
||||
// Delete/Unlink follow same hierarchy as role changes
|
||||
// - Owner: Can delete/unlink anyone (except themselves and owner can't be deleted)
|
||||
// - Admin: Can only delete/unlink members (not other admins or owner)
|
||||
const canDelete =
|
||||
member.role !== "owner" &&
|
||||
!isCloud &&
|
||||
member.user.id !== session?.user?.id &&
|
||||
(currentUserRole === "owner" ||
|
||||
(currentUserRole === "admin" &&
|
||||
member.role === "member"));
|
||||
const canDeleteMember =
|
||||
permissions?.member.delete ?? false;
|
||||
|
||||
const canUnlink =
|
||||
// Self-hosted: "Delete User" removes the user entirely
|
||||
// Cloud: "Unlink User" removes from the organization only
|
||||
const canRemove =
|
||||
member.role !== "owner" &&
|
||||
member.user.id !== session?.user?.id &&
|
||||
(currentUserRole === "owner" ||
|
||||
(currentUserRole === "admin" &&
|
||||
member.role === "member"));
|
||||
member.role !== "admin") ||
|
||||
(canDeleteMember && !isStaticAdminOrOwner));
|
||||
|
||||
const canDelete = canRemove && !isCloud;
|
||||
const canUnlink = canRemove && !!isCloud;
|
||||
|
||||
const hasAnyAction =
|
||||
canEditPermissions ||
|
||||
@@ -134,6 +134,11 @@ export const ShowUsers = () => {
|
||||
<TableRow key={member.id}>
|
||||
<TableCell className="w-[100px]">
|
||||
{member.user.email}
|
||||
{member.user.id === session?.user?.id && (
|
||||
<span className="text-muted-foreground ml-1">
|
||||
(You)
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge
|
||||
@@ -179,9 +184,7 @@ export const ShowUsers = () => {
|
||||
{canChangeRole && (
|
||||
<ChangeRole
|
||||
memberId={member.id}
|
||||
currentRole={
|
||||
member.role as "admin" | "member"
|
||||
}
|
||||
currentRole={member.role}
|
||||
userEmail={member.user.email}
|
||||
/>
|
||||
)}
|
||||
@@ -189,6 +192,7 @@ export const ShowUsers = () => {
|
||||
{canEditPermissions && (
|
||||
<AddUserPermissions
|
||||
userId={member.user.id}
|
||||
role={member.role}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user