Update GCP SM and GitLab integrations to have overwrite popup warning

frontend/src/pages/integrations/gitlab/authorize.tsx

@@ -1,37 +1,55 @@
 import crypto from "crypto";
 
-import { 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";
 import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
 import { useGetCloudIntegrations } from "@app/hooks/api";
 
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
 
+const schema = yup.object({
+  gitLabURL: yup.string()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
 export default function GitLabAuthorizeIntegrationPage() {
-    const { data: cloudIntegrations } = useGetCloudIntegrations();
-  
-    const [gitLabURL, setGitLabURL] = useState("");
-  
-    const handleIntegrateWithOAuth = () => {
-      if (!cloudIntegrations) return;
-      const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gitlab");
-      
-      if (!integrationOption) return;
-      
-      const baseURL = gitLabURL.trim() === "" ? "https://gitlab.com" : gitLabURL.trim();
-      
-      const csrfToken = crypto.randomBytes(16).toString("hex");
-      localStorage.setItem("latestCSRFToken", csrfToken);
-      
-      const state = `${csrfToken}|${gitLabURL.trim() === "" ? "" : gitLabURL.trim()}`;
-      const link = `${baseURL}/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
-      
-      window.location.assign(link);
+  const {
+    control,
+    handleSubmit
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      gitLabURL: ""
     }
+  });
+
+  const { data: cloudIntegrations } = useGetCloudIntegrations();
+  
+  const onFormSubmit = ({
+    gitLabURL
+  }: FormData) => {
+    if (!cloudIntegrations) return;
+    const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gitlab");
+    
+    if (!integrationOption) return;
+    
+    const baseURL = gitLabURL.trim() === "" ? "https://gitlab.com" : gitLabURL.trim();
+    
+    const csrfToken = crypto.randomBytes(16).toString("hex");
+    localStorage.setItem("latestCSRFToken", csrfToken);
+    
+    const state = `${csrfToken}|${gitLabURL.trim() === "" ? "" : gitLabURL.trim()}`;
+    const link = `${baseURL}/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
+    
+    window.location.assign(link);
+  }
 
   return (
     <div className="flex h-full w-full items-center justify-center">
@@ -42,7 +60,7 @@ export default function GitLabAuthorizeIntegrationPage() {
       <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
         <CardTitle 
           className="text-left px-6 text-xl" 
-          subTitle="Authorize this integration to be able to sync secrets from Infisical to GitLab. If needed, specify the self-hosted GitLab URL."
+          subTitle="Authorize this integration to sync secrets from Infisical to GitLab. If no self-hosted GitLab URL is specified, then Infisical will connect you to GitLab Cloud."
         >
           <div className="flex flex-row items-center">
             <div className="inline flex items-center pb-0.5">
@@ -65,20 +83,36 @@ export default function GitLabAuthorizeIntegrationPage() {
             </Link>
           </div>
         </CardTitle>
-        <FormControl label="Self-hosted URL (optional)" className="px-6">
-            <Input 
-                placeholder="https://self-hosted-gitlab.com" 
-                value={gitLabURL} onChange={(e) => setGitLabURL(e.target.value)} 
-            />
-          </FormControl>
-        <Button
-            onClick={handleIntegrateWithOAuth}
+        <form 
+          onSubmit={handleSubmit(onFormSubmit)}
+          className="px-6 text-right pb-8"
+        >
+          <Controller
+            control={control}
+            name="gitLabURL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Self-hosted URL (optional)"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input 
+                  {...field}
+                  placeholder="https://self-hosted-gitlab.com" 
+                />
+              </FormControl>
+            )}
+          />
+          <Button
             colorSchema="primary"
             variant="outline_bg"
-            className="mb-6 mt-2 ml-auto mr-6 w-min"
-        > 
+            className="mt-2 w-min"
+            size="sm"
+            type="submit"
+          >
             Continue with OAuth
-        </Button>
+          </Button>
+        </form>
       </Card>
     </div>
   );

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

@@ -4,13 +4,14 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+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 { usePopUp } from "@app/hooks";
 import {
   useCreateIntegration
 } from "@app/hooks/api";
@@ -21,13 +22,14 @@ import {
   CardTitle,
   FormControl,
   Input,
+  Modal,
+  ModalContent,
   Select,
   SelectItem,
   Tab,
   TabList,
   TabPanel,
-  Tabs
-} from "../../../components/v2";
+  Tabs} from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById,
@@ -60,6 +62,9 @@ type FormData = yup.InferType<typeof schema>;
 
 export default function GitLabCreateIntegrationPage() {
   const router = useRouter();
+  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+    "confirmIntegration"
+  ] as const);
   
   const {
     control,
@@ -70,7 +75,9 @@ export default function GitLabCreateIntegrationPage() {
       resolver: yupResolver(schema),
       defaultValues: {
         targetEntity: "individual",
-        secretPath: "/"
+        secretPath: "/",
+        secretPrefix: "",
+        secretSuffix: ""
       }
   });
   const selectedSourceEnvironment = watch("selectedSourceEnvironment");
@@ -167,7 +174,14 @@ export default function GitLabCreateIntegrationPage() {
     integrationAuthApps &&
     integrationAuthTeams ? (
     <form 
-      onSubmit={handleSubmit(onFormSubmit)}
+      onSubmit={handleSubmit((data: FormData) => {
+        if (!data.secretPrefix && !data.secretSuffix) {
+          handlePopUpOpen("confirmIntegration", data); 
+          return;
+        }
+        
+        onFormSubmit(data);
+      })}
       className="flex flex-col h-full w-full items-center justify-center"
     >
       <Head>
@@ -431,11 +445,40 @@ export default function GitLabCreateIntegrationPage() {
           Create Integration
         </Button>
       </Card> 
-      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      {/* <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
       <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
         <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
         <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in GitLab with secrets from Infisical.</span>
-      </div>
+      </div> */}
+      <Modal
+          isOpen={popUp.confirmIntegration?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("confirmIntegration", isOpen)}
+        >
+          <ModalContent
+            title="Heads Up"
+            footerContent={
+              <div className="flex items-center space-x-2">
+                <Button onClick={() => onFormSubmit(popUp.confirmIntegration?.data as FormData)}>
+                  Continue Anyway
+                </Button>
+                <Button
+                  onClick={() => handlePopUpClose("confirmIntegration")}
+                  variant="outline_bg"
+                  colorSchema="secondary"
+                >
+                  Cancel
+                </Button>
+              </div>
+            }
+          >
+            <p>
+              You&apos;re about to overwrite any existing secrets in GitLab.
+            </p>
+            <p className="mt-4">
+              To avoid this behavior, you may consider adding a secret prefix/suffix in the options tab.
+            </p> 
+          </ModalContent>
+        </Modal>
     </form>
   ) : (
     <div className="flex justify-center items-center w-full h-full">