fix merge conflicts

frontend/src/pages/integrations/gcp-secret-manager/create.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import Head from "next/head";
-import Link from "next/link";
+import { Controller, useForm } from "react-hook-form";
 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 { motion } from "framer-motion";
 import queryString from "query-string";
+import * as yup from "yup";
 
 import {
   useCreateIntegration
@@ -17,7 +17,12 @@ import {
   FormControl,
   Input,
   Select,
-  SelectItem
+  SelectItem,
+  Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
 } from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
@@ -25,41 +30,93 @@ import {
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
+enum TabSections {
+  Connection = "connection",
+  Options = "options"
+}
+
+const schema = yup.object({
+  selectedSourceEnvironment: yup.string().required("Source environment is required"),
+  secretPath: yup.string().required("Secret path is required"),
+  targetAppId: yup.string().required("GCP project is required"),
+  secretPrefix: yup.string(),
+  secretSuffix: yup.string(),
+  shouldLabel: yup.boolean(),
+  labelName: yup.string(),
+  labelValue: yup.string()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
 export default function GCPSecretManagerCreateIntegrationPage() {
   const router = useRouter();
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    watch
+  } = useForm<FormData>({
+      resolver: yupResolver(schema),
+      defaultValues: {
+        secretPath: "/",
+        shouldLabel: false,
+        labelName: "managed-by",
+        labelValue: "infisical"
+      }
+  });
+  
+  const shouldLabel = watch("shouldLabel");
+  const selectedSourceEnvironment = watch("selectedSourceEnvironment");
+
   const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [targetAppId, setTargetAppId] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-
   const [isLoading, setIsLoading] = useState(false);
+  
+  useEffect(() => {
+    if (shouldLabel) {
+      setValue("labelName", "managed-by");
+      setValue("labelValue", "infisical");
+      return;
+    }
+    
+    setValue("labelName", undefined);
+    setValue("labelValue", undefined);
+  }, [shouldLabel]);
 
   useEffect(() => {
     if (workspace) {
-      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setValue("selectedSourceEnvironment", workspace.environments[0].slug);
     }
   }, [workspace]);
 
   useEffect(() => {
     if (integrationAuthApps) {
       if (integrationAuthApps.length > 0) {
-        setTargetAppId(integrationAuthApps[0].appId as string);
+        setValue("targetAppId", integrationAuthApps[0].appId as string);
       } else {
-        setTargetAppId("none");
+        setValue("targetAppId", "none");
       }
     }
   }, [integrationAuthApps]);
-
-  const handleButtonClick = async () => {
+  
+  const onFormSubmit = async ({
+    selectedSourceEnvironment: sce,
+    secretPath,
+    targetAppId,
+    secretPrefix,
+    secretSuffix,
+    shouldLabel: sl,
+    labelName,
+    labelValue
+  }: FormData) => {
     try {
       setIsLoading(true);
 
@@ -70,118 +127,235 @@ export default function GCPSecretManagerCreateIntegrationPage() {
         isActive: true,
         app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name,
         appId: targetAppId,
-        sourceEnvironment: selectedSourceEnvironment,
-        secretPath
+        sourceEnvironment: sce,
+        secretPath,
+        metadata: {
+          secretPrefix,
+          secretSuffix,
+          ...(sl ? {
+            secretGCPLabel: {
+              labelName,
+              labelValue
+            }
+          } : {})
+        }
       });
-
+      
       setIsLoading(false);
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
       console.error(err);
+      setIsLoading(false);
     }
-  };
+  }
   
   return integrationAuth &&
     workspace &&
     selectedSourceEnvironment &&
-    integrationAuthApps &&
-    targetAppId ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
-        <Head>
-          <title>Set Up GCP Secret Manager Integration</title>
-          <link rel='icon' href='/infisical.ico' />
-        </Head>
-        <CardTitle 
-          className="text-left px-6 text-xl" 
-          subTitle="After creating an integration, your secrets will automatically start syncing from Infisical to GCP Secret Manager."
-        >
-          GCP Secret Manager Integration 
-          <Link href="https://infisical.com/docs/integrations/cloud/gcp-secret-manager" passHref>
-            <a target="_blank" rel="noopener noreferrer">
-              <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
-                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
-                Docs
-                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
-              </div>
-            </a>
-          </Link>
-        </CardTitle>
-        <FormControl label="Project Environment" className="px-6">
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem
-                value={sourceEnvironment.slug}
-                key={`source-environment-${sourceEnvironment.slug}`}
-              >
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl label="Secrets Path" className="px-6">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-        <FormControl label="GCP Project" className="px-6">
-          <Select
-            value={targetAppId}
-            onValueChange={(val) => setTargetAppId(val)}
-            className="w-full border border-mineshaft-500"
-            isDisabled={integrationAuthApps.length === 0}
-          >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.appId as string}
-                  key={`target-app-${integrationAuthApp.appId}`}
+    integrationAuthApps ? (
+    <form 
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="flex h-full w-full items-center justify-center"
+    >
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">GCP Secret Manager Integration</CardTitle>
+        <Tabs defaultValue={TabSections.Connection}>
+          <TabList>
+            <Tab value={TabSections.Connection}>Connection</Tab>
+            <Tab value={TabSections.Options}>Options</Tab>
+          </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 }}
+            >
+              <div>
+                <Controller
+                  control={control}
+                  name="selectedSourceEnvironment"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Project Environment"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                      >
+                        {workspace?.environments.map((sourceEnvironment) => (
+                          <SelectItem
+                            value={sourceEnvironment.slug}
+                            key={`source-environment-${sourceEnvironment.slug}`}
+                          >
+                            {sourceEnvironment.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                    control={control}
+                    defaultValue=""
+                    name="secretPath"
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                            label="Secrets Path"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                        >
+                        <Input 
+                            {...field} 
+                            placeholder="/"
+                        />
+                        </FormControl>
+                    )}
+                />
+                <Controller
+                    control={control}
+                    name="targetAppId"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        label="GCP Project"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          {...field}
+                          onValueChange={(e) => {
+                            if (e === "") return;
+                            onChange(e)
+                          }}
+                          className="w-full"
+                        >
+                          {integrationAuthApps.length > 0 ? (
+                            integrationAuthApps.map((integrationAuthApp) => (
+                              <SelectItem
+                                value={String(integrationAuthApp.appId as string)}
+                                key={`target-app-${String(integrationAuthApp.appId)}`}
+                              >
+                                {integrationAuthApp.name}
+                              </SelectItem>
+                            ))
+                          ) : (
+                            <SelectItem value="none" key="target-app-none">
+                              No projects found
+                            </SelectItem>
+                          )}
+                        </Select>
+                      </FormControl>
+                    )
+                  }}
+                />
+                <Button
+                  className="mt-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={isLoading}
                 >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No projects found
