feat: add presets for add-redirect dialog

apps/dokploy/components/dashboard/application/advanced/redirects/add-redirect.tsx

@@ -19,6 +19,15 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -36,6 +45,36 @@ const AddRedirectchema = z.object({
 
 type AddRedirect = z.infer<typeof AddRedirectchema>;
 
+// Default presets
+const redirectPresets = [
+	// {
+	// 	label: "Allow www & non-www.",
+	// 	redirect: {
+	// 		regex: "",
+	// 		permanent: false,
+	// 		replacement: "",
+	// 	},
+	// },
+	{
+		id: "to-www",
+		label: "Redirect to www",
+		redirect: {
+			regex: "^https?://(?:www.)?(.+)",
+			permanent: true,
+			replacement: "https://www.$${1}",
+		},
+	},
+	{
+		id: "to-non-www",
+		label: "Redirect to non-www",
+		redirect: {
+			regex: "^https?://www.(.+)",
+			permanent: true,
+			replacement: "https://$${1}",
+		},
+	},
+];
+
 interface Props {
 	applicationId: string;
 	children?: React.ReactNode;
@@ -43,9 +82,10 @@ interface Props {
 
 export const AddRedirect = ({
 	applicationId,
-	children = <PlusIcon className="h-4 w-4" />,
+	children = <PlusIcon className="w-4 h-4" />,
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
+	const [presetSelected, setPresetSelected] = useState("");
 	const utils = api.useUtils();
 
 	const { mutateAsync, isLoading, error, isError } =
@@ -81,19 +121,36 @@ export const AddRedirect = ({
 				await utils.application.readTraefikConfig.invalidate({
 					applicationId,
 				});
-				setIsOpen(false);
+				onDialogToggle(false);
 			})
 			.catch(() => {
 				toast.error("Error to create the redirect");
 			});
 	};
 
+	const onDialogToggle = (open: boolean) => {
+		setIsOpen(open);
+		// commented for the moment because not reseting the form if accidentally closed the dialog can be considered as a feature instead of a bug
+		// setPresetSelected("");
+		// form.reset();
+	};
+
+	const onPresetSelect = (presetId: string) => {
+		const redirectPreset = redirectPresets.find(
+			(preset) => preset.id === presetId,
+		)?.redirect;
+		if (!redirectPreset) return;
+		const { regex, permanent, replacement } = redirectPreset;
+		form.reset({ regex, permanent, replacement }, { keepDefaultValues: true });
+		setPresetSelected(presetId);
+	};
+
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+		<Dialog open={isOpen} onOpenChange={onDialogToggle}>
 			<DialogTrigger asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Redirects</DialogTitle>
 					<DialogDescription>
@@ -102,6 +159,24 @@ export const AddRedirect = ({
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
+				<div className="md:col-span-2">
+					<Label>Presets</Label>
+					<Select onValueChange={onPresetSelect} value={presetSelected}>
+						<SelectTrigger>
+							<SelectValue placeholder="No preset selected" />
+						</SelectTrigger>
+						<SelectContent>
+							{redirectPresets.map((preset) => (
+								<SelectItem key={preset.label} value={preset.id}>
+									{preset.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+
+				<Separator />
+
 				<Form {...form}>
 					<form
 						id="hook-form-add-redirect"
@@ -142,7 +217,7 @@ export const AddRedirect = ({
 								control={form.control}
 								name="permanent"
 								render={({ field }) => (
-									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+									<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
 										<div className="space-y-0.5">
 											<FormLabel>Permanent</FormLabel>
 											<FormDescription>