feat(ui): enhance DashboardAlert component

[kylengn]

Summary by CodeRabbit

• New Features
  • DashboardAlert component now supports configurable visual styles with info and warning variants
  • Added support for primary and secondary action buttons on alerts
  • Improved alert dismissal handling with explicit close behavior

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

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

Project	Deployment	Review	Updated (UTC)
react-ui	Ready	Preview, Comment	Jan 12, 2026 7:49am

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Enhanced DashboardAlert component to support configurable variants ('info' | 'warning') and optional primary/secondary actions with custom onClick handlers. The component now extends AlertProps, removes default content values, and conditionally renders action buttons through AlertActions container.

Changes

Cohort / File(s)	Summary
DashboardAlert Component libs/react/ui/src/components/dashboard/components/dashboard-alert.tsx	Extended DashboardAlertProps to inherit from AlertProps and added three new optional fields: variant ('info' | 'warning'), primaryAction, and secondaryAction. Component now accepts configurable styling and conditional action buttons with callbacks. Removed hardcoded default title/description values. Updated component rendering to include AlertActions container with conditional AlertAction items.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• feat: Add Alert component #73: Depends on this PR's DashboardAlert updates to import and utilize the extended Alert, AlertActions, and AlertAction components.
• feat(ui): enhance Alert, Button, Checkbox components #162: Introduces the Alert API, AlertProps types, and AlertActions/AlertAction components that form the foundation for this DashboardAlert enhancement.

Suggested reviewers

• dvxam
• noe-charmet
• EnzalRad

Poem

🐰 Alert boxes hop with actions new,
Primary, secondary—variant too!
With info and warnings all styled with care,
The dashboard dances through the air! 🎨✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'enhance DashboardAlert component' directly describes the main change: expanding the DashboardAlert component with configurable styling, actions, and extended props.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.}

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	13 changed	Jan 12, 2026, 7:51 AM

[Copilot]

Pull request overview

This PR enhances the DashboardAlert component by making it more flexible and configurable, removing hardcoded default values and adding support for custom actions.

Changes:

• Removed hardcoded default title and description values, making them fully optional
• Added support for primary and secondary actions with custom labels and onClick handlers
• Introduced configurable variant prop (info/warning) instead of hardcoded 'info'
• Extended the component to accept all AlertProps via spread operator for greater flexibility

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

libs/react/ui/src/components/dashboard/components/dashboard-alert.tsx (1)

49-56: Conditionally render AlertActions only when actions exist.

AlertActions is always rendered even when both primaryAction and secondaryAction are undefined, resulting in an empty container that may cause unintended spacing or layout issues.

♻️ Suggested improvement

-        <AlertActions>
-          {primaryAction && (
-            <AlertAction onClick={primaryAction.onClick}>{primaryAction.label}</AlertAction>
-          )}
-          {secondaryAction && (
-            <AlertAction onClick={secondaryAction.onClick}>{secondaryAction.label}</AlertAction>
-          )}
-        </AlertActions>
+        {(primaryAction || secondaryAction) && (
+          <AlertActions>
+            {primaryAction && (
+              <AlertAction onClick={primaryAction.onClick}>{primaryAction.label}</AlertAction>
+            )}
+            {secondaryAction && (
+              <AlertAction onClick={secondaryAction.onClick}>{secondaryAction.label}</AlertAction>
+            )}
+          </AlertActions>
+        )}

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 18d7053 and 0f2d9c0.

📒 Files selected for processing (1)

• libs/react/ui/src/components/dashboard/components/dashboard-alert.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*

⚙️ CodeRabbit configuration file

We handle errors at the edge of our applications in most cases. Do not recommend to add error handling around every single function. We prefer them to bubble up and be handled at upper layers.

Files:

• libs/react/ui/src/components/dashboard/components/dashboard-alert.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). (2)

• GitHub Check: Upload results
• GitHub Check: Continuous integration

🔇 Additional comments (3)

libs/react/ui/src/components/dashboard/components/dashboard-alert.tsx (3)

1-11: LGTM!

Imports are well-organized, separating component imports from type imports.

---

13-27: LGTM!

The interface extension and action prop structure are well-designed, allowing flexibility while maintaining type safety.

---

40-45: LGTM!

The Alert configuration correctly passes the variant, handles dismissal via onOpenChange, and properly forwards remaining props.

[noe-charmet]

Could we have a story with the variants ?