From 89c441ba584555cde6e7bc617964520e73fab9c8 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Sat, 2 Nov 2024 09:10:30 +0100
Subject: [PATCH] feat: add test connection form

---
 actions/providers/providers.ts                |  2 +-
 .../test-connection/page.tsx                  | 15 +++-
 components/providers/workflow/forms/index.ts  |  1 +
 .../workflow/forms/test-connection-form.tsx   | 78 +++++++++++++++++++
 types/formSchemas.ts                          |  4 +
 5 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 components/providers/workflow/forms/test-connection-form.tsx

diff --git a/actions/providers/providers.ts b/actions/providers/providers.ts
index c4b654f1bb..55fb052d1f 100644
--- a/actions/providers/providers.ts
+++ b/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`);
 
diff --git a/app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx b/app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx
index 8138766f63..943219bee2 100644
--- a/app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx
+++ b/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} />;
 }
diff --git a/components/providers/workflow/forms/index.ts b/components/providers/workflow/forms/index.ts
index b4bb037a59..539efb24ed 100644
--- a/components/providers/workflow/forms/index.ts
+++ b/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";
diff --git a/components/providers/workflow/forms/test-connection-form.tsx b/components/providers/workflow/forms/test-connection-form.tsx
new file mode 100644
index 0000000000..2b2d085564
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/types/formSchemas.ts b/types/formSchemas.ts
index ee15b5a16b..da3dd3d8d9 100644
--- a/types/formSchemas.ts
+++ b/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