feat: implement API key regeneration

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

@@ -0,0 +1,107 @@
+import { Button } from "../primitives/Buttons";
+import { Dialog, DialogContent, DialogTrigger } from "~/components/primitives/Dialog";
+import { Header1, Header2 } from "../primitives/Headers";
+import { Input } from "../primitives/Input";
+import { NamedIcon } from "../primitives/NamedIcon";
+import { Paragraph } from "../primitives/Paragraph";
+import { Spinner } from "../primitives/Spinner";
+import { useState } from "react";
+import { useFetcher } from "@remix-run/react";
+import { generateTwoRandomWords } from "~/utils/randomWords";
+
+type ModalProps = {
+  id: string;
+  title: string;
+};
+
+type ModalContentProps = ModalProps & {
+  randomWord: string;
+  closeModal: () => void;
+};
+
+export function RegenerateApiKeyModal({ id, title }: ModalProps) {
+  const randomWord = generateTwoRandomWords();
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="tertiary/small" leadingIconClassName="text-dimmed" LeadingIcon="key">
+          Regenerate
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <RegenerateApiKeyModalContent
+          id={id}
+          title={title}
+          randomWord={randomWord}
+          closeModal={() => setOpen(false)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const RegenerateApiKeyModalContent = ({ id, title, randomWord, closeModal }: ModalContentProps) => {
+  const [confirmationText, setConfirmationText] = useState("");
+  const fetcher = useFetcher();
+  const isSubmitting = fetcher.state === "submitting";
+
+  // form submission completed
+  if (fetcher.state === "loading") {
+    closeModal();
+  }
+
+  return (
+    <div className="flex w-full flex-col items-center gap-y-6">
+      <div className="flex justify-center">
+        <Header1>{title} Environment</Header1>
+      </div>
+      <Header2 className="rounded border border-rose-500 bg-rose-500/10 px-3.5 py-2 text-center text-bright">
+        Are you sure you want to regenerate the keys <br />
+        for this environment?
+      </Header2>
+      <Paragraph variant="small" className="px-6 text-center">
+        <>
+          This will temporarily break any live jobs in the
+          <span className="strong text-bright"> {title} Environment</span> until the new API keys
+          are set in the relevant environment variables.
+        </>
+      </Paragraph>
+      <fetcher.Form
+        method="post"
+        action={`/resources/environments/${id}/regenerate-api-key`}
+        className="mt-2 flex w-full flex-col items-center gap-2"
+      >
+        <Paragraph variant="small" className="font-medium">
+          To confirm, please enter the text:{" "}
+          <span className="font-bold text-bright">{randomWord}</span>
+        </Paragraph>
+        <Input
+          type="text"
+          placeholder="Confirmation Text"
+          fullWidth={false}
+          value={confirmationText}
+          onChange={(e) => setConfirmationText(e.target.value)}
+        />
+        <Button
+          variant="primary/large"
+          fullWidth
+          className="mt-4"
+          disabled={confirmationText !== randomWord}
+        >
+          {isSubmitting ? (
+            <Spinner color="white" />
+          ) : (
+            <>
+              <NamedIcon
+                name="key"
+                className="mr-1.5 h-4 w-4 text-bright transition group-hover:text-bright"
+              />
+              Regenerate API Keys
+            </>
+          )}
+        </Button>
+      </fetcher.Form>
+    </div>
+  );
+};

apps/webapp/app/models/api-key.server.ts

@@ -0,0 +1,101 @@
+import { RuntimeEnvironmentType, type RuntimeEnvironment } from "@trigger.dev/database";
+import { prisma } from "~/db.server";
+import { customAlphabet } from "nanoid";
+
+const apiKeyId = customAlphabet(
+  "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  12
+);
+
+type RegenerateAPIKeyInput = {
+  userId: string;
+  environmentId: string;
+};
+
+export async function regenerateApiKey({ userId, environmentId }: RegenerateAPIKeyInput) {
+  const environment = await prisma.runtimeEnvironment.findUnique({
+    where: {
+      id: environmentId,
+    },
+    include: {
+      organization: true,
+      project: true,
+    },
+  });
+
+  if (!environment) {
+    throw new Error("Environment does not exist");
+  }
+
+  // check if the user is part of the org
+  const organization = await prisma.organization.findFirst({
+    where: {
+      id: environment.organization.id,
+      members: { some: { userId } },
+    },
+  });
+
+  if (!organization) {
+    throw new Error("User does not have permission to regenerate API key");
+  }
+
+  // check if it is the user's dev environment
+  if (environment.type === RuntimeEnvironmentType.DEVELOPMENT) {
+    if (!environment.orgMemberId) {
+      throw new Error("User does not have permission to regenerate API key");
+    }
+
+    const orgMember = await prisma.orgMember.findFirst({
+      where: {
+        organizationId: organization.id,
+        userId: userId,
+        id: environment.orgMemberId,
+      },
+    });
+
+    if (!orgMember) {
+      throw new Error("User does not have permission to regenerate API key");
+    }
+  }
+
+  // generate and store new keys
+  const newApiKey = createApiKeyForEnv(environment.type);
+  const newPkApiKey = createPkApiKeyForEnv(environment.type);
+
+  const updatedEnviroment = await prisma.runtimeEnvironment.update({
+    data: {
+      apiKey: newApiKey,
+      pkApiKey: newPkApiKey,
+    },
+    where: {
+      id: environmentId,
+    },
+  });
+
+  return updatedEnviroment;
+}
+
+export function createApiKeyForEnv(envType: RuntimeEnvironment["type"]) {
+  return `tr_${envSlug(envType)}_${apiKeyId(20)}`;
+}
+
+export function createPkApiKeyForEnv(envType: RuntimeEnvironment["type"]) {
+  return `pk_${envSlug(envType)}_${apiKeyId(20)}`;
+}
+
+export function envSlug(environmentType: RuntimeEnvironment["type"]) {
+  switch (environmentType) {
+    case "DEVELOPMENT": {
+      return "dev";
+    }
+    case "PRODUCTION": {
+      return "prod";
+    }
+    case "STAGING": {
+      return "stg";
+    }
+    case "PREVIEW": {
+      return "prev";
+    }
+  }
+}

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

@@ -9,6 +9,7 @@ import { customAlphabet } from "nanoid";
 import slug from "slug";
 import { prisma, PrismaClientOrTransaction } from "~/db.server";
 import { createProject } from "./project.server";
+import { createApiKeyForEnv, createPkApiKeyForEnv, envSlug } from "./api-key.server";
 
 export type { Organization };
 
@@ -157,28 +158,3 @@ export async function createEnvironment(
     },
   });
 }
