refactor: refactor aws set provider workflow

ui/app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx

@@ -1,35 +1,30 @@
-import { redirect } from "next/navigation";
 import React from "react";
 
 import {
   ViaCredentialsForm,
   ViaRoleForm,
 } from "@/components/providers/workflow/forms";
+import { SelectViaAWS } from "@/components/providers/workflow/forms/select-via-aws/select-via-aws";
 
 interface Props {
   searchParams: { type: string; id: string; via?: string };
 }
 
 export default function AddCredentialsPage({ searchParams }: Props) {
-  if (
-    !searchParams.type ||
-    !searchParams.id ||
-    (searchParams.type === "aws" && !searchParams.via)
-  ) {
-    redirect("/providers/connect-account");
-  }
-
-  const useCredentialsForm =
-    (searchParams.type === "aws" && searchParams.via === "credentials") ||
-    (searchParams.type !== "aws" && !searchParams.via);
-
-  const useRoleForm =
-    searchParams.type === "aws" && searchParams.via === "role";
-
   return (
     <>
-      {useCredentialsForm && <ViaCredentialsForm searchParams={searchParams} />}
-      {useRoleForm && <ViaRoleForm searchParams={searchParams} />}
+      {searchParams.type === "aws" && !searchParams.via && (
+        <SelectViaAWS initialVia={searchParams.via} />
+      )}
+
+      {((searchParams.type === "aws" && searchParams.via === "credentials") ||
+        searchParams.type !== "aws") && (
+        <ViaCredentialsForm searchParams={searchParams} />
+      )}
+
+      {searchParams.type === "aws" && searchParams.via === "role" && (
+        <ViaRoleForm searchParams={searchParams} />
+      )}
     </>
   );
 }

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

@@ -19,7 +19,6 @@ 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>;
 
@@ -36,7 +35,6 @@ export const ConnectAccountForm = () => {
       providerType: undefined,
       providerUid: "",
       providerAlias: "",
-      awsCredentialsType: "",
     },
   });
 
@@ -51,55 +49,60 @@ export const ConnectAccountForm = () => {
       ([key, value]) => value !== undefined && formData.append(key, value),
     );
 
