diff --git a/frontend/src/pages/integrations/hasura-cloud/create.tsx b/frontend/src/pages/integrations/hasura-cloud/create.tsx index ffc3e87e4..734b156f5 100644 --- a/frontend/src/pages/integrations/hasura-cloud/create.tsx +++ b/frontend/src/pages/integrations/hasura-cloud/create.tsx @@ -1,5 +1,228 @@ +import { Controller, useForm } from "react-hook-form"; +import Head from "next/head"; +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { yupResolver } from "@hookform/resolvers/yup"; +import queryString from "query-string"; +import * as yup from "yup"; + +import { + Button, + Card, + CardTitle, + FormControl, + Input, + Select, + SelectItem +} from "@app/components/v2"; +import { useCreateIntegration } from "@app/hooks/api"; +import { + useGetIntegrationAuthApps, + useGetIntegrationAuthById +} from "@app/hooks/api/integrationAuth"; +import { useGetWorkspaceById } from "@app/hooks/api/workspace"; + +const schema = yup.object({ + secretPath: yup.string().trim().required("secret path is required"), + sourceEnvironment: yup.string().trim().required("project environment is required"), + appId: yup.string().trim().required("project is required") +}); + +type FormData = yup.InferType; + +const APP_NAME = "Hasura Cloud"; export default function HasuraCloudCreateIntegrationPage() { - return null; + const { + control, + handleSubmit, + formState: { isSubmitting } + } = useForm({ + resolver: yupResolver(schema) + }); + const router = useRouter(); + const { mutateAsync } = useCreateIntegration(); + const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]); + + const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? ""); + const { data: integrationAuth, isLoading: isIntegrationAuthLoading } = useGetIntegrationAuthById( + (integrationAuthId as string) ?? "" + ); + + const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = + useGetIntegrationAuthApps({ + integrationAuthId: (integrationAuthId as string) ?? "" + }); + + const onFormSubmit = async ({ secretPath, sourceEnvironment, appId }: FormData) => { + try { + if (!integrationAuth?._id) return; + + const app = integrationAuthApps?.find((data) => data.appId === appId); + await mutateAsync({ + integrationAuthId: integrationAuth?._id, + isActive: true, + sourceEnvironment, + secretPath, + appId, + app: app?.name + }); + + router.push(`/integrations/${localStorage.getItem("projectData.id")}`); + } catch (err) { + console.error(err); + } + }; + + return integrationAuth && workspace && integrationAuthApps ? ( +
+ + Set Up {APP_NAME} Integration + + + + +
+
+ {`${APP_NAME} +
+ {APP_NAME} Integration + + +
+ + Docs + +
+ + +
+ + +
+ ( + + + + )} + /> + + ( + + + + )} + /> + + ( + + + + )} + /> + + + +
+
+ ) : ( +
+ + Set Up {APP_NAME} Integration + + + {isIntegrationAuthLoading || isIntegrationAuthAppsLoading ? ( + infisical loading indicator + ) : ( +
+ +

+ Something went wrong. Please contact{" "} + + support@infisical.com + {" "} + if the issue persists. +

+
+ )} +
+ ); } HasuraCloudCreateIntegrationPage.requireAuth = true;