feat(form): refactor error message handling in form components and update HelmTemplate schema

AmirhoseinBrz · AmirhoseinBrz · commit e65b3c1be5c5 · 2024-12-03T19:39:12.000+03:30
diff --git a/web/src/components/form/form-input.tsx b/web/src/components/form/form-input.tsx
@@ -17,11 +17,6 @@ export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
       {label && (
         <div className="mb-2 flex items-baseline justify-between">
           <Form.Label className="form-label">{label} :</Form.Label>
-          {errorMessage && (
-            <Form.Message className="form-message text-sm text-red-500">
-              {errorMessage}
-            </Form.Message>
-          )}
         </div>
       )}
       <Form.Control asChild>
@@ -31,6 +26,11 @@ export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
           {...props}
         />
       </Form.Control>
+      {errorMessage && (
+        <Form.Message className="form-message ml-auto text-sm text-red-500">
+          {errorMessage}
+        </Form.Message>
+      )}
     </Form.Field>
   );
 };
diff --git a/web/src/components/form/form-select.tsx b/web/src/components/form/form-select.tsx
@@ -3,6 +3,9 @@ import * as Form from '@radix-ui/react-form';
 import { Controller, useFormContext } from 'react-hook-form';
 import { FormFieldProps } from '../../types/form.types';
 import Select from 'react-select';
+import { getNestedValue } from '@/lib/helper';
+import { selectStyle } from '@/pages/helm-template/styles/helm-template.style';
+import { useStyle } from '@/hooks';
 
 interface OptionType {
   value: string;
@@ -29,19 +32,16 @@ export const FormSelect = ({
     formState: { errors },
   } = useFormContext();
 
-  const fieldError = errors[name];
+  const { darkMode } = useStyle();
+
+  const fieldError = getNestedValue(errors, name);
   const errorMessage = fieldError?.message as string;
 
   return (
     <Form.Field className="form-field" name={name}>
       {label && (
         <div className="mb-2 flex items-baseline justify-between">
           <Form.Label className="form-label">{label} :</Form.Label>
-          {errorMessage && (
-            <Form.Message className="form-message text-red-500">
-              {errorMessage}
-            </Form.Message>
-          )}
         </div>
       )}
       <Form.Control asChild>
@@ -55,10 +55,16 @@ export const FormSelect = ({
               placeholder={placeholder}
               className="w-full"
               {...props}
+              styles={selectStyle(darkMode)}
             />
           )}
         />
       </Form.Control>
+      {errorMessage && (
+        <Form.Message className="form-message mt-1 text-red-500">
+          {errorMessage}
+        </Form.Message>
+      )}
     </Form.Field>
   );
 };
diff --git a/web/src/pages/helm-template/helm-template.tsx b/web/src/pages/helm-template/helm-template.tsx
@@ -6,6 +6,7 @@ import { API } from '@/enums/api.enums';
 import {
   HelmTemplateBody,
   HelmTemplateResponse,
+  HelmTemplateSchema,
   helmTemplateSchema,
   helmTemplateValidationError,
 } from './helm-template.types';
@@ -60,7 +61,10 @@ const HelmTemplate: FC = () => {
     defaultValues,
   });
 
