feat(wren-ui): Add empty guide for dashboard #1094
Conversation
WalkthroughThe pull request introduces a new Changes
Sequence DiagramsequenceDiagram
participant Dashboard
participant EmptyDashboard
participant StepTemplate
Dashboard->>EmptyDashboard: Render with show prop
alt No Dashboard Items
EmptyDashboard->>StepTemplate: Create step iterator
StepTemplate-->>EmptyDashboard: Render steps
EmptyDashboard->>Dashboard: Display empty state UI
else Dashboard Items Exist
Dashboard->>Dashboard: Render DashboardGrid
end
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
wren-ui/src/components/pages/home/dashboardGrid/EmptyDashboard.tsx (4)
7-32: Consider extracting styles to CSS classes.The StepTemplate component has inline styles that could be moved to CSS classes for better maintainability:
boxShadow: '2px 2px 2px 0px #00000006'lineHeight: '22px'
22-28: Add loading state for images.Consider adding loading="lazy" to the Image component for better performance, especially since these are tutorial images that aren't immediately visible.
<Image className="rounded border border-gray-4" src={props.image} width={160} height={80} alt={props.title} + loading="lazy" />
65-77: Consider moving step data to a constant.The step data array could be extracted to a constant outside the component to improve readability and maintainability.
const DASHBOARD_STEPS = [ { title: '1. Create a thread', image: '/images/dashboard/s1.jpg', }, { title: '2. Generate a chart', image: '/images/dashboard/s2.jpg', }, { title: '3. Pin to dashboard', image: '/images/dashboard/s3.jpg', }, ] as const;
36-39: Consider adding prop types validation.The component could benefit from PropTypes or stronger TypeScript types for better type safety.
interface EmptyDashboardProps { /** Whether to show the empty state */ show: boolean; /** Content to render when show is false */ children: React.ReactNode; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
wren-ui/public/images/dashboard/s1.jpgis excluded by!**/*.jpgwren-ui/public/images/dashboard/s2.jpgis excluded by!**/*.jpgwren-ui/public/images/dashboard/s3.jpgis excluded by!**/*.jpg
📒 Files selected for processing (3)
wren-ui/src/components/pages/home/dashboardGrid/EmptyDashboard.tsx(1 hunks)wren-ui/src/pages/home/dashboard.tsx(1 hunks)wren-ui/src/styles/utilities/text.less(1 hunks)
🔇 Additional comments (2)
wren-ui/src/pages/home/dashboard.tsx (1)
8-8: LGTM! Clean implementation of the empty state.The EmptyDashboard component is properly imported and integrated with correct conditional rendering based on the dashboardItems length.
Also applies to: 47-53
wren-ui/src/styles/utilities/text.less (1)
60-71: LGTM! Well-structured utility classes.The new utility classes follow the existing patterns and are properly implemented:
.underlinefor text decoration.hover\:underlinefor hover state.text-break-wordfor word breaking
Description
guide users how to pin chart to dashboard with steps
Screenshot
Summary by CodeRabbit
New Features
EmptyDashboardcomponent to display a message and guidance when no dashboard charts are presentStyle