feat: Slug validation on update deployment

apps/webservice/src/app/[workspaceSlug]/_components/DeploymentOptionsDropdown.tsx

@@ -20,7 +20,8 @@ export const DeploymentOptionsDropdown: React.FC<{
   name: string;
   slug: string;
   description: string;
-}> = (props) => {
+  systemId: string;
+}> = ({ systemId, ...props }) => {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   return (
@@ -37,7 +38,7 @@ export const DeploymentOptionsDropdown: React.FC<{
           forceMount
         >
           <DropdownMenuGroup>
-            <EditDeploymentDialog {...props}>
+            <EditDeploymentDialog {...props} systemId={systemId}>
               <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
                 <TbEdit className="mr-2" />
                 Edit

apps/webservice/src/app/[workspaceSlug]/_components/EditDeploymentDialog.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useState } from "react";
-import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import isEqual from "lodash/isEqual";
 import { useForm } from "react-hook-form";
@@ -24,41 +23,81 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
+  RootFormMessage,
 } from "@ctrlplane/ui/form";
 import { Input } from "@ctrlplane/ui/input";
 import { Textarea } from "@ctrlplane/ui/textarea";
 
 import { api } from "~/trpc/react";
 
-const deploymentForm = z.object({
-  id: z.string().uuid(),
-  name: z.string().min(3).max(255),
-  slug: z.string().min(3).max(255),
-  description: z.string().optional(),
+const deploymentFormSchema = z.object({
+  systemId: z.string().uuid({ message: "Invalid system ID format." }),
+  id: z.string().uuid({ message: "Invalid ID format." }),
+  name: z
+    .string()
+    .min(3, { message: "Name must be at least 3 characters long." })
+    .max(255, { message: "Name must be at most 255 characters long." }),
+  slug: z
+    .string()
+    .min(3, { message: "Slug must be at least 3 characters long." })
+    .max(255, { message: "Slug must be at most 255 characters long." }),
+  description: z
+    .string()
+    .max(255, { message: "Description must be at most 255 characters long." })
+    .optional()
+    .refine((val) => !val || val.length >= 3, {
+      message: "Description must be at least 3 characters long if provided.",
+    }),
 });
 
-type DeploymentFormValues = z.infer<typeof deploymentForm>;
+type DeploymentFormValues = z.infer<typeof deploymentFormSchema>;
 
 export const EditDeploymentDialog: React.FC<
   DeploymentFormValues & { children?: React.ReactNode }
-> = ({ id, name, slug, description, children }) => {
-  const router = useRouter();
-  const update = api.deployment.update.useMutation();
+> = ({ systemId, id, name, slug, description, children }) => {
   const [open, setOpen] = useState(false);
+  const utils = api.useUtils();
 
   const form = useForm({
-    resolver: zodResolver(deploymentForm),
-    defaultValues: { id, name, slug, description },
+    resolver: zodResolver(deploymentFormSchema),
+    defaultValues: { systemId, id, name, slug, description },
+    mode: "onChange",
   });
 
-  const onSubmit = form.handleSubmit(async (data) => {
-    setOpen(false);
-    const isDataChanged = !isEqual(data, { name, slug, description });
-    if (!isDataChanged) return;
+  const update = api.deployment.update.useMutation({
+    onError: (error) => {
+      if (error.message.includes("violates unique constraint")) {
+        form.setError("root", {
+          type: "manual",
+          message:
+            "A deployment with this slug already exists. Please choose a different slug.",
+        });
+        return;
+      }
+      form.setError("root", {
+        type: "manual",
+        message: "An unexpected error occurred. Please try again.",
+      });
+    },
+    onSuccess: () => {
+      utils.deployment.invalidate();
+      utils.deployment.bySystemId.invalidate(systemId);
+      setOpen(false);
+    },
+  });
 
-    await update.mutateAsync({ id, data });
+  const onSubmit = form.handleSubmit((data) => {
+    const isDataChanged = !isEqual(data, { name, slug, description });
+    if (!isDataChanged) {
+      setOpen(false);
+      return;
+    }
 
-    router.refresh();
+    update.mutate({
+      id,
+      data: { name: data.name, slug: data.slug, description: data.description },
+    });
   });
 
   return (
@@ -85,6 +124,7 @@ export const EditDeploymentDialog: React.FC<
                       {...field}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -97,6 +137,7 @@ export const EditDeploymentDialog: React.FC<
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -109,6 +150,7 @@ export const EditDeploymentDialog: React.FC<
                   <FormControl>
                     <Textarea {...field} />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -126,6 +168,7 @@ export const EditDeploymentDialog: React.FC<
                 </FormItem>
               )}
             />
+            <RootFormMessage />
             <DialogFooter>
               <CopyButton textToCopy={id} />
               <div className="flex-grow" />

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/TableDeployments.tsx

@@ -115,7 +115,8 @@ const DeploymentTable: React.FC<{
       latestRelease: { id: string; version: string; createdAt: Date } | null;
     }
   >;
-}> = ({ systemSlug, deployments, environments }) => {
+  systemId: string;
+}> = ({ systemSlug, deployments, environments, systemId }) => {
   const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
   return (
     <div className="w-full overflow-x-auto">
@@ -162,7 +163,7 @@ const DeploymentTable: React.FC<{
                   <Button size="icon" variant="ghost">
                     <TbRocket />
                   </Button>
-                  <DeploymentOptionsDropdown {...r} />
+                  <DeploymentOptionsDropdown {...r} systemId={systemId} />
                 </div>
               </td>
 

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/page.tsx

@@ -24,6 +24,7 @@ export default async function SystemDeploymentsPage({
         deployments={deployments}
         environments={environments}
         systemSlug={params.systemSlug}
+        systemId={system.id}
       />
     </div>
   );

packages/ui/src/form.tsx

@@ -178,7 +178,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      className={cn("text-sm font-medium text-destructive", className)}
       {...props}
     >
       {body}
@@ -187,6 +187,17 @@ const FormMessage = React.forwardRef<
 });
 FormMessage.displayName = "FormMessage";
 
+const RootFormMessage = () => {
+  const { formState } = useFormContext();
+  const error = formState.errors.root;
+
+  if (!error) return null;
+
+  return (
+    <p className="text-sm font-medium text-destructive">{error.message}</p>
+  );
+};
+
 export {
   useForm,
   useFormField,
@@ -197,6 +208,7 @@ export {
   FormDescription,
   FormMessage,
   FormField,
+  RootFormMessage,
 };
 
 export { useFieldArray } from "react-hook-form";