refactor(web): Conditional validation for Docker Compose image and build fields

- Ensure the image field is required only when the build option is disabled in Docker Compose.
- When the build option is enabled, make the build-related fields required and allow the image field to be optional.
- Prevent sending empty strings to the server; send null instead.

Author: MiladSadeghi

web/src/pages/docker-compose/docker-compose.tsx

@@ -57,8 +57,8 @@ const DockerCompose: FC = () => {
             },
           ],
         },
-        command: '',
-        container_name: '',
+        command: null,
+        container_name: null,
         environment: [
           {
             key: '',
@@ -124,8 +124,8 @@ const DockerCompose: FC = () => {
         dockerfile: '',
       },
       name: '',
-      command: '',
-      container_name: '',
+      command: null,
+      container_name: null,
       image: '',
       environment: [
         {
@@ -228,6 +228,7 @@ const DockerCompose: FC = () => {
         ) {
           item.build.args = null;
         }
+
         return item;
       });
 
@@ -240,13 +241,11 @@ const DockerCompose: FC = () => {
       await dockerComposeMutate(requestBody);
       await download();
     } catch (error) {
-      console.log(error);
       if (isAxiosError<DockerComposeValidationError>(error)) {
         toast.error(
           `${error.response?.data.detail[0].loc[error.response?.data.detail[0].loc.length - 1]} ${error.response?.data.detail[0].msg}`,
         );
       } else {
-        console.log(error);
         toast.error('Something went wrong');
       }
     }
@@ -256,19 +255,19 @@ const DockerCompose: FC = () => {
     <div className="flex h-[calc(100%-56px)] w-full justify-center overflow-y-auto p-4 text-black-1 scrollbar-thin dark:text-white">
       <div className="h-full w-full max-w-[768px]">
         <FormWrapper methods={methods} onSubmit={handleSubmit}>
-          <div className="flex flex-col w-full mb-4">
+          <div className="mb-4 flex w-full flex-col">
             <FormInput label="Version" name="version" placeholder="3" />
           </div>
-          <div className="flex flex-col w-full mb-4">
+          <div className="mb-4 flex w-full flex-col">
             <NetworkFields />
           </div>
 
-          <div className="flex items-center mb-4">
+          <div className="mb-4 flex items-center">
             <h1 className="text-2xl font-bold">Services</h1>
             <button
               type="button"
               onClick={handleAddService}
-              className="ml-4 btn btn-xs"
+              className="btn btn-xs ml-4"
             >
               Add <Plus className="size-3" />
             </button>
@@ -278,7 +277,7 @@ const DockerCompose: FC = () => {
             {services.map((service, index) => (
               <div
                 key={service.id}
-                className="w-full p-5 border border-gray-500 rounded-md"
+                className="w-full rounded-md border border-gray-500 p-5"
               >
                 <div
                   className={cn(
@@ -316,31 +315,31 @@ const DockerCompose: FC = () => {
                     },
                   )}
                 >
-                  <div className="flex flex-col mb-4">
+                  <div className="mb-4 flex flex-col">
                     <FormInput
                       id="service_name"
                       name={`services.${index}.name`}
                       label="Name"
                       placeholder="service name"
                     />
                   </div>
-                  <div className="flex flex-col mb-4">
+                  <div className="mb-4 flex flex-col">
                     <FormInput
                       id="image"
                       name={`services.${index}.image`}
                       label="Image"
                       placeholder="image"
                     />
                   </div>
-                  <div className="flex flex-col mb-4">
+                  <div className="mb-4 flex flex-col">
                     <FormInput
                       id="container_name"
                       name={`services.${index}.container_name`}
                       label="Container Name"
                       placeholder="container_name"
                     />
                   </div>
-                  <div className="flex flex-col mb-4">
+                  <div className="mb-4 flex flex-col">
                     <FormInput
                       id="command"
                       name={`services.${index}.command`}
@@ -361,7 +360,7 @@ const DockerCompose: FC = () => {
           <button
             type="submit"
             disabled={dockerComposePending}
-            className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
+            className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
           >
             {dockerComposePending
               ? 'Generating...'

web/src/pages/docker-compose/docker-compose.type.ts

@@ -66,22 +66,49 @@ const KV_Schema = zod.array(
 export const BuildSchema = zod.object({
   enabled: zod.boolean(),
   args: KV_Schema,
-  context: zod.string(),
-  dockerfile: zod.string(),
+  context: zod.string().optional(),
+  dockerfile: zod.string().optional(),
 });
 
-export const ServiceSchema = zod.object({
-  name: zod.string(),
-  build: BuildSchema,
-  image: zod.string(),
-  environment: KV_Schema,
-  container_name: zod.string(),
-  ports: zod.array(zod.object({ value: zod.string() })).nullable(),
-  command: zod.string().optional().nullable(),
-  volumes: zod.array(zod.object({ value: zod.string() })).nullable(),
-  networks: zod.array(zod.object({ value: zod.string() })).nullable(),
-  depends_on: zod.array(zod.object({ value: zod.string() })).nullable(),
-});
+export const ServiceSchema = zod
+  .object({
+    name: zod.string().min(1, 'Name is required!'),
+    build: BuildSchema,
+    image: zod.string().nullable(),
+    environment: KV_Schema,
+    container_name: zod.string().nullable(),
+    ports: zod.array(zod.object({ value: zod.string() })).nullable(),
+    command: zod.string().optional().nullable(),
+    volumes: zod.array(zod.object({ value: zod.string() })).nullable(),
+    networks: zod.array(zod.object({ value: zod.string() })).nullable(),
+    depends_on: zod.array(zod.object({ value: zod.string() })).nullable(),
+  })
+  .superRefine((data, ctx) => {
+    if (!data.build.enabled && !data.image) {
+      ctx.addIssue({
+        path: ['image'],
+        message: 'Image is required.',
+        code: zod.ZodIssueCode.custom,
+      });
+    }
+
+    if (data.build.enabled) {
+      if (!data.build.context) {
+        ctx.addIssue({
+          path: ['build', 'context'],
+          message: 'Context is required.',
+          code: zod.ZodIssueCode.custom,
+        });
+      }
+      if (!data.build.dockerfile) {
+        ctx.addIssue({
+          path: ['build', 'dockerfile'],
+          message: 'Dockerfile is required.',
+          code: zod.ZodIssueCode.custom,
+        });
+      }
+    }
+  });
 
 const labelValueSchema = zod.object({
   label: zod.string(),