feat(web): Simplify network configuration in Docker Compose

- Remove individual external network switch for each network.
- Allow all networks to be marked as external or to have a driver, streamlining the configuration

Author: MiladSadeghi

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

@@ -15,7 +15,7 @@ const NetworkFields: FC = () => {
     name: 'networks.app_network',
   });
 
-  const customNetwork = watch('networks.custom');
+  const customNetwork = watch('networks.external_network');
 
   const handleRemoveNetwork = (index: number) => {
     remove(index);
@@ -25,7 +25,6 @@ const NetworkFields: FC = () => {
     const networkData = customNetwork
       ? {
           network_name: '',
-          external: false,
           name: '',
         }
       : {
@@ -52,11 +51,14 @@ const NetworkFields: FC = () => {
             Add <Plus className="size-3" />
           </button>
         </div>
-        <FormCheckbox label="Custom" name="networks.custom" />
+        <FormCheckbox
+          label="External Network"
+          name="networks.external_network"
+        />
       </div>
 
       <div className="space-y-4">
-        <div className="w-full rounded-md border border-gray-500 p-5">
+        <div className="flex w-full flex-col gap-4 rounded-md border border-gray-500 p-5">
           {fields.map((field, index) => (
             <div key={field.id} className="mb-4">
               <div className="mb-4 flex items-center justify-between">
@@ -72,14 +74,6 @@ const NetworkFields: FC = () => {
               </div>
 
               <div>
-                {customNetwork && (
-                  <div className="mb-2 flex justify-end">
-                    <FormCheckbox
-                      name={`networks.app_network.${index}.external`}
-                      label="External Network"
-                    />
-                  </div>
-                )}
                 <div className="flex items-center gap-3 [&>div]:flex-1">
                   <FormInput
                     name={`networks.app_network.${index}.network_name`}

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

@@ -86,7 +86,7 @@ const DockerCompose: FC = () => {
       },
     ],
     networks: {
-      custom: false,
+      external_network: false,
       app_network: [
         {
           network_name: '',
@@ -180,25 +180,31 @@ const DockerCompose: FC = () => {
         }),
       );
 
-      const refactoredNetwork = data.networks.app_network.reduce(
-        (acc: INetworkConfig, network) => {
-          if (!data.networks.custom) {
-            if ('driver' in network) {
+      let refactoredNetwork: any;
+
+      if (!data.networks.app_network.some((network) => network.network_name)) {
+        refactoredNetwork = null;
+      } else {
+        refactoredNetwork = data.networks.app_network.reduce(
+          (acc: INetworkConfig, network) => {
+            if (!data.networks.external_network) {
+              if ('driver' in network) {
+                acc[network.network_name] = {
+                  driver: network.driver?.value,
+                };
+              }
+            }
+            if ('name' in network) {
               acc[network.network_name] = {
-                driver: network.driver?.value,
+                name: network.name,
+                external_network: true,
               };
             }
-          }
-          if ('name' in network && 'external' in network) {
-            acc[network.network_name] = {
-              name: network.name,
-              external: !!network.external,
-            };
-          }
-          return acc;
-        },
-        {},
-      );
+            return acc;
+          },
+          {},
+        );
+      }
 
       const services = refactoredService.map((item) => {
         const bodyService = {

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

@@ -31,7 +31,7 @@ export interface INetworkConfig {
       }
     | {
         name: string;
-        external: boolean;
+        external_network: boolean;
       };
 }
 
@@ -117,20 +117,19 @@ const labelValueSchema = zod.object({
 
 export const NetworkSchema = zod.union([
   zod.object({
-    custom: zod.literal(false),
+    external_network: zod.literal(false),
     app_network: zod.array(
       zod.object({
-        network_name: zod.string().min(1, 'Network name is required.'),
+        network_name: zod.string(),
         driver: labelValueSchema,
       }),
     ),
   }),
   zod.object({
-    custom: zod.literal(true),
+    external_network: zod.literal(true),
     app_network: zod.array(
       zod.object({
         network_name: zod.string().min(1, 'Network name is required.'),
-        external: zod.boolean().optional(),
         name: zod.string().min(1, 'Name is required.'),
       }),
     ),
@@ -162,7 +161,7 @@ export type DockerCompose = {
       depends_on: string[] | null;
     };
   }[];
-  networks: INetworkConfig;
+  networks: INetworkConfig | null;
 };
 
 type AppNetwork = {