From 12d9fe9ffdac57f1c0f2b2d35c7aac21dffb0b9e Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 21 Jan 2025 16:02:24 -0800
Subject: [PATCH] improvement: add helper text to point vercel users to access
 permissions if they dont see their project listed

---
 .../components/v2/FormControl/FormControl.tsx |  2 +-
 .../VercelConfigurePage.tsx                   | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index 4d5446519..714f905fc 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -58,7 +58,7 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      "mt-2 flex items-center font-inter text-xs text-mineshaft-300 opacity-90",
+      "mt-2 flex items-center font-inter text-xs text-mineshaft-300 text-opacity-90",
       isError && "text-red-600"
     )}
   >
diff --git a/frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx b/frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx
index d87b99dde..8a07f5453 100644
--- a/frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx
+++ b/frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx
@@ -16,7 +16,8 @@ import {
   FormControl,
   Input,
   Select,
-  SelectItem
+  SelectItem,
+  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { useWorkspace } from "@app/context";
@@ -192,7 +193,21 @@ export const VercelConfigurePage = () => {
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="Vercel App" className="px-6">
+        <FormControl
+          label="Vercel App"
+          helperText={
+            <Tooltip
+              className="max-w-md"
+              content="Double check Infisical's Access permissions in Vercel by navigating to Team > Integrations > Infisical > Settings > Manage Access."
+            >
+              <div>
+                <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}
+                <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+              </div>
+            </Tooltip>
+          }
+          className="px-6"
+        >
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}