refactor(web): Fix Helm Template structure and styling issues

- Refactored pod environment fields into separate components instead of defining them directly within the Helm Template

web/src/pages/helm-template/components/pod-environment-fields.tsx

@@ -0,0 +1,68 @@
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { Plus, Trash2 } from 'lucide-react';
+import { FormInput } from '@/components/form/form-input';
+import { cn } from '@/lib/utils';
+import { FC } from 'react';
+
+type PodEnvironmentFieldsProps = {
+  podIndex: number;
+};
+
+const PodEnvironmentFields: FC<PodEnvironmentFieldsProps> = ({ podIndex }) => {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: `pods.${podIndex}.environment`,
+  });
+
+  return (
+    <div className="mb-2 mt-6">
+      <div className="mb-2 flex items-center">
+        <p className="text-base font-bold">Environments</p>
+
+        <button
+          type="button"
+          onClick={() => append({ name: '', value: '' })}
+          className="btn btn-xs ml-4"
+        >
+          Add <Plus className="size-3" />
+        </button>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        {fields.map((field, envIdx) => (
+          <div
+            className="mb-4 flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500 [&>div]:mb-0"
+            key={field.id}
+          >
+            <FormInput
+              id={`env_name_${envIdx}`}
+              name={`pods.${podIndex}.environment.${envIdx}.name`}
+              label=""
+              placeholder="Env"
+              className="h-12 w-full rounded-s-md px-2 outline-none"
+            />
+            <FormInput
+              id={`env_value_${envIdx}`}
+              name={`pods.${podIndex}.environment.${envIdx}.value`}
+              label=""
+              placeholder="Hi"
+              className={cn('h-12 w-full rounded-s-md px-2 outline-none', {
+                'rounded-e-md': envIdx === 0,
+              })}
+            />
+            {envIdx > 0 && (
+              <button
+                onClick={() => remove(envIdx)}
+                className="btn btn-error rounded-e-md rounded-s-none"
+              >
+                <Trash2 />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PodEnvironmentFields;

web/src/pages/helm-template/helm-template.tsx

@@ -6,21 +6,22 @@ import { API } from '@/enums/api.enums';
 import {
   HelmTemplateBody,
   HelmTemplateResponse,
-  HelmTemplateSchema,
   helmTemplateSchema,
   helmTemplateValidationError,
 } from './helm-template.types';
 import { toast } from 'sonner';
 import { isAxiosError } from 'axios';
 import { accessModesOptions, sizeOptions } from './data/select-options';
 import { useDownload } from '@/hooks';
-import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 
 import { FormWrapper } from '@/components/form/form-wrapper';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormInput } from '@/components/form/form-input';
 import { FormCheckbox } from '@/components/form/form-checkbox';
 import { FormSelect } from '@/components/form/form-select';
+import PodEnvironmentFields from './components/pod-environment-fields';
+import type { HelmTemplate } from './helm-template.types';
 
 const HelmTemplate: FC = () => {
   const { mutateAsync: helmTemplateMutate, isPending: helmTemplatePending } =
@@ -41,8 +42,7 @@ const HelmTemplate: FC = () => {
       {
         name: '',
         image: '',
-        target_port: null,
-        replicas: "",
+        replicas: '',
         persistance: {},
         environment: [
           {
@@ -82,7 +82,7 @@ const HelmTemplate: FC = () => {
     remove(index);
   };
 
-  const handleSubmit = async (data: HelmTemplateSchema) => {
+  const handleSubmit = async (data: HelmTemplate) => {
     try {
       const body_data = data.pods.map((data) => {
         const { mode, accessModes, size } = data.persistance;
@@ -97,7 +97,7 @@ const HelmTemplate: FC = () => {
       });
 
       const body: HelmTemplateBody = {
-        api_version: parseInt(data.api_version),
+        api_version: data.api_version,
         pods: body_data,
       };
 
@@ -125,6 +125,8 @@ const HelmTemplate: FC = () => {
               id="api_version"
               name="api_version"
               placeholder="2"
+              inputType="number"
+              isNumber={true}
             />
           </div>
           <div className="mb-4 flex items-center">
@@ -200,6 +202,8 @@ const HelmTemplate: FC = () => {
                       name={`pods.${index}.target_port`}
                       label="Target Port"
                       placeholder="80"
+                      inputType="number"
+                      isNumber={true}
                     />
                   </div>
                   <div className="mb-2 flex flex-col">
@@ -208,6 +212,8 @@ const HelmTemplate: FC = () => {
                       name={`pods.${index}.replicas`}
                       label="Replicas"
                       placeholder="1"
+                      inputType="number"
+                      isNumber={true}
                     />
                   </div>
                   <p className="mb-2 mt-6 text-base font-bold">Persistence</p>
@@ -219,7 +225,6 @@ const HelmTemplate: FC = () => {
                         label=""
                         placeholder="Value"
                       />
-
                       <FormSelect
                         name={`pods.${index}.persistance.mode`}
                         label=""
@@ -290,66 +295,3 @@ const HelmTemplate: FC = () => {
 };
 
 export default HelmTemplate;
-
-interface PodEnvironmentFieldsProps {
-  podIndex: number;
-}
-
-export const PodEnvironmentFields: React.FC<PodEnvironmentFieldsProps> = ({
-  podIndex,
-}) => {
-  const { control } = useFormContext();
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: `pods.${podIndex}.environment`,
-  });
-
-  return (
-    <div className="mb-2 mt-6">
-      <div className="mb-2 flex items-center">
-        <p className="text-base font-bold">Environments</p>
-
-        <button
-          type="button"
-          onClick={() => append({ name: '', value: '' })}
-          className="btn btn-xs ml-4"
-        >
-          Add <Plus className="size-3" />
-        </button>
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        {fields.map((field, envIdx) => (
-          <div
-            className="mb-4 flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500 [&>div]:mb-0"
-            key={field.id}
-          >
-            <FormInput
-              id={`env_name_${envIdx}`}
-              name={`pods.${podIndex}.environment.${envIdx}.name`}
-              label=""
-              placeholder="Env"
-              className="h-12 w-full rounded-s-md px-2 outline-none"
-            />
-            <FormInput
-              id={`env_value_${envIdx}`}
-              name={`pods.${podIndex}.environment.${envIdx}.value`}
-              label=""
-              placeholder="Hi"
-              className={cn('h-12 w-full rounded-s-md px-2 outline-none', {
-                'rounded-e-md': envIdx === 0,
-              })}
-            />
-            {envIdx > 0 && (
-              <button
-                onClick={() => remove(envIdx)}
-                className="btn btn-error rounded-e-md rounded-s-none"
-              >
-                <Trash2 />
-              </button>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};

web/src/pages/helm-template/helm-template.types.ts

@@ -23,8 +23,6 @@ export interface helmTemplateValidationError {
 export interface Pod {
   name: string;
   image: string;
-  target_port: string | null;
-  replicas: string | null;
   persistance: {
     size: string;
     accessModes: string;
@@ -65,8 +63,12 @@ const ingressSchema = zod.object({
 const podSchema = zod.object({
   name: zod.string().min(1, 'Name is required'),
   image: zod.string().min(1, 'Image is required'),
-  target_port: zod.string().nullable(),
-  replicas: zod.string().min(1 ,"Replicas is required"),
+  target_port: zod
+    .number({ invalid_type_error: 'Target Port is required!' })
+    .min(1, 'Target Port is required!'),
+  replicas: zod
+    .number({ invalid_type_error: 'Replicas is required!' })
+    .min(1, 'Replicas is required'),
   persistance: persistanceSchema,
   environment: zod
     .array(environmentSchema)
@@ -76,7 +78,9 @@ const podSchema = zod.object({
 });
 
 export const helmTemplateSchema = zod.object({
-  api_version: zod.string().min(1, 'API version is required'),
+  api_version: zod
+    .number({ invalid_type_error: 'API version is required!' })
+    .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>;
+export type HelmTemplate = zod.infer<typeof helmTemplateSchema>;