From bde788c4f6b03f318bcacdafa59dee55e0715f9c Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Thu, 14 Sep 2023 22:21:59 -0700
Subject: [PATCH 01/11] improved ui/ux for checkly, gcp, and vault integrations

---
 frontend/src/layouts/AppLayout/AppLayout.tsx  |  2 +-
 .../pages/integrations/checkly/authorize.tsx  | 26 ++++++-
 .../src/pages/integrations/checkly/create.tsx | 41 +++++++++--
 .../gcp-secret-manager/authorize.tsx          | 71 +++++++++++++------
 .../gcp-secret-manager/create.tsx             | 55 +++++++++++---
 .../hashicorp-vault/authorize.tsx             | 35 +++++++--
 .../integrations/hashicorp-vault/create.tsx   | 55 +++++++++++---
 7 files changed, 233 insertions(+), 52 deletions(-)
diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 47f7570d8..d139a2cc7 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -468,7 +468,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       <Link href={`/integrations/${currentWorkspace?._id}`} passHref>
                         <a>
                           <MenuItem
-                            isSelected={router.asPath === `/integrations/${currentWorkspace?._id}`}
+                            isSelected={router.asPath.includes("/integrations")}
                             icon="system-outline-82-extension"
                           >
                             {t("nav.menu.integrations")}
diff --git a/frontend/src/pages/integrations/checkly/authorize.tsx b/frontend/src/pages/integrations/checkly/authorize.tsx
index a84c9fe28..9d1ce3c5e 100644
--- a/frontend/src/pages/integrations/checkly/authorize.tsx
+++ b/frontend/src/pages/integrations/checkly/authorize.tsx
@@ -1,5 +1,9 @@
 import { useState } from "react";
+import Head from "next/head";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -41,8 +45,26 @@ export default function ChecklyCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Authorize Checkly Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
       <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
-        <CardTitle className="text-left px-6" subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment.">Checkly Integration</CardTitle>
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          Checkly Integration 
+          <Link href="https://infisical.com/docs/integrations/cloud/checkly" 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="Checkly API key"
           errorText={accessTokenErrorText}
@@ -57,7 +79,7 @@ export default function ChecklyCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
+          colorSchema="primary"
           variant="outline_bg"
           className="mb-6 mt-2 ml-auto mr-6 w-min"
           isFullWidth={false}
