WIP

components/providers/radio-group-provider.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { UseRadioProps } from "@nextui-org/radio/dist/use-radio";
-import { cn, RadioGroup, useRadio, VisuallyHidden } from "@nextui-org/react";
+import { RadioGroup } from "@nextui-org/react";
 import React from "react";
 import { Control, Controller } from "react-hook-form";
 import { z } from "zod";
@@ -11,53 +10,9 @@ import { addProviderFormSchema } from "@/types";
 import { AWSProviderBadge, AzureProviderBadge } from "../icons/providers-badge";
 import { GCPProviderBadge } from "../icons/providers-badge/GCPProviderBadge";
 import { KS8ProviderBadge } from "../icons/providers-badge/KS8ProviderBadge";
+import { CustomRadio } from "../ui/custom";
 import { FormMessage } from "../ui/form";
 
-interface CustomRadioProps extends UseRadioProps {
-  description?: string;
-  children?: React.ReactNode;
-}
-
-export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
-  const {
-    Component,
-    children,
-    // description,
-    getBaseProps,
-    getWrapperProps,
-    getInputProps,
-    getLabelProps,
-    getLabelWrapperProps,
-    getControlProps,
-  } = useRadio(props);
-
-  return (
-    <Component
-      {...getBaseProps()}
-      className={cn(
-        "group inline-flex flex-row-reverse items-center justify-between tap-highlight-transparent hover:opacity-70 active:opacity-50",
-        "max-w-full cursor-pointer gap-4 rounded-lg border-2 border-default p-4",
-        "w-full hover:border-action data-[selected=true]:border-action",
-      )}
-    >
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <span {...getWrapperProps()}>
-        <span {...getControlProps()} />
-      </span>
-      <div {...getLabelWrapperProps()}>
-        {children && <span {...getLabelProps()}>{children}</span>}
-        {/* {description && (
-          <span className="text-small text-foreground opacity-70">
-            {description}
-          </span>
-        )} */}
-      </div>
-    </Component>
-  );
-};
-
 interface RadioGroupProviderProps {
   control: Control<z.infer<typeof addProviderFormSchema>>;
   isInvalid: boolean;

components/providers/workflow/forms/connect-account-form.tsx

@@ -13,6 +13,9 @@ import { Form } from "@/components/ui/form";
 import { addProvider } from "../../../../actions/providers/providers";
 import { addProviderFormSchema, ApiError } from "../../../../types";
 import { RadioGroupProvider } from "../../radio-group-provider";
+import { RadioGroupAWSViaCredentialsForm } from "./radio-group-aws-via-credentials-form";
+
+export type FormValues = z.infer<typeof addProviderFormSchema>;
 
 export const ConnectAccountForm = () => {
   const { toast } = useToast();
@@ -20,18 +23,19 @@ export const ConnectAccountForm = () => {
 
   const formSchema = addProviderFormSchema;
 
-  const form = useForm<z.infer<typeof formSchema>>({
+  const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       providerType: "",
       providerId: "",
       providerAlias: "",
+      awsCredentialsType: "",
     },
   });
   const providerType = form.watch("providerType");
   const isLoading = form.formState.isSubmitting;
 
-  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+  const onSubmitClient = async (values: FormValues) => {
     const formData = new FormData();
 
     Object.entries(values).forEach(
@@ -125,37 +129,11 @@ export const ConnectAccountForm = () => {
 
         {prevStep === 2 && (
           <>
-            {/* Select a provider */}
-            <RadioGroupProvider
-              control={form.control}
-              isInvalid={!!form.formState.errors.providerType}
-            />
-            {/* Provider UID */}
-            <CustomInput
-              control={form.control}
-              name="providerId"
-              type="text"
-              label="Provider UID"
-              labelPlacement="inside"
-              placeholder={"Enter the provider UID"}
-              variant="bordered"
-              isRequired
-              isInvalid={!!form.formState.errors.providerId}
-            />
-            {/* Provider alias */}
-            <CustomInput
-              control={form.control}
-              name="providerAlias"
-              type="text"
-              label="Provider alias (optional)"
-              labelPlacement="inside"
-              placeholder={"Enter the account alias"}
-              variant="bordered"
-              isRequired={false}
-              isInvalid={!!form.formState.errors.providerAlias}
-            />
+            {/* Select AWS credentials type */}
+            <RadioGroupAWSViaCredentialsForm control={form.control} />
           </>
         )}
+
         <div className="flex w-full justify-end sm:space-x-6">
           {prevStep === 2 && (
             <CustomButton

components/providers/workflow/forms/index.ts

@@ -1 +1,2 @@
 export * from "./connect-account-form";
+export * from "./radio-group-aws-via-credentials-form";

components/providers/workflow/forms/radio-group-aws-via-credentials-form.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { RadioGroup } from "@nextui-org/react";
+import React from "react";
+import { Control, Controller } from "react-hook-form";
+
+import { CustomRadio } from "@/components/ui/custom";
+
+import { FormValues } from "./connect-account-form";
+
+type RadioGroupAWSViaCredentialsFormProps = {
+  control: Control<FormValues>;
+};
+
+export const RadioGroupAWSViaCredentialsForm = ({
+  control,
+}: RadioGroupAWSViaCredentialsFormProps) => {
+  return (
+    <Controller
+      name="awsCredentialsType"
+      control={control}
+      render={({ field }) => (
+        <>
+          <RadioGroup className="flex flex-wrap" {...field}>
+            <div className="flex flex-col gap-4">
+              <span className="text-sm text-default-500">Using IAM Role</span>
+              <CustomRadio
+                description="Connect via CloudFormation"
+                value="cloudformation"
+              >
+                <div className="flex items-center">
+                  <span className="ml-2">Connect via CloudFormation</span>
+                </div>
+              </CustomRadio>
+              <CustomRadio
+                description="Connect via Terraform"
+                value="terraform"
+              >
+                <div className="flex items-center">
+                  <span className="ml-2">Connect via Terraform</span>
+                </div>
+              </CustomRadio>
+              <span className="text-sm text-default-500">
+                Using Credentials
+              </span>
+              <CustomRadio
+                description="Connect via Credentials"
+                value="credentials"
+              >
+                <div className="flex items-center">
+                  <span className="ml-2">Connect via Credentials</span>
+                </div>
+              </CustomRadio>
+            </div>
+          </RadioGroup>
+        </>
+      )}
+    />
+  );
+};

components/ui/custom/custom-radio.tsx

@@ -0,0 +1,48 @@
+import { UseRadioProps } from "@nextui-org/radio/dist/use-radio";
+import { cn, useRadio, VisuallyHidden } from "@nextui-org/react";
+import React from "react";
+
+interface CustomRadioProps extends UseRadioProps {
+  description?: string;
+  children?: React.ReactNode;
+}
+
+export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
+  const {
+    Component,
+    children,
+    // description,
+    getBaseProps,
+    getWrapperProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getControlProps,
+  } = useRadio(props);
+
+  return (
+    <Component
+      {...getBaseProps()}
+      className={cn(
+        "group inline-flex flex-row-reverse items-center justify-between tap-highlight-transparent hover:opacity-70 active:opacity-50",
+        "max-w-full cursor-pointer gap-4 rounded-lg border-2 border-default p-4",
+        "w-full hover:border-action data-[selected=true]:border-action",
+      )}
+    >
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <span {...getWrapperProps()}>
+        <span {...getControlProps()} />
+      </span>
+      <div {...getLabelWrapperProps()}>
+        {children && <span {...getLabelProps()}>{children}</span>}
+        {/* {description && (
+            <span className="text-small text-foreground opacity-70">
+              {description}
+            </span>
+          )} */}
+      </div>
+    </Component>
+  );
+};

components/ui/custom/index.ts

@@ -4,4 +4,5 @@ export * from "./custom-button";
 export * from "./custom-dropdown-filter";
 export * from "./custom-input";
 export * from "./custom-loader";
+export * from "./custom-radio";
 export * from "./CustomButtonClientAction";

types/formSchemas.ts

@@ -35,6 +35,7 @@ export const addProviderFormSchema = z.object({
   providerType: z.string(),
   providerAlias: z.string(),
   providerId: z.string(),
+  awsCredentialsType: z.string().optional(),
 });
 
 export const editProviderFormSchema = (currentAlias: string) =>