From 76bbb72a7abfa16c4533780939c2518d5b4e5fa3 Mon Sep 17 00:00:00 2001 From: Milad Sadeghi Date: Wed, 4 Dec 2024 17:31:27 +0330 Subject: [PATCH] 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 --- .../components/pod-environment-fields.tsx | 68 +++++++++++++++ web/src/pages/helm-template/helm-template.tsx | 82 +++---------------- .../helm-template/helm-template.types.ts | 16 ++-- .../styles/helm-template.style.ts | 52 ------------ 4 files changed, 90 insertions(+), 128 deletions(-) create mode 100644 web/src/pages/helm-template/components/pod-environment-fields.tsx delete mode 100644 web/src/pages/helm-template/styles/helm-template.style.ts diff --git a/web/src/pages/helm-template/components/pod-environment-fields.tsx b/web/src/pages/helm-template/components/pod-environment-fields.tsx new file mode 100644 index 00000000..590a0174 --- /dev/null +++ b/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 = ({ podIndex }) => { + const { control } = useFormContext(); + const { fields, append, remove } = useFieldArray({ + control, + name: `pods.${podIndex}.environment`, + }); + + return ( +
+
+

Environments

+ + +
+
+ {fields.map((field, envIdx) => ( +
+ + + {envIdx > 0 && ( + + )} +
+ ))} +
+
+ ); +}; + +export default PodEnvironmentFields; diff --git a/web/src/pages/helm-template/helm-template.tsx b/web/src/pages/helm-template/helm-template.tsx index f008ef3d..007d1a61 100644 --- a/web/src/pages/helm-template/helm-template.tsx +++ b/web/src/pages/helm-template/helm-template.tsx @@ -6,7 +6,6 @@ import { API } from '@/enums/api.enums'; import { HelmTemplateBody, HelmTemplateResponse, - HelmTemplateSchema, helmTemplateSchema, helmTemplateValidationError, } from './helm-template.types'; @@ -14,13 +13,15 @@ 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} />
@@ -200,6 +202,8 @@ const HelmTemplate: FC = () => { name={`pods.${index}.target_port`} label="Target Port" placeholder="80" + inputType="number" + isNumber={true} />
@@ -208,6 +212,8 @@ const HelmTemplate: FC = () => { name={`pods.${index}.replicas`} label="Replicas" placeholder="1" + inputType="number" + isNumber={true} />

Persistence

@@ -219,7 +225,6 @@ const HelmTemplate: FC = () => { label="" placeholder="Value" /> - { }; export default HelmTemplate; - -interface PodEnvironmentFieldsProps { - podIndex: number; -} - -export const PodEnvironmentFields: React.FC = ({ - podIndex, -}) => { - const { control } = useFormContext(); - const { fields, append, remove } = useFieldArray({ - control, - name: `pods.${podIndex}.environment`, - }); - - return ( -
-
-

Environments

- - -
-
- {fields.map((field, envIdx) => ( -
- - - {envIdx > 0 && ( - - )} -
- ))} -
-
- ); -}; diff --git a/web/src/pages/helm-template/helm-template.types.ts b/web/src/pages/helm-template/helm-template.types.ts index e565cc07..93a02b2e 100644 --- a/web/src/pages/helm-template/helm-template.types.ts +++ b/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; +export type HelmTemplate = zod.infer; diff --git a/web/src/pages/helm-template/styles/helm-template.style.ts b/web/src/pages/helm-template/styles/helm-template.style.ts deleted file mode 100644 index bad06869..00000000 --- a/web/src/pages/helm-template/styles/helm-template.style.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { GroupBase, StylesConfig } from 'react-select'; - -export const selectStyle = ( - isDark?: boolean, -): - | StylesConfig< - { - label: string; - value: string; - }, - false, - GroupBase<{ - label: string; - value: string; - }> - > - | undefined => { - return { - control: (styles) => ({ - ...styles, - border: isDark ? 'none' : '1px solid #e3e3e3', - borderRadius: '6px', - background: isDark ? '#121212' : '#fff', - color: isDark ? '#fff' : '#121212', - height: '40px', - ':focus-within': { - border: 'none', - boxShadow: '0 0 0 1px #f86609', - }, - ':active': { - border: 'none', - }, - }), - menu: (styles) => ({ - ...styles, - background: isDark ? '#121212' : '#fff', - border: 'none', - }), - option: (styles) => ({ - ...styles, - background: isDark ? '#121212' : '#fff', - color: isDark ? '#fff' : '#121212', - ':hover': { - background: '#f86609', - }, - }), - singleValue: (styles) => ({ - ...styles, - color: isDark ? '#fff' : '#121212', - }), - }; -};