Merge branch 'main' of https://github.com/e2b-dev/dashboard into refactor/webhooks-page

Author: sarimrmalik

.env.example

@@ -68,7 +68,7 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
 # NEXT_PUBLIC_INCLUDE_REPORT_ISSUE=0
 
 ### Enable dashboard status indicator feature: set to 1 to enable
-### When enabled, the E2B status is read from https://status.e2b.dev
+### When enabled, the E2B status is read from the incident.io summary API
 # NEXT_PUBLIC_INCLUDE_STATUS_INDICATOR=0
 
 ### Set to 1 to use mock data

.gitignore

@@ -45,6 +45,8 @@ CLAUDE.md
 .cursor/
 .agent
 
+# Cursor IDE
+.cursor/
 
 # tooling
 /template

src/app/dashboard/[teamSlug]/keys/page.tsx

@@ -1,55 +1,23 @@
-import CreateApiKeyDialog from '@/features/dashboard/settings/keys/create-api-key-dialog'
-import ApiKeysTable from '@/features/dashboard/settings/keys/table'
-import Frame from '@/ui/frame'
-import { Button } from '@/ui/primitives/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/ui/primitives/card'
-import { AddIcon } from '@/ui/primitives/icons'
+import { Page } from '@/features/dashboard/layouts/page'
+import { ApiKeysPageContent } from '@/features/dashboard/settings/keys'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
 
