API Key Creation Page - Card Layout, Keys Table, Reveal API Key

[kworathur]

API Key Creation Page - Card Layout, Keys Table, Reveal API Key

This pull request implements:

• A table that displays all of the Juno API keys that the admin user has created. For each API key , the table shows the description of the API key, creation timestamp, the project it's linked to, and the environment it is used in.
• A card for displaying newly created API keys. This card has two states: when the user is filling out the create API
• A re-usable card component for visually distinguishing elements present in the dashboard.

Demo Video:

bits_of_good_sprint3_demo.mp4

Figma Design File

[netlify]

❌ Deploy Preview for juno-dashboard failed. Why did it fail? →

Name	Link
🔨 Latest commit	ad8b575
🔍 Latest deploy log	https://app.netlify.com/projects/juno-dashboard/deploys/69dc04454170ab00083d511a

[kworathur]

The original ticket included backend modifications to complement the UI - backend development has been deferred to a later sprint.

[greptile-apps]

Greptile Summary

This PR introduces the API Key management page, featuring a CreateAPIKeyForm, an ApiKeyRevealCard for displaying newly-generated keys, and a paginated ApiKeyDataTable with single and bulk delete. Several addressed concerns from prior review rounds are resolved (auth parity, pagination from server, toast ordering), though a few items below still need attention before merge.

• P1 – Module-level color map in columns.tsx: projectColorMap is a module-scoped mutable Map shared across all renders and tab sessions; it should be made pure/deterministic (hash-based) to avoid stale state.
• P1 – Bulk delete closes dialog before awaiting results: handleBulkDelete resets row selection and dismisses the dialog synchronously before any async deletions complete, so failures appear after the UI has already reported success.
• Checklist items: console.error calls remain in actions.ts; hardcoded bg-blue-500 button color in CreateAPIKeyForm.tsx should use a config token.

Confidence Score: 4/5

Safe to merge after fixing the module-level color map and bulk delete async issue; remaining items are style/checklist cleanup.

Two P1 findings remain: the module-scoped mutable color map introduces shared mutable state that produces incorrect colors across navigations, and the bulk delete handler dismisses the dialog before awaiting async results. The rest of the open items (console.error, hardcoded color) are P2 checklist items. Score 4 reflects these P1s need resolution before merging.

src/components/apiKeyTable/columns.tsx (module-level color map), src/components/apiKeyTable/apiKey-table.tsx (bulk delete async handling)

Important Files Changed

Filename	Overview
src/app/(dashboard)/admin/keys/page.tsx	Main keys page rewritten to add API key table, reveal card, and pagination; minor double-fetch risk from useCallback + useEffect pattern
src/components/apiKeyTable/apiKey-table.tsx	New table component with single/bulk delete dialogs; bulk delete fires all requests in parallel without awaiting results before resetting UI state
src/components/apiKeyTable/columns.tsx	New column definitions; module-level mutable Map for project colors is shared across all renders and tab sessions
src/components/forms/ApiKeyRevealForm.tsx	New card displaying newly created API key with reveal/copy UX; hardcoded localhost URL and inline hex colors noted but acknowledged
src/components/forms/CreateAPIKeyForm.tsx	Refactored to accept project list prop and return key data on success; hardcoded button color not from tailwind config
src/lib/actions.ts	Three new server actions for API key CRUD; console.error calls remain throughout
src/app/(dashboard)/admin/users/page.tsx	Minor: changed ProjectResponse import to type-only import
src/app/(dashboard)/projects/[projectId]/page.tsx	Wrapped event data derivations in useMemo and added projectId to useEffect deps; safe improvements

Sequence Diagram

sequenceDiagram
    participant User
    participant KeyPage
    participant CreateAPIKeyForm
    participant ApiKeyRevealCard
    participant ApiKeyDataTable
    participant actions.ts

    User->>KeyPage: visits /admin/keys
    KeyPage->>actions.ts: getApiKeysAction(offset, limit)
    actions.ts-->>KeyPage: { success, keys, links }
    KeyPage->>ApiKeyDataTable: render with data

    User->>CreateAPIKeyForm: fills form & submits
    CreateAPIKeyForm->>actions.ts: createKeyAction(projectName, env, description)
    actions.ts-->>CreateAPIKeyForm: { success, apiKey }
    CreateAPIKeyForm-->>KeyPage: onKeyAdd(newKey)
    KeyPage->>ApiKeyRevealCard: render with keyValue + metadata
    KeyPage->>actions.ts: fetchApiKeys() to refresh table

    User->>ApiKeyDataTable: clicks delete (single)
    ApiKeyDataTable->>ApiKeyDataTable: open confirmation dialog
    User->>ApiKeyDataTable: confirms
    ApiKeyDataTable-->>KeyPage: onKeyAction(key, "delete")
    KeyPage->>actions.ts: deleteApiKeyByIdAction(keyId)
    actions.ts-->>KeyPage: { success }
    KeyPage->>ApiKeyDataTable: update apiKeys state

Loading

_{Reviews (9): Last reviewed commit: "chore: fix formatting issues" | Re-trigger Greptile}

[greptile-apps]

_{6 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{5 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (2)

src/components/forms/CreateAPIKeyForm.tsx
remove console.error per checklist requirement

      setError("An error occurred while creating the API key");

---

src/components/forms/CreateAPIKeyForm.tsx
error is typed as string (line 63) but assigned an unknown error object, causing type mismatch

      setError("An error occurred while creating the API key");

[kworathur]

Netlify build steps are failing until the new SDK code for creating, listing, and deleting API keys has been published