feat(web): Make 'Version' and 'Networks' fields required in Docker Compose

Author: MiladSadeghi

web/src/components/form/form-input.tsx

@@ -11,6 +11,7 @@ export const FormInput = ({
   isNumber,
   inputType,
   inputClass,
+  showError = true,
   ...props
 }: FormFieldProps) => {
   const { className, ...restProps } = props;
@@ -26,7 +27,7 @@ export const FormInput = ({
   return (
     <Form.Field
       className={cn('form-field relative', {
-        'mb-6': errorMessage,
+        'mb-6': errorMessage && showError,
       })}
       name={name}
     >
@@ -49,7 +50,7 @@ export const FormInput = ({
           {...restProps}
         />
       </Form.Control>
-      {errorMessage && (
+      {showError && errorMessage && (
         <div className="absolute left-0 top-full">
           <Form.Message className="form-message ml-auto text-sm text-red-500">
             {errorMessage}

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

@@ -41,13 +41,13 @@ const NetworkFields: FC = () => {
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-4">
+      <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center">
           <p className="text-2xl font-bold">Networks</p>
           <button
             type="button"
             onClick={handleAppendNetwork}
-            className="ml-4 btn btn-xs"
+            className="btn btn-xs ml-4"
           >
             Add <Plus className="size-3" />
           </button>
@@ -56,10 +56,10 @@ const NetworkFields: FC = () => {
       </div>
 
       <div className="space-y-4">
-        <div className="w-full p-5 border border-gray-500 rounded-md">
+        <div className="w-full rounded-md border border-gray-500 p-5">
           {fields.map((field, index) => (
             <div key={field.id} className="mb-4">
-              <div className="flex items-center justify-between mb-4">
+              <div className="mb-4 flex items-center justify-between">
                 <p className="font-semibold">Network #{index + 1}</p>
                 {index > 0 && (
                   <button
@@ -73,7 +73,7 @@ const NetworkFields: FC = () => {
 
               <div>
                 {customNetwork && (
-                  <div className="flex justify-end mb-2">
+                  <div className="mb-2 flex justify-end">
                     <FormCheckbox
                       name={`networks.app_network.${index}.external`}
                       label="External Network"
@@ -85,6 +85,7 @@ const NetworkFields: FC = () => {
                     name={`networks.app_network.${index}.network_name`}
                     label="App Network"
                     placeholder="network_name"
+                    showError={false}
                   />
                   {!customNetwork && (
                     <FormSelect
@@ -101,6 +102,7 @@ const NetworkFields: FC = () => {
                       name={`networks.app_network.${index}.name`}
                       label="Name"
                       placeholder="Name"
+                      showError={false}
                     />
                   )}
                 </div>

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

@@ -120,7 +120,7 @@ export const NetworkSchema = zod.union([
     custom: zod.literal(false),
     app_network: zod.array(
       zod.object({
-        network_name: zod.string(),
+        network_name: zod.string().min(1, 'Network name is required.'),
         driver: labelValueSchema,
       }),
     ),
@@ -129,16 +129,16 @@ export const NetworkSchema = zod.union([
     custom: zod.literal(true),
     app_network: zod.array(
       zod.object({
-        network_name: zod.string(),
+        network_name: zod.string().min(1, 'Network name is required.'),
         external: zod.boolean().optional(),
-        name: zod.string(),
+        name: zod.string().min(1, 'Name is required.'),
       }),
     ),
   }),
 ]);
 
 export const DockerComposeSchema = zod.object({
-  version: zod.string(),
+  version: zod.string().min(1, 'Version is required.'),
   services: zod.array(ServiceSchema),
   networks: NetworkSchema,
 });

web/src/types/form.types.ts

@@ -11,6 +11,7 @@ export type FormFieldProps = {
   isNumber?: boolean;
   inputType?: typeof HTMLInputElement.prototype.type;
   inputClass?: string;
+  showError?: boolean;
 } & ComponentPropsWithoutRef<typeof Form.Field>;
 
 export type FormConfig<T extends z.ZodType> = {