-interface KeysPageClientProps {
+interface KeysPageProps {
   params: Promise<{
     teamSlug: string
   }>
 }
 
-export default async function KeysPage({ params }: KeysPageClientProps) {
-  return (
-    <Frame
-      classNames={{
-        wrapper: 'w-full max-md:p-0',
-        frame: 'max-md:border-none',
-      }}
-    >
-      <Card className="w-full">
-        <CardHeader>
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
-            <div className="flex flex-col gap-2">
-              <CardTitle>Manage API Keys</CardTitle>
-              <CardDescription className="max-w-[400px]">
-                API Keys are used to authenticate API requests from your teams
-                applications.
-              </CardDescription>
-            </div>
+export default async function KeysPage({ params }: KeysPageProps) {
+  const { teamSlug } = await params
 
-            <CreateApiKeyDialog>
-              <Button className="w-full sm:w-auto sm:self-start">
-                <AddIcon className="size-4" /> CREATE KEY
-              </Button>
-            </CreateApiKeyDialog>
-          </div>
-        </CardHeader>
+  prefetch(trpc.teams.listApiKeys.queryOptions({ teamSlug }))
 
-        <CardContent>
-          <div className="w-full overflow-x-auto">
-            <ApiKeysTable params={params} className="min-w-[800px]" />
-          </div>
-        </CardContent>
-      </Card>
-    </Frame>
+  return (
+    <HydrateClient>
+      <Page>
+        <ApiKeysPageContent />
+      </Page>
+    </HydrateClient>
   )
 }

src/configs/cache.ts

@@ -1,7 +1,6 @@
 export const CACHE_TAGS = {
   TEAM_ID_FROM_SLUG: (segment: string) => `team-id-from-slug-${segment}`,
   TEAM_USAGE: (teamId: string) => `team-usage-${teamId}`,
-  TEAM_API_KEYS: (teamId: string) => `team-api-keys-${teamId}`,
 
   DEFAULT_TEMPLATES: 'default-templates',
 } as const

src/core/modules/keys/schemas.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod'
+
+const API_KEY_NAME_MAX_LENGTH = 50
+
+const CreateApiKeySchema = z.object({
+  name: z
+    .string({ error: 'Name is required' })
+    .min(1, 'Name cannot be empty')
+    .max(API_KEY_NAME_MAX_LENGTH, {
+      message: `Name cannot be longer than ${API_KEY_NAME_MAX_LENGTH} characters`,
+    })
+    .trim(),
+})
+
+export { CreateApiKeySchema }

src/core/server/actions/key-actions.ts

@@ -3,6 +3,8 @@ import { fileTypeFromBuffer } from 'file-type'
 import { revalidatePath } from 'next/cache'
 import { after } from 'next/server'
 import { z } from 'zod'
+import { createKeysRepository } from '@/core/modules/keys/repository.server'
+import { CreateApiKeySchema } from '@/core/modules/keys/schemas'
 import {
   AddTeamMemberSchema,
   CreateTeamSchema,
@@ -42,6 +44,12 @@ const teamsRepositoryProcedure = protectedTeamProcedure.use(
   }))
 )
 
+const keysRepositoryProcedure = protectedTeamProcedure.use(
+  withTeamAuthedRequestRepository(createKeysRepository, (keysRepository) => ({
+    keysRepository,
+  }))
+)
+
 const getStorageFilePath = (folderPath: string, fileName: string) =>
   `${folderPath}/${fileName}`
 
@@ -55,6 +63,67 @@ export const teamsRouter = createTRPCRouter({
 
     return teamsResult.data
   }),
+
+  listApiKeys: keysRepositoryProcedure.query(async ({ ctx }) => {
+    const result = await ctx.keysRepository.listTeamApiKeys()
+
+    if (!result.ok) {
+      throwTRPCErrorFromRepoError(result.error)
+    }
+
+    return { apiKeys: result.data }
+  }),
+
+  createApiKey: keysRepositoryProcedure
+    .input(CreateApiKeySchema)
+    .mutation(async ({ ctx, input }) => {
+      const { name } = input
+
+      const result = await ctx.keysRepository.createApiKey(name)
+
+      if (!result.ok) {
+        l.error({
+          key: 'create_api_key_trpc:error',
+          message: result.error.message,
+          error: result.error,
+          team_id: ctx.teamId,
+          user_id: ctx.session.user.id,
+          context: { name },
+        })
+
+        throwTRPCErrorFromRepoError(result.error)
+      }
+
+      return { createdApiKey: result.data }
+    }),
+
+  deleteApiKey: keysRepositoryProcedure
+    .input(
+      z.object({
+        apiKeyId: z.uuid(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { apiKeyId } = input
+
+      const result = await ctx.keysRepository.deleteApiKey(apiKeyId)
+
+      if (!result.ok) {
+        l.error({
+          key: 'delete_api_key_trpc:error',
+          message: result.error.message,
+          error: result.error,
+          team_id: ctx.teamId,
+          user_id: ctx.session.user.id,
+          context: { apiKeyId },
+        })
+
+        throwTRPCErrorFromRepoError(result.error)
+      }
+
+      return undefined
+    }),
+
   create: userTeamsRepositoryProcedure
     .input(CreateTeamSchema)
     .mutation(async ({ ctx, input }) => {

src/core/server/api/routers/teams.ts

@@ -8,7 +8,7 @@ import CopyButton from '@/ui/copy-button'
 import { IconButton } from '@/ui/primitives/icon-button'
 import { EyeIcon, EyeOffIcon } from '@/ui/primitives/icons'
 import { Input } from '@/ui/primitives/input'
-import { Loader } from '@/ui/primitives/loader_d'
+import { Loader } from '@/ui/primitives/loader'
 
 interface UserAccessTokenProps {
   className?: string
@@ -57,7 +57,7 @@ export default function UserAccessToken({ className }: UserAccessTokenProps) {
           disabled={isPending}
         >
           {isPending ? (
-            <Loader />
+            <Loader variant="square" size="lg" />
           ) : token ? (
             isVisible ? (
               <EyeOffIcon />

src/core/server/functions/keys/get-api-keys.ts

@@ -49,16 +49,14 @@ function InvoicesEmpty({ error }: InvoicesEmptyProps) {
   return (
     <TableEmptyState colSpan={4}>
       <InvoiceIcon
-        className={cn('size-4', error && 'text-accent-error-highlight')}
-      />
-      <p
         className={cn(
-          'prose-body-highlight',
+          'size-4 shrink-0',
           error && 'text-accent-error-highlight'
         )}
-      >
+      />
+      <span className={cn(error && 'text-accent-error-highlight')}>
         {error ? error : 'No invoices yet'}
-      </p>
+      </span>
     </TableEmptyState>
   )
 }