feat: add test connection form

actions/providers/providers.ts

@@ -228,7 +228,7 @@ export const checkConnectionProvider = async (formData: FormData) => {
   const session = await auth();
   const keyServer = process.env.API_BASE_URL;
 
-  const providerId = formData.get("id");
+  const providerId = formData.get("providerId");
 
   const url = new URL(`${keyServer}/providers/${providerId}/connection`);
 

app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx

@@ -1,5 +1,16 @@
+import { redirect } from "next/navigation";
 import React from "react";
 
-export default function TestConnectionPage() {
-  return <div>TestConnectionPage</div>;
+import { TestConnectionForm } from "@/components/providers/workflow/forms";
+
+interface Props {
+  searchParams: { id: string };
+}
+
+export default function TestConnectionPage({ searchParams }: Props) {
+  if (!searchParams.id) {
+    redirect("/providers/connect-account");
+  }
+
+  return <TestConnectionForm searchParams={searchParams} />;
 }

components/providers/workflow/forms/index.ts

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

components/providers/workflow/forms/test-connection-form.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+// import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { checkConnectionProvider } from "@/actions/providers/providers";
+import { SaveIcon } from "@/components/icons";
+// import { useToast } from "@/components/ui";
+import { CustomButton } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { testConnectionFormSchema } from "@/types";
+
+type FormValues = z.infer<typeof testConnectionFormSchema>;
+export const TestConnectionForm = ({
+  searchParams,
+}: {
+  searchParams: { id: string };
+}) => {
+  //   const { toast } = useToast();
+  //   const router = useRouter();
+  const providerId = searchParams.id;
+
+  const formSchema = testConnectionFormSchema;
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      providerId,
+    },
+  });
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: FormValues) => {
+    console.log({ values }, "values from test connection form");
+    const formData = new FormData();
+    formData.append("providerId", values.providerId);
+
+    const data = await checkConnectionProvider(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      console.log({ data }, "error");
+    } else {
+      console.log({ data }, "success");
+    }
+  };
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmitClient)}>
+        <div className="text-left">
+          <div className="text-2xl font-bold leading-9 text-default-foreground">
+            Test connection
+          </div>
+          <div className="py-2 text-default-500">
+            Please test the connection to the provider.
+          </div>
+        </div>
+
+        <div className="flex w-full justify-end sm:space-x-6">
+          <CustomButton
+            type="submit"
+            ariaLabel={"Save"}
+            className="w-1/2"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Connect account</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

types/formSchemas.ts

@@ -104,6 +104,10 @@ export const addCredentialsFormSchema = (providerType: string) =>
             : {}),
   });
 
+export const testConnectionFormSchema = z.object({
+  providerId: z.string(),
+});
+
 export const editProviderFormSchema = (currentAlias: string) =>
   z.object({
     alias: z