-
-function createApiKeyForEnv(envType: RuntimeEnvironment["type"]) {
-  return `tr_${envSlug(envType)}_${apiKeyId(20)}`;
-}
-
-function createPkApiKeyForEnv(envType: RuntimeEnvironment["type"]) {
-  return `pk_${envSlug(envType)}_${apiKeyId(20)}`;
-}
-
-function envSlug(environmentType: RuntimeEnvironment["type"]) {
-  switch (environmentType) {
-    case "DEVELOPMENT": {
-      return "dev";
-    }
-    case "PRODUCTION": {
-      return "prod";
-    }
-    case "STAGING": {
-      return "stg";
-    }
-    case "PREVIEW": {
-      return "prev";
-    }
-  }
-}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx

@@ -44,6 +44,7 @@ import { requestUrl } from "~/utils/requestUrl.server";
 import { RuntimeEnvironmentType } from "../../../../../packages/database/src";
 import { ConfigureEndpointSheet } from "./ConfigureEndpointSheet";
 import { FirstEndpointSheet } from "./FirstEndpointSheet";
+import { RegenerateApiKeyModal } from "~/components/environments/RegenerateApiKeyModal";
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   const userId = await requireUserId(request);
@@ -148,11 +149,17 @@ export default function Page() {
                   </Paragraph>
                   <div className="mt-4 flex flex-col gap-6">
                     {environments.map((environment) => (
-                      <div key={environment.id}>
-                        <Header3 className="flex items-center gap-1">
-                          <EnvironmentLabel environment={environment} /> Environment
-                        </Header3>
-                        <div className="mt-2 inline-flex flex-col gap-3">
+                      <div key={environment.id} className="w-[400px]">
+                        <div className="flex justify-between">
+                          <Header3 className="flex items-center gap-1">
+                            <EnvironmentLabel environment={environment} /> Environment
+                          </Header3>
+                          <RegenerateApiKeyModal
+                            id={environment.id}
+                            title={environmentTitle(environment)}
+                          />
+                        </div>
+                        <div className="mt-3 inline-flex w-full flex-col gap-3">
                           <ClipboardField
                             className="w-full max-w-none"
                             secure

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

@@ -0,0 +1,39 @@
+import type { ActionArgs } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { regenerateApiKey } from "~/models/api-key.server";
+import { requireUserId } from "~/services/session.server";
+import { jsonWithErrorMessage, jsonWithSuccessMessage } from "~/models/message.server";
+import { environmentTitle } from "~/components/environments/EnvironmentLabel";
+
+const ParamsSchema = z.object({
+  environmentId: z.string(),
+});
+
+export async function action({ request, params }: ActionArgs) {
+  // Ensure this is a POST request
+  if (request.method.toUpperCase() !== "POST") {
+    return { status: 405, body: "Method Not Allowed" };
+  }
+
+  const userId = await requireUserId(request);
+
+  const { environmentId } = ParamsSchema.parse(params);
+
+  try {
+    const updatedEnvironment = await regenerateApiKey({ userId, environmentId });
+
+    return jsonWithSuccessMessage(
+      { ok: true },
+      request,
+      `API keys regenerated for ${environmentTitle(updatedEnvironment)} environment`
+    );
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+
+    return jsonWithErrorMessage(
+      { ok: false },
+      request,
+      `API keys could not be regenerated: ${message}`
+    );
+  }
+}