-    const data = await addProvider(formData);
-
-    if (data?.errors && data.errors.length > 0) {
-      // Handle server-side validation errors
-      data.errors.forEach((error: ApiError) => {
-        const errorMessage = error.detail;
-        const pointer = error.source?.pointer;
-
-        switch (pointer) {
-          case "/data/attributes/provider":
-            form.setError("providerType", {
-              type: "server",
-              message: errorMessage,
-            });
-            break;
-          case "/data/attributes/uid":
-          case "/data/attributes/__all__":
-            form.setError("providerUid", {
-              type: "server",
-              message: errorMessage,
-            });
-            break;
-          case "/data/attributes/alias":
-            form.setError("providerAlias", {
-              type: "server",
-              message: errorMessage,
-            });
-            break;
-          default:
-            toast({
-              variant: "destructive",
-              title: "Oops! Something went wrong",
-              description: errorMessage,
-            });
-        }
+    try {
+      const data = await addProvider(formData);
+
+      if (data?.errors && data.errors.length > 0) {
+        // Handle server-side validation errors
+        data.errors.forEach((error: ApiError) => {
+          const errorMessage = error.detail;
+          const pointer = error.source?.pointer;
+
+          switch (pointer) {
+            case "/data/attributes/provider":
+              form.setError("providerType", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
+            case "/data/attributes/uid":
+            case "/data/attributes/__all__":
+              form.setError("providerUid", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
+            case "/data/attributes/alias":
+              form.setError("providerAlias", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
+            default:
+              toast({
+                variant: "destructive",
+                title: "Oops! Something went wrong",
+                description: errorMessage,
+              });
+          }
+        });
+        return;
+      } else {
+        // Go to the next step after successful submission
+        const {
+          id,
+          attributes: { provider: providerType },
+        } = data.data;
+
+        router.push(`/providers/add-credentials?type=${providerType}&id=${id}`);
+      }
+    } catch (error: any) {
+      console.error("Error during submission:", error);
+      toast({
+        variant: "destructive",
+        title: "Submission Error",
+        description: error.message || "Something went wrong. Please try again.",
       });
-      return;
-    } else {
-      // Navigate to the next step after successful submission
-      const {
-        id,
-        attributes: { provider: providerType },
-      } = data.data;
-      const credentialsParam = values.awsCredentialsType
-        ? `&via=${values.awsCredentialsType}`
-        : "";
-      router.push(
-        `/providers/add-credentials?type=${providerType}&id=${id}${credentialsParam}`,
-      );
     }
   };
 
@@ -158,13 +161,6 @@ export const ConnectAccountForm = () => {
               isRequired={false}
               isInvalid={!!form.formState.errors.providerAlias}
             />
-            {providerType === "aws" && (
-              <RadioGroupAWSViaCredentialsForm
-                control={form.control}
-                isInvalid={!!form.formState.errors.awsCredentialsType}
-                errorMessage={form.formState.errors.awsCredentialsType?.message}
-              />
-            )}
           </>
         )}
         {/* Navigation buttons */}

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

@@ -7,18 +7,18 @@ 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>;
+  control: Control<any>;
   isInvalid: boolean;
   errorMessage?: string;
+  onChange?: (value: string) => void;
 };
 
 export const RadioGroupAWSViaCredentialsForm = ({
   control,
   isInvalid,
   errorMessage,
+  onChange,
 }: RadioGroupAWSViaCredentialsFormProps) => {
   return (
     <Controller
@@ -31,6 +31,12 @@ export const RadioGroupAWSViaCredentialsForm = ({
             isInvalid={isInvalid}
             {...field}
             value={field.value || ""}
+            onValueChange={(value) => {
+              field.onChange(value);
+              if (onChange) {
+                onChange(value);
+              }
+            }}
           >
             <div className="flex flex-col gap-4">
               <span className="text-sm text-default-500">Using IAM Role</span>

ui/components/providers/workflow/forms/select-via-aws/index.ts

@@ -0,0 +1 @@
+export * from "./select-via-aws";

ui/components/providers/workflow/forms/select-via-aws/select-via-aws.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+
+import { Form } from "@/components/ui/form";
+
+import { RadioGroupAWSViaCredentialsForm } from "../radio-group-aws-via-credentials-form";
+
+interface SelectViaAWSProps {
+  initialVia?: string;
+}
+
+export const SelectViaAWS = ({ initialVia }: SelectViaAWSProps) => {
+  const router = useRouter();
+  const form = useForm({
+    defaultValues: {
+      awsCredentialsType: initialVia || "",
+    },
+  });
+
+  const handleSelectionChange = (value: string) => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("via", value);
+    router.push(url.toString());
+  };
+
+  return (
+    <Form {...form}>
+      <RadioGroupAWSViaCredentialsForm
+        control={form.control}
+        isInvalid={!!form.formState.errors.awsCredentialsType}
+        errorMessage={form.formState.errors.awsCredentialsType?.message}
+        onChange={handleSelectionChange}
+      />
+    </Form>
+  );
+};

ui/components/providers/workflow/forms/via-credentials-form.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ChevronRightIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Control, useForm } from "react-hook-form";
 import * as z from "zod";
 
@@ -46,6 +46,15 @@ export const ViaCredentialsForm = ({
   const router = useRouter();
   const { toast } = useToast();
 
+  const searchParamsObj = useSearchParams();
+
+  // Handler for back button
+  const handleBackStep = () => {
+    const currentParams = new URLSearchParams(window.location.search);
+    currentParams.delete("via");
+    router.push(`?${currentParams.toString()}`);
+  };
+
   const providerType = searchParams.type;
   const providerId = searchParams.id;
   const formSchema = addCredentialsFormSchema(providerType);
@@ -199,6 +208,21 @@ export const ViaCredentialsForm = ({
         )}
 
         <div className="flex w-full justify-end sm:space-x-6">
+          {searchParamsObj.get("via") === "credentials" && (
+            <CustomButton
+              type="button"
+              ariaLabel="Back"
+              className="w-1/2 bg-transparent"
+              variant="faded"
+              size="lg"
+              radius="lg"
+              onPress={handleBackStep}
+              startContent={!isLoading && <ChevronLeftIcon size={24} />}
+              isDisabled={isLoading}
+            >
+              <span>Back</span>
+            </CustomButton>
+          )}
           <CustomButton
             type="submit"
             ariaLabel={"Save"}

ui/components/providers/workflow/forms/via-role-form.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { SaveIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Control, useForm } from "react-hook-form";
 import * as z from "zod";
 
@@ -26,6 +26,15 @@ export const ViaRoleForm = ({
   const router = useRouter();
   const { toast } = useToast();
 
+  const searchParamsObj = useSearchParams();
+
+  // Handler for back button
+  const handleBackStep = () => {
+    const currentParams = new URLSearchParams(window.location.search);
+    currentParams.delete("via");
+    router.push(`?${currentParams.toString()}`);
+  };
+
   const providerType = searchParams.type;
   const providerId = searchParams.id;
 
@@ -54,7 +63,6 @@ export const ViaRoleForm = ({
   const isLoading = form.formState.isSubmitting;
 
   const onSubmitClient = async (values: FormSchemaType) => {
-    console.log("via ROLE form", values);
     const formData = new FormData();
 
     Object.entries(values).forEach(
@@ -106,6 +114,21 @@ export const ViaRoleForm = ({
         )}
 
         <div className="flex w-full justify-end sm:space-x-6">
+          {searchParamsObj.get("via") === "role" && (
+            <CustomButton
+              type="button"
+              ariaLabel="Back"
+              className="w-1/2 bg-transparent"
+              variant="faded"
+              size="lg"
+              radius="lg"
+              onPress={handleBackStep}
+              startContent={!isLoading && <ChevronLeftIcon size={24} />}
+              isDisabled={isLoading}
+            >
+              <span>Back</span>
+            </CustomButton>
+          )}
           <CustomButton
             type="submit"
             ariaLabel={"Save"}
@@ -114,9 +137,9 @@ export const ViaRoleForm = ({
             color="action"
             size="lg"
             isLoading={isLoading}
-            startContent={!isLoading && <SaveIcon size={24} />}
+            endContent={!isLoading && <ChevronRightIcon size={24} />}
           >
-            {isLoading ? <>Loading</> : <span>Save</span>}
+            {isLoading ? <>Loading</> : <span>Next</span>}
           </CustomButton>
         </div>
       </form>