Set Up {APP_NAME} Integration

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, Select, SelectItem } from "@app/components/v2"; import { SecretPathInput } from "@app/components/v2/SecretPathInput"; 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("Hasura Cloud project is required") }); type FormData = yup.InferType; const APP_NAME = "Hasura Cloud"; export default function HasuraCloudCreateIntegrationPage() { const { control, handleSubmit, watch, 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 selectedSourceEnvironment = watch("sourceEnvironment"); 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 ? (

${`${APP_NAME}$

{APP_NAME} Integration

Docs

( )} /> ( )} /> ( )} />

) : (

Set Up {APP_NAME} Integration {isIntegrationAuthLoading || isIntegrationAuthAppsLoading ? (

) : (

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

)}

); } HasuraCloudCreateIntegrationPage.requireAuth = true;