diff --git a/frontend/src/pages/integrations/checkly/create.tsx b/frontend/src/pages/integrations/checkly/create.tsx
index 97db4c118..2b13c638e 100644
--- a/frontend/src/pages/integrations/checkly/create.tsx
+++ b/frontend/src/pages/integrations/checkly/create.tsx
@@ -1,5 +1,9 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+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 queryString from "query-string";
 
 import {
@@ -29,7 +33,7 @@ export default function ChecklyCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -92,12 +96,25 @@ export default function ChecklyCreateIntegrationPage() {
     integrationAuthApps &&
     targetApp ? (
     <div className="flex h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
+      <Head>
+        <title>Set Up Checkly 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"
+        <CardTitle 
+          className="text-left px-6 text-xl" 
           subTitle="Choose which environment in Infisical you want to sync with your Checkly account."
         >
-          Checkly Integration
+          Checkly Integration 
+          <Link href="https://infisical.com/docs/integrations/cloud/checkly" 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="Infisical Project Environment" className="mt-4 px-6">
           <Select
@@ -165,7 +182,21 @@ export default function ChecklyCreateIntegrationPage() {
       </Card>
     </div>
   ) : (
-    <div />
+    <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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx b/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
index c49513b75..ba071f33f 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
@@ -1,8 +1,11 @@
 import crypto from "crypto";
 
 import { useState } from "react";
+import Head from "next/head";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
@@ -60,38 +63,60 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() {
 
   return (
     <div 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>
-        <Button
-            colorSchema="primary" 
-            variant="outline_bg"
-            onClick={handleIntegrateWithOAuth}
-            leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-            className="h-11 w-full mx-0 mt-4"
-        > 
-            Continue with OAuth
-        </Button>
-        <div className='w-full flex flex-row items-center my-4 py-2'>
-            <div className='w-full border-t border-mineshaft-400/60' /> 
-            <span className="mx-2 text-mineshaft-200 text-xs">or</span>
-            <div className='w-full border-t border-mineshaft-400/60' />
+      <Head>
+        <title>Authorize GCP Secret Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Connect Infisical to GCP Secret Manager to sync secrets."
+        >
+          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>
+        <div className="px-7">
+          <Button
+              colorSchema="primary" 
+              variant="outline_bg"
+              onClick={handleIntegrateWithOAuth}
+              leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
+              className="h-11 w-full mx-0 mt-4"
+          > 
+              Continue with OAuth
+          </Button>
+        </div>
+        <div className='w-full flex flex-row items-center my-4 py-2 px-7'>
+            <div className='w-full border-t border-mineshaft-400/40' /> 
+            <span className="mx-2 text-mineshaft-400 text-xs">or</span>
+            <div className='w-full border-t border-mineshaft-400/40' />
         </div>
         <FormControl
           label="GCP Service Account JSON"
           errorText={accessTokenErrorText}
           isError={accessTokenErrorText !== "" ?? false}
+          className="px-6"
         >
-        <TextArea 
-          value={accessToken}
-          onChange={(e) => setAccessToken(e.target.value)}
-          placeholder=""
-          className="h-48"
-        />
+          <TextArea 
+            value={accessToken}
+            onChange={(e) => setAccessToken(e.target.value)}
+            placeholder=""
+            className="h-48 border border-mineshaft-600 bg-bunker-900/80"
+          />
         </FormControl>
         <Button
           onClick={handleIntegrateWithPAT}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-8 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to GCP Secret Manager
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
index a452b42cc..c4997c2d6 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
@@ -1,5 +1,9 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+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 queryString from "query-string";
 
 import {
@@ -29,7 +33,7 @@ export default function GCPSecretManagerCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -83,9 +87,27 @@ export default function GCPSecretManagerCreateIntegrationPage() {
     integrationAuthApps &&
     targetAppId ? (
     <div 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>
-        <FormControl label="Project Environment" className="mt-4">
+      <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)}
@@ -101,14 +123,14 @@ export default function GCPSecretManagerCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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">
+        <FormControl label="GCP Project" className="px-6">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
@@ -133,8 +155,9 @@ export default function GCPSecretManagerCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-8 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
@@ -143,7 +166,21 @@ export default function GCPSecretManagerCreateIntegrationPage() {
       </Card>
     </div>
   ) : (
-    <div />
+    <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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/hashicorp-vault/authorize.tsx b/frontend/src/pages/integrations/hashicorp-vault/authorize.tsx
index 948e17e0f..f2158f350 100644
--- a/frontend/src/pages/integrations/hashicorp-vault/authorize.tsx
+++ b/frontend/src/pages/integrations/hashicorp-vault/authorize.tsx
@@ -1,5 +1,9 @@
 import { useState } from "react";
+import Head from "next/head";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -80,12 +84,31 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Vault Integration</CardTitle>
+      <Head>
+        <title>Authorize Vault Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding connecting to Vault, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          HashiCorp Vault Integration 
+          <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" 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="Vault Cluster URL"
           errorText={vaultURLErrorText}
           isError={vaultURLErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={vaultURL} onChange={(e) => setVaultURL(e.target.value)} />
         </FormControl>
@@ -93,6 +116,7 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
           label="Vault Namespace"
           errorText={vaultNamespaceErrorText}
           isError={vaultNamespaceErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input 
                 placeholder="admin/education" 
@@ -104,6 +128,7 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
           label="Vault RoleID"
           errorText={vaultRoleIDErrorText}
           isError={vaultRoleIDErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={vaultRoleID} onChange={(e) => setVaultRoleID(e.target.value)} />
         </FormControl>
@@ -111,6 +136,7 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
           label="Vault SecretID"
           errorText={vaultSecretIDErrorText}
           isError={vaultSecretIDErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input 
                 placeholder="" 
@@ -120,8 +146,9 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to Vault
diff --git a/frontend/src/pages/integrations/hashicorp-vault/create.tsx b/frontend/src/pages/integrations/hashicorp-vault/create.tsx
index e4c560361..895f2c057 100644
--- a/frontend/src/pages/integrations/hashicorp-vault/create.tsx
+++ b/frontend/src/pages/integrations/hashicorp-vault/create.tsx
@@ -1,5 +1,9 @@
 import { useState } from "react";
+import Head from "next/head";
+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 queryString from "query-string";
 
 import {
@@ -25,7 +29,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
   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: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
   const [vaultEnginePath, setVaultEnginePath] = useState("");
   const [vaultEnginePathErrorText, setVaultEnginePathErrorText] = useState("");
@@ -80,9 +84,27 @@ export default function HashiCorpVaultCreateIntegrationPage() {
 
   return integrationAuth && workspace ? (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Vault Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+      <Head>
+        <title>Set Up Vault Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After creating an integration, your secrets will automatically start syncing from Infisical to Vault."
+        >
+          HashiCorp Vault Integration 
+          <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" 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)}
@@ -98,7 +120,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
@@ -109,6 +131,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
           label="Vault KV Secrets Engine Path"
           errorText={vaultEnginePathErrorText}
           isError={vaultEnginePathErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder="kv"
@@ -120,6 +143,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
           label="Vault Secret(s) Path"
           errorText={vaultSecretPathErrorText}
           isError={vaultSecretPathErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder="machine/dev"
@@ -129,8 +153,9 @@ export default function HashiCorpVaultCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
           isDisabled={!(isValidVaultPath(vaultEnginePath) && isValidVaultPath(vaultSecretPath))}
         >
@@ -139,7 +164,21 @@ export default function HashiCorpVaultCreateIntegrationPage() {
       </Card>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      {isintegrationAuthLoading ? <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>
   );
 }
 

From db5883ae56e4607b951eae2216090374ce8bba62 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 15 Sep 2023 13:28:11 -0700
Subject: [PATCH 02/11] fix merge conflicts

---
 .../gcp-secret-manager/create.tsx             | 400 +++++++++++++-----
 1 file changed, 287 insertions(+), 113 deletions(-)

diff --git a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
index c4997c2d6..3d1a7c504 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
+++ b/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;
\ No newline at end of file

From fccbf9810f3217e22415cdc461228b99c2a8e474 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 15 Sep 2023 14:30:37 -0700
Subject: [PATCH 03/11] fixed gcp integration UIUX

---
 .../src/hooks/api/integrations/queries.tsx    |  1 +
 .../src/pages/integrations/checkly/create.tsx |  4 +
 .../gcp-secret-manager/create.tsx             | 79 +++++++++++++++----
 .../integrations/hashicorp-vault/create.tsx   |  4 +
 4 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/frontend/src/hooks/api/integrations/queries.tsx b/frontend/src/hooks/api/integrations/queries.tsx
index 8857da834..de5aa6da0 100644
--- a/frontend/src/hooks/api/integrations/queries.tsx
+++ b/frontend/src/hooks/api/integrations/queries.tsx
@@ -57,6 +57,7 @@ export const useCreateIntegration = () => {
       path?: string;
       region?: string;
       metadata?: {
+        secretPrefix?: string;
         secretSuffix?: string;
       }
     }) => {
diff --git a/frontend/src/pages/integrations/checkly/create.tsx b/frontend/src/pages/integrations/checkly/create.tsx
index 2b13c638e..dbf0e8c99 100644
--- a/frontend/src/pages/integrations/checkly/create.tsx
+++ b/frontend/src/pages/integrations/checkly/create.tsx
@@ -183,6 +183,10 @@ export default function ChecklyCreateIntegrationPage() {
     </div>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up GCP Secret Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
       {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>
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
index 3d1a7c504..9d56a827f 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
@@ -1,6 +1,10 @@
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+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 { motion } from "framer-motion";
 import queryString from "query-string";
@@ -74,7 +78,7 @@ export default function GCPSecretManagerCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -157,12 +161,32 @@ export default function GCPSecretManagerCreateIntegrationPage() {
       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}>
+      <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 mb-2" 
+          subTitle="After creating an integration you secrets will automatically sync from Infisical to GCP Secret Manager. Your GCP secrets may get overriden."
+        >
+          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>
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
           <TabList>
-            <Tab value={TabSections.Connection}>Connection</Tab>
-            <Tab value={TabSections.Options}>Options</Tab>
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
+              <Tab value={TabSections.Connection}>Connection</Tab>
+              <Tab value={TabSections.Options}>Options</Tab>
+            </div>
           </TabList>
           <TabPanel value={TabSections.Connection}>
             <motion.div
@@ -254,15 +278,7 @@ export default function GCPSecretManagerCreateIntegrationPage() {
                     )
                   }}
                 />
-                <Button
-                  className="mt-4"
-                  size="sm"
-                  type="submit"
-                  isLoading={isLoading}
-                >
-                  Create Integration
-                </Button>
-                </div>
+              </div>
             </motion.div>
           </TabPanel>
           <TabPanel value={TabSections.Options}>
@@ -298,7 +314,7 @@ export default function GCPSecretManagerCreateIntegrationPage() {
                   </FormControl>
               )}
             />
-            <div className="mt-8">
+            <div className="mt-8 mb-[2.36rem]">
               <Controller
                 control={control}
                 name="shouldLabel"
@@ -351,10 +367,39 @@ export default function GCPSecretManagerCreateIntegrationPage() {
             )}
           </TabPanel>
         </Tabs>
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-8 ml-auto mr-6 w-min"
+          size="sm"
+          type="submit"
+          isLoading={isLoading}
+          // disabled={!targetAppId}
+        >
+          Create Integration
+        </Button>
       </Card>
     </form>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up GCP Secret Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/hashicorp-vault/create.tsx b/frontend/src/pages/integrations/hashicorp-vault/create.tsx
index 895f2c057..b64335c78 100644
--- a/frontend/src/pages/integrations/hashicorp-vault/create.tsx
+++ b/frontend/src/pages/integrations/hashicorp-vault/create.tsx
@@ -165,6 +165,10 @@ export default function HashiCorpVaultCreateIntegrationPage() {
     </div>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up GCP Secret Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
       {isintegrationAuthLoading ? <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>

From 6059070d290f97463c111098583a6164124d50c7 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 15 Sep 2023 17:24:30 -0700
Subject: [PATCH 04/11] Updated UI for Vercel, GCP, GitLab, Checkly, Vault
 integrations

---
 .../pages/integrations/checkly/authorize.tsx  |  31 ++-
 .../src/pages/integrations/checkly/create.tsx | 183 +++++++++++-------
 .../gcp-secret-manager/authorize.tsx          |  31 ++-
 .../gcp-secret-manager/create.tsx             |  46 +++--
 .../src/pages/integrations/github/create.tsx  |  75 ++++++-
 .../pages/integrations/gitlab/authorize.tsx   |  44 ++++-
 .../src/pages/integrations/gitlab/create.tsx  |  85 ++++++--
 .../hashicorp-vault/authorize.tsx             |  33 ++--
 .../integrations/hashicorp-vault/create.tsx   |  46 +++--
 .../src/pages/integrations/vercel/create.tsx  |  79 ++++++--
 10 files changed, 484 insertions(+), 169 deletions(-)

diff --git a/frontend/src/pages/integrations/checkly/authorize.tsx b/frontend/src/pages/integrations/checkly/authorize.tsx
index 9d1ce3c5e..0e4ba70d9 100644
--- a/frontend/src/pages/integrations/checkly/authorize.tsx
+++ b/frontend/src/pages/integrations/checkly/authorize.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
@@ -54,16 +55,26 @@ export default function ChecklyCreateIntegrationPage() {
           className="text-left px-6 text-xl" 
           subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment."
         >
-          Checkly Integration 
-          <Link href="https://infisical.com/docs/integrations/cloud/checkly" 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>
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Checkly.png"
+                height={30}
+                width={30}
+                alt="Checkly logo"
+              />
+            </div>
+            <span className="ml-2.5">Checkly Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/checkly" 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>
+          </div>
         </CardTitle>
         <FormControl
           label="Checkly API key"
diff --git a/frontend/src/pages/integrations/checkly/create.tsx b/frontend/src/pages/integrations/checkly/create.tsx
index dbf0e8c99..2ed5ede10 100644
--- a/frontend/src/pages/integrations/checkly/create.tsx
+++ b/frontend/src/pages/integrations/checkly/create.tsx
@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
 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 { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { motion } from "framer-motion";
 import queryString from "query-string";
 
 import {
@@ -13,7 +15,11 @@ import {
   FormControl,
   Input,
   Select,
-  SelectItem
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
 } from "@app/components/v2";
 import {
   useCreateIntegration
@@ -25,6 +31,11 @@ import {
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
+enum TabSections {
+  Connection = "connection",
+  Options = "options"
+}
+
 export default function ChecklyCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
@@ -95,7 +106,7 @@ export default function ChecklyCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
+    <div className="flex flex-col h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
       <Head>
         <title>Set Up Checkly Integration</title>
         <link rel='icon' href='/infisical.ico' />
@@ -103,88 +114,124 @@ export default function ChecklyCreateIntegrationPage() {
       <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
         <CardTitle 
           className="text-left px-6 text-xl" 
-          subTitle="Choose which environment in Infisical you want to sync with your Checkly account."
+          subTitle="Choose which environment in Infisical you want to sync to Checkly environment variables."
         >
-          Checkly Integration 
-          <Link href="https://infisical.com/docs/integrations/cloud/checkly" 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>
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Checkly.png"
+                height={30}
+                width={30}
+                alt="Checkly logo"
+              />
+            </div>
+            <span className="ml-2.5">Checkly Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/checkly" 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>
+          </div>
         </CardTitle>
-        <FormControl label="Infisical Project Environment" className="mt-4 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}`}
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
+          <TabList>
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
+              <Tab value={TabSections.Connection}>Connection</Tab>
+              <Tab value={TabSections.Options}>Options</Tab>
+            </div>
+          </TabList>
+          <TabPanel value={TabSections.Connection}>
+            <FormControl label="Infisical Project Environment">
+              <Select
+                value={selectedSourceEnvironment}
+                onValueChange={(val) => setSelectedSourceEnvironment(val)}
+                className="w-full border border-mineshaft-500"
               >
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl label="Secrets Path" className="mt-4 px-6">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-        <FormControl label="Checkly Account" className="mt-4 px-6">
-          <Select
-            value={targetApp}
-            onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
-            isDisabled={integrationAuthApps.length === 0}
-          >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.name}
-                  key={`target-app-${integrationAuthApp.name}`}
-                >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No apps found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
-        <FormControl label="Append the Secret Name with..." className="mt-4 px-6">
-          <Input
-            value={secretSuffix}
-            onChange={(evt) => setSecretSuffix(evt.target.value)}
-            placeholder="Provide a suffix for secret names, default is no suffix"
-          />
-        </FormControl>
+                {workspace?.environments.map((sourceEnvironment) => (
+                  <SelectItem
+                    value={sourceEnvironment.slug}
+                    key={`source-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 /"
+              />
+            </FormControl>
+            <FormControl label="Checkly Account">
+              <Select
+                value={targetApp}
+                onValueChange={(val) => setTargetApp(val)}
+                className="w-full border border-mineshaft-500"
+                isDisabled={integrationAuthApps.length === 0}
+              >
+                {integrationAuthApps.length > 0 ? (
+                  integrationAuthApps.map((integrationAuthApp) => (
+                    <SelectItem
+                      value={integrationAuthApp.name}
+                      key={`target-app-${integrationAuthApp.name}`}
+                    >
+                      {integrationAuthApp.name}
+                    </SelectItem>
+                  ))
+                ) : (
+                  <SelectItem value="none" key="target-app-none">
+                    No apps found
+                  </SelectItem>
+                )}
+              </Select>
+            </FormControl>
+          </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"
+                />
+              </FormControl>
+            </motion.div>
+          </TabPanel>
+        </Tabs>
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
           variant="outline_bg"
-          className="mt-2 mb-6 ml-auto mr-6"
+          className="mb-6 ml-auto mr-6"
           isFullWidth={false}
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
+      <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 Checkly with secrets from Infisical.</span>
+        <span className="text-mineshaft-300 text-sm mt-4">If you have multiple Checkly integrations and are using suffixes for at least one of them, you will have to add suffixes for all the active Checkly integrations – otherwise you might run into rare unexpected behavior.</span>
+      </div>
     </div>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
       <Head>
-        <title>Set Up GCP Secret Manager Integration</title>
+        <title>Set Up Checkly Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
       {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">
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx b/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
index ba071f33f..0e0b1bd2f 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
@@ -2,6 +2,7 @@ import crypto from "crypto";
 
 import { useState } from "react";
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGoogle } from "@fortawesome/free-brands-svg-icons";
@@ -72,16 +73,26 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() {
           className="text-left px-6 text-xl" 
           subTitle="Connect Infisical to GCP Secret Manager to sync secrets."
         >
-          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>
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Google Cloud Platform.png"
+                height={30}
+                width={30}
+                alt="GCP logo"
+              />
+            </div>
+            <span className="ml-1.5">GCP Secret Manager Integration </span>
+            <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>
+          </div>
         </CardTitle>
         <div className="px-7">
           <Button
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
index 9d56a827f..8ba99029b 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
@@ -1,9 +1,10 @@
 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";
 import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { motion } from "framer-motion";
@@ -159,27 +160,37 @@ export default function GCPSecretManagerCreateIntegrationPage() {
     integrationAuthApps ? (
     <form 
       onSubmit={handleSubmit(onFormSubmit)}
-      className="flex h-full w-full items-center justify-center"
+      className="flex flex-col h-full w-full items-center justify-center"
     >
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <Head>
           <title>Set Up GCP Secret Manager Integration</title>
           <link rel='icon' href='/infisical.ico' />
         </Head>
         <CardTitle 
           className="text-left px-6 text-xl mb-2" 
-          subTitle="After creating an integration you secrets will automatically sync from Infisical to GCP Secret Manager. Your GCP secrets may get overriden."
+          subTitle="Select which environment or folder in Infisical you want to sync to GCP Secret Manager. Optionally, you can add suffixes/prefixes."
         >
-          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>
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Google Cloud Platform.png"
+                height={30}
+                width={30}
+                alt="GCP logo"
+              />
+            </div>
+            <span className="ml-1.5">GCP Secret Manager Integration </span>
+            <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>
+          </div>
         </CardTitle>
         <Tabs defaultValue={TabSections.Connection} className="px-6">
           <TabList>
@@ -374,11 +385,16 @@ export default function GCPSecretManagerCreateIntegrationPage() {
           size="sm"
           type="submit"
           isLoading={isLoading}
-          // disabled={!targetAppId}
+          isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <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 GCP Secret Manager with secrets from Infisical.</span>
+      </div>
     </form>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
diff --git a/frontend/src/pages/integrations/github/create.tsx b/frontend/src/pages/integrations/github/create.tsx
index 4a319ceb8..bfe291106 100644
--- a/frontend/src/pages/integrations/github/create.tsx
+++ b/frontend/src/pages/integrations/github/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -29,7 +34,7 @@ export default function GitHubCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -88,10 +93,38 @@ export default function GitHubCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetAppId ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">GitHub Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full 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="text-left px-6 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 bg-mineshaft-200 rounded-full">
+              <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 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>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -107,14 +140,14 @@ export default function GitHubCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="GitHub Repo" className="mt-4">
+        <FormControl label="GitHub Repo" className="px-6">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
@@ -140,16 +173,40 @@ export default function GitHubCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mt-2 mb-6 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <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 GitHub with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up GitHub Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/gitlab/authorize.tsx b/frontend/src/pages/integrations/gitlab/authorize.tsx
index 528324209..894ef9d41 100644
--- a/frontend/src/pages/integrations/gitlab/authorize.tsx
+++ b/frontend/src/pages/integrations/gitlab/authorize.tsx
@@ -1,7 +1,10 @@
 import crypto from "crypto";
 
 import { useState } from "react";
-import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+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 { useGetCloudIntegrations } from "@app/hooks/api";
@@ -32,9 +35,37 @@ export default function GitLabAuthorizeIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">GitLab Integration</CardTitle>
-        <FormControl label="Self-hosted URL (optional)">
+      <Head>
+        <title>Authorize GitLab Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <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."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Gitlab.png"
+                height={28}
+                width={28}
+                alt="Gitlab logo"
+              />
+            </div>
+            <span className="ml-2.5">GitLab Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/gitlab" 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>
+          </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)} 
@@ -42,8 +73,9 @@ export default function GitLabAuthorizeIntegrationPage() {
           </FormControl>
         <Button
             onClick={handleIntegrateWithOAuth}
-            leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-            className="h-11 w-full mx-0 mt-4"
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mb-6 mt-2 ml-auto mr-6 w-min"
         > 
             Continue with OAuth
         </Button>
diff --git a/frontend/src/pages/integrations/gitlab/create.tsx b/frontend/src/pages/integrations/gitlab/create.tsx
index 66e68303e..d4cba8a0e 100644
--- a/frontend/src/pages/integrations/gitlab/create.tsx
+++ b/frontend/src/pages/integrations/gitlab/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -38,11 +43,11 @@ export default function GitLabCreateIntegrationPage() {
 
   const [targetTeamId, setTargetTeamId] = useState<string | null>(null);
 
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? "",
     ...(targetTeamId ? { teamId: targetTeamId } : {})
   });
-  const { data: integrationAuthTeams } = useGetIntegrationAuthTeams(
+  const { data: integrationAuthTeams, isLoading: isintegrationAuthTeamsLoading } = useGetIntegrationAuthTeams(
     (integrationAuthId as string) ?? ""
   );
 
@@ -114,10 +119,38 @@ export default function GitLabCreateIntegrationPage() {
     integrationAuthApps &&
     integrationAuthTeams &&
     targetAppId ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">GitLab Integration</CardTitle>
-        <FormControl label="Project Environment">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up GitLab Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Select which environment or folder in Infisical you want to sync to GitLab's environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Gitlab.png"
+                height={28}
+                width={28}
+                alt="Gitlab logo"
+              />
+            </div>
+            <span className="ml-2.5">GitLab Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/gitlab" 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>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -133,14 +166,14 @@ export default function GitLabCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="GitLab Integration Type">
+        <FormControl label="GitLab Integration Type" className="px-6">
           <Select
             value={targetEntity}
             onValueChange={(val) => setTargetEntity(val)}
@@ -156,7 +189,7 @@ export default function GitLabCreateIntegrationPage() {
           </Select>
         </FormControl>
         {targetEntity === "group" && targetTeamId && (
-          <FormControl label="GitLab Group">
+          <FormControl label="GitLab Group" className="px-6">
             <Select
               value={targetTeamId}
               onValueChange={(val) => setTargetTeamId(val)}
@@ -179,7 +212,7 @@ export default function GitLabCreateIntegrationPage() {
             </Select>
           </FormControl>
         )}
-        <FormControl label="GitLab Project">
+        <FormControl label="GitLab Project" className="px-6">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
@@ -202,7 +235,7 @@ export default function GitLabCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
-        <FormControl label="GitLab Environment Scope (Optional)">
+        <FormControl label="GitLab Environment Scope (Optional)" className="px-6">
           <Input
             placeholder="*"
             value={targetEnvironment}
@@ -211,17 +244,41 @@ export default function GitLabCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <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>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up GitLab Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthAppsLoading || isintegrationAuthTeamsLoading ? <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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/hashicorp-vault/authorize.tsx b/frontend/src/pages/integrations/hashicorp-vault/authorize.tsx
index f2158f350..56863734f 100644
--- a/frontend/src/pages/integrations/hashicorp-vault/authorize.tsx
+++ b/frontend/src/pages/integrations/hashicorp-vault/authorize.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
@@ -91,18 +92,28 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
       <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
         <CardTitle 
           className="text-left px-6 text-xl" 
-          subTitle="After adding connecting to Vault, you will be prompted to set up an integration for a particular Infisical project and environment."
+          subTitle="After connecting to Vault, you will be prompted to set up an integration for a particular Infisical project and environment."
         >
-          HashiCorp Vault Integration 
-          <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" 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>
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Vault.png"
+                height={30}
+                width={30}
+                alt="HCP Vault logo"
+              />
+            </div>
+            <span className="ml-2.5">HashiCorp Vault Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" 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>
+          </div>
         </CardTitle>
         <FormControl
           label="Vault Cluster URL"
diff --git a/frontend/src/pages/integrations/hashicorp-vault/create.tsx b/frontend/src/pages/integrations/hashicorp-vault/create.tsx
index b64335c78..7cca22693 100644
--- a/frontend/src/pages/integrations/hashicorp-vault/create.tsx
+++ b/frontend/src/pages/integrations/hashicorp-vault/create.tsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
 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 { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
@@ -83,26 +84,36 @@ export default function HashiCorpVaultCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace ? (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex flex-col h-full w-full items-center justify-center">
       <Head>
         <title>Set Up Vault Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
         <CardTitle 
           className="text-left px-6 text-xl" 
-          subTitle="After creating an integration, your secrets will automatically start syncing from Infisical to Vault."
+          subTitle="Select which environment or folder in Infisical you want to sync to which path in HashiCorp Vault."
         >
-          HashiCorp Vault Integration 
-          <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" 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>
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Vault.png"
+                height={30}
+                width={30}
+                alt="HCP Vault logo"
+              />
+            </div>
+            <span className="ml-2.5">HashiCorp Vault Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/hashicorp-vault" 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>
+          </div>
         </CardTitle>
         <FormControl label="Project Environment" className="px-6">
           <Select
@@ -162,11 +173,16 @@ export default function HashiCorpVaultCreateIntegrationPage() {
           Create Integration
         </Button>
       </Card>
+      <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 Vault with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
       <Head>
-        <title>Set Up GCP Secret Manager Integration</title>
+        <title>Set Up Vault Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
       {isintegrationAuthLoading ? <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">
diff --git a/frontend/src/pages/integrations/vercel/create.tsx b/frontend/src/pages/integrations/vercel/create.tsx
index e5bc8c4f2..2f15df5c8 100644
--- a/frontend/src/pages/integrations/vercel/create.tsx
+++ b/frontend/src/pages/integrations/vercel/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -42,7 +47,7 @@ export default function VercelCreateIntegrationPage() {
   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 } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -109,10 +114,38 @@ export default function VercelCreateIntegrationPage() {
     integrationAuthApps &&
     targetAppId &&
     targetEnvironment ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Vercel Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Vercel Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Select which environment or folder in Infisical you want to sync to Vercel's environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Vercel.png"
+                height={30}
+                width={30}
+                alt="Vercel logo"
+              />
+            </div>
+            <span className="ml-2">Vercel Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/vercel" 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>
+          </div>
+        </CardTitle>
+        <FormControl label="Infisical Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -128,14 +161,14 @@ export default function VercelCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="Vercel App">
+        <FormControl label="Vercel App" className="px-6">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
@@ -158,7 +191,7 @@ export default function VercelCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
-        <FormControl label="Vercel App Environment">
+        <FormControl label="Vercel App Environment" className="px-6">
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
@@ -175,7 +208,7 @@ export default function VercelCreateIntegrationPage() {
           </Select>
         </FormControl>
         {targetEnvironment === "preview" && filteredBranches && (
-          <FormControl label="Vercel Preview Branch (Optional)">
+          <FormControl label="Vercel Preview Branch (Optional)" className="px-6">
             <Select
               value={targetBranch}
               onValueChange={(val) => setTargetBranch(val)}
@@ -192,16 +225,40 @@ export default function VercelCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mt-2 mb-6 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <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 Vercel with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Vercel Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {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>
   );
 }
 

From 80cee40b39bcaea8191b4f82bed6d7d64da0c721 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 15 Sep 2023 17:53:58 -0700
Subject: [PATCH 05/11] Updated UI for CircleCI integration

---
 frontend/src/layouts/AppLayout/AppLayout.tsx  |  2 +-
 .../pages/integrations/checkly/authorize.tsx  |  2 +-
 .../pages/integrations/circleci/authorize.tsx | 43 +++++++++-
 .../pages/integrations/circleci/create.tsx    | 79 ++++++++++++++++---
 4 files changed, 109 insertions(+), 17 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index d139a2cc7..8aa7d01b7 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -445,7 +445,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         <a>
                           <MenuItem
                             isSelected={router.asPath.includes(
-                              `/project/${currentWorkspace?._id}/secrets/overview`
+                              `/project/${currentWorkspace?._id}/secrets`
                             )}
                             icon="system-outline-90-lock-closed"
                           >
diff --git a/frontend/src/pages/integrations/checkly/authorize.tsx b/frontend/src/pages/integrations/checkly/authorize.tsx
index 0e4ba70d9..c3938641b 100644
--- a/frontend/src/pages/integrations/checkly/authorize.tsx
+++ b/frontend/src/pages/integrations/checkly/authorize.tsx
@@ -53,7 +53,7 @@ export default function ChecklyCreateIntegrationPage() {
       <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
         <CardTitle 
           className="text-left px-6 text-xl" 
-          subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment."
+          subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
         >
           <div className="flex flex-row items-center">
             <div className="inline flex items-center pb-0.5">
diff --git a/frontend/src/pages/integrations/circleci/authorize.tsx b/frontend/src/pages/integrations/circleci/authorize.tsx
index 592056bbe..f276362f7 100644
--- a/frontend/src/pages/integrations/circleci/authorize.tsx
+++ b/frontend/src/pages/integrations/circleci/authorize.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -41,19 +46,49 @@ export default function CircleCICreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">CircleCI Integration</CardTitle>
+      <Head>
+        <title>Authorize CircleCI Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your API Token, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Circle CI.png"
+                height={30}
+                width={30}
+                alt="CircleCI logo"
+              />
+            </div>
+            <span className="ml-1.5">CircleCI Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/circleci" 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>
+          </div>
+        </CardTitle>
         <FormControl
           label="CircleCI API Token"
           errorText={apiKeyErrorText}
           isError={apiKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to CircleCI
diff --git a/frontend/src/pages/integrations/circleci/create.tsx b/frontend/src/pages/integrations/circleci/create.tsx
index dda2fd089..c8252b0ff 100644
--- a/frontend/src/pages/integrations/circleci/create.tsx
+++ b/frontend/src/pages/integrations/circleci/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -28,8 +33,8 @@ export default function CircleCICreateIntegrationPage() {
   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 } = useGetIntegrationAuthApps({
+  const { data: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -84,10 +89,38 @@ export default function CircleCICreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">CircleCI Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up CircleCI Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment or folder in Infisical you want to sync to CircleCI environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Circle CI.png"
+                height={30}
+                width={30}
+                alt="CircleCI logo"
+              />
+            </div>
+            <span className="ml-1.5">CircleCI Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/circleci" 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>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -103,14 +136,14 @@ export default function CircleCICreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="CircleCI Project" className="mt-4">
+        <FormControl label="CircleCI Project" className="px-6">
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
@@ -135,17 +168,41 @@ export default function CircleCICreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <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 CircleCI with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up CircleCI Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthAppsLoading || isintegrationAuthLoading ? <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>
   );
 }
 

From 0d83954c3926b56bcf9f786cd8d428affcee2519 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 15 Sep 2023 18:18:40 -0700
Subject: [PATCH 06/11] fixed merged conflicts for gitlab and added animation
 for tabs

---
 .../src/pages/integrations/checkly/create.tsx |  96 ++--
 .../gcp-secret-manager/create.tsx             | 156 +++----
 .../src/pages/integrations/gitlab/create.tsx  | 419 +++++++++++++-----
 3 files changed, 432 insertions(+), 239 deletions(-)

diff --git a/frontend/src/pages/integrations/checkly/create.tsx b/frontend/src/pages/integrations/checkly/create.tsx
index 2ed5ede10..d832a8b27 100644
--- a/frontend/src/pages/integrations/checkly/create.tsx
+++ b/frontend/src/pages/integrations/checkly/create.tsx
@@ -145,58 +145,66 @@ export default function ChecklyCreateIntegrationPage() {
             </div>
           </TabList>
           <TabPanel value={TabSections.Connection}>
-            <FormControl label="Infisical 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={`source-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 /"
-              />
-            </FormControl>
-            <FormControl label="Checkly Account">
-              <Select
-                value={targetApp}
-                onValueChange={(val) => setTargetApp(val)}
-                className="w-full border border-mineshaft-500"
-                isDisabled={integrationAuthApps.length === 0}
-              >
-                {integrationAuthApps.length > 0 ? (
-                  integrationAuthApps.map((integrationAuthApp) => (
+            <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="Infisical Project Environment">
+                <Select
+                  value={selectedSourceEnvironment}
+                  onValueChange={(val) => setSelectedSourceEnvironment(val)}
+                  className="w-full border border-mineshaft-500"
+                >
+                  {workspace?.environments.map((sourceEnvironment) => (
                     <SelectItem
-                      value={integrationAuthApp.name}
-                      key={`target-app-${integrationAuthApp.name}`}
+                      value={sourceEnvironment.slug}
+                      key={`source-environment-${sourceEnvironment.slug}`}
                     >
-                      {integrationAuthApp.name}
+                      {sourceEnvironment.name}
                     </SelectItem>
-                  ))
-                ) : (
-                  <SelectItem value="none" key="target-app-none">
-                    No apps found
-                  </SelectItem>
-                )}
-              </Select>
-            </FormControl>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl label="Secrets Path">
+                <Input
+                  value={secretPath}
+                  onChange={(evt) => setSecretPath(evt.target.value)}
+                  placeholder="Provide a path, default is /"
+                />
+              </FormControl>
+              <FormControl label="Checkly Account">
+                <Select
+                  value={targetApp}
+                  onValueChange={(val) => setTargetApp(val)}
+                  className="w-full border border-mineshaft-500"
+                  isDisabled={integrationAuthApps.length === 0}
+                >
+                  {integrationAuthApps.length > 0 ? (
+                    integrationAuthApps.map((integrationAuthApp) => (
+                      <SelectItem
+                        value={integrationAuthApp.name}
+                        key={`target-app-${integrationAuthApp.name}`}
+                      >
+                        {integrationAuthApp.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-app-none">
+                      No apps found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>
+            </motion.div>
           </TabPanel>
           <TabPanel value={TabSections.Options}>
             <motion.div
               key="panel-1"
               transition={{ duration: 0.15 }}
-              initial={{ opacity: 0, translateX: 30 }}
+              initial={{ opacity: 0, translateX: -30 }}
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: 30 }}
             >
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
index 8ba99029b..1770b056f 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
@@ -293,89 +293,97 @@ export default function GCPSecretManagerCreateIntegrationPage() {
             </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 mb-[2.36rem]">
+            <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="shouldLabel"
-                render={({ field: { onChange, value } }) => (
-                  <Switch
-                    id="label-gcp"
-                    onCheckedChange={(isChecked) => onChange(isChecked)}
-                    isChecked={value}
-                  >
-                    Label in GCP Secret Manager
-                  </Switch>
+                name="secretPrefix"
+                render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                        label="Secret Prefix"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                    >
+                    <Input 
+                        {...field} 
+                        placeholder="INFISICAL_"
+                    />
+                    </FormControl>
                 )}
               />
-            </div>
-            {shouldLabel && (
-              <div className="mt-8">
+              <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 mb-[2.36rem]">
                 <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>
+                  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>
+              )}
+            </motion.div>
           </TabPanel>
         </Tabs>
         <Button
diff --git a/frontend/src/pages/integrations/gitlab/create.tsx b/frontend/src/pages/integrations/gitlab/create.tsx
index d4cba8a0e..2c6d27e5a 100644
--- a/frontend/src/pages/integrations/gitlab/create.tsx
+++ b/frontend/src/pages/integrations/gitlab/create.tsx
@@ -1,11 +1,15 @@
 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";
 import { useRouter } from "next/router";
 import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } 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
@@ -18,7 +22,11 @@ import {
   FormControl,
   Input,
   Select,
-  SelectItem
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
 } from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
@@ -32,8 +40,43 @@ const gitLabEntities = [
   { name: "Group", value: "group" }
 ];
 
+enum TabSections {
+  Connection = "connection",
+  Options = "options"
+}
+
+const schema = yup.object({
+  targetEntity: yup.string().oneOf(gitLabEntities.map(entity => entity.value), "Invalid entity type"),
+  targetTeamId: yup.string(),
+  selectedSourceEnvironment: yup.string().required("Source environment is required"),
+  secretPath: yup.string().required("Secret path is required"),
+  targetAppId: yup.string().required("GitLab project is required"),
+  targetEnvironment: yup.string(),
+  secretPrefix: yup.string(),
+  secretSuffix: yup.string()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
 export default function GitLabCreateIntegrationPage() {
   const router = useRouter();
+  
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    watch
+  } = useForm<FormData>({
+      resolver: yupResolver(schema),
+      defaultValues: {
+        targetEntity: "individual",
+        secretPath: "/"
+      }
+  });
+  const selectedSourceEnvironment = watch("selectedSourceEnvironment");
+  const targetEntity = watch("targetEntity");
+  const targetTeamId = watch("targetTeamId");
+
   const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
@@ -41,8 +84,6 @@ export default function GitLabCreateIntegrationPage() {
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
-  const [targetTeamId, setTargetTeamId] = useState<string | null>(null);
-
   const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? "",
     ...(targetTeamId ? { teamId: targetTeamId } : {})
@@ -51,26 +92,20 @@ export default function GitLabCreateIntegrationPage() {
     (integrationAuthId as string) ?? ""
   );
 
-  const [targetEntity, setTargetEntity] = useState(gitLabEntities[0].value);
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-  const [targetAppId, setTargetAppId] = useState("");
-  const [targetEnvironment, setTargetEnvironment] = useState("");
-
   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) {
-        setTargetAppId(integrationAuthApps[0].appId as string);
+        setValue("targetAppId", String(integrationAuthApps[0].appId as string));
       } else {
-        setTargetAppId("none");
+        setValue("targetAppId", "none");
       }
     }
   }, [integrationAuthApps]);
@@ -80,46 +115,60 @@ export default function GitLabCreateIntegrationPage() {
       if (integrationAuthTeams) {
         if (integrationAuthTeams.length > 0) {
           // case: user is part of at least 1 group in GitLab
-          setTargetTeamId(integrationAuthTeams[0].teamId);
+          setValue("targetTeamId", String(integrationAuthTeams[0].teamId));
         } else {
           // case: user is not part of any groups in GitLab
-          setTargetTeamId("none");
+          setValue("targetTeamId", "none");
         }
       }
     } else if (targetEntity === "individual") {
-      setTargetTeamId(null);
+      setValue("targetTeamId", undefined);
     }
   }, [targetEntity, integrationAuthTeams]);
 
-  const handleButtonClick = async () => {
+  const onFormSubmit = async ({
+    selectedSourceEnvironment: sse,
+    secretPath,
+    targetAppId,
+    targetEnvironment,
+    secretPrefix,
+    secretSuffix
+  }: FormData) => {
     try {
       setIsLoading(true);
       if (!integrationAuth?._id) return;
-
+      
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
-        app: integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId)?.name,
+        app: integrationAuthApps?.find((integrationAuthApp) => String(integrationAuthApp.appId) === targetAppId)?.name,
         appId: String(targetAppId),
-        sourceEnvironment: selectedSourceEnvironment,
+        sourceEnvironment: sse,
         targetEnvironment: targetEnvironment === "" ? "*" : targetEnvironment,
-        secretPath
+        secretPath,
+        metadata: {
+          secretPrefix,
+          secretSuffix
+        }
       });
 
       setIsLoading(false);
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
       console.error(err);
+      setIsLoading(false);
     }
-  };
+  }
 
   return integrationAuth &&
     workspace &&
     selectedSourceEnvironment &&
     integrationAuthApps &&
-    integrationAuthTeams &&
-    targetAppId ? (
-    <div className="flex flex-col h-full w-full items-center justify-center">
+    integrationAuthTeams ? (
+    <form 
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="flex flex-col h-full w-full items-center justify-center"
+    >
       <Head>
         <title>Set Up GitLab Integration</title>
         <link rel='icon' href='/infisical.ico' />
@@ -150,115 +199,243 @@ export default function GitLabCreateIntegrationPage() {
             </Link>
           </div>
         </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="GitLab Integration Type" className="px-6">
-          <Select
-            value={targetEntity}
-            onValueChange={(val) => setTargetEntity(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {gitLabEntities.map((entity) => {
-              return (
-                <SelectItem value={entity.value} key={`target-entity-${entity.value}`}>
-                  {entity.name}
-                </SelectItem>
-              );
-            })}
-          </Select>
-        </FormControl>
-        {targetEntity === "group" && targetTeamId && (
-          <FormControl label="GitLab Group" className="px-6">
-            <Select
-              value={targetTeamId}
-              onValueChange={(val) => setTargetTeamId(val)}
-              className="w-full border border-mineshaft-500"
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
+          <TabList>
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
+              <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 }}
             >
-              {integrationAuthTeams.length > 0 ? (
-                integrationAuthTeams.map((integrationAuthTeam) => (
-                  <SelectItem
-                    value={integrationAuthTeam.teamId}
-                    key={`target-team-${integrationAuthTeam.teamId}`}
-                  >
-                    {integrationAuthTeam.name}
-                  </SelectItem>
-                ))
-              ) : (
-                <SelectItem value="none" key="target-team-none">
-                  No groups found
-                </SelectItem>
-              )}
-            </Select>
-          </FormControl>
-        )}
-        <FormControl label="GitLab 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}`}
-                >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No projects found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
-        <FormControl label="GitLab Environment Scope (Optional)" className="px-6">
-          <Input
-            placeholder="*"
-            value={targetEnvironment}
-            onChange={(e) => setTargetEnvironment(e.target.value)}
-          />
-        </FormControl>
+              <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="targetEntity"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="GitLab Integration Type"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                      >
+                        {gitLabEntities.map((entity) => {
+                          return (
+                            <SelectItem value={entity.value} key={`target-entity-${entity.value}`}>
+                              {entity.name}
+                            </SelectItem>
+                          );
+                        })}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                {targetEntity === "group" && targetTeamId && (
+                  <Controller
+                    control={control}
+                    name="targetTeamId"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        label="GitLab Group"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          {...field}
+                          onValueChange={(e) => onChange(e)}
+                          className="w-full"
+                        >
+                          {integrationAuthTeams.length > 0 ? (
+                            integrationAuthTeams.map((integrationAuthTeam) => 
+                            (
+                              <SelectItem
+                                value={String(integrationAuthTeam.teamId as string)}
+                                key={`target-team-${String(integrationAuthTeam.teamId)}`}
+                              >
+                                {integrationAuthTeam.name}
+                              </SelectItem>
+                            ))
+                          ) : (
+                            <SelectItem value="none" key="target-team-none">
+                              No groups found
+                            </SelectItem>
+                          )}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                )}
+                <Controller
+                  control={control}
+                  name="targetAppId"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        label="GitLab 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>
+                    )}}
+                  />
+                  <Controller
+                    control={control}
+                    defaultValue=""
+                    name="targetEnvironment"
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                            label="GitLab Environment Scope (Optional)"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                        >
+                        <Input 
+                            {...field} 
+                            placeholder="*"
+                        />
+                        </FormControl>
+                    )}
+                />
+              </div>
+            </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 }}
+              className="pb-[14.25rem]"
+            >
+              <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>
+                )}
+              />
+            </motion.div>
+          </TabPanel>
+        </Tabs>
         <Button
-          onClick={handleButtonClick}
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-6 mt-2 ml-auto mr-6 w-min"
+          className="mb-8 ml-auto mr-6 w-min"
+          size="sm"
+          type="submit"
           isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
-      </Card>
+      </Card> 
       <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>
+    </form>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
       <Head>

From 72839719fd1c7951ea01d0cec98194a4c1de9b09 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 15 Sep 2023 21:43:46 -0700
Subject: [PATCH 07/11] Fixed UI for the AWS integrations

---
 backend/src/integrations/sync.ts              |  6 +-
 backend/src/variables/integration.ts          |  2 +-
 docs/changelog/overview.mdx                   |  2 +-
 .../integrations/cloud/aws-secret-manager.mdx | 18 ++---
 docs/integrations/overview.mdx                |  2 +-
 frontend/public/data/frequentConstants.ts     |  2 +-
 .../aws-parameter-store/authorize.tsx         | 44 ++++++++++-
 .../aws-parameter-store/create.tsx            | 77 ++++++++++++++++---
 .../aws-secret-manager/authorize.tsx          | 46 +++++++++--
 .../aws-secret-manager/create.tsx             | 76 +++++++++++++++---
 10 files changed, 231 insertions(+), 44 deletions(-)

diff --git a/backend/src/integrations/sync.ts b/backend/src/integrations/sync.ts
index a25a93c80..cb45a9d95 100644
--- a/backend/src/integrations/sync.ts
+++ b/backend/src/integrations/sync.ts
@@ -783,12 +783,12 @@ const syncSecretsAWSParameterStore = async ({
 };
 
 /**
- * Sync/push [secrets] to AWS secret manager
+ * Sync/push [secrets] to AWS Secrets Manager
  * @param {Object} obj
  * @param {IIntegration} obj.integration - integration details
  * @param {Object} obj.secrets - secrets to push to integration (object where keys are secret keys and values are secret values)
- * @param {String} obj.accessId - access id for AWS secret manager integration
- * @param {String} obj.accessToken - access token for AWS secret manager integration
+ * @param {String} obj.accessId - access id for AWS Secrets Manager integration
+ * @param {String} obj.accessToken - access token for AWS Secrets Manager integration
  */
 const syncSecretsAWSSecretManager = async ({
   integration,
diff --git a/backend/src/variables/integration.ts b/backend/src/variables/integration.ts
index fe04b6401..e8bf78b19 100644
--- a/backend/src/variables/integration.ts
+++ b/backend/src/variables/integration.ts
@@ -192,7 +192,7 @@ export const getIntegrationOptions = async () => {
             docsLink: "",
         },
         {
-            name: "AWS Secret Manager",
+            name: "AWS Secrets Manager",
             slug: "aws-secret-manager",
             image: "Amazon Web Services.png",
             isAvailable: true,
diff --git a/docs/changelog/overview.mdx b/docs/changelog/overview.mdx
index 4961ef274..bdf820ad2 100644
--- a/docs/changelog/overview.mdx
+++ b/docs/changelog/overview.mdx
@@ -76,7 +76,7 @@ The changelog below reflects new product developments and updates on a monthly b
 - Added secret backups support for the CLI; it now fetches and caches secrets locally to be used in the event of future failed fetch.
 - Added support for comparing secret values across environments on each secret.
 - Added native AWS Parameter Store integration.
-- Added native AWS Secret Manager integration.
+- Added native AWS Secrets Manager integration.
 - Added native GitLab integration.
 - Added native CircleCI integration.
 - Added native Travis CI integration.
diff --git a/docs/integrations/cloud/aws-secret-manager.mdx b/docs/integrations/cloud/aws-secret-manager.mdx
index a798ae820..4df054077 100644
--- a/docs/integrations/cloud/aws-secret-manager.mdx
+++ b/docs/integrations/cloud/aws-secret-manager.mdx
@@ -1,6 +1,6 @@
 ---
-title: "AWS Secret Manager"
-description: "How to sync secrets from Infisical to AWS Secret Manager"
+title: "AWS Secrets Manager"
+description: "How to sync secrets from Infisical to AWS Secrets Manager"
 ---
 
 Prerequisites:
@@ -8,15 +8,15 @@ Prerequisites:
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
 - Set up AWS and have/create an IAM user
 
-## Grant the IAM user permissions to access AWS Secret Manager
+## Grant the IAM user permissions to access AWS Secrets Manager
 
-Navigate to your IAM user permissions and add a permission policy to grant access to AWS Secret Manager.
+Navigate to your IAM user permissions and add a permission policy to grant access to AWS Secrets Manager.
 
 ![integration IAM 1](../../images/integrations-aws-iam-1.png)
 ![integration IAM 2](../../images/integrations-aws-secret-manager-iam-2.png)
 ![integrations IAM 3](../../images/integrations-aws-secret-manager-iam-3.png)
 
-For better security, here's a custom policy containing the minimum permissions required by Infisical to sync secrets to AWS Secret Manager for the IAM user that you can use:
+For better security, here's a custom policy containing the minimum permissions required by Infisical to sync secrets to AWS Secrets Manager for the IAM user that you can use:
 
 ```json
 {
@@ -40,7 +40,7 @@ For better security, here's a custom policy containing the minimum permissions r
 
 ![integrations](../../images/integrations.png)
 
-## Authorize Infisical for AWS Secret Manager
+## Authorize Infisical for AWS Secrets Manager
 
 Obtain a AWS access key ID and secret access key for your IAM user in IAM > Users > User > Security credentials > Access keys
 
@@ -48,7 +48,7 @@ Obtain a AWS access key ID and secret access key for your IAM user in IAM > User
 ![access key 2](../../images/integrations-aws-access-key-2.png)
 ![access key 3](../../images/integrations-aws-access-key-3.png)
 
-Press on the AWS Secret Manager tile and input your AWS access key ID and secret access key from the previous step.
+Press on the AWS Secrets Manager tile and input your AWS access key ID and secret access key from the previous step.
 
 ![integration auth](../../images/integrations-aws-secret-manager-auth.png)
 
@@ -61,12 +61,12 @@ Press on the AWS Secret Manager tile and input your AWS access key ID and secret
 
 ## Start integration
 
-Select which Infisical environment secrets you want to sync to which AWS Secret Manager region and under which secret name. Then, press create integration to start syncing secrets to AWS Secret Manager.
+Select which Infisical environment secrets you want to sync to which AWS Secrets Manager region and under which secret name. Then, press create integration to start syncing secrets to AWS Secrets Manager.
 
 ![integration create](../../images/integrations-aws-secret-manager-create.png)
 
 <Info>
-  Infisical currently syncs environment variables to AWS Secret Manager as
+  Infisical currently syncs environment variables to AWS Secrets Manager as
   key-value pairs under one secret. We're actively exploring ways to help users
   group environment variable key-pairs under multiple secrets for greater
   control.
diff --git a/docs/integrations/overview.mdx b/docs/integrations/overview.mdx
index a464aa9cb..fc05d817c 100644
--- a/docs/integrations/overview.mdx
+++ b/docs/integrations/overview.mdx
@@ -29,7 +29,7 @@ Missing an integration? [Throw in a request](https://github.com/Infisical/infisi
 | [Checkly](/integrations/cloud/checkly)                         | Cloud                  | Available   |
 | [HashiCorp Vault](/integrations/cloud/hashicorp-vault)         | Cloud                  | Available   |
 | [AWS Parameter Store](/integrations/cloud/aws-parameter-store) | Cloud                  | Available   |
-| [AWS Secret Manager](/integrations/cloud/aws-secret-manager)   | Cloud                  | Available   |
+| [AWS Secrets Manager](/integrations/cloud/aws-secret-manager)   | Cloud                  | Available   |
 | [Azure Key Vault](/integrations/cloud/azure-key-vault)         | Cloud                  | Available   |
 | [GCP Secret Manager](/integrations/cloud/gcp-secret-manager)      | Cloud                  | Available   |
 | [Windmill](/integrations/cloud/windmill)                       | Cloud                  | Available   |
diff --git a/frontend/public/data/frequentConstants.ts b/frontend/public/data/frequentConstants.ts
index 11adf2e7a..7425cb994 100644
--- a/frontend/public/data/frequentConstants.ts
+++ b/frontend/public/data/frequentConstants.ts
@@ -5,7 +5,7 @@ interface Mapping {
 const integrationSlugNameMapping: Mapping = {
   "azure-key-vault": "Azure Key Vault",
   "aws-parameter-store": "AWS Parameter Store",
-  "aws-secret-manager": "AWS Secret Manager",
+  "aws-secret-manager": "AWS Secrets Manager",
   "heroku": "Heroku",
   "vercel": "Vercel",
   "netlify": "Netlify",
diff --git a/frontend/src/pages/integrations/aws-parameter-store/authorize.tsx b/frontend/src/pages/integrations/aws-parameter-store/authorize.tsx
index 80952191c..14e8e97a0 100644
--- a/frontend/src/pages/integrations/aws-parameter-store/authorize.tsx
+++ b/frontend/src/pages/integrations/aws-parameter-store/authorize.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -56,12 +61,41 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="mb-4 text-center">AWS Parameter Store Integration</CardTitle>
+      <Head>
+        <title>Authorize AWS Parameter Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Parameter Store Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-parameter-store" 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>
+          </div>
+        </CardTitle>
         <FormControl
           label="Access Key ID"
           errorText={accessKeyErrorText}
           isError={accessKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input 
             placeholder="" 
@@ -73,6 +107,7 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
           label="Secret Access Key"
           errorText={accessSecretKeyErrorText}
           isError={accessSecretKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder=""
@@ -82,8 +117,9 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to AWS Parameter Store
diff --git a/frontend/src/pages/integrations/aws-parameter-store/create.tsx b/frontend/src/pages/integrations/aws-parameter-store/create.tsx
index a3759d17b..fd8de3c3f 100644
--- a/frontend/src/pages/integrations/aws-parameter-store/create.tsx
+++ b/frontend/src/pages/integrations/aws-parameter-store/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -57,7 +62,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
   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: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -113,10 +118,38 @@ export default function AWSParameterStoreCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace && selectedSourceEnvironment ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">AWS Parameter Store Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up AWS Parameter Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Parameter Store."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Parameter Store Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-parameter-store" 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>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -132,14 +165,14 @@ export default function AWSParameterStoreCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="AWS Region">
+        <FormControl label="AWS Region" className="px-6">
           <Select
             value={selectedAWSRegion}
             onValueChange={(val) => setSelectedAWSRegion(val)}
@@ -152,7 +185,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Path" errorText={pathErrorText} isError={pathErrorText !== "" ?? false}>
+        <FormControl label="Path" errorText={pathErrorText} isError={pathErrorText !== "" ?? false} className="px-6">
           <Input
             placeholder={`/${workspace.name
               .toLowerCase()
@@ -164,15 +197,39 @@ export default function AWSParameterStoreCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
+      <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 AWS Parameter Store with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up AWS Parameter Store Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthLoading ? <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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/aws-secret-manager/authorize.tsx b/frontend/src/pages/integrations/aws-secret-manager/authorize.tsx
index f150a5a28..f69d46f71 100644
--- a/frontend/src/pages/integrations/aws-secret-manager/authorize.tsx
+++ b/frontend/src/pages/integrations/aws-secret-manager/authorize.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useSaveIntegrationAccessToken } from "@app/hooks/api";
 
@@ -54,12 +59,41 @@ export default function AWSSecretManagerCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="mb-4 text-center">AWS Secret Manager Integration</CardTitle>
+      <Head>
+        <title>Authorize AWS Secrets Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Secrets Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-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>
+          </div>
+        </CardTitle>
         <FormControl
           label="Access Key ID"
           errorText={accessKeyErrorText}
           isError={accessKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={accessKey} onChange={(e) => setAccessKey(e.target.value)} />
         </FormControl>
@@ -67,6 +101,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
           label="Secret Access Key"
           errorText={accessSecretKeyErrorText}
           isError={accessSecretKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder=""
@@ -76,11 +111,12 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
-          Connect to AWS Secret Manager
+          Connect to AWS Secrets Manager
         </Button>
       </Card>
     </div>
diff --git a/frontend/src/pages/integrations/aws-secret-manager/create.tsx b/frontend/src/pages/integrations/aws-secret-manager/create.tsx
index 99b89b0fb..3c5b20511 100644
--- a/frontend/src/pages/integrations/aws-secret-manager/create.tsx
+++ b/frontend/src/pages/integrations/aws-secret-manager/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -57,7 +62,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
   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: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -112,10 +117,38 @@ export default function AWSSecretManagerCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace && selectedSourceEnvironment ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">AWS Secret Manager Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up AWS Secrets Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Secrets Manager."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Secrets Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-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>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -131,14 +164,14 @@ export default function AWSSecretManagerCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="AWS Region">
+        <FormControl label="AWS Region" className="px-6">
           <Select
             value={selectedAWSRegion}
             onValueChange={(val) => setSelectedAWSRegion(val)}
@@ -155,6 +188,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
           label="AWS SM Secret Name"
           errorText={targetSecretNameErrorText}
           isError={targetSecretNameErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder={`${workspace.name
@@ -167,15 +201,39 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
+      <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 AWS Secrets Manager with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up AWS Secrets Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthLoading ? <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>
   );
 }
 

From 20a64972188134f7cabfdcd5eee61d74aa9eb885 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Fri, 15 Sep 2023 22:18:25 -0700
Subject: [PATCH 08/11] Fixed UI for TeamCity, Fly.io, Render integrations

---
 .../src/pages/integrations/checkly/create.tsx |  4 +-
 .../pages/integrations/circleci/create.tsx    |  4 +-
 .../pages/integrations/flyio/authorize.tsx    | 43 ++++++++++-
 .../src/pages/integrations/flyio/create.tsx   | 77 ++++++++++++++++---
 .../gcp-secret-manager/create.tsx             |  4 +-
 .../src/pages/integrations/github/create.tsx  |  4 +-
 .../src/pages/integrations/gitlab/create.tsx  |  4 +-
 .../pages/integrations/render/authorize.tsx   | 43 ++++++++++-
 .../src/pages/integrations/render/create.tsx  | 77 ++++++++++++++++---
 .../pages/integrations/teamcity/authorize.tsx | 44 ++++++++++-
 .../pages/integrations/teamcity/create.tsx    | 72 ++++++++++++++---
 .../src/pages/integrations/vercel/create.tsx  |  4 +-
 12 files changed, 326 insertions(+), 54 deletions(-)

diff --git a/frontend/src/pages/integrations/checkly/create.tsx b/frontend/src/pages/integrations/checkly/create.tsx
index d832a8b27..4393dfc0e 100644
--- a/frontend/src/pages/integrations/checkly/create.tsx
+++ b/frontend/src/pages/integrations/checkly/create.tsx
@@ -44,7 +44,7 @@ export default function ChecklyCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -242,7 +242,7 @@ export default function ChecklyCreateIntegrationPage() {
         <title>Set Up Checkly Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      {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">
+      {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
diff --git a/frontend/src/pages/integrations/circleci/create.tsx b/frontend/src/pages/integrations/circleci/create.tsx
index c8252b0ff..1fc84a433 100644
--- a/frontend/src/pages/integrations/circleci/create.tsx
+++ b/frontend/src/pages/integrations/circleci/create.tsx
@@ -34,7 +34,7 @@ export default function CircleCICreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -189,7 +189,7 @@ export default function CircleCICreateIntegrationPage() {
         <title>Set Up CircleCI Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      {isintegrationAuthAppsLoading || isintegrationAuthLoading ? <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">
+      {isIntegrationAuthAppsLoading || isintegrationAuthLoading ? <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
diff --git a/frontend/src/pages/integrations/flyio/authorize.tsx b/frontend/src/pages/integrations/flyio/authorize.tsx
index 2af0fa2ab..b40cde5da 100644
--- a/frontend/src/pages/integrations/flyio/authorize.tsx
+++ b/frontend/src/pages/integrations/flyio/authorize.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -41,12 +46,41 @@ export default function FlyioCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Fly.io Integration</CardTitle>
+      <Head>
+        <title>Authorize Fly.io Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your access token, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Flyio.svg"
+                height={30}
+                width={30}
+                alt="Fly.io logo"
+              />
+            </div>
+            <span className="ml-2.5">Fly.io Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/flyio" 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>
+          </div>
+        </CardTitle>
         <FormControl
           label="Fly.io Access Token"
           errorText={accessTokenErrorText}
           isError={accessTokenErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder=""
@@ -56,8 +90,9 @@ export default function FlyioCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to Fly.io
diff --git a/frontend/src/pages/integrations/flyio/create.tsx b/frontend/src/pages/integrations/flyio/create.tsx
index 8a49d4c06..e24e636bf 100644
--- a/frontend/src/pages/integrations/flyio/create.tsx
+++ b/frontend/src/pages/integrations/flyio/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -28,8 +33,8 @@ export default function FlyioCreateIntegrationPage() {
   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 } = useGetIntegrationAuthApps({
+  const { data: integrationAuth, isLoading: isIntegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -84,10 +89,38 @@ export default function FlyioCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Fly.io Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Fly.io Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment or folder in Infisical you want to sync to Fly.io environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Flyio.svg"
+                height={30}
+                width={30}
+                alt="Fly.io logo"
+              />
+            </div>
+            <span className="ml-2.5">Fly.io Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/flyio" 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>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -103,14 +136,14 @@ export default function FlyioCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="Fly.io App" className="mt-4">
+        <FormControl label="Fly.io App" className="px-6">
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
@@ -136,16 +169,40 @@ export default function FlyioCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <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 Fly.io with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Fly.io Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthLoading || 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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
index 1770b056f..3aedc365d 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
@@ -79,7 +79,7 @@ export default function GCPSecretManagerCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -410,7 +410,7 @@ export default function GCPSecretManagerCreateIntegrationPage() {
         <title>Set Up GCP Secret Manager Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      {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">
+      {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
diff --git a/frontend/src/pages/integrations/github/create.tsx b/frontend/src/pages/integrations/github/create.tsx
index bfe291106..5ca725a4b 100644
--- a/frontend/src/pages/integrations/github/create.tsx
+++ b/frontend/src/pages/integrations/github/create.tsx
@@ -34,7 +34,7 @@ export default function GitHubCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -193,7 +193,7 @@ export default function GitHubCreateIntegrationPage() {
         <title>Set Up GitHub Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      {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">
+      {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
diff --git a/frontend/src/pages/integrations/gitlab/create.tsx b/frontend/src/pages/integrations/gitlab/create.tsx
index 270df3e0d..ddd0fa170 100644
--- a/frontend/src/pages/integrations/gitlab/create.tsx
+++ b/frontend/src/pages/integrations/gitlab/create.tsx
@@ -84,7 +84,7 @@ export default function GitLabCreateIntegrationPage() {
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
-  const { data: integrationAuthApps, isLoading: isintegrationAuthAppsLoading } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
 
     integrationAuthId: (integrationAuthId as string) ?? "",
     ...(targetTeamId ? { teamId: targetTeamId } : {})
@@ -443,7 +443,7 @@ export default function GitLabCreateIntegrationPage() {
         <title>Set Up GitLab Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      {isintegrationAuthAppsLoading || isintegrationAuthTeamsLoading ? <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">
+      {isIntegrationAuthAppsLoading || isintegrationAuthTeamsLoading ? <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
diff --git a/frontend/src/pages/integrations/render/authorize.tsx b/frontend/src/pages/integrations/render/authorize.tsx
index 4f3af69ac..fb3b65944 100644
--- a/frontend/src/pages/integrations/render/authorize.tsx
+++ b/frontend/src/pages/integrations/render/authorize.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useSaveIntegrationAccessToken} from "@app/hooks/api";
 
@@ -39,19 +44,49 @@ export default function RenderCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Render Integration</CardTitle>
+      <Head>
+        <title>Authorize Render Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Render.png"
+                height={30}
+                width={30}
+                alt="Render logo"
+              />
+            </div>
+            <span className="ml-2.5">Render Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/render" 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>
+          </div>
+        </CardTitle>
         <FormControl
           label="Render API Key"
           errorText={apiKeyErrorText}
           isError={apiKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="rnd_xxx" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to Render
diff --git a/frontend/src/pages/integrations/render/create.tsx b/frontend/src/pages/integrations/render/create.tsx
index d78f3fd78..dd58aa32a 100644
--- a/frontend/src/pages/integrations/render/create.tsx
+++ b/frontend/src/pages/integrations/render/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -28,8 +33,8 @@ export default function RenderCreateIntegrationPage() {
   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 } = useGetIntegrationAuthApps({
+  const { data: integrationAuth, isLoading: isIntegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -82,10 +87,38 @@ export default function RenderCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps &&
     targetApp ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Render Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Render Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment or folder in Infisical you want to sync to Render environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/Render.png"
+                height={30}
+                width={30}
+                alt="Render logo"
+              />
+            </div>
+            <span className="ml-2.5">Render Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/render" 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>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -101,14 +134,14 @@ export default function RenderCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="Render Service" className="mt-4">
+        <FormControl label="Render Service" className="px-6">
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
@@ -134,16 +167,40 @@ export default function RenderCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
           Create Integration
         </Button>
       </Card>
+      <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 Render with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up Render Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthLoading || 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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/teamcity/authorize.tsx b/frontend/src/pages/integrations/teamcity/authorize.tsx
index 7b69d9727..60007466c 100644
--- a/frontend/src/pages/integrations/teamcity/authorize.tsx
+++ b/frontend/src/pages/integrations/teamcity/authorize.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -51,12 +56,41 @@ export default function TeamCityCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">TeamCity Integration</CardTitle>
+      <Head>
+        <title>Authorize TeamCity Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/TeamCity.png"
+                height={28}
+                width={28}
+                alt="TeamCity logo"
+              />
+            </div>
+            <span className="ml-2">TeamCity Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/teamcity" 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>
+          </div>
+        </CardTitle>
         <FormControl
           label="TeamCity Access Token"
           errorText={apiKeyErrorText}
           isError={apiKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder="Access Token"
@@ -68,6 +102,7 @@ export default function TeamCityCreateIntegrationPage() {
           label="TeamCity Server URL"
           errorText={serverUrlErrorText}
           isError={serverUrlErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder="https://example.teamcity.com"
@@ -77,8 +112,9 @@ export default function TeamCityCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
+          colorSchema="primary"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to TeamCity
diff --git a/frontend/src/pages/integrations/teamcity/create.tsx b/frontend/src/pages/integrations/teamcity/create.tsx
index a7cd53ae1..ba37cae3b 100644
--- a/frontend/src/pages/integrations/teamcity/create.tsx
+++ b/frontend/src/pages/integrations/teamcity/create.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+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 queryString from "query-string";
 
 import {
@@ -35,8 +40,8 @@ export default function TeamCityCreateIntegrationPage() {
   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 } = useGetIntegrationAuthApps({
+  const { data: integrationAuth, isLoading: isIntegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
   
@@ -102,9 +107,37 @@ export default function TeamCityCreateIntegrationPage() {
     filteredBuildConfigs &&
     targetAppId ? (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">TeamCity Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
+      <Head>
+        <title>Set Up TeamCity Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment or folders in Infisical you want to sync to which project in TeamCity."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/TeamCity.png"
+                height={28}
+                width={28}
+                alt="TeamCity logo"
+              />
+            </div>
+            <span className="ml-2">TeamCity Integration</span>
+            <Link href="https://infisical.com/docs/integrations/cloud/teamcity" 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>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -120,14 +153,14 @@ export default function TeamCityCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <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="TeamCity Project" className="mt-4">
+        <FormControl label="TeamCity Project" className="px-6">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
@@ -150,7 +183,7 @@ export default function TeamCityCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
-        <FormControl label="Team City Build Config (Optional)" className="mt-4">
+        <FormControl label="Team City Build Config (Optional)"  className="px-6">
           <Select
             value={targetBuildConfigId}
             onValueChange={(val) => setTargetBuildConfigId(val)}
@@ -169,7 +202,8 @@ export default function TeamCityCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
@@ -178,7 +212,25 @@ export default function TeamCityCreateIntegrationPage() {
       </Card>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up TeamCity Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isIntegrationAuthLoading || 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>
   );
 }
 
diff --git a/frontend/src/pages/integrations/vercel/create.tsx b/frontend/src/pages/integrations/vercel/create.tsx
index 2f15df5c8..8583e44cd 100644
--- a/frontend/src/pages/integrations/vercel/create.tsx
+++ b/frontend/src/pages/integrations/vercel/create.tsx
@@ -47,7 +47,7 @@ export default function VercelCreateIntegrationPage() {
   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, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
 
@@ -245,7 +245,7 @@ export default function VercelCreateIntegrationPage() {
         <title>Set Up Vercel Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      {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">
+      {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

From 14d253d01aa58d7033b16b490aaa27fc65039a09 Mon Sep 17 00:00:00 2001
From: Tuan Dang <dangtony98@gmail.com>
Date: Sat, 16 Sep 2023 12:36:29 +0100
Subject: [PATCH 09/11] Update GCP SM and GitLab integrations to have overwrite
 popup warning

---
 backend/src/models/integration/integration.ts |   3 +-
 .../gcp-secret-manager/authorize.tsx          | 125 +++++----
 .../gcp-secret-manager/create.tsx             | 239 +++++++++++-------
 .../pages/integrations/gitlab/authorize.tsx   |  98 ++++---
 .../src/pages/integrations/gitlab/create.tsx  |  57 ++++-
 5 files changed, 334 insertions(+), 188 deletions(-)

diff --git a/backend/src/models/integration/integration.ts b/backend/src/models/integration/integration.ts
index 7a7775bac..9bc378f28 100644
--- a/backend/src/models/integration/integration.ts
+++ b/backend/src/models/integration/integration.ts
@@ -187,7 +187,8 @@ const integrationSchema = new Schema<IIntegration>(
       default: "/",
     },
     metadata: {
-      type: Schema.Types.Mixed
+      type: Schema.Types.Mixed,
+      default: {}
     }
   },
   {
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx b/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
index d38c09887..91755cc4c 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/authorize.tsx
@@ -1,6 +1,7 @@
 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";
@@ -8,6 +9,8 @@ import { useRouter } from "next/router";
 import { faGoogle } from "@fortawesome/free-brands-svg-icons";
 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,
@@ -15,39 +18,27 @@ import {
 
 import { Button, Card, CardTitle, FormControl, TextArea } from "../../../components/v2";
 
+const schema = yup.object({
+  accessToken: yup.string().required("Service Account JSON cannot be empty")
+});
+
+type FormData = yup.InferType<typeof schema>;
+
 export default function GCPSecretManagerAuthorizeIntegrationPage() {
   const router = useRouter();
+
+  const {
+    control,
+    handleSubmit
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
+
   const { data: cloudIntegrations } = useGetCloudIntegrations();
 
   const { mutateAsync } = useSaveIntegrationAccessToken();
   
-  const [accessToken, setAccessToken] = useState("");
-  const [accessTokenErrorText, setAccessTokenErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-
-  const handleIntegrateWithPAT = async () => {
-    try {
-      setAccessTokenErrorText("");
-      if (accessToken.length === 0) {
-        setAccessTokenErrorText("Service account JSON cannot be blank");
-        return;
-      }
-
-      setIsLoading(true);
-
-      const integrationAuth = await mutateAsync({
-        workspaceId: localStorage.getItem("projectData.id"),
-        integration: "gcp-secret-manager",
-        refreshToken: accessToken
-      });
-
-      setIsLoading(false);
-
-      router.push(`/integrations/gcp-secret-manager/create?integrationAuthId=${integrationAuth._id}`);
-    } catch (err) {
-      console.error(err);
-    }
-  };
   
   const handleIntegrateWithOAuth = () => {
     if (!cloudIntegrations) return;
@@ -61,6 +52,26 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() {
     const link = `https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/cloud-platform&response_type=code&access_type=offline&state=${state}&redirect_uri=${window.location.origin}/integrations/gcp-secret-manager/oauth2/callback&client_id=${integrationOption.clientId}`;
     window.location.assign(link);
   }
+  
+  const onFormSubmit = async ({
+    accessToken
+  }: FormData) => {
+    try {
+      setIsLoading(true);
+      
+      const integrationAuth = await mutateAsync({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "gcp-secret-manager",
+        refreshToken: accessToken
+      });
+      
+      setIsLoading(false);
+      router.push(`/integrations/gcp-secret-manager/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+      setIsLoading(false);
+    }
+  }
 
   return (
     <div className="flex h-full w-full items-center justify-center">
@@ -94,7 +105,7 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() {
             </Link>
           </div>
         </CardTitle>
-        <div className="px-7">
+        <div className="px-6">
           <Button
               colorSchema="primary" 
               variant="outline_bg"
@@ -104,35 +115,43 @@ export default function GCPSecretManagerAuthorizeIntegrationPage() {
           > 
               Continue with OAuth
           </Button>
+          <div className='w-full flex flex-row items-center my-4 py-2'>
+              <div className='w-full border-t border-mineshaft-400/40' /> 
+              <span className="mx-2 text-mineshaft-400 text-xs">or</span>
+              <div className='w-full border-t border-mineshaft-400/40' />
+          </div>
         </div>
-        <div className='w-full flex flex-row items-center my-4 py-2 px-7'>
-            <div className='w-full border-t border-mineshaft-400/40' /> 
-            <span className="mx-2 text-mineshaft-400 text-xs">or</span>
-            <div className='w-full border-t border-mineshaft-400/40' />
-        </div>
-        <FormControl
-          label="GCP Service Account JSON"
-          errorText={accessTokenErrorText}
-          isError={accessTokenErrorText !== "" ?? false}
-          className="px-6"
+        <form 
+          onSubmit={handleSubmit(onFormSubmit)}
+          className="px-6 text-right pb-8"
         >
-          <TextArea 
-            value={accessToken}
-            onChange={(e) => setAccessToken(e.target.value)}
-            placeholder=""
-            className="h-48 border border-mineshaft-600 bg-bunker-900/80"
+          <Controller
+            control={control}
+            name="accessToken"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="GCP Service Account JSON"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <TextArea 
+                  {...field}
+                  className="h-48 border border-mineshaft-600 bg-bunker-900/80"
+                />
+              </FormControl>
+            )}
           />
-        </FormControl>
-        <Button
-          onClick={handleIntegrateWithPAT}
-          colorSchema="primary"
-          variant="outline_bg"
-          className="mb-8 mt-2 ml-auto mr-6 w-min"
-          isLoading={isLoading}
-        >
-          Connect to GCP Secret Manager
-        </Button>
-        
+          <Button
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mt-2 w-min"
+            size="sm"
+            type="submit"
+            isLoading={isLoading}
+          >
+            Connect to GCP Secret Manager
+          </Button>
+        </form>
       </Card>
     </div>
   );
diff --git a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx b/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
index 3aedc365d..cc7b3184f 100644
--- a/frontend/src/pages/integrations/gcp-secret-manager/create.tsx
+++ b/frontend/src/pages/integrations/gcp-secret-manager/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,14 +22,15 @@ import {
   CardTitle,
   FormControl,
   Input,
+  Modal,
+  ModalContent,
   Select,
   SelectItem,
   Switch,
   Tab,
   TabList,
   TabPanel,
-  Tabs
-} from "../../../components/v2";
+  Tabs} from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
@@ -44,30 +46,36 @@ 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(),
+  secretPrefix: yup.string().trim(),
+  secretSuffix: yup.string().trim(),
   shouldLabel: yup.boolean(),
-  labelName: yup.string(),
-  labelValue: yup.string()
+  labelName: yup.string().trim(),
+  labelValue: yup.string().trim()
 });
 
 type FormData = yup.InferType<typeof schema>;
 
 export default function GCPSecretManagerCreateIntegrationPage() {
   const router = useRouter();
+  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+    "confirmIntegration"
+  ] as const);
+  
   const {
     control,
     handleSubmit,
     setValue,
     watch
   } = useForm<FormData>({
-      resolver: yupResolver(schema),
-      defaultValues: {
-        secretPath: "/",
-        shouldLabel: false,
-        labelName: "managed-by",
-        labelValue: "infisical"
-      }
+    resolver: yupResolver(schema),
+    defaultValues: {
+      secretPath: "/",
+      secretPrefix: "",
+      secretSuffix: "",
+      shouldLabel: false,
+      labelName: "managed-by",
+      labelValue: "infisical"
+    }
   });
   
   const shouldLabel = watch("shouldLabel");
@@ -92,8 +100,8 @@ export default function GCPSecretManagerCreateIntegrationPage() {
       return;
     }
     
-    setValue("labelName", undefined);
-    setValue("labelValue", undefined);
+    setValue("labelName", "");
+    setValue("labelValue", "");
   }, [shouldLabel]);
 
   useEffect(() => {
@@ -135,8 +143,8 @@ export default function GCPSecretManagerCreateIntegrationPage() {
         sourceEnvironment: sce,
         secretPath,
         metadata: {
-          secretPrefix,
-          secretSuffix,
+          ...(secretPrefix ? { secretPrefix } : {}),
+          ...(secretSuffix ? { secretSuffix } : {}),
           ...(sl ? {
             secretGCPLabel: {
               labelName,
@@ -159,7 +167,14 @@ export default function GCPSecretManagerCreateIntegrationPage() {
     selectedSourceEnvironment &&
     integrationAuthApps ? (
     <form 
-      onSubmit={handleSubmit(onFormSubmit)}
+      onSubmit={handleSubmit((data: FormData) => {
+        if (!data.secretPrefix && !data.secretSuffix && !data.shouldLabel) {
+          handlePopUpOpen("confirmIntegration", data); 
+          return;
+        }
+        
+        onFormSubmit(data);
+      })}
       className="flex flex-col h-full w-full items-center justify-center"
     >
       <Card className="max-w-lg rounded-md border border-mineshaft-600">
@@ -169,7 +184,7 @@ export default function GCPSecretManagerCreateIntegrationPage() {
         </Head>
         <CardTitle 
           className="text-left px-6 text-xl mb-2" 
-          subTitle="Select which environment or folder in Infisical you want to sync to GCP Secret Manager. Optionally, you can add suffixes/prefixes."
+          subTitle="Select which environment or folder in Infisical you want to sync to GCP Secret Manager."
         >
           <div className="flex flex-row items-center">
             <div className="inline flex items-center pb-0.5">
@@ -207,89 +222,87 @@ export default function GCPSecretManagerCreateIntegrationPage() {
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: 30 }}
             >
-              <div>
-                <Controller
+              <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}
-                  name="selectedSourceEnvironment"
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  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="Project Environment"
+                      label="GCP Project"
                       errorText={error?.message}
                       isError={Boolean(error)}
                     >
                       <Select
-                        defaultValue={field.value}
                         {...field}
-                        onValueChange={(e) => onChange(e)}
+                        onValueChange={(e) => {
+                          if (e === "") return;
+                          onChange(e)
+                        }}
                         className="w-full"
                       >
-                        {workspace?.environments.map((sourceEnvironment) => (
-                          <SelectItem
-                            value={sourceEnvironment.slug}
-                            key={`source-environment-${sourceEnvironment.slug}`}
-                          >
-                            {sourceEnvironment.name}
+                        {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>
-                  )}
-                />
-                <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>
-                    )
-                  }}
-                />
-              </div>
+                  )
+                }}
+              />
             </motion.div>
           </TabPanel>
           <TabPanel value={TabSections.Options}>
@@ -398,11 +411,47 @@ export default function GCPSecretManagerCreateIntegrationPage() {
           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 GCP Secret Manager with secrets from Infisical.</span>
-      </div>
+        <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 Tip</span>
+        </div>
+        <span className="text-mineshaft-300 text-sm mt-4">
+          After creating an integration, your secrets will start syncing immediately. 
+          
+          To avoid overwriting existing secrets in GCP Secret Manager, you may consider adding a secret prefix/suffix and/or enabling labeling in the options tab.
+        </span>
+      </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 GCP Secret Manager. 
+            </p>
+            <p className="mt-4">
+              To avoid this behavior, you may consider adding a secret prefix/suffix or enabling labeling in the options tab.
+            </p> 
+          </ModalContent>
+        </Modal>
     </form>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
diff --git a/frontend/src/pages/integrations/gitlab/authorize.tsx b/frontend/src/pages/integrations/gitlab/authorize.tsx
index 894ef9d41..ca79f676a 100644
--- a/frontend/src/pages/integrations/gitlab/authorize.tsx
+++ b/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>
   );
diff --git a/frontend/src/pages/integrations/gitlab/create.tsx b/frontend/src/pages/integrations/gitlab/create.tsx
index ddd0fa170..96c651fdd 100644
--- a/frontend/src/pages/integrations/gitlab/create.tsx
+++ b/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">

From 0f003e8ab6aa51f7a65383015a4f8313a667bf80 Mon Sep 17 00:00:00 2001
From: Tuan Dang <dangtony98@gmail.com>
Date: Sat, 16 Sep 2023 12:42:23 +0100
Subject: [PATCH 10/11] Add type assertion for GitLab selfhosted URL

---
 frontend/src/pages/integrations/gitlab/authorize.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/integrations/gitlab/authorize.tsx b/frontend/src/pages/integrations/gitlab/authorize.tsx
index ca79f676a..32cf97869 100644
--- a/frontend/src/pages/integrations/gitlab/authorize.tsx
+++ b/frontend/src/pages/integrations/gitlab/authorize.tsx
@@ -40,12 +40,12 @@ export default function GitLabAuthorizeIntegrationPage() {
     
     if (!integrationOption) return;
     
-    const baseURL = gitLabURL.trim() === "" ? "https://gitlab.com" : gitLabURL.trim();
+    const baseURL = (gitLabURL as string).trim() === "" ? "https://gitlab.com" : (gitLabURL as string).trim();
     
     const csrfToken = crypto.randomBytes(16).toString("hex");
     localStorage.setItem("latestCSRFToken", csrfToken);
     
-    const state = `${csrfToken}|${gitLabURL.trim() === "" ? "" : gitLabURL.trim()}`;
+    const state = `${csrfToken}|${(gitLabURL as string).trim() === "" ? "" : (gitLabURL as string).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);

From a89ed40dcd858ba386db31b5e40524eff70b5581 Mon Sep 17 00:00:00 2001
From: Tuan Dang <dangtony98@gmail.com>
Date: Sat, 16 Sep 2023 18:13:55 +0100
Subject: [PATCH 11/11] Update Fly.io integration authorization page to use
 react-form

---
 backend/src/integrations/apps.ts              |  11 +-
 .../pages/integrations/flyio/authorize.tsx    |  97 +++---
 .../src/pages/integrations/flyio/create.tsx   |   1 +
 .../src/pages/integrations/gitlab/create.tsx  | 303 +++++++++---------
 4 files changed, 222 insertions(+), 190 deletions(-)

diff --git a/backend/src/integrations/apps.ts b/backend/src/integrations/apps.ts
index dc947f6f1..cd6cb263f 100644
--- a/backend/src/integrations/apps.ts
+++ b/backend/src/integrations/apps.ts
@@ -608,6 +608,12 @@ const getAppsLaravelForge = async ({
  * @returns {String} apps.name - name of Fly.io apps
  */
 const getAppsFlyio = async ({ accessToken }: { accessToken: string }) => {
+  interface FlyioApp {
+    id: string;
+    name: string;
+    hostname: string;
+  }
+  
   const query = `
     query($role: String) {
       apps(type: "container", first: 400, role: $role) {
@@ -620,7 +626,7 @@ const getAppsFlyio = async ({ accessToken }: { accessToken: string }) => {
     }
   `;
 
-  const res = (
+  const res: FlyioApp[] = (
     await standardRequest.post(
       INTEGRATION_FLYIO_API_URL,
       {
@@ -639,8 +645,9 @@ const getAppsFlyio = async ({ accessToken }: { accessToken: string }) => {
     )
   ).data.data.apps.nodes;
 
-  const apps = res.map((a: any) => ({
+  const apps = res.map((a: FlyioApp) => ({
     name: a.name,
+    appId: a.id
   }));
 
   return apps;
diff --git a/frontend/src/pages/integrations/flyio/authorize.tsx b/frontend/src/pages/integrations/flyio/authorize.tsx
index b40cde5da..277e62167 100644
--- a/frontend/src/pages/integrations/flyio/authorize.tsx
+++ b/frontend/src/pages/integrations/flyio/authorize.tsx
@@ -1,10 +1,13 @@
 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 { useRouter } from "next/router";
 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 {
   useSaveIntegrationAccessToken
@@ -12,37 +15,49 @@ import {
 
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
 
-export default function FlyioCreateIntegrationPage() {
+const schema = yup.object({
+  accessToken: yup.string().trim().required("Fly.io Access Token is required")
+});
+
+type FormData = yup.InferType<typeof schema>;
+
+export default function FlyioAuthorizeIntegrationPage() {
   const router = useRouter();
+
+  const {
+    control,
+    handleSubmit
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      accessToken: ""
+    }
+  });
+
   const { mutateAsync } = useSaveIntegrationAccessToken();
   
-  const [accessToken, setAccessToken] = useState("");
-  const [accessTokenErrorText, setAccessTokenErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-
-  const handleButtonClick = async () => {
+  
+  const onFormSubmit = async ({
+    accessToken
+  }: FormData) => {
+    console.log("onFormSubmit accessToken: ", accessToken);
     try {
-      setAccessTokenErrorText("");
-      if (accessToken.length === 0) {
-        setAccessTokenErrorText("Access token cannot be blank");
-        return;
-      }
-
       setIsLoading(true);
-
+      
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "flyio",
         accessToken
       });
-
+      
       setIsLoading(false);
-
       router.push(`/integrations/flyio/create?integrationAuthId=${integrationAuth._id}`);
     } catch (err) {
+      setIsLoading(false);
       console.error(err);
     }
-  };
+  }
 
   return (
     <div className="flex h-full w-full items-center justify-center">
@@ -69,37 +84,47 @@ export default function FlyioCreateIntegrationPage() {
               <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
+                    Docs
                   <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
                 </div>
               </a>
             </Link>
           </div>
         </CardTitle>
-        <FormControl
-          label="Fly.io Access Token"
-          errorText={accessTokenErrorText}
-          isError={accessTokenErrorText !== "" ?? false}
-          className="px-6"
+        <form
+          onSubmit={handleSubmit(onFormSubmit)}
+          className="px-6 text-right pb-8"
         >
-          <Input
-            placeholder=""
-            value={accessToken}
-            onChange={(e) => setAccessToken(e.target.value)}
+          <Controller
+            control={control}
+            name="accessToken"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Fly.io Access Token"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input 
+                  {...field}
+                  placeholder="" 
+                />
+              </FormControl>
+            )}
           />
-        </FormControl>
-        <Button
-          onClick={handleButtonClick}
-          colorSchema="primary"
-          variant="outline_bg"
-          className="mb-6 mt-2 ml-auto mr-6 w-min"
-          isLoading={isLoading}
-        >
-          Connect to Fly.io
-        </Button>
+          <Button
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mt-2 w-min"
+            size="sm"
+            type="submit"
+            isLoading={isLoading}
+          >
+            Connect to Fly.io
+          </Button>
+        </form>
       </Card>
     </div>
   );
 }
 
-FlyioCreateIntegrationPage.requireAuth = true;
+FlyioAuthorizeIntegrationPage.requireAuth = true;
diff --git a/frontend/src/pages/integrations/flyio/create.tsx b/frontend/src/pages/integrations/flyio/create.tsx
index e24e636bf..be1a577de 100644
--- a/frontend/src/pages/integrations/flyio/create.tsx
+++ b/frontend/src/pages/integrations/flyio/create.tsx
@@ -28,6 +28,7 @@ import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
 export default function FlyioCreateIntegrationPage() {
   const router = useRouter();
+  
   const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
diff --git a/frontend/src/pages/integrations/gitlab/create.tsx b/frontend/src/pages/integrations/gitlab/create.tsx
index 96c651fdd..ecf787ee5 100644
--- a/frontend/src/pages/integrations/gitlab/create.tsx
+++ b/frontend/src/pages/integrations/gitlab/create.tsx
@@ -29,7 +29,8 @@ import {
   Tab,
   TabList,
   TabPanel,
-  Tabs} from "../../../components/v2";
+  Tabs
+} from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById,
@@ -229,165 +230,163 @@ export default function GitLabCreateIntegrationPage() {
               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)}
+              <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"
                     >
-                      <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}
+                      {workspace?.environments.map((sourceEnvironment) => (
+                        <SelectItem
+                          value={sourceEnvironment.slug}
+                          key={`source-environment-${sourceEnvironment.slug}`}
                         >
-                        <Input 
-                            {...field} 
-                            placeholder="/"
-                        />
-                        </FormControl>
-                    )}
-                />
-                <Controller
-                  control={control}
-                  name="targetEntity"
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                    <FormControl
-                      label="GitLab Integration Type"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <Select
-                        {...field}
-                        onValueChange={(e) => onChange(e)}
-                        className="w-full"
-                      >
-                        {gitLabEntities.map((entity) => {
-                          return (
-                            <SelectItem value={entity.value} key={`target-entity-${entity.value}`}>
-                              {entity.name}
-                            </SelectItem>
-                          );
-                        })}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                {targetEntity === "group" && targetTeamId && (
-                  <Controller
-                    control={control}
-                    name="targetTeamId"
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                      <FormControl
-                        label="GitLab Group"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                      >
-                        <Select
-                          {...field}
-                          onValueChange={(e) => onChange(e)}
-                          className="w-full"
-                        >
-                          {integrationAuthTeams.length > 0 ? (
-                            integrationAuthTeams.map((integrationAuthTeam) => 
-                            (
-                              <SelectItem
-                                value={String(integrationAuthTeam.teamId as string)}
-                                key={`target-team-${String(integrationAuthTeam.teamId)}`}
-                              >
-                                {integrationAuthTeam.name}
-                              </SelectItem>
-                            ))
-                          ) : (
-                            <SelectItem value="none" key="target-team-none">
-                              No groups found
-                            </SelectItem>
-                          )}
-                        </Select>
-                      </FormControl>
-                    )}
-                  />
+                          {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="targetEntity"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl
+                    label="GitLab Integration Type"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <Select
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                    >
+                      {gitLabEntities.map((entity) => {
+                        return (
+                          <SelectItem value={entity.value} key={`target-entity-${entity.value}`}>
+                            {entity.name}
+                          </SelectItem>
+                        );
+                      })}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+              {targetEntity === "group" && targetTeamId && (
                 <Controller
                   control={control}
-                  name="targetAppId"
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-                    return (
-                      <FormControl
-                        label="GitLab Project"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
+                  name="targetTeamId"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="GitLab Group"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
                       >
-                        <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
+                        {integrationAuthTeams.length > 0 ? (
+                          integrationAuthTeams.map((integrationAuthTeam) => 
+                          (
+                            <SelectItem
+                              value={String(integrationAuthTeam.teamId as string)}
+                              key={`target-team-${String(integrationAuthTeam.teamId)}`}
+                            >
+                              {integrationAuthTeam.name}
                             </SelectItem>
-                          )}
-                        </Select>
-                      </FormControl>
-                    )}}
-                  />
-                  <Controller
-                    control={control}
-                    defaultValue=""
-                    name="targetEnvironment"
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                            label="GitLab Environment Scope (Optional)"
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                        >
-                        <Input 
-                            {...field} 
-                            placeholder="*"
-                        />
-                        </FormControl>
-                    )}
+                          ))
+                        ) : (
+                          <SelectItem value="none" key="target-team-none">
+                            No groups found
+                          </SelectItem>
+                        )}
+                      </Select>
+                    </FormControl>
+                  )}
                 />
-              </div>
+              )}
+              <Controller
+                control={control}
+                name="targetAppId"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      label="GitLab 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>
+                  )}}
+                />
+                <Controller
+                  control={control}
+                  defaultValue=""
+                  name="targetEnvironment"
+                  render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                          label="GitLab Environment Scope (Optional)"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                      >
+                      <Input 
+                          {...field} 
+                          placeholder="*"
+                      />
+                      </FormControl>
+                  )}
+              />
             </motion.div>
           </TabPanel>
           <TabPanel value={TabSections.Options}>
