From 052b8821956eae655ef269b46c39c4dd9060f936 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Thu, 31 Oct 2024 06:41:36 +0100
Subject: [PATCH] chore: client validation when select a provider type

---
 components/providers/radio-group-provider.tsx |  9 +++-
 .../workflow/forms/connect-account-form.tsx   | 14 ++++---
 .../radio-group-aws-via-credentials-form.tsx  | 17 +++++++-
 types/formSchemas.ts                          | 42 ++++++++++++++++---
 4 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/components/providers/radio-group-provider.tsx b/components/providers/radio-group-provider.tsx
index a90aa4afcd..e376e69ff4 100644
--- a/components/providers/radio-group-provider.tsx
+++ b/components/providers/radio-group-provider.tsx
@@ -16,11 +16,13 @@ import { FormMessage } from "../ui/form";
 interface RadioGroupProviderProps {
   control: Control<z.infer<typeof addProviderFormSchema>>;
   isInvalid: boolean;
+  errorMessage?: string;
 }
 
 export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
   control,
   isInvalid,
+  errorMessage,
 }) => {
   return (
     <Controller
@@ -32,6 +34,7 @@ export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
             className="flex flex-wrap"
             isInvalid={isInvalid}
             {...field}
+            value={field.value || ""}
           >
             <div className="flex flex-col gap-4">
               <CustomRadio description="Amazon Web Services" value="aws">
@@ -60,7 +63,11 @@ export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
               </CustomRadio>
             </div>
           </RadioGroup>
-          <FormMessage className="text-system-error dark:text-system-error" />
+          {errorMessage && (
+            <FormMessage className="text-system-error dark:text-system-error">
+              {errorMessage}
+            </FormMessage>
+          )}
         </>
       )}
     />
diff --git a/components/providers/workflow/forms/connect-account-form.tsx b/components/providers/workflow/forms/connect-account-form.tsx
index a2da297ae3..428fe46992 100644
--- a/components/providers/workflow/forms/connect-account-form.tsx
+++ b/components/providers/workflow/forms/connect-account-form.tsx
@@ -21,13 +21,14 @@ export type FormValues = z.infer<typeof addProviderFormSchema>;
 export const ConnectAccountForm = () => {
   const { toast } = useToast();
   const [prevStep, setPrevStep] = useState(1);
+  const router = useRouter();
 
   const formSchema = addProviderFormSchema;
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      providerType: "",
+      providerType: undefined,
       providerId: "",
       providerAlias: "",
       awsCredentialsType: "",
@@ -36,9 +37,8 @@ export const ConnectAccountForm = () => {
   const providerType = form.watch("providerType");
   const isLoading = form.formState.isSubmitting;
 
-  const router = useRouter();
-
   const onSubmitClient = async (values: FormValues) => {
+    console.log({ values });
     const formData = new FormData();
 
     Object.entries(values).forEach(
@@ -46,7 +46,6 @@ export const ConnectAccountForm = () => {
     );
 
     const data = await addProvider(formData);
-    console.log(data);
 
     if (data?.errors && data.errors.length > 0) {
       data.errors.forEach((error: ApiError) => {
@@ -109,6 +108,7 @@ export const ConnectAccountForm = () => {
             <RadioGroupProvider
               control={form.control}
               isInvalid={!!form.formState.errors.providerType}
+              errorMessage={form.formState.errors.providerType?.message}
             />
             {/* Provider UID */}
             <CustomInput
@@ -140,7 +140,11 @@ export const ConnectAccountForm = () => {
         {prevStep === 2 && (
           <>
             {/* Select AWS credentials type */}
-            <RadioGroupAWSViaCredentialsForm control={form.control} />
+            <RadioGroupAWSViaCredentialsForm
+              control={form.control}
+              isInvalid={!!form.formState.errors.awsCredentialsType}
+              errorMessage={form.formState.errors.awsCredentialsType?.message}
+            />
           </>
         )}
 
diff --git a/components/providers/workflow/forms/radio-group-aws-via-credentials-form.tsx b/components/providers/workflow/forms/radio-group-aws-via-credentials-form.tsx
index fae21b2482..a0a04f551d 100644
--- a/components/providers/workflow/forms/radio-group-aws-via-credentials-form.tsx
+++ b/components/providers/workflow/forms/radio-group-aws-via-credentials-form.tsx
@@ -5,15 +5,20 @@ import React from "react";
 import { Control, Controller } from "react-hook-form";
 
 import { CustomRadio } from "@/components/ui/custom";
+import { FormMessage } from "@/components/ui/form";
 
 import { FormValues } from "./connect-account-form";
 
 type RadioGroupAWSViaCredentialsFormProps = {
   control: Control<FormValues>;
+  isInvalid: boolean;
+  errorMessage?: string;
 };
 
 export const RadioGroupAWSViaCredentialsForm = ({
   control,
+  isInvalid,
+  errorMessage,
 }: RadioGroupAWSViaCredentialsFormProps) => {
   return (
     <Controller
@@ -21,7 +26,12 @@ export const RadioGroupAWSViaCredentialsForm = ({
       control={control}
       render={({ field }) => (
         <>
-          <RadioGroup className="flex flex-wrap" {...field}>
+          <RadioGroup
+            className="flex flex-wrap"
+            isInvalid={isInvalid}
+            {...field}
+            value={field.value || ""}
+          >
             <div className="flex flex-col gap-4">
               <span className="text-sm text-default-500">Using IAM Role</span>
               <CustomRadio
@@ -53,6 +63,11 @@ export const RadioGroupAWSViaCredentialsForm = ({
               </CustomRadio>
             </div>
           </RadioGroup>
+          {errorMessage && (
+            <FormMessage className="text-system-error dark:text-system-error">
+              {errorMessage}
+            </FormMessage>
+          )}
         </>
       )}
     />
diff --git a/types/formSchemas.ts b/types/formSchemas.ts
index d9239c1633..5297692124 100644
--- a/types/formSchemas.ts
+++ b/types/formSchemas.ts
@@ -31,12 +31,42 @@ export const scheduleScanFormSchema = () =>
     scheduleDate: z.string(),
   });
 
-export const addProviderFormSchema = z.object({
-  providerType: z.string(),
-  providerAlias: z.string(),
-  providerId: z.string(),
-  awsCredentialsType: z.string().optional(),
-});
+export const addProviderFormSchema = z
+  .object({
+    providerType: z.enum(["aws", "azure", "gcp", "kubernetes"], {
+      required_error: "Please select a provider type",
+    }),
+  })
+  .and(
+    z.discriminatedUnion("providerType", [
+      z.object({
+        providerType: z.literal("aws"),
+        providerAlias: z.string(),
+        providerId: z.string(),
+        awsCredentialsType: z.string().min(1, {
+          message: "Please select the type of credentials you want to use",
+        }),
+      }),
+      z.object({
+        providerType: z.literal("azure"),
+        providerAlias: z.string(),
+        providerId: z.string(),
+        awsCredentialsType: z.string().optional(),
+      }),
+      z.object({
+        providerType: z.literal("gcp"),
+        providerAlias: z.string(),
+        providerId: z.string(),
+        awsCredentialsType: z.string().optional(),
+      }),
+      z.object({
+        providerType: z.literal("kubernetes"),
+        providerAlias: z.string(),
+        providerId: z.string(),
+        awsCredentialsType: z.string().optional(),
+      }),
+    ]),
+  );
 
 export const addCredentialsFormSchema = (providerType: string) =>
   z.object({