General improvements to Vercel Integration

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { SingleValue } from "react-select";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
@@ -39,13 +40,26 @@ export const VercelSyncFields = () => {
     ?.find((project) => project.apps.some((app) => app.id === currentApp))
     ?.apps.find((app) => app.id === currentApp);
 
-  const allApps = projects?.flatMap((project) => project.apps) || [];
+  const allApps =
+    projects?.flatMap((project) =>
+      project.apps.map((app) => ({ ...app, project: project.name, projectId: project.id }))
+    ) || [];
 
-  const environmentOptions = vercelEnvironments.map((env) => ({
-    key: env.slug,
-    type: env.slug,
-    name: env.name
-  }));
+  const environmentOptions = useMemo(() => {
+    return vercelEnvironments
+      .map((env) => ({
+        key: env.slug,
+        type: env.slug,
+        name: env.name
+      }))
+      .concat(
+        selectedProject?.envs?.map((env) => ({
+          key: env.id,
+          type: env.type,
+          name: env.slug
+        })) || []
+      );
+  }, [currentApp]);
 
   const previewBranchOptions =
     selectedProject?.previewBranches?.map((branch) => ({
@@ -77,7 +91,7 @@ export const VercelSyncFields = () => {
             helperText={
               <Tooltip
                 className="max-w-md"
-                content="Ensure that the project exists and the service account used on this connection has write permissions for the specified project."
+                content="Ensure the project exists and the API token scope for this connection includes the desired project."
               >
                 <div>
                   <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}
@@ -95,6 +109,10 @@ export const VercelSyncFields = () => {
                 const appId = (option as SingleValue<TVercelConnectionApp>)?.id ?? null;
                 onChange(appId);
                 setValue("destinationConfig.branch", "");
+                setValue(
+                  "destinationConfig.teamId",
+                  (option as SingleValue<TVercelConnectionApp>)?.projectId || ""
+                );
                 setValue(
                   "destinationConfig.appName",
                   (option as SingleValue<TVercelConnectionApp>)?.name || ""
@@ -104,6 +122,7 @@ export const VercelSyncFields = () => {
               placeholder="Select a project..."
               getOptionLabel={(option) => option.name}
               getOptionValue={(option) => option.id.toString()}
+              groupBy="project"
             />
           </FormControl>
         )}
@@ -124,9 +143,9 @@ export const VercelSyncFields = () => {
               value={
                 value
                   ? {
-                      key: value,
-                      type: value,
-                      name: vercelEnvironments.find((env) => env.slug === value)?.name || value
+                      key: environmentOptions.find((env) => env.key === value)?.key,
+                      type: environmentOptions.find((env) => env.key === value)?.type,
+                      name: environmentOptions.find((env) => env.key === value)?.name
                     }
                   : null
               }
@@ -138,8 +157,8 @@ export const VercelSyncFields = () => {
               }}
               options={environmentOptions}
               placeholder="Select an environment..."
-              getOptionLabel={(option) => option.name || option.key}
-              getOptionValue={(option) => option.key}
+              getOptionLabel={(option) => option.name || option.key || ""}
+              getOptionValue={(option) => option.key || ""}
             />
           </FormControl>
         )}

frontend/src/components/secret-syncs/forms/schemas/vercel-sync-destination-schema.ts

@@ -10,17 +10,9 @@ export const VercelSyncDestinationSchema = BaseSecretSyncSchema().merge(
     destinationConfig: z.object({
       app: z.string().trim().min(1, "Project required"),
       appName: z.string().trim().min(1, "Project required"),
-      env: z.enum(
-        [
-          VercelEnvironmentType.Development,
-          VercelEnvironmentType.Preview,
-          VercelEnvironmentType.Production
-        ],
-        {
-          required_error: "Environment is required"
-        }
-      ),
-      branch: z.string().trim().optional()
+      env: z.nativeEnum(VercelEnvironmentType).or(z.string()),
+      branch: z.string().trim().optional(),
+      teamId: z.string().trim()
     })
   })
 );

frontend/src/helpers/appConnections.ts

@@ -52,9 +52,8 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
     case DatabricksConnectionMethod.ServicePrincipal:
       return { name: "Service Principal", icon: faUser };
     case HumanitecConnectionMethod.ApiToken:
-      return { name: "API Token", icon: faKey };
     case VercelConnectionMethod.ApiToken:
-      return { name: "Service API Token", icon: faKey };
+      return { name: "API Token", icon: faKey };
     case PostgresConnectionMethod.UsernameAndPassword:
     case MsSqlConnectionMethod.UsernameAndPassword:
       return { name: "Username & Password", icon: faLock };

frontend/src/hooks/api/appConnections/vercel/types.ts

@@ -5,8 +5,8 @@ export type TVercelApp = {
 };
 
 export type TVercelConnectionEnvironment = {
-  key: string;
-  value: string;
+  id: string;
+  slug: string;
   type: string;
   target?: string[];
   gitBranch?: string;
@@ -19,6 +19,7 @@ export type TVercelConnectionApp = {
   name: string;
   envs?: TVercelConnectionEnvironment[];
   previewBranches?: string[];
+  projectId: string;
 };
 
 export type TVercelConnectionOrganization = {

frontend/src/hooks/api/secretSyncs/types/vercel-sync.ts

@@ -14,9 +14,10 @@ export type TVercelSync = TRootSecretSync & {
   destination: SecretSync.Vercel;
   destinationConfig: {
     app: string;
-    env: VercelEnvironment;
+    env: VercelEnvironment | string;
     branch?: string;
     appName?: string;
+    teamId: string;
   };
   connection: {
     app: AppConnection.Vercel;

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/VercelConnectionForm.tsx

@@ -102,7 +102,7 @@ export const VercelConnectionForm = ({ appConnection, onSubmit }: Props) => {
             <FormControl
               errorText={error?.message}
               isError={Boolean(error?.message)}
-              label="Service API Token"
+              label="API Token"
             >
               <SecretInput
                 containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/VercelSyncDestinationSection.tsx

@@ -14,7 +14,9 @@ export const VercelSyncDestinationSection = ({ secretSync }: Props) => {
   if (destinationConfig.env === VercelEnvironmentType.Preview && destinationConfig.branch) {
     Components = (
       <>
-        <GenericFieldLabel label="Vercel App">{destinationConfig.app}</GenericFieldLabel>
+        <GenericFieldLabel label="Vercel App">
+          {destinationConfig.appName || destinationConfig.app}
+        </GenericFieldLabel>
         <GenericFieldLabel label="Environment">{destinationConfig.env}</GenericFieldLabel>
         <GenericFieldLabel label="Preview Branch">{destinationConfig.branch}</GenericFieldLabel>
       </>
@@ -22,7 +24,9 @@ export const VercelSyncDestinationSection = ({ secretSync }: Props) => {
   } else {
     Components = (
       <>
-        <GenericFieldLabel label="Vercel App">{destinationConfig.app}</GenericFieldLabel>
+        <GenericFieldLabel label="Vercel App">
+          {destinationConfig.appName || destinationConfig.app}
+        </GenericFieldLabel>
         <GenericFieldLabel label="Environment">{destinationConfig.env}</GenericFieldLabel>
       </>
     );