feat(drag-n-drop): add support for drag n drop projects via zip #131

components/dashboard/application/general/generic/save-drag-n-drop.tsx

@@ -0,0 +1,141 @@
+import { Button } from "@/components/ui/button";
+import { Dropzone } from "@/components/ui/dropzone";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { type UploadFile, uploadFileSchema } from "@/utils/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TrashIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveDragNDrop = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync, isLoading } =
+		api.application.dropDeployment.useMutation();
+
+	const form = useForm<UploadFile>({
+		defaultValues: {},
+		resolver: zodResolver(uploadFileSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dropBuildPath: data.dropBuildPath || "",
+			});
+		}
+	}, [data, form, form.reset, form.formState.isSubmitSuccessful]);
+	const zip = form.watch("zip");
+
+	const onSubmit = async (values: UploadFile) => {
+		const formData = new FormData();
+
+		formData.append("zip", values.zip);
+		formData.append("applicationId", applicationId);
+		if (values.dropBuildPath) {
+			formData.append("dropBuildPath", values.dropBuildPath);
+		}
+
+		await mutateAsync(formData)
+			.then(async () => {
+				toast.success("Deployment saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the deployment");
+			});
+	};
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex flex-col gap-4"
+			>
+				<div className="grid md:grid-cols-2 gap-4 ">
+					<div className="md:col-span-2 space-y-4">
+						<FormField
+							control={form.control}
+							name="dropBuildPath"
+							render={({ field }) => (
+								<FormItem className="w-full ">
+									<FormLabel>Build Path</FormLabel>
+									<FormControl>
+										<Input {...field} placeholder="Build Path" />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="zip"
+							render={({ field }) => (
+								<FormItem className="w-full ">
+									<FormLabel>Zip file</FormLabel>
+									<FormControl>
+										<Dropzone
+											{...field}
+											dropMessage="Drop files or click here"
+											accept=".zip"
+											onChange={(e) => {
+												if (e instanceof FileList) {
+													field.onChange(e[0]);
+												} else {
+													field.onChange(e);
+												}
+											}}
+										/>
+									</FormControl>
+									<FormMessage />
+									{zip instanceof File && (
+										<div className="flex flex-row gap-4 items-center">
+											<span className="text-sm text-muted-foreground">
+												{zip.name} ({zip.size} bytes)
+											</span>
+											<Button
+												type="button"
+												className="w-fit"
+												variant="ghost"
+												onClick={() => {
+													field.onChange(null);
+												}}
+											>
+												<TrashIcon className="w-4 h-4 text-muted-foreground" />
+											</Button>
+										</div>
+									)}
+								</FormItem>
+							)}
+						/>
+					</div>
+				</div>
+
+				<div className="flex flex-row justify-end">
+					<Button
+						type="submit"
+						className="w-fit"
+						isLoading={isLoading}
+						disabled={!zip}
+					>
+						Deploy{" "}
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};

components/dashboard/application/general/generic/show.tsx

@@ -7,8 +7,9 @@ import { api } from "@/utils/api";
 import { GitBranch, LockIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { SaveDragNDrop } from "./save-drag-n-drop";
 
-type TabState = "github" | "docker" | "git";
+type TabState = "github" | "docker" | "git" | "drop";
 
 interface Props {
 	applicationId: string;
@@ -62,6 +63,12 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						>
 							Git
 						</TabsTrigger>
+						<TabsTrigger
+							value="drop"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Drop
+						</TabsTrigger>
 					</TabsList>
 					<TabsContent value="github" className="w-full p-2">
 						{haveGithubConfigured ? (
@@ -89,6 +96,9 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 					<TabsContent value="git" className="w-full p-2">
 						<SaveGitProvider applicationId={applicationId} />
 					</TabsContent>
+					<TabsContent value="drop" className="w-full p-2">
+						<SaveDragNDrop applicationId={applicationId} />
+					</TabsContent>
 				</Tabs>
 			</CardContent>
 		</Card>

components/ui/dropzone.tsx

@@ -0,0 +1,79 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { FolderIcon } from "lucide-react";
+import React, { type ChangeEvent, useRef } from "react";
+
+interface DropzoneProps
+	extends Omit<
+		React.InputHTMLAttributes<HTMLInputElement>,
+		"value" | "onChange"
+	> {
+	classNameWrapper?: string;
+	className?: string;
+	dropMessage: string;
+	onChange: (acceptedFiles: FileList | null) => void;
+}
+
+export const Dropzone = React.forwardRef<HTMLDivElement, DropzoneProps>(
+	({ className, classNameWrapper, dropMessage, onChange, ...props }, ref) => {
+		const inputRef = useRef<HTMLInputElement | null>(null);
+		// Function to handle drag over event
+		const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+			e.preventDefault();
+			e.stopPropagation();
+			onChange(null);
+		};
+
+		// Function to handle drop event
+		const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+			e.preventDefault();
+			e.stopPropagation();
+			const { files } = e.dataTransfer;
+			if (inputRef.current) {
+				inputRef.current.files = files;
+				onChange(files);
+			}
+		};
+
+		// Function to simulate a click on the file input element
+		const handleButtonClick = () => {
+			if (inputRef.current) {
+				inputRef.current.click();
+			}
+		};
+		return (
+			<Card
+				ref={ref}
+				className={cn(
+					"border-2 border-dashed bg-muted/20 hover:cursor-pointer hover:border-muted-foreground/50 ",
+					classNameWrapper,
+				)}
+			>
+				<CardContent
+					className="flex flex-col items-center justify-center space-y-2 px-2 py-4 text-xs h-96"
+					onDragOver={handleDragOver}
+					onDrop={handleDrop}
+					onClick={handleButtonClick}
+				>
+					<div className="flex items-center justify-center text-muted-foreground">
+						<span className="font-medium text-xl flex items-center gap-2">
+							<FolderIcon className="size-6 text-muted-foreground" />
+							{dropMessage}
+						</span>
+						<Input
+							{...props}
+							value={undefined}
+							ref={inputRef}
+							type="file"
+							className={cn("hidden", className)}
+							onChange={(e: ChangeEvent<HTMLInputElement>) =>
+								onChange(e.target.files)
+							}
+						/>
+					</div>
+				</CardContent>
+			</Card>
+		);
+	},
+);