Merge pull request #3022 from Infisical/vercel-project-help-text

Improvement: Vercel Integration Project Permission Helper Text

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"
     )}
   >

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)}