Conversation
Introduces a LookbackWindow component for digest steps, allowing users to configure when to start collecting events (immediately, 5min, 30min, or custom). Updates keys.ts with new lookback keys and integrates the component into digest-delay-tabs.tsx for improved workflow flexibility.
✅ Deploy preview added
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis change introduces a new LookbackWindow component to the digest delay tabs workflow editor. A new file 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📜 Recent review detailsConfiguration used: Repository UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (6)
✏️ Tip: You can disable this entire section by setting 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsx (1)
56-62: LookbackWindow state is preserved but not restored when switching tabs.The
controlValuesobject (includinglookBackWindow) is preserved at line 52, but lines 59-62 only restoreamount,unit,cron, andtype. If a user configures a lookback window, switches to the Scheduled tab, and switches back to Regular, the lookback configuration is lost.🐛 Proposed fix to restore lookBackWindow
if (preservedFormValues) { setValue(AMOUNT_KEY, preservedFormValues.amount, { shouldDirty: true }); setValue(UNIT_KEY, preservedFormValues.unit, { shouldDirty: true }); setValue(CRON_KEY, preservedFormValues.cron, { shouldDirty: true }); setValue(TYPE_KEY, preservedFormValues.type, { shouldDirty: true }); + setValue('controlValues.lookBackWindow', preservedFormValues.lookBackWindow, { shouldDirty: true }); } else if (value === SCHEDULED_TYPE) {You'll also need to import the key or use the string path directly. Additionally, consider clearing
lookBackWindowwhen switching toSCHEDULED_TYPEwithout preserved values (line 63-67) to maintain consistency.
🧹 Nitpick comments (2)
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx (2)
56-64: Edge case: Custom values matching preset amounts may be overwritten.When switching to 'custom', if the user had previously set exactly 5 or 30 minutes as a custom value, it will be reset to 10 minutes. This appears intentional to provide sensible defaults when transitioning from presets, but consider whether preserving user-entered values of 5 or 30 is desired.
78-99: FormField name doesn't correspond to actual form state.The
name="lookbackType"doesn't map to a real form field—lookbackTypeis a derived value computed viauseMemo. This may cause react-hook-form to register an unused field. Consider removing theFormFieldwrapper and using justFormItemfor layout, or using a descriptive name like_lookbackTypeDisplayto indicate it's not a real field.♻️ Suggested refactor
- <FormField - control={control} - name="lookbackType" - render={() => ( - <FormItem> - <FormControl> - <Select value={lookbackType} onValueChange={handleLookbackTypeChange} disabled={isReadOnly}> - <SelectTrigger className="w-full" size="2xs"> - <SelectValue /> - </SelectTrigger> - <SelectContent> - {LOOKBACK_OPTIONS.map(({ label, value }) => ( - <SelectItem key={value} value={value}> - {label} - </SelectItem> - ))} - </SelectContent> - </Select> - </FormControl> - </FormItem> - )} - /> + <FormItem> + <FormControl> + <Select value={lookbackType} onValueChange={handleLookbackTypeChange} disabled={isReadOnly}> + <SelectTrigger className="w-full" size="2xs"> + <SelectValue /> + </SelectTrigger> + <SelectContent> + {LOOKBACK_OPTIONS.map(({ label, value }) => ( + <SelectItem key={value} value={value}> + {label} + </SelectItem> + ))} + </SelectContent> + </Select> + </FormControl> + </FormItem>
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use descriptive variable names with auxiliary verbs (isLoading, hasError)
Add blank lines before return statements
Import motion components from 'motion/react' instead of 'motion-react'
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication, minimize code duplication as possible
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure files: exported component, subcomponents, helpers, static content, types
Don't leave comments in code, unless they explain something complex and not trivial
Don't use nested ternaries
Favor named exports for components
Use TypeScript for all code; prefer interfaces over types
In front end code, use types over interfaces
Use functional components with TypeScript types
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
Add blank lines before return statements
When importing "motion-react" package, import it from "motion/react"
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use functional and declarative programming patterns; avoid classes
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Favor named exports for components
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
apps/{dashboard,web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Prefer types over interfaces in frontend code
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use lowercase with dashes for directories and files in dashboard (e.g., components/auth-wizard)
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
apps/dashboard/**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Favor named exports for components in dashboard
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
apps/dashboard/**/*
📄 CodeRabbit inference engine (.cursor/rules/figma.mdc)
apps/dashboard/**/*: Use the assets endpoint from Figma Dev Mode MCP Server to serve image and SVG assets
If the Figma Dev Mode MCP Server returns a localhost source for an image or SVG, use that image or SVG source directly without modification
Do not import or add new icon packages; all assets should come from the Figma payload
Do not use or create placeholders if a localhost source is provided by the Figma Dev Mode MCP ServerUse lowercase with dashes for directory and file names (e.g., components/auth-wizard)
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Favor named exports for components
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
**
📄 CodeRabbit inference engine (.cursor/rules/novu.mdc)
Use lowercase with dashes for directories and files (e.g., components/auth-wizard)
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.tsapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/novu.mdc)
**/*.tsx: Use declarative JSX
Wrap client components in Suspense with fallback
Use dynamic loading for non-critical components
Files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
🧠 Learnings (2)
📚 Learning: 2025-11-25T11:29:52.304Z
Learnt from: CR
Repo: novuhq/novu PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T11:29:52.304Z
Learning: Applies to apps/dashboard/**/*.{tsx,ts} : Favor named exports for components in dashboard
Applied to files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsxapps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
📚 Learning: 2025-12-22T14:14:49.363Z
Learnt from: CR
Repo: novuhq/novu PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-12-22T14:14:49.363Z
Learning: Applies to apps/dashboard/**/components/**/*.{ts,tsx} : Favor named exports for components
Applied to files:
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsx (2)
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/regular-type.tsx (1)
RegularType(10-47)apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx (1)
LookbackWindow(37-118)
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx (3)
apps/dashboard/src/components/workflow-editor/steps/save-form-context.ts (1)
useSaveForm(9-9)apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.ts (2)
LOOKBACK_AMOUNT_KEY(5-5)LOOKBACK_UNIT_KEY(6-6)apps/dashboard/src/components/workflow-editor/steps/time-units.ts (1)
TIME_UNIT_OPTIONS(3-28)
⏰ 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). (6)
- GitHub Check: E2E test API / Test E2E
- GitHub Check: Redirect rules - dashboard-v2-novu-staging
- GitHub Check: Header rules - dashboard-v2-novu-staging
- GitHub Check: Analyze (typescript)
- GitHub Check: Analyze (javascript)
- GitHub Check: Pages changed - dashboard-v2-novu-staging
🔇 Additional comments (6)
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/keys.ts (1)
5-6: LGTM!The new keys follow the existing naming convention and path structure pattern established by the other keys in this file.
apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/lookback-window.tsx (3)
1-19: LGTM!Imports are well-organized, and the type definition follows the frontend coding guideline of preferring types over interfaces.
21-35: LGTM!The
deriveLookbackTypehelper is a clean pure function that correctly maps form state to preset options.
100-115: LGTM!The conditional rendering for custom input is clean and follows the same pattern as
RegularTypefor theAmountInputconfiguration.apps/dashboard/src/components/workflow-editor/steps/digest-delay-tabs/digest-delay-tabs.tsx (2)
11-11: LGTM!Import correctly references the new
LookbackWindowcomponent.
140-150: LGTM!The integration cleanly adds the
LookbackWindowcomponent with appropriate conditional rendering for digest mode and a visual separator.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
1 participant
Introduces a LookbackWindow component for digest steps, allowing users to configure when to start collecting events (immediately, 5min, 30min, or custom). Updates keys.ts with new lookback keys and integrates the component into digest-delay-tabs.tsx for improved workflow flexibility.
What changed? Why was the change needed?
Screenshots
Expand for optional sections
Related enterprise PR
Special notes for your reviewer