Update github integration refactored to react-hook-form

frontend/src/pages/integrations/github/create.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -12,9 +13,13 @@ import {
   faCircleInfo
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import axios from "axios";
 import { motion } from "framer-motion";
 import queryString from "query-string";
+import * as yup from "yup";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useCreateIntegration } from "@app/hooks/api";
 
 import {
@@ -45,9 +50,22 @@ enum TabSections {
   Options = "options"
 }
 
+const schema = yup.object({
+  selectedSourceEnvironment: yup.string().trim().required("Project Environment is required"),
+  secretPath: yup.string().trim().required("Secrets Path is required"),
+  targetAppIds: yup
+    .array(yup.string().required())
+    .min(1, "Select atleast one repo") // .min() not working showing error for empty array
+    .required("Select atleast one repo"),
+  secretSuffix: yup.string().trim().optional()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
 export default function GitHubCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
+  const { createNotification } = useNotificationContext();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -58,37 +76,44 @@ export default function GitHubCreateIntegrationPage() {
       integrationAuthId: (integrationAuthId as string) ?? ""
     });
 
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const { control, handleSubmit, watch, setValue } = useForm<FormData>({
-  const [secretPath, setSecretPath] = useState("/");
+    resolver: yupResolver(schema),
-  const [targetAppIds, setTargetAppIds] = useState<string[]>([]);
+    defaultValues: {
-  const [secretSuffix, setSecretSuffix] = useState("");
+      selectedSourceEnvironment: "",
+      secretPath: "/",
+      targetAppIds: [],
+      secretSuffix: ""
+    }
+  });
+
+  const targetAppIds = watch("targetAppIds");
 
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (workspace) {
-      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setValue("selectedSourceEnvironment", workspace.environments[0].slug);
     }
   }, [workspace]);
 
   useEffect(() => {
     if (integrationAuthApps) {
       if (integrationAuthApps.length > 0) {
-        setTargetAppIds([String(integrationAuthApps[0].appId)]);
+        setValue("targetAppIds", [String(integrationAuthApps[0].appId)]);
       } else {
-        setTargetAppIds(["none"]);
+        setValue("targetAppIds", ["none"]);
       }
     }
   }, [integrationAuthApps]);
 
-  const handleButtonClick = async () => {
+  const onFormSubmit = async (data: FormData) => {
     try {
       setIsLoading(true);
 
       if (!integrationAuth?.id) return;
 
       const targetApps = integrationAuthApps?.filter((integrationAuthApp) =>
-        targetAppIds.includes(String(integrationAuthApp.appId))
+        data.targetAppIds.includes(String(integrationAuthApp.appId))
       );
 
       if (!targetApps) return;
@@ -99,11 +124,11 @@ export default function GitHubCreateIntegrationPage() {
             integrationAuthId: integrationAuth?.id,
             isActive: true,
             app: targetApp.name,
-            sourceEnvironment: selectedSourceEnvironment,
             owner: targetApp.owner,
-            secretPath,
+            secretPath: data.secretPath,
+            sourceEnvironment: data.selectedSourceEnvironment,
             metadata: {
-              secretSuffix
+              secretSuffix: data.secretSuffix
             }
           });
         })
@@ -113,26 +138,31 @@ export default function GitHubCreateIntegrationPage() {
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
       console.error(err);
+      if (axios.isAxiosError(err)) {
+        const { message } = err?.response?.data as { message: string };
+        createNotification({
+          text: message,
+          type: "error"
+        });
+      }
+      setIsLoading(false);
     }
   };
 
