Redesigned the API keys page

Author: matt-aitken

apps/webapp/app/components/BlankStatePanels.tsx

@@ -551,15 +551,15 @@ export function BranchesNoBranches({
   );
 }
 
-function SwitcherPanel() {
+export function SwitcherPanel({ title = "Switch to a deployed environment" }: { title?: string }) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
 
   return (
     <div className="flex items-center rounded-md border border-grid-bright bg-background-bright p-3">
       <Paragraph variant="small" className="grow">
-        Switch to a deployed environment
+        {title}
       </Paragraph>
       <EnvironmentSelector
         organization={organization}

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

@@ -48,13 +48,15 @@ export function EnvironmentIcon({
 export function EnvironmentCombo({
   environment,
   className,
+  iconClassName,
 }: {
   environment: Environment;
   className?: string;
+  iconClassName?: string;
 }) {
   return (
     <span className={cn("flex items-center gap-1.5 text-sm text-text-bright", className)}>
-      <EnvironmentIcon environment={environment} className="size-[1.125rem]" />
+      <EnvironmentIcon environment={environment} className={cn("size-4.5", iconClassName)} />
       <EnvironmentLabel environment={environment} />
     </span>
   );

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

@@ -1,7 +1,7 @@
+import { type RuntimeEnvironment } from "@trigger.dev/database";
 import { type PrismaClient, prisma } from "~/db.server";
 import { type Project } from "~/models/project.server";
 import { type User } from "~/models/user.server";
-import { sortEnvironments } from "~/utils/environmentSort";
 
 export class ApiKeysPresenter {
   #prismaClient: PrismaClient;
@@ -10,12 +10,19 @@ export class ApiKeysPresenter {
     this.#prismaClient = prismaClient;
   }
 
-  public async call({ userId, projectSlug }: { userId: User["id"]; projectSlug: Project["slug"] }) {
-    const environments = await this.#prismaClient.runtimeEnvironment.findMany({
+  public async call({
+    userId,
+    projectSlug,
+    environmentSlug,
+  }: {
+    userId: User["id"];
+    projectSlug: Project["slug"];
+    environmentSlug: RuntimeEnvironment["slug"];
+  }) {
+    const environment = await this.#prismaClient.runtimeEnvironment.findFirst({
       select: {
         id: true,
         apiKey: true,
-        pkApiKey: true,
         type: true,
         slug: true,
         updatedAt: true,
@@ -24,13 +31,11 @@ export class ApiKeysPresenter {
             userId: true,
           },
         },
-        backgroundWorkers: {
+        branchName: true,
+        parentEnvironment: {
           select: {
-            version: true,
-          },
-          take: 1,
-          orderBy: {
-            version: "desc",
+            id: true,
+            apiKey: true,
           },
         },
       },
@@ -45,31 +50,25 @@ export class ApiKeysPresenter {
             },
           },
         },
-        parentEnvironmentId: null,
+        slug: environmentSlug,
+        orgMember:
+          environmentSlug === "dev"
+            ? {
+                userId,
+              }
+            : undefined,
       },
     });
 
-    //filter out environments the only development ones belong to the current user
-    const filtered = environments.filter((environment) => {
-      if (environment.type === "DEVELOPMENT") {
-        return environment.orgMember?.userId === userId;
-      }
-      return true;
-    });
+    if (!environment) {
+      throw new Error("Environment not found");
+    }
 
     return {
-      environments: sortEnvironments(
-        filtered.map((environment) => ({
-          id: environment.id,
-          apiKey: environment.apiKey,
-          pkApiKey: environment.pkApiKey,
-          type: environment.type,
-          slug: environment.slug,
-          updatedAt: environment.updatedAt,
-          latestVersion: environment.backgroundWorkers.at(0)?.version,
-        }))
-      ),
-      hasStaging: environments.some((environment) => environment.type === "STAGING"),
+      environment: {
+        ...environment,
+        apiKey: environment?.parentEnvironment?.apiKey ?? environment?.apiKey,
+      },
     };
   }
 }