refactor(web): Handle empty fields by sending null in Docker Compose

Author: MiladSadeghi

web/src/lib/helper.ts

@@ -5,14 +5,18 @@ export const getNestedValue = (obj: any, path: string) => {
 };
 
 export const convertKVtoObject = (
-  kvArray: Array<{ key: string; value: string }>,
+  kvArray: Array<{ key: string; value: string } | null>,
 ) => {
-  return kvArray.reduce(
+  return kvArray?.reduce(
     (acc, curr) => {
-      acc[curr.key] = curr.value;
+
+      if (curr && acc) {
+        acc[curr.key] = curr?.value;
+
+      }
       return acc;
     },
-    {} as Record<string, string>,
+    {} as Record<string, string> | null,
   );
 };
 

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

@@ -117,13 +117,17 @@ const DockerCompose: FC = () => {
       const refactoredService = data.services.map(
         ({ build: { enabled, ...buildRest }, ...service }) => ({
           ...service,
-          environment: convertKVtoObject(service.environment),
-          ...(enabled && {
-            build: {
-              ...buildRest,
-              args: convertKVtoObject(buildRest.args),
-            },
+          ...(service.environment && {
+            environment: convertKVtoObject(service.environment),
           }),
+          ...(enabled
+            ? {
+                build: {
+                  ...buildRest,
+                  args: convertKVtoObject(buildRest.args),
+                },
+              }
+            : { build: null }),
         }),
       );
 
@@ -147,9 +151,31 @@ const DockerCompose: FC = () => {
         {},
       );
 
+      const services = refactoredService.map((item) => {
+        if (item.ports && item?.ports[0].length === 0) {
+          item.ports = null;
+        }
+        if (item.volumes && item.volumes[0].length === 0) {
+          item.volumes = null;
+        }
+        if (item.networks && item.networks[0].length === 0) {
+          item.networks = null;
+        }
+        if (item.depends_on && item.depends_on[0].length === 0) {
+          item.depends_on = null;
+        }
+        if (item.environment && !item.environment[0]) {
+          item.environment = null;
+        }
+        if (item.environment && item.environment[0]) {
+          item.environment = null;
+        }
+        return item;
+      });
+
       const requestBody: DockerComposeBody = {
         version: data.version,
-        services: convertServicesToObject(refactoredService),
+        services: convertServicesToObject(services),
         networks: refactoredNetwork,
       };
 
@@ -162,6 +188,7 @@ const DockerCompose: FC = () => {
           `${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');
       }
     }

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

@@ -64,7 +64,7 @@ const KV_Schema = zod.array(
     value: zod
       .string()
       .min(1, { message: 'Value must be at least 1 character long' }),
-  }),
+  }).nullable(),
 );
 
 export const BuildSchema = zod.object({
@@ -80,11 +80,11 @@ export const ServiceSchema = zod.object({
   image: zod.string(),
   environment: KV_Schema,
   container_name: zod.string(),
-  ports: zod.array(zod.string()),
+  ports: zod.array(zod.string()).nullable(),
   command: zod.string().optional(),
-  volumes: zod.array(zod.string()),
-  networks: zod.array(zod.string()),
-  depends_on: zod.array(zod.string()),
+  volumes: zod.array(zod.string()).nullable(),
+  networks: zod.array(zod.string()).nullable(),
+  depends_on: zod.array(zod.string()).nullable(),
 });
 
 const labelValueSchema = zod.object({