-  return integrationAuth &&
+  return integrationAuth && workspace && integrationAuthApps ? (
-    workspace &&
-    selectedSourceEnvironment &&
-    integrationAuthApps &&
-    targetAppIds ? (
     <div className="flex h-full w-full flex-col items-center justify-center">
       <Head>
         <title>Set Up GitHub Integration</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
       <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+        <form onSubmit={handleSubmit(onFormSubmit)} className="px-6">
           <CardTitle
-          className="px-6 text-left text-xl"
+            className="px-0 text-left text-xl"
             subTitle="Choose which environment in Infisical you want to sync to environment variables in GitHub."
           >
             <div className="flex flex-row items-center">
-            <div className="inline flex items-center rounded-full bg-mineshaft-200">
+              <div className="flex items-center rounded-full bg-mineshaft-200">
                 <Image
                   src="/images/integrations/GitHub.png"
                   height={30}
@@ -155,7 +185,7 @@ export default function GitHubCreateIntegrationPage() {
               </Link>
             </div>
           </CardTitle>
-        <Tabs defaultValue={TabSections.Connection} className="px-6">
+          <Tabs defaultValue={TabSections.Connection}>
             <TabList>
               <div className="flex w-full flex-row border-b border-mineshaft-600">
                 <Tab value={TabSections.Connection}>Connection</Tab>
@@ -170,30 +200,57 @@ export default function GitHubCreateIntegrationPage() {
                 animate={{ opacity: 1, translateX: 0 }}
                 exit={{ opacity: 0, translateX: 30 }}
               >
-              <FormControl label="Project Environment">
+                <Controller
+                  control={control}
+                  name="selectedSourceEnvironment"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Project Environment"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
                       <Select
-                  value={selectedSourceEnvironment}
+                        defaultValue={field.value}
-                  onValueChange={(val) => setSelectedSourceEnvironment(val)}
+                        onValueChange={(e) => onChange(e)}
                         className="w-full border border-mineshaft-500"
                       >
                         {workspace?.environments.map((sourceEnvironment) => (
                           <SelectItem
                             value={sourceEnvironment.slug}
-                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
+                            key={`github-environment-${sourceEnvironment.slug}`}
                           >
                             {sourceEnvironment.name}
                           </SelectItem>
                         ))}
                       </Select>
                     </FormControl>
-              <FormControl label="Secrets Path">
+                  )}
-                <Input
-                  value={secretPath}
-                  onChange={(evt) => setSecretPath(evt.target.value)}
-                  placeholder="Provide a path, default is /"
                 />
+
+                <Controller
+                  control={control}
+                  name="secretPath"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Secrets Path"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input {...field} placeholder="Provide a path, default is /" />
                     </FormControl>
-              <FormControl label="GitHub Repo">
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="targetAppIds"
+                  render={({ field: { onChange }}) => (
+                    <FormControl
+                      label="GitHub Repo"
+                      // BUG: yup.min() not working as expected needs to be fixed
+                      errorText="Atleast one repo is required"
+                      isError={targetAppIds?.length === 0}
+                    >
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                           {integrationAuthApps.length > 0 ? (
@@ -218,22 +275,21 @@ export default function GitHubCreateIntegrationPage() {
                         >
                           {integrationAuthApps.length > 0 ? (
                             integrationAuthApps.map((integrationAuthApp) => {
-                        const isSelected = targetAppIds.includes(String(integrationAuthApp.appId));
+                              const isSelected = targetAppIds.includes(
+                                String(integrationAuthApp.appId)
+                              );
 
                               return (
                                 <DropdownMenuItem
                                   onClick={() => {
                                     if (targetAppIds.includes(String(integrationAuthApp.appId))) {
-                                setTargetAppIds(
+                                      onChange(
                                         targetAppIds.filter(
                                           (appId) => appId !== String(integrationAuthApp.appId)
                                         )
                                       );
                                     } else {
-                                setTargetAppIds([
+                                      onChange([...targetAppIds, String(integrationAuthApp.appId)]);
-                                  ...targetAppIds,
-                                  String(integrationAuthApp.appId)
-                                ]);
                                     }
                                   }}
                                   key={integrationAuthApp.appId}
@@ -260,6 +316,8 @@ export default function GitHubCreateIntegrationPage() {
                         </DropdownMenuContent>
                       </DropdownMenu>
                     </FormControl>
+                  )}
+                />
               </motion.div>
             </TabPanel>
             <TabPanel value={TabSections.Options}>
@@ -270,26 +328,39 @@ export default function GitHubCreateIntegrationPage() {
                 animate={{ opacity: 1, translateX: 0 }}
                 exit={{ opacity: 0, translateX: 30 }}
               >
-              <FormControl label="Append Secret Names with..." className="pb-[9.75rem]">
+                <Controller
+                  control={control}
+                  name="secretSuffix"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Append Secret Names with..."
+                      className="pb-[9.75rem]"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
                       <Input
-                  value={secretSuffix}
+                        {...field}
-                  onChange={(evt) => setSecretSuffix(evt.target.value)}
                         placeholder="Provide a suffix for secret names, default is no suffix"
                       />
                     </FormControl>
+                  )}
+                />
               </motion.div>
             </TabPanel>
           </Tabs>
+          <div className="flex w-full justify-end">
             <Button
-          onClick={handleButtonClick}
+              type="submit"
               color="mineshaft"
               variant="outline_bg"
-          className="mb-6 ml-auto mr-6"
+              className="mb-6"
               isLoading={isLoading}
               isDisabled={integrationAuthApps.length === 0 || targetAppIds.length === 0}
             >
               Create Integration
             </Button>
+          </div>
+        </form>
       </Card>
       <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
       <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">