-              </SelectItem>
+                  Create Integration
+                </Button>
+                </div>
+            </motion.div>
+          </TabPanel>
+          <TabPanel value={TabSections.Options}>
+            <Controller
+              control={control}
+              name="secretPrefix"
+              render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                      label="Secret Prefix"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                  >
+                  <Input 
+                      {...field} 
+                      placeholder="INFISICAL_"
+                  />
+                  </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="secretSuffix"
+              render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                      label="Secret Suffix"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                  >
+                  <Input 
+                      {...field} 
+                      placeholder="_INFISICAL"
+                  />
+                  </FormControl>
+              )}
+            />
+            <div className="mt-8">
+              <Controller
+                control={control}
+                name="shouldLabel"
+                render={({ field: { onChange, value } }) => (
+                  <Switch
+                    id="label-gcp"
+                    onCheckedChange={(isChecked) => onChange(isChecked)}
+                    isChecked={value}
+                  >
+                    Label in GCP Secret Manager
+                  </Switch>
+                )}
+              />
+            </div>
+            {shouldLabel && (
+              <div className="mt-8">
+                <Controller
+                  control={control}
+                  name="labelName"
+                  render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                          label="Label Name"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                      >
+                      <Input 
+                          {...field} 
+                          placeholder="managed-by"
+                      />
+                      </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="labelValue"
+                  render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                          label="Label Name"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                      >
+                      <Input 
+                          {...field} 
+                          placeholder="infisical"
+                      />
+                      </FormControl>
+                  )}
+                />
+              </div>
             )}
-          </Select>
-        </FormControl>
-        <Button
-          onClick={handleButtonClick}
-          colorSchema="primary"
-          variant="outline_bg"
-          className="mb-8 mt-2 ml-auto mr-6 w-min"
-          isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0}
-        >
-          Create Integration
-        </Button>
+          </TabPanel>
+        </Tabs>
       </Card>
-    </div>
+    </form>
   ) : (
-    <div className="flex justify-center items-center w-full h-full">
-      {isintegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
-        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
-        <p>
-          Something went wrong. Please contact <a
-            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="mailto:support@infisical.com"
-          >
-            support@infisical.com
-          </a> if the issue persists.
-        </p>
-      </div>}
-    </div>
+    <div />
   );
 }
 
-GCPSecretManagerCreateIntegrationPage.requireAuth = true;
+GCPSecretManagerCreateIntegrationPage.requireAuth = true;