feat: add canCreateEnvironments permission for environment creation - Add database field and API validation - Implement permission checking in environment creation - Add UI toggle in user permissions modal - Hide create button for unauthorized users Fixes #2593

apps/dokploy/components/dashboard/settings/users/add-permissions.tsx

@@ -1,6 +1,6 @@
 import type { findEnvironmentById } from "@dokploy/server/index";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -166,6 +166,7 @@ const addPermissions = z.object({
 	canAccessToAPI: z.boolean().optional().default(false),
 	canAccessToSSHKeys: z.boolean().optional().default(false),
 	canAccessToGitProviders: z.boolean().optional().default(false),
+	canCreateEnvironments: z.boolean().optional().default(false),
 });
 
 type AddPermissions = z.infer<typeof addPermissions>;
@@ -175,6 +176,7 @@ interface Props {
 }
 
 export const AddUserPermissions = ({ userId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { data: projects } = api.project.all.useQuery();
 
 	const { data, refetch } = api.user.one.useQuery(
@@ -192,29 +194,41 @@ export const AddUserPermissions = ({ userId }: Props) => {
 	const form = useForm<AddPermissions>({
 		defaultValues: {
 			accessedProjects: [],
+			accessedEnvironments: [],
 			accessedServices: [],
+			canCreateProjects: false,
+			canCreateServices: false,
+			canDeleteProjects: false,
+			canDeleteServices: false,
+			canAccessToTraefikFiles: false,
+			canAccessToDocker: false,
+			canAccessToAPI: false,
+			canAccessToSSHKeys: false,
+			canAccessToGitProviders: false,
+			canCreateEnvironments: false,
 		},
 		resolver: zodResolver(addPermissions),
 	});
 
 	useEffect(() => {
-		if (data) {
+		if (data && isOpen) {
 			form.reset({
 				accessedProjects: data.accessedProjects || [],
 				accessedEnvironments: data.accessedEnvironments || [],
 				accessedServices: data.accessedServices || [],
-				canCreateProjects: data.canCreateProjects,
-				canCreateServices: data.canCreateServices,
-				canDeleteProjects: data.canDeleteProjects,
-				canDeleteServices: data.canDeleteServices,
-				canAccessToTraefikFiles: data.canAccessToTraefikFiles,
-				canAccessToDocker: data.canAccessToDocker,
-				canAccessToAPI: data.canAccessToAPI,
-				canAccessToSSHKeys: data.canAccessToSSHKeys,
-				canAccessToGitProviders: data.canAccessToGitProviders,
+				canCreateProjects: data.canCreateProjects || false,
+				canCreateServices: data.canCreateServices || false,
+				canDeleteProjects: data.canDeleteProjects || false,
+				canDeleteServices: data.canDeleteServices || false,
+				canAccessToTraefikFiles: data.canAccessToTraefikFiles || false,
+				canAccessToDocker: data.canAccessToDocker || false,
+				canAccessToAPI: data.canAccessToAPI || false,
+				canAccessToSSHKeys: data.canAccessToSSHKeys || false,
+				canAccessToGitProviders: data.canAccessToGitProviders || false,
+				canCreateEnvironments: data.canCreateEnvironments || false,
 			});
 		}
-	}, [form, form.formState.isSubmitSuccessful, form.reset, data]);
+	}, [form, form.reset, data, isOpen]);
 
 	const onSubmit = async (data: AddPermissions) => {
 		await mutateAsync({
@@ -231,17 +245,19 @@ export const AddUserPermissions = ({ userId }: Props) => {
 			canAccessToAPI: data.canAccessToAPI,
 			canAccessToSSHKeys: data.canAccessToSSHKeys,
 			canAccessToGitProviders: data.canAccessToGitProviders,
+			canCreateEnvironments: data.canCreateEnvironments,
 		})
 			.then(async () => {
 				toast.success("Permissions updated");
 				refetch();
+				setIsOpen(false);
 			})
 			.catch(() => {
 				toast.error("Error updating the permissions");
 			});
 	};
 	return (
-		<Dialog>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
 				<DropdownMenuItem
 					className="w-full cursor-pointer"
@@ -343,6 +359,26 @@ export const AddUserPermissions = ({ userId }: Props) => {
 								</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="canAccessToTraefikFiles"