feat(vercel): Enhance RegenerateApiKeyModal to include Vercel integration options and sync functionality

Author: 0ski

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

@@ -10,19 +10,27 @@ import { FormButtons } from "../primitives/FormButtons";
 import { Input } from "../primitives/Input";
 import { InputGroup } from "../primitives/InputGroup";
 import { Paragraph } from "../primitives/Paragraph";
+import { CheckboxWithLabel } from "../primitives/Checkbox";
 import { Spinner } from "../primitives/Spinner";
 
 type ModalProps = {
   id: string;
   title: string;
+  hasVercelIntegration: boolean;
+  isDevelopment: boolean;
 };
 
 type ModalContentProps = ModalProps & {
   randomWord: string;
   closeModal: () => void;
 };
 
-export function RegenerateApiKeyModal({ id, title }: ModalProps) {
+export function RegenerateApiKeyModal({
+  id,
+  title,
+  hasVercelIntegration,
+  isDevelopment,
+}: ModalProps) {
   const randomWord = generateTwoRandomWords();
   const [open, setOpen] = useState(false);
   return (
@@ -37,6 +45,8 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) {
         <RegenerateApiKeyModalContent
           id={id}
           title={title}
+          hasVercelIntegration={hasVercelIntegration}
+          isDevelopment={isDevelopment}
           randomWord={randomWord}
           closeModal={() => setOpen(false)}
         />
@@ -45,7 +55,14 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) {
   );
 }
 
-const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: ModalContentProps) => {
+const RegenerateApiKeyModalContent = ({
+  id,
+  randomWord,
+  title,
+  hasVercelIntegration,
+  isDevelopment,
+  closeModal,
+}: ModalContentProps) => {
   const [confirmationText, setConfirmationText] = useState("");
   const fetcher = useFetcher();
   const isSubmitting = fetcher.state === "submitting";
@@ -83,6 +100,15 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod
               onChange={(e) => setConfirmationText(e.target.value)}
             />
           </InputGroup>
+          {hasVercelIntegration && !isDevelopment && (
+            <CheckboxWithLabel
+              name="syncToVercel"
+              variant="simple/small"
+              label="Also update TRIGGER_SECRET_KEY in Vercel"
+              defaultChecked={true}
+              value="on"
+            />
+          )}
           <FormButtons
             confirmButton={
               <Button

apps/webapp/app/models/vercelIntegration.server.ts

@@ -47,7 +47,7 @@ function extractVercelEnvs(
 }
 
 function isVercelSecretType(type: string): boolean {
-  return type === "secret" || type === "sensitive" || type === "encrypted";
+  return type === "secret" || type === "sensitive";
 }
 
 // ---------------------------------------------------------------------------
@@ -809,12 +809,12 @@ export class VercelIntegrationRepository {
     return this.getVercelClient(params.orgIntegration).andThen((client) =>
       ResultAsync.fromPromise(
         (async () => {
-          // Get all environments for the project
+          // Get all environments for the project (exclude DEVELOPMENT — we don't push keys to Vercel's development target)
           const environments = await prisma.runtimeEnvironment.findMany({
             where: {
               projectId: params.projectId,
               type: {
-                in: ["PRODUCTION", "STAGING", "PREVIEW", "DEVELOPMENT"],
+                in: ["PRODUCTION", "STAGING", "PREVIEW"],
               },
             },
             select: {

apps/webapp/app/presenters/v3/ApiKeysPresenter.server.ts

@@ -38,6 +38,11 @@ export class ApiKeysPresenter {
             apiKey: true,
           },
         },
+        project: {
+          select: {
+            id: true,
+          },
+        },
       },
       where: {
         project: {
@@ -64,11 +69,22 @@ export class ApiKeysPresenter {
       throw new Error("Environment not found");
     }
 
+    const vercelIntegration =
+      await this.#prismaClient.organizationProjectIntegration.findFirst({
+        where: {
+          projectId: environment.project.id,
+          deletedAt: null,
+          organizationIntegration: { service: "VERCEL", deletedAt: null },
+        },
+        select: { id: true },
+      });
+
     return {
       environment: {
         ...environment,
         apiKey: environment?.parentEnvironment?.apiKey ?? environment?.apiKey,
       },
+      hasVercelIntegration: vercelIntegration !== null,
     };
   }
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx

@@ -51,14 +51,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   try {
     const presenter = new ApiKeysPresenter();
-    const { environment } = await presenter.call({
+    const { environment, hasVercelIntegration } = await presenter.call({
       userId,
       projectSlug: projectParam,
       environmentSlug: envParam,
     });
 
     return typedjson({
       environment,
+      hasVercelIntegration,
     });
   } catch (error) {
     console.error(error);
@@ -70,7 +71,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 };
 
 export default function Page() {
-  const { environment } = useTypedLoaderData<typeof loader>();
+  const { environment, hasVercelIntegration } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
 
   if (!environment) {
@@ -132,6 +133,8 @@ export default function Page() {
                 <RegenerateApiKeyModal
                   id={environment.parentEnvironment?.id ?? environment.id}
                   title={environmentFullTitle(environment)}
+                  hasVercelIntegration={hasVercelIntegration}
+                  isDevelopment={environment.type === "DEVELOPMENT"}
                 />
               </div>
               <ClipboardField

apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx

@@ -21,15 +21,20 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
   const { environmentId } = ParamsSchema.parse(params);
 
+  const formData = await request.formData();
+  const syncToVercel = formData.get("syncToVercel") === "on";
+
   try {
     const updatedEnvironment = await regenerateApiKey({ userId, environmentId });
 
-    // Sync the regenerated API key to Vercel if integration exists
-    await syncApiKeyToVercel(
-      updatedEnvironment.projectId,
-      updatedEnvironment.type as "PRODUCTION" | "STAGING" | "PREVIEW" | "DEVELOPMENT",
-      updatedEnvironment.apiKey
-    );
+    // Sync the regenerated API key to Vercel only when requested and not for DEVELOPMENT
+    if (syncToVercel && updatedEnvironment.type !== "DEVELOPMENT") {
+      await syncApiKeyToVercel(
+        updatedEnvironment.projectId,
+        updatedEnvironment.type as "PRODUCTION" | "STAGING" | "PREVIEW",
+        updatedEnvironment.apiKey
+      );
+    }
 
     return jsonWithSuccessMessage(
       { ok: true },