chore: Move alert to UI

[MichaelUnkey]

What does this PR do?

Fixes # (issue)

If there is not an issue for this, please create one first. This is used to tracking purposes and also helps us understand why this PR exists

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How should this be tested?

• Alerts in Dashboard still work as they did before
  • [workspaceSlug]/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
    Warns to copy root key as it will be needed
  • [workspaceSlug]/identities/[identityId]/page.tsx
    No Meta Data, Ratelimits, Keys messages
  • [workspaceSlug]/settings/root-keys
    Revoke root key warning stating action can not be un done

Checklist

Required

• Filled out the "How to test" section in this PR
• Read Contributing Guide
• Self-reviewed my own code
• Commented on my code in hard-to-understand areas
• Ran pnpm build
• Ran pnpm fmt
• Ran make fmt on /go directory
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Unkey Docs if changes were necessary

[changeset-bot]

⚠️ No Changeset found

Latest commit: 410fd1f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dashboard	Error			Dec 9, 2025 5:00pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
engineering	Ignored	Preview		Dec 9, 2025 5:00pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request consolidates Alert component imports across the dashboard application from local paths to a centralized shared UI library (@unkey/ui). The internal UI library is updated to export the alert component and adjusted to use a relative import path for its utility function.

Changes

Cohort / File(s)	Summary
Dashboard Alert Import Consolidation apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/key-secret-section.tsx apps/dashboard/app/(app)/[workspaceSlug]/identities/[identityId]/page.tsx apps/dashboard/components/dashboard/root-key-table/index.tsx	Changed Alert component import source from local @/components/ui/alert to shared library @unkey/ui.
Internal UI Library Updates internal/ui/src/components/alert.tsx	Updated utility function import path for cn from @/lib/utils to relative path ../lib/utils.
Internal UI Library Exports internal/ui/src/index.ts	Added new public re-export export * from "./components/alert" to expose alert components from the UI library.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify all dashboard import paths correctly reference @unkey/ui instead of local paths
• Confirm the relative import path in alert.tsx is correct and accessible
• Ensure the new re-export in index.ts properly exposes the alert component for external consumption

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'chore: Move alert to UI' clearly and accurately summarizes the main change—consolidating Alert components from multiple locations into the @unkey/ui package.
Description check	✅ Passed	The description is complete with type of change marked, testing instructions provided, and all required checklist items checked. Minor gap: no issue number linked, but noted in template as prefilled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch move-alert-to-ui

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

internal/ui/src/components/alert.tsx (1)

4-4: Relative cn import is good; optional follow‑up on typings

Switching cn to a relative import (../lib/utils) makes this component independent of app‑level path aliases, which is appropriate for the shared UI package and should be a no‑op at runtime.

As a minor follow‑up (not blocking this PR), you might later align the forwardRef typings with the actual DOM elements (h3 for AlertTitle, div for AlertDescription) using something like React.ComponentPropsWithoutRef<"h3"> / React.ComponentPropsWithoutRef<"div"> to keep the refs and props fully type‑safe.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1db420f and d03db04.

📒 Files selected for processing (5)

• apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/key-secret-section.tsx (1 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/identities/[identityId]/page.tsx (1 hunks)
• apps/dashboard/components/dashboard/root-key-table/index.tsx (1 hunks)
• internal/ui/src/components/alert.tsx (1 hunks)
• internal/ui/src/index.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-08-18T10:28:47.391Z

Learnt from: ogzhanolguncu
Repo: unkeyed/unkey PR: 3797
File: apps/dashboard/app/(app)/projects/[projectId]/deployments/components/control-cloud/index.tsx:1-4
Timestamp: 2025-08-18T10:28:47.391Z
Learning: In Next.js App Router, components that use React hooks don't need their own "use client" directive if they are rendered within a client component that already has the directive. The client boundary propagates to child components.

Applied to files:

• apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
• apps/dashboard/components/dashboard/root-key-table/index.tsx

📚 Learning: 2025-08-25T13:05:22.441Z

Learnt from: ogzhanolguncu
Repo: unkeyed/unkey PR: 3834
File: internal/ui/src/components/form/input.tsx:130-131
Timestamp: 2025-08-25T13:05:22.441Z
Learning: The Input component in internal/ui/src/components/form/input.tsx is designed to support interactive right icons (like X buttons for deletion) by enabling pointer events on the right icon container, allowing clicks to be handled by the icon rather than passed through to the input.

Applied to files:

• apps/dashboard/components/dashboard/root-key-table/index.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: Test Dashboard / Test Dashboard
• GitHub Check: Test Packages / Test
• GitHub Check: Build / Build
• GitHub Check: Test API / API Test Local
• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (4)

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/key-secret-section.tsx (1)

5-5: Alert import migration to @unkey/ui looks correct

Using Alert, AlertTitle, and AlertDescription from @unkey/ui with variant="warn" matches the variants exposed by the shared Alert component, so behaviour of this warning block should remain unchanged while consolidating on the central UI library.

Also applies to: 76-98

internal/ui/src/index.ts (1)

1-1: Good addition exposing Alert via the UI barrel

Re-exporting ./components/alert here is consistent with the rest of the index and enables the new @unkey/ui import sites without changing Alert’s API.

apps/dashboard/app/(app)/[workspaceSlug]/identities/[identityId]/page.tsx (1)

15-15: Alert components correctly switched to @unkey/ui

Moving Alert, AlertTitle, and AlertDescription to @unkey/ui aligns this page with the shared UI library and should preserve the empty‑state messaging exactly as before.

Also applies to: 90-127

apps/dashboard/components/dashboard/root-key-table/index.tsx (1)

13-27: Root key revoke warning now correctly uses @unkey/ui Alert

Including Alert in the grouped @unkey/ui import and using variant="alert" inside the revoke dialog keeps the warning semantics while standardizing on the shared UI kit. No behaviour changes expected.

Also applies to: 189-192

[perkinsjr]

LGTM.