-  const { control } = methods;
+  const { control, getFieldState, watch } = methods;
+
+  console.log(getFieldState('pods'));
+  console.log(watch());
 
   const {
     fields: pods,
@@ -81,13 +85,23 @@ const HelmTemplate: FC = () => {
     remove(index);
   };
 
-  const handleSubmit = async (data) => {
+  const handleSubmit = async (data: HelmTemplateSchema) => {
     try {
-      console.log(data);
+      const body_data = data.pods.map((data) => {
+        const { mode, accessModes, size } = data.persistance;
+
+        return {
+          ...data,
+          persistance: {
+            size: `${size}${mode.value}`,
+            accessModes: accessModes.value,
+          },
+        };
+      });
 
       const body: HelmTemplateBody = {
-        api_version: parseInt(data.apiVersion),
-        pods: data.pods,
+        api_version: data.api_version,
+        pods: body_data,
       };
 
       await helmTemplateMutate(body);
@@ -202,15 +216,15 @@ const HelmTemplate: FC = () => {
                   <p className="mb-2 mt-6 text-base font-bold">Persistence</p>
                   <div className="mb-2 flex flex-col">
                     <p className="mb-1">Size</p>
-                    <div className="flex items-center gap-3 [&>div]:flex-1">
+                    <div className="flex gap-3 [&>div]:flex-1">
                       <FormInput
                         name={`pods.${index}.persistance.size`}
                         label=""
                         placeholder="Value"
                       />
 
                       <FormSelect
-                        name={`pods.${index}.persistance.size`}
+                        name={`pods.${index}.persistance.mode`}
                         label=""
                         placeholder="Select..."
                         options={sizeOptions}
@@ -252,7 +266,7 @@ const HelmTemplate: FC = () => {
                   <div className="mb-2 mt-3 flex flex-col">
                     <FormInput
                       id="pods_ingress_host"
-                      name="ingress.host"
+                      name={`pods.${index}.ingress.host`}
                       label="Host"
                       placeholder="www.example.com"
                     />
@@ -308,25 +322,25 @@ export const PodEnvironmentFields: React.FC<PodEnvironmentFieldsProps> = ({
       </div>
       <div className="grid grid-cols-2 gap-4">
         {fields.map((field, envIdx) => (
-          <div
-            className="flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500"
-            key={field.id}
-          >
+          <div className="flex" key={field.id}>
             <FormInput
               id={`env_name_${envIdx}`}
               name={`pods.${podIndex}.environment.${envIdx}.name`}
               label=""
               placeholder="Env"
-              className="h-12 rounded-s-md"
+              className="h-12 divide-gray-200 rounded-md rounded-s-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500"
             />
             <FormInput
               id={`env_value_${envIdx}`}
               name={`pods.${podIndex}.environment.${envIdx}.value`}
               label=""
               placeholder="Hi"
-              className={cn('h-12 w-full px-2 outline-none dark:bg-black-1', {
-                'rounded-e-md': envIdx === 0,
-              })}
+              className={cn(
+                'h-12 w-full divide-gray-200 rounded-md border border-gray-200 px-2 outline-none dark:divide-gray-500 dark:border-gray-500 dark:bg-black-1',
+                {
+                  'rounded-e-md': envIdx === 0,
+                },
+              )}
             />
             {envIdx > 0 && (
               <button
diff --git a/web/src/pages/helm-template/helm-template.types.ts b/web/src/pages/helm-template/helm-template.types.ts
@@ -23,8 +23,8 @@ export interface helmTemplateValidationError {
 export interface Pod {
   name: string;
   image: string;
-  target_port: number | null;
-  replicas: number | null;
+  target_port: string | null;
+  replicas: string | null;
   persistance: {
     size: string;
     accessModes: string;
@@ -46,21 +46,27 @@ const environmentSchema = zod.object({
   value: zod.string().min(1, 'Value is required'),
 });
 
+const labelValueSchema = zod.object({
+  label: zod.string(),
+  value: zod.string(),
+});
+
 const persistanceSchema = zod.object({
+  mode: labelValueSchema,
   size: zod.string().min(1, 'Size is required'),
-  accessModes: zod.string().min(1, 'Access mode is required'),
+  accessModes: labelValueSchema,
 });
 
 const ingressSchema = zod.object({
   enabled: zod.boolean(),
-  host: zod.string().url('Must be a valid URL'),
+  host: zod.string(),
 });
 
 const podSchema = zod.object({
   name: zod.string().min(1, 'Name is required'),
   image: zod.string().min(1, 'Image is required'),
-  target_port: zod.number().nullable(),
-  replicas: zod.number().nullable(),
+  target_port: zod.string().nullable(),
+  replicas: zod.string().nullable(),
   persistance: persistanceSchema,
   environment: zod
     .array(environmentSchema)
@@ -73,3 +79,4 @@ export const helmTemplateSchema = zod.object({
   api_version: zod.number().min(1, 'API version is required'),
   pods: zod.array(podSchema).min(1, 'At least one pod is required'),
 });
+export type HelmTemplateSchema = zod.infer<typeof helmTemplateSchema>;
