feat(web): enhance service configuration handling and improve network type definitions

Author: AmirhoseinBrz

web/src/lib/helper.ts

@@ -1,3 +1,5 @@
+import { IServiceConfig } from '@/pages/docker-compose/docker-compose.type';
+
 export const getNestedValue = (obj: any, path: string) => {
   return path.split('.').reduce((acc, part) => acc && acc[part], obj);
 };
@@ -21,13 +23,10 @@ interface Service {
 
 export const convertServicesToObject = (
   services: Service[],
-): Record<string, Omit<Service, 'name'>> => {
-  return services.reduce(
-    (acc, service) => {
-      const { name, ...serviceWithoutName } = service;
-      acc[name] = serviceWithoutName;
-      return acc;
-    },
-    {} as Record<string, Omit<Service, 'name'>>,
-  );
+): IServiceConfig => {
+  return services.reduce((acc, service) => {
+    const { name, ...serviceWithoutName } = service;
+    acc[name] = serviceWithoutName as IServiceConfig[string];
+    return acc;
+  }, {} as IServiceConfig);
 };

web/src/pages/docker-compose/components/network-fields.tsx

@@ -1,10 +1,9 @@
-import { FC, useState } from 'react';
-import { ChevronDown, Plus, Trash2 } from 'lucide-react';
+import { FC } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { FormInput } from '@/components/form/form-input';
 import { FormCheckbox } from '@/components/form/form-checkbox';
 import { FormSelect } from '@/components/form/form-select';
-import { cn } from '@/lib/utils';
 
 const defaultNetworkDrivers = ['bridge', 'host', 'none', 'overlay'] as const;
 

web/src/pages/docker-compose/components/service-ports-fields.tsx

@@ -29,7 +29,7 @@ const ServicePortsFields: FC<ServicePortsFieldsProps> = ({ serviceIndex }) => {
           Add <Plus className="size-3" />
         </button>
       </div>
-      <div className="flex space-y-4">
+      <div className="flex space-x-4">
         {fields.map((field, idx) => (
           <div
             className={cn(

web/src/pages/docker-compose/components/service-volumes-fields.tsx

@@ -31,7 +31,7 @@ export const ServiceVolumesFields: FC<ServiceVolumesFieldsProps> = ({
           Add <Plus className="size-3" />
         </button>
       </div>
-      <div className="flex space-y-4">
+      <div className="flex space-x-4">
         {fields.map((field, idx) => (
           <div
             className={cn(

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

@@ -130,13 +130,16 @@ const DockerCompose: FC = () => {
       const refactoredNetwork = data.networks.app_network.reduce(
         (acc: INetworkConfig, network) => {
           if (!data.networks.custom) {
-            acc[network.network_name] = {
-              driver: network.driver?.value,
-            };
-          } else {
+            if ('driver' in network) {
+              acc[network.network_name] = {
+                driver: network.driver?.value,
+              };
+            }
+          }
+          if ('name' in network && 'external' in network) {
             acc[network.network_name] = {
               name: network.name,
-              external: network.external,
+              external: !!network.external,
             };
           }
           return acc;

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

@@ -8,7 +8,7 @@ interface IBuildConfig {
   dockerfile: string;
 }
 
-interface IServiceConfig {
+export interface IServiceConfig {
   [key: string]: {
     build?: IBuildConfig;
     image: string;
@@ -121,3 +121,20 @@ export const DockerComposeSchema = zod.object({
 });
 
 export type TDockerCompose = zod.infer<typeof DockerComposeSchema>;
+
+
+type AppNetwork = {
+  network_name: string;
+  driver: {
+    label: string;
+    value: "bridge" | "host" | "none" | "overlay";
+  };
+};
+
+type NetworkConfig = {
+  name: string;
+  network_name: string;
+  external?: boolean;
+};
+
+export type CombinedNetworkType = AppNetwork | NetworkConfig;