Conversation
kylengn
requested review from
EnzalRad,
dvxam and
noe-charmet
as code owners
|
You have run out of free Bugbot PR reviews for this billing cycle. This will reset on January 19. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR introduces a comprehensive dashboard refactoring that replaces placeholder content with production page components. It adds centralized state management via DashboardContext, introduces chart components (BarChart, LineChart) with Recharts integration, removes old AnalyticsContent and JobsContent, and restructures the Dashboard to use a tabs layout with context-driven state. Multiple new UI components, pages, and toolbar controls are added to support a full-featured analytics dashboard. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes This PR spans many interdependent subsystems—dashboard context with state management, new Recharts-based chart components with interactive hover behavior, refactored page implementations, new toolbar and table abstractions, and organizational/structural changes to the main Dashboard component. While individual component additions follow consistent patterns, the breadth of changes across multiple domains and the density of state-management logic (context, controlled components, handlers) require careful review of interactions and correctness. Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
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. Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive dashboard feature with improved architecture and reusable components. The changes introduce a centralized state management system via DashboardContext, generic toolbar and table components, and separate page implementations for analytics and jobs views.
Key Changes:
- Introduced
DashboardContextfor centralized state management across dashboard components - Created generic, reusable components (
PageToolbar,TableWrapper,ToolbarActions) to reduce code duplication - Refactored existing dashboard pages to use the new component architecture
- Added controlled/uncontrolled column visibility support to
DataTable
Reviewed changes
Copilot reviewed 34 out of 34 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
libs/react/ui/src/components/table/data-table.tsx |
Added controlled column visibility props to support external state management |
libs/react/ui/src/components/search/search-modal.tsx |
Added screen reader accessibility with hidden modal title |
libs/react/ui/src/components/dashboard/toolbar/*.tsx |
Implemented toolbar components for filters, search, view controls, and page layout |
libs/react/ui/src/components/dashboard/table/table-wrapper.tsx |
Created generic table wrapper with consistent header and action layout |
libs/react/ui/src/components/dashboard/pages/*.tsx |
Implemented analytics and jobs pages using new generic components |
libs/react/ui/src/components/dashboard/context/*.tsx |
Created dashboard context provider with utility functions for state management |
libs/react/ui/src/components/dashboard/filters/*.tsx |
Added expression filter bar for resource type selection |
libs/react/ui/src/components/dashboard/components/*.tsx |
Refactored and created new dashboard components including charts, KPI cards, and navigation |
libs/react/ui/src/components/dashboard/index.ts |
Consolidated exports for all dashboard-related components |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
libs/react/ui/src/components/dashboard/toolbar/toolbar-actions.tsx
Outdated
Show resolved
Hide resolved
libs/react/ui/src/components/dashboard/filters/expression-filter-bar.tsx
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (11)
libs/react/ui/src/components/dashboard/toolbar/toolbar-search.tsx (1)
64-138: Consider making search items configurable.The search items are currently hardcoded (Recent, Jobs, Status sections with specific values). For better reusability, consider accepting search items as props to allow different pages to customize the search suggestions.
Example approach
Add a prop to accept search items:
export interface ToolbarSearchProps { // ... existing props searchSections?: Array<{ heading: string; items: Array<{ label: string; value: string; icon?: ReactNode; description?: string; }>; }>; }Then map over the prop instead of hardcoding the structure.
libs/react/ui/src/components/dashboard/pages/analytics-page.tsx (1)
159-161: Hardcoded date in tooltip formatter.The tooltip
labelFormatterreturns a static date string"Jul 22, 2025". For demo purposes this is fine, but consider adding a comment or using a constant to clarify this is placeholder data.libs/react/ui/src/components/dashboard/toolbar/filter-button.tsx (1)
15-19: DuplicateFilterOptioninterface.This interface is also defined in
libs/react/ui/src/components/dashboard/context/types.ts. Consider importing from the centralized types to maintain a single source of truth and avoid potential drift.🔎 Suggested change
+import type {FilterOption} from '../context/types'; + -export interface FilterOption { - id: string; - label: string; - checked: boolean; -} +export type {FilterOption};libs/react/ui/src/components/dashboard/context/dashboard-context.tsx (1)
18-28: Duplicate default columns configuration.
DEFAULT_COLUMNShere mirrorsdefaultColumnsinview-dropdown.tsx. Consider exporting a single source of truth from the context module to prevent configuration drift.libs/react/ui/src/components/dashboard/toolbar/view-dropdown.tsx (2)
13-17: DuplicateViewColumninterface.This interface is also defined in
libs/react/ui/src/components/dashboard/context/types.ts. Import from the centralized types module to maintain consistency.🔎 Suggested change
+import type {ViewColumn} from '../context/types'; + -export interface ViewColumn { - id: string; - label: string; - visible: boolean; -} +export type {ViewColumn};
24-34: Duplicate default columns configuration.This
defaultColumnsarray duplicatesDEFAULT_COLUMNSindashboard-context.tsx. Consider importing from a shared location.libs/react/ui/src/components/dashboard/toolbar/index.ts (1)
12-12: ExportToolbarSearchPropsfor consistency with other toolbar components.All other toolbar components export their props type;
ToolbarSearchshould do the same:+export type {ToolbarSearchProps} from './toolbar-search'; export {ToolbarSearch} from './toolbar-search';libs/react/ui/src/components/dashboard/dashboard.tsx (1)
42-46:defaultActiveTabchanges after mount won't update the active tab.If
defaultActiveTabis changed by a parent after initial render, the internalactiveTabstate won't reflect the new value. If this is intentional (uncontrolled pattern), consider documenting this behavior. If you need full control, add avalue/onChangecontrolled pattern similar to howSidebarhandles it.libs/react/ui/src/components/dashboard/components/sidebar.tsx (2)
173-176: Keyboard shortcut hint shows only macOS modifier.The tooltip displays
⌘Bbut the actual shortcut works with bothCmd(macOS) andCtrl(Windows/Linux). Consider detecting the platform to show the appropriate modifier, or display both.🔎 Example platform-aware shortcut display
// Could use a utility or detect at runtime: const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.platform); const shortcutKey = isMac ? '⌘B' : 'Ctrl+B';
255-261: Hardcoded color value should use a design token.The active icon color
'#FF4B00'is hardcoded. For consistency with the design system, consider using a CSS variable likevar(--foreground-highlight-interactive)or a similar token.🔎 Suggested fix
className={cn( 'size-16 shrink-0 transition-colors duration-200', - isActive ? 'text-[#FF4B00]' : 'text-foreground-neutral-muted', + isActive ? 'text-foreground-highlight-interactive' : 'text-foreground-neutral-muted', )}libs/react/ui/src/components/dashboard/index.ts (1)
7-9: Minor: Comment placement inconsistency.The
// Chart Componentscomment appears between the type export and component export. Consider moving the comment before line 7 for consistency with other sections.🔎 Suggested fix
+// Chart Components export type {BarChartProps, LineChartProps} from './components/charts'; -// Chart Components export {BarChart, LineChart} from './components/charts';
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (34)
libs/react/ui/src/components/button-group/button-group.stories.tsxlibs/react/ui/src/components/dashboard/components/analytics-content.tsxlibs/react/ui/src/components/dashboard/components/charts/bar-chart.tsxlibs/react/ui/src/components/dashboard/components/charts/chart-tooltip.tsxlibs/react/ui/src/components/dashboard/components/charts/colors.tslibs/react/ui/src/components/dashboard/components/charts/index.tslibs/react/ui/src/components/dashboard/components/charts/line-chart.tsxlibs/react/ui/src/components/dashboard/components/dashboard-alert.tsxlibs/react/ui/src/components/dashboard/components/jobs-content.tsxlibs/react/ui/src/components/dashboard/components/kpi-card.tsxlibs/react/ui/src/components/dashboard/components/mobile-sidebar.tsxlibs/react/ui/src/components/dashboard/components/organization-selector.tsxlibs/react/ui/src/components/dashboard/components/sidebar.tsxlibs/react/ui/src/components/dashboard/context/dashboard-context.tsxlibs/react/ui/src/components/dashboard/context/index.tslibs/react/ui/src/components/dashboard/context/types.tslibs/react/ui/src/components/dashboard/context/utils.tslibs/react/ui/src/components/dashboard/dashboard.tsxlibs/react/ui/src/components/dashboard/filters/expression-filter-bar.tsxlibs/react/ui/src/components/dashboard/filters/index.tslibs/react/ui/src/components/dashboard/index.tslibs/react/ui/src/components/dashboard/pages/analytics-page.tsxlibs/react/ui/src/components/dashboard/pages/index.tslibs/react/ui/src/components/dashboard/pages/jobs-page.tsxlibs/react/ui/src/components/dashboard/table/index.tslibs/react/ui/src/components/dashboard/table/table-wrapper.tsxlibs/react/ui/src/components/dashboard/toolbar/filter-button.tsxlibs/react/ui/src/components/dashboard/toolbar/index.tslibs/react/ui/src/components/dashboard/toolbar/page-toolbar.tsxlibs/react/ui/src/components/dashboard/toolbar/toolbar-actions.tsxlibs/react/ui/src/components/dashboard/toolbar/toolbar-search.tsxlibs/react/ui/src/components/dashboard/toolbar/view-dropdown.tsxlibs/react/ui/src/components/search/search-modal.tsxlibs/react/ui/src/components/table/data-table.tsx
💤 Files with no reviewable changes (2)
- libs/react/ui/src/components/dashboard/components/jobs-content.tsx
- libs/react/ui/src/components/dashboard/components/analytics-content.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/table/index.tslibs/react/ui/src/components/dashboard/pages/jobs-page.tsxlibs/react/ui/src/components/button-group/button-group.stories.tsxlibs/react/ui/src/components/dashboard/filters/index.tslibs/react/ui/src/components/dashboard/toolbar/view-dropdown.tsxlibs/react/ui/src/components/dashboard/table/table-wrapper.tsxlibs/react/ui/src/components/dashboard/toolbar/page-toolbar.tsxlibs/react/ui/src/components/dashboard/toolbar/filter-button.tsxlibs/react/ui/src/components/dashboard/pages/analytics-page.tsxlibs/react/ui/src/components/dashboard/components/charts/colors.tslibs/react/ui/src/components/dashboard/pages/index.tslibs/react/ui/src/components/dashboard/context/index.tslibs/react/ui/src/components/dashboard/context/utils.tslibs/react/ui/src/components/dashboard/components/mobile-sidebar.tsxlibs/react/ui/src/components/dashboard/components/charts/index.tslibs/react/ui/src/components/search/search-modal.tsxlibs/react/ui/src/components/dashboard/filters/expression-filter-bar.tsxlibs/react/ui/src/components/dashboard/components/organization-selector.tsxlibs/react/ui/src/components/dashboard/toolbar/toolbar-actions.tsxlibs/react/ui/src/components/dashboard/context/dashboard-context.tsxlibs/react/ui/src/components/dashboard/toolbar/toolbar-search.tsxlibs/react/ui/src/components/dashboard/components/charts/chart-tooltip.tsxlibs/react/ui/src/components/dashboard/dashboard.tsxlibs/react/ui/src/components/dashboard/components/sidebar.tsxlibs/react/ui/src/components/dashboard/components/dashboard-alert.tsxlibs/react/ui/src/components/dashboard/components/charts/bar-chart.tsxlibs/react/ui/src/components/dashboard/components/kpi-card.tsxlibs/react/ui/src/components/table/data-table.tsxlibs/react/ui/src/components/dashboard/context/types.tslibs/react/ui/src/components/dashboard/components/charts/line-chart.tsxlibs/react/ui/src/components/dashboard/toolbar/index.tslibs/react/ui/src/components/dashboard/index.ts
🧬 Code graph analysis (13)
libs/react/ui/src/components/dashboard/pages/jobs-page.tsx (5)
libs/react/ui/src/components/dashboard/context/dashboard-context.tsx (1)
useDashboardContext(153-159)libs/react/ui/src/components/table/table.stories.data.ts (1)
jobsData(101-101)libs/react/ui/src/components/dashboard/toolbar/page-toolbar.tsx (1)
PageToolbar(84-206)libs/react/ui/src/components/dashboard/table/table-wrapper.tsx (1)
TableWrapper(112-186)libs/react/ui/src/components/table/table.stories.columns.tsx (1)
jobColumns(196-196)
libs/react/ui/src/components/button-group/button-group.stories.tsx (3)
libs/react/ui/src/components/button-group/button-group.tsx (2)
ButtonGroup(111-111)ButtonGroupSeparator(111-111)libs/react/ui/src/components/button/button.tsx (1)
Button(50-91)libs/react/ui/src/components/icon/icon.tsx (1)
Icon(86-90)
libs/react/ui/src/components/dashboard/table/table-wrapper.tsx (3)
libs/react/ui/src/components/dashboard/index.ts (2)
TableWrapperProps(42-42)TableWrapper(43-43)libs/react/ui/src/components/dashboard/table/index.ts (2)
TableWrapperProps(5-5)TableWrapper(6-6)libs/react/ui/src/components/table/data-table.tsx (1)
DataTable(103-278)
libs/react/ui/src/components/dashboard/toolbar/page-toolbar.tsx (1)
libs/react/ui/src/components/dashboard/context/types.ts (1)
TimePeriod(28-28)
libs/react/ui/src/components/dashboard/context/utils.ts (2)
libs/react/ui/src/components/dashboard/context/types.ts (1)
ViewColumn(10-14)libs/react/ui/src/components/dashboard/toolbar/view-dropdown.tsx (1)
ViewColumn(13-17)
libs/react/ui/src/components/search/search-modal.tsx (1)
libs/react/ui/src/components/modal/modal.tsx (1)
ModalTitle(298-298)
libs/react/ui/src/components/dashboard/filters/expression-filter-bar.tsx (2)
libs/react/ui/src/components/dashboard/context/types.ts (1)
ResourceType(33-33)libs/react/ui/src/components/button/button.tsx (1)
Button(50-91)
libs/react/ui/src/components/dashboard/toolbar/toolbar-actions.tsx (4)
libs/react/ui/src/components/dashboard/context/dashboard-context.tsx (1)
useDashboardContext(153-159)libs/react/ui/src/components/dashboard/toolbar/filter-button.tsx (1)
FilterButton(35-89)libs/react/ui/src/components/dashboard/toolbar/toolbar-search.tsx (1)
ToolbarSearch(37-145)libs/react/ui/src/components/dashboard/toolbar/view-dropdown.tsx (1)
ViewDropdown(36-78)
libs/react/ui/src/components/dashboard/context/dashboard-context.tsx (5)
libs/react/ui/src/components/dashboard/context/index.ts (8)
DashboardState(7-7)ViewColumn(7-7)FilterOption(7-7)TimePeriod(7-7)ResourceType(7-7)DashboardProvider(6-6)viewColumnsToVisibilityState(11-11)updateViewColumnsFromVisibility(10-10)libs/react/ui/src/components/dashboard/context/types.ts (5)
DashboardState(38-68)ViewColumn(10-14)FilterOption(19-23)TimePeriod(28-28)ResourceType(33-33)libs/react/ui/src/components/dashboard/toolbar/view-dropdown.tsx (1)
ViewColumn(13-17)libs/react/ui/src/components/dashboard/toolbar/filter-button.tsx (1)
FilterOption(15-19)libs/react/ui/src/components/dashboard/context/utils.ts (2)
viewColumnsToVisibilityState(31-43)updateViewColumnsFromVisibility(53-65)
libs/react/ui/src/components/dashboard/toolbar/toolbar-search.tsx (2)
libs/react/ui/src/components/search/search-modal.tsx (8)
SearchContent(14-52)SearchInput(59-81)SearchList(85-97)SearchEmpty(101-109)SearchGroup(113-128)SearchItem(135-157)SearchSeparator(161-169)SearchFooter(173-199)libs/react/ui/src/components/icon/icon.tsx (1)
Icon(86-90)
libs/react/ui/src/components/dashboard/components/sidebar.tsx (5)
libs/react/ui/src/components/icon/icon.tsx (2)
IconName(77-77)Icon(86-90)libs/react/ui/src/components/tooltip/tooltip.tsx (3)
Tooltip(114-114)TooltipTrigger(115-115)TooltipContent(116-116)libs/react/ui/src/components/typography/text.tsx (1)
Text(27-50)libs/react/ui/src/components/button/button.tsx (1)
Button(50-91)libs/react/ui/src/components/kbd/kbd.tsx (1)
Kbd(6-20)
libs/react/ui/src/components/dashboard/components/dashboard-alert.tsx (2)
libs/react/ui/src/components/dashboard/index.ts (1)
DashboardAlert(11-11)libs/react/ui/src/components/alert/alert.tsx (5)
Alert(281-281)AlertContent(282-282)AlertTitle(283-283)AlertDescription(284-284)AlertClose(287-287)
libs/react/ui/src/components/dashboard/components/kpi-card.tsx (2)
libs/react/ui/src/components/dashboard/index.ts (3)
KpiCardProps(12-12)KpiCard(13-13)KpiCardsGroup(13-13)libs/react/ui/src/components/typography/text.tsx (1)
Text(27-50)
🔇 Additional comments (36)
libs/react/ui/src/components/button-group/button-group.stories.tsx (1)
127-139: Excellent accessibility improvement!The updated aria-labels now accurately reflect the visual icons being displayed (playback controls: rewind, play, speed). This fixes the previous inconsistency where labels referenced "text alignment" while showing playback control icons, ensuring screen readers announce information that matches the visual representation.
libs/react/ui/src/components/search/search-modal.tsx (1)
7-7: LGTM: Good accessibility improvement.The addition of
ModalTitlewithsr-onlyclass provides an accessible title for screen reader users without affecting the visual layout.Also applies to: 45-45
libs/react/ui/src/components/dashboard/components/charts/colors.ts (1)
1-18: LGTM: Clean color utility module.The chart color constants are well-structured with CSS variable references, providing type-safe color names and an ordered list for iteration.
libs/react/ui/src/components/dashboard/components/charts/chart-tooltip.tsx (1)
16-59: LGTM: Well-structured tooltip component.The component properly handles active state, payload rendering, and hoveredDataKey highlighting. The index fallback for keys (Line 41) is acceptable here since the tooltip payload is stable during each render cycle.
libs/react/ui/src/components/dashboard/components/dashboard-alert.tsx (1)
10-25: LGTM: Clean dismissible alert component.The component properly wires the
onOpenChangecallback to invokeonDismisswhen the alert is closed, with sensible default messaging.libs/react/ui/src/components/dashboard/pages/index.ts (1)
1-6: LGTM!Clean barrel export consolidating the dashboard page components. This follows standard TypeScript module organization patterns.
libs/react/ui/src/components/dashboard/table/index.ts (1)
1-6: LGTM!Proper use of
export typefor the props interface and value export for the component.libs/react/ui/src/components/dashboard/filters/index.ts (1)
1-6: LGTM!Well-organized barrel export with proper type and value separation.
libs/react/ui/src/components/dashboard/components/charts/index.ts (1)
1-4: LGTM!Wildcard re-exports consolidate the chart module's public API. This pattern works well for internal library modules where the exported symbols are intentionally public.
libs/react/ui/src/components/dashboard/pages/jobs-page.tsx (3)
7-8: Importing from stories files in a production component.The
jobColumnsandjobsDataare imported from*.stories.*files, which are typically intended for Storybook development only. If this is a demo page (as per PR title), this might be acceptable; otherwise, consider moving these to a shared data/config module.Is this component intended as a demo/example only, or will it be used in production? If production, consider relocating the data and column definitions to a non-stories module.
39-42: LGTM on the filtering logic.The
useMemocorrectly memoizes the filtered data withsearchQueryas the dependency. Case-insensitive search onjob.nameis clean.
44-69: LGTM on the component structure.Clean composition of
PageToolbarandTableWrapperwith proper context integration. The responsive styling and container layout are well-structured.libs/react/ui/src/components/dashboard/toolbar/toolbar-actions.tsx (2)
14-39: LGTM on the props interface.Well-documented interface with clear JSDoc comments for defaults. The
Omit<ComponentProps<'div'>, 'children'>pattern correctly allows spreading additional div props while defining a typedchildrenprop.
59-77: LGTM on the component implementation.Clean implementation that wires up context state to the toolbar sub-components. The conditional rendering pattern with
showFilter,showSearch, andshowViewprovides good flexibility. Thechildrenslot allows for custom actions.libs/react/ui/src/components/dashboard/context/index.ts (1)
1-12: LGTM!Well-organized barrel export that cleanly separates type exports from value exports. The context module exposes the provider, hook, types, and utility functions as a cohesive public API.
libs/react/ui/src/components/dashboard/components/mobile-sidebar.tsx (2)
18-23: LGTM on the props interface.Clean interface definition with appropriate optional props for
activeItemIdandonItemClick.
30-63: LGTM on the component implementation.Well-structured mobile navigation using
DropdownMenu. Good accessibility witharia-labelon the trigger. Thelg:hiddenclass correctly restricts visibility to mobile/tablet viewports. Active state styling is cleanly applied via conditionalcn().libs/react/ui/src/components/dashboard/pages/analytics-page.tsx (2)
22-47: Sample data generation is stable at module level.The
generateDurationData()function usesMath.random(), but since it's called once at module initialization (line 47), it produces consistent data across re-renders. This is appropriate for demo/sample data.
72-100: Context integration and memoization look good.The component correctly uses
useDashboardContextfor centralized state, and theuseMemohooks forpageTitleandfilteredDatahave appropriate dependency arrays to prevent unnecessary recalculations.libs/react/ui/src/components/dashboard/table/table-wrapper.tsx (1)
16-91: Props interface is well-structured.The
TableWrapperPropsinterface provides comprehensive documentation and sensible defaults. The generic typing<TData, TValue>properly propagates to column definitions.libs/react/ui/src/components/dashboard/context/utils.ts (2)
31-43: Clean utility function for visibility state conversion.The
viewColumnsToVisibilityStatefunction correctly handles the mapping fromViewColumn[]to TanStack Table'sVisibilityState, gracefully skipping columns without a mapping.
53-65: Immutable update pattern correctly applied.The
updateViewColumnsFromVisibilityfunction returns a new array without mutating the input, following React's immutability best practices.libs/react/ui/src/components/dashboard/toolbar/view-dropdown.tsx (1)
36-77: Controlled/uncontrolled pattern implementation is correct.The component properly supports both controlled (via
columnsprop) and uncontrolled (via internal state) usage patterns, with appropriate delegation inhandleColumnChange.libs/react/ui/src/components/table/data-table.tsx (2)
88-100: Well-documented controlled visibility props.The new
columnVisibilityandonColumnVisibilityChangeprops are clearly documented with appropriate JSDoc comments explaining their purpose and usage.
126-133: Visibility setter correctly handles functional updates.The
setColumnVisibilitywrapper properly handles both direct value and functional update patterns, ensuring compatibility with TanStack Table's internal updater functions.libs/react/ui/src/components/dashboard/toolbar/index.ts (1)
1-14: Barrel exports are well-organized.The index file properly re-exports both types and components from the toolbar sub-modules. The pattern of exporting types separately enables tree-shaking and type-only imports.
libs/react/ui/src/components/dashboard/dashboard.tsx (1)
78-96: Clean tabs implementation with scroll-aware layout.The Tabs structure is well-organized. The sticky header with dynamic padding based on scroll progress creates a smooth UX. The
handleTabChangecorrectly resets scroll position when switching tabs.libs/react/ui/src/components/dashboard/components/organization-selector.tsx (2)
25-29: Hardcoded organizations list is acceptable for demo purposes.Given this is a demo dashboard (per PR title), the static organizations array is appropriate. For production, this would need to be passed as a prop or fetched from an API.
55-68: Well-structured controlled/uncontrolled pattern.The component correctly manages internal state with
selectedOrgwhile exposingonOrganizationChangefor parent notification. The fallback toorganizations[0]on line 63 ensures a valid organization is always displayed.libs/react/ui/src/components/dashboard/components/sidebar.tsx (1)
48-100: Solid controlled/uncontrolled pattern implementation.The sidebar correctly supports both controlled (
open/onOpenChange) and uncontrolled (defaultOpen) modes. The keyboard shortcut integration and context setup are well-implemented.libs/react/ui/src/components/dashboard/components/charts/bar-chart.tsx (2)
54-66: Clean component signature with sensible defaults.Good defaults for
height,barRadius, andmaxBarSize. The props interface is comprehensive and well-documented.
120-142: Well-implemented hover highlighting for bars.The hover logic correctly highlights the active bar while dimming others using
fillOpacity. The color fallback chain (explicit color → chartColors → chartColorsList cycle) ensures bars always have a color.libs/react/ui/src/components/dashboard/context/types.ts (1)
38-68: Comprehensive dashboard state interface.The
DashboardStateinterface is well-structured with clear groupings (search, time period, columns, filters, sidebar, resource type). Each state piece has a corresponding setter, which is a clean pattern for context-based state management.libs/react/ui/src/components/dashboard/components/charts/line-chart.tsx (2)
52-62: Consistent API with BarChart component.The props structure mirrors
BarChart, making the chart components predictable and easy to use interchangeably. Good consistency in the component library.
156-173: Custom legend implementation.The legend is rendered as a simple flex container with colored dots. This provides more styling control than Recharts' built-in Legend component, though you lose some interactivity features. For this use case, the custom approach is appropriate.
libs/react/ui/src/components/dashboard/index.ts (1)
1-51: Well-organized barrel export file.Replacing wildcard exports with explicit named exports improves tree-shaking and provides a clear public API surface. The grouping with comments makes it easy to navigate.
libs/react/ui/src/components/dashboard/context/dashboard-context.tsx
Outdated
Show resolved
Hide resolved
libs/react/ui/src/components/dashboard/filters/expression-filter-bar.tsx
Show resolved
Hide resolved
libs/react/ui/src/components/dashboard/toolbar/page-toolbar.tsx
Outdated
Show resolved
Hide resolved
…hboardProvider state management
…ch placeholder text
2 participants
Summary by CodeRabbit
New Features
Improvements
Removals
✏️ Tip: You can customize this high-level summary in your review settings.