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 [secretPath, setSecretPath] = useState("/");
-  const [targetAppIds, setTargetAppIds] = useState<string[]>([]);
-  const [secretSuffix, setSecretSuffix] = useState("");
+  const { control, handleSubmit, watch, setValue } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      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,183 +138,229 @@ 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 &&
-    workspace &&
-    selectedSourceEnvironment &&
-    integrationAuthApps &&
-    targetAppIds ? (
+  return integrationAuth && workspace && integrationAuthApps ? (
     <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">
-        <CardTitle
-          className="px-6 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">
-              <Image
-                src="/images/integrations/GitHub.png"
-                height={30}
-                width={30}
-                alt="GitHub logo"
-              />
+        <form onSubmit={handleSubmit(onFormSubmit)} className="px-6">
+          <CardTitle
+            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="flex items-center rounded-full bg-mineshaft-200">
+                <Image
+                  src="/images/integrations/GitHub.png"
+                  height={30}
+                  width={30}
+                  alt="GitHub logo"
+                />
+              </div>
+              <span className="ml-2.5">GitHub Integration </span>
+              <Link href="https://infisical.com/docs/integrations/cicd/githubactions" passHref>
+                <a target="_blank" rel="noopener noreferrer">
+                  <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                    <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                    Docs
+                    <FontAwesomeIcon
+                      icon={faArrowUpRightFromSquare}
+                      className="ml-1.5 mb-[0.07rem] text-xxs"
+                    />
+                  </div>
+                </a>
+              </Link>
             </div>
-            <span className="ml-2.5">GitHub Integration </span>
-            <Link href="https://infisical.com/docs/integrations/cicd/githubactions" passHref>
-              <a target="_blank" rel="noopener noreferrer">
-                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="ml-1.5 mb-[0.07rem] text-xxs"
-                  />
-                </div>
-              </a>
-            </Link>
-          </div>
-        </CardTitle>
-        <Tabs defaultValue={TabSections.Connection} className="px-6">
-          <TabList>
-            <div className="flex w-full flex-row border-b border-mineshaft-600">
-              <Tab value={TabSections.Connection}>Connection</Tab>
-              <Tab value={TabSections.Options}>Options</Tab>
-            </div>
-          </TabList>
-          <TabPanel value={TabSections.Connection}>
-            <motion.div
-              key="panel-1"
-              transition={{ duration: 0.15 }}
-              initial={{ opacity: 0, translateX: 30 }}
-              animate={{ opacity: 1, translateX: 0 }}
-              exit={{ opacity: 0, translateX: 30 }}
-            >
-              <FormControl label="Project Environment">
-                <Select
-                  value={selectedSourceEnvironment}
-                  onValueChange={(val) => setSelectedSourceEnvironment(val)}
-                  className="w-full border border-mineshaft-500"
-                >
-                  {workspace?.environments.map((sourceEnvironment) => (
-                    <SelectItem
-                      value={sourceEnvironment.slug}
-                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
+          </CardTitle>
+          <Tabs defaultValue={TabSections.Connection}>
+            <TabList>
+              <div className="flex w-full flex-row border-b border-mineshaft-600">
+                <Tab value={TabSections.Connection}>Connection</Tab>
+                <Tab value={TabSections.Options}>Options</Tab>
+              </div>
+            </TabList>
+            <TabPanel value={TabSections.Connection}>
+              <motion.div
+                key="panel-1"
+                transition={{ duration: 0.15 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: 30 }}
+              >
+                <Controller
+                  control={control}
+                  name="selectedSourceEnvironment"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Project Environment"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
                     >
-                      {sourceEnvironment.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-              <FormControl label="Secrets Path">
-                <Input
-                  value={secretPath}
-                  onChange={(evt) => setSecretPath(evt.target.value)}
-                  placeholder="Provide a path, default is /"
-                />
-              </FormControl>
-              <FormControl label="GitHub Repo">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    {integrationAuthApps.length > 0 ? (
-                      <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
-                        {targetAppIds.length === 1
-                          ? integrationAuthApps?.find(
-                              (integrationAuthApp) =>
-                                targetAppIds[0] === String(integrationAuthApp.appId)
-                            )?.name
-                          : `${targetAppIds.length} repositories selected`}
-                        <FontAwesomeIcon icon={faAngleDown} className="text-xs" />
-                      </div>
-                    ) : (
-                      <div className="inline-flex w-full cursor-default items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
-                        No repositories found
-                      </div>
-                    )}
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    align="start"
-                    className="thin-scrollbar z-[100] max-h-80 overflow-y-scroll"
-                  >
-                    {integrationAuthApps.length > 0 ? (
-                      integrationAuthApps.map((integrationAuthApp) => {
-                        const isSelected = targetAppIds.includes(String(integrationAuthApp.appId));
-
-                        return (
-                          <DropdownMenuItem
-                            onClick={() => {
-                              if (targetAppIds.includes(String(integrationAuthApp.appId))) {
-                                setTargetAppIds(
-                                  targetAppIds.filter(
-                                    (appId) => appId !== String(integrationAuthApp.appId)
-                                  )
-                                );
-                              } else {
-                                setTargetAppIds([
-                                  ...targetAppIds,
-                                  String(integrationAuthApp.appId)
-                                ]);
-                              }
-                            }}
-                            key={integrationAuthApp.appId}
-                            icon={
-                              isSelected ? (
-                                <FontAwesomeIcon
-                                  icon={faCheckCircle}
-                                  className="pr-0.5 text-primary"
-                                />
-                              ) : (
-                                <div className="pl-[1.01rem]" />
-                              )
-                            }
-                            iconPos="left"
-                            className="w-[28.4rem] text-sm"
+                      <Select
+                        defaultValue={field.value}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full border border-mineshaft-500"
+                      >
+                        {workspace?.environments.map((sourceEnvironment) => (
+                          <SelectItem
+                            value={sourceEnvironment.slug}
+                            key={`github-environment-${sourceEnvironment.slug}`}
                           >
-                            {integrationAuthApp.name}
-                          </DropdownMenuItem>
-                        );
-                      })
-                    ) : (
-                      <div />
-                    )}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </FormControl>
-            </motion.div>
-          </TabPanel>
-          <TabPanel value={TabSections.Options}>
-            <motion.div
-              key="panel-1"
-              transition={{ duration: 0.15 }}
-              initial={{ opacity: 0, translateX: -30 }}
-              animate={{ opacity: 1, translateX: 0 }}
-              exit={{ opacity: 0, translateX: 30 }}
-            >
-              <FormControl label="Append Secret Names with..." className="pb-[9.75rem]">
-                <Input
-                  value={secretSuffix}
-                  onChange={(evt) => setSecretSuffix(evt.target.value)}
-                  placeholder="Provide a suffix for secret names, default is no suffix"
+                            {sourceEnvironment.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
                 />
-              </FormControl>
-            </motion.div>
-          </TabPanel>
-        </Tabs>
-        <Button
-          onClick={handleButtonClick}
-          color="mineshaft"
-          variant="outline_bg"
-          className="mb-6 ml-auto mr-6"
-          isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0 || targetAppIds.length === 0}
-        >
-          Create Integration
-        </Button>
+
+                <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>
+                  )}
+                />
+
+                <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 ? (
+                            <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                              {targetAppIds.length === 1
+                                ? integrationAuthApps?.find(
+                                    (integrationAuthApp) =>
+                                      targetAppIds[0] === String(integrationAuthApp.appId)
+                                  )?.name
+                                : `${targetAppIds.length} repositories selected`}
+                              <FontAwesomeIcon icon={faAngleDown} className="text-xs" />
+                            </div>
+                          ) : (
+                            <div className="inline-flex w-full cursor-default items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                              No repositories found
+                            </div>
+                          )}
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                          align="start"
+                          className="thin-scrollbar z-[100] max-h-80 overflow-y-scroll"
+                        >
+                          {integrationAuthApps.length > 0 ? (
+                            integrationAuthApps.map((integrationAuthApp) => {
+                              const isSelected = targetAppIds.includes(
+                                String(integrationAuthApp.appId)
+                              );
+
+                              return (
+                                <DropdownMenuItem
+                                  onClick={() => {
+                                    if (targetAppIds.includes(String(integrationAuthApp.appId))) {
+                                      onChange(
+                                        targetAppIds.filter(
+                                          (appId) => appId !== String(integrationAuthApp.appId)
+                                        )
+                                      );
+                                    } else {
+                                      onChange([...targetAppIds, String(integrationAuthApp.appId)]);
+                                    }
+                                  }}
+                                  key={integrationAuthApp.appId}
+                                  icon={
+                                    isSelected ? (
+                                      <FontAwesomeIcon
+                                        icon={faCheckCircle}
+                                        className="pr-0.5 text-primary"
+                                      />
+                                    ) : (
+                                      <div className="pl-[1.01rem]" />
+                                    )
+                                  }
+                                  iconPos="left"
+                                  className="w-[28.4rem] text-sm"
+                                >
+                                  {integrationAuthApp.name}
+                                </DropdownMenuItem>
+                              );
+                            })
+                          ) : (
+                            <div />
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </FormControl>
+                  )}
+                />
+              </motion.div>
+            </TabPanel>
+            <TabPanel value={TabSections.Options}>
+              <motion.div
+                key="panel-1"
+                transition={{ duration: 0.15 }}
+                initial={{ opacity: 0, translateX: -30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: 30 }}
+              >
+                <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
+                        {...field}
+                        placeholder="Provide a suffix for secret names, default is no suffix"
+                      />
+                    </FormControl>
+                  )}
+                />
+              </motion.div>
+            </TabPanel>
+          </Tabs>
+          <div className="flex w-full justify-end">
+            <Button
+              type="submit"
+              color="mineshaft"
+              variant="outline_bg"
+              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">