Conversation
Walkthrough
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Pre-merge checks (1 passed, 1 warning, 1 inconclusive)❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests
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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/features/ee/workflows/components/WorkflowStepContainer.tsx (1)
830-830: Prevent keyboard-triggered propagation from right-side actionsAdd onKeyDown to stop Enter/Space bubbling which would open the sheet after the header gains keyboard handling.
- <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}> + <div + className="flex items-center gap-1" + onClick={(e) => e.stopPropagation()} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") e.stopPropagation(); + }}>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/features/ee/workflows/components/WorkflowStepContainer.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
**/*.{ts,tsx,js,jsx}
⚙️ CodeRabbit configuration file
Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.
Files:
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/ee/workflows/components/WorkflowStepContainer.tsx:641-649
Timestamp: 2025-08-26T20:09:17.089Z
Learning: In packages/features/ee/workflows/components/WorkflowStepContainer.tsx, Cal.AI actions are intentionally filtered out/hidden for organization workflows when props.isOrganization is true. This restriction is by design per maintainer Udit-takkar in PR #22995, despite the broader goal of enabling Cal.AI self-serve.
Learnt from: CarinaWolli
PR: calcom/cal.com#23421
File: packages/features/ee/workflows/components/AddActionDialog.tsx:171-174
Timestamp: 2025-09-08T09:34:46.661Z
Learning: In packages/features/ee/workflows/components/AddActionDialog.tsx, the actionOptions prop is guaranteed to never be empty according to maintainer CarinaWolli, so defensive checks for empty arrays are not necessary.
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/ee/workflows/components/AgentConfigurationSheet.tsx:348-371
Timestamp: 2025-08-15T00:27:33.280Z
Learning: In calcom/cal.com workflows and AI agent components, variable insertion follows a consistent pattern of directly transforming the input variable with toUpperCase() and replace(/ /g, "_") to create tokens like {VARIABLE_NAME}. The AgentConfigurationSheet.tsx implementation correctly follows this same pattern as WorkflowStepContainer.tsx, per maintainer Udit-takkar in PR #22995.
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/calAIPhone/providers/retellAI/services/AgentService.ts:83-88
Timestamp: 2025-08-26T20:23:28.396Z
Learning: In calcom/cal.com PR #22995, the workflow update handler in packages/trpc/server/routers/viewer/workflows/update.handler.ts includes workflow-level authorization via isAuthorized(userWorkflow, ctx.user.id, "workflow.update") which validates the user can update the workflow before calling updateToolsFromAgentId (per maintainer Udit-takkar).
📚 Learning: 2025-08-26T20:09:17.089Z
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/ee/workflows/components/WorkflowStepContainer.tsx:641-649
Timestamp: 2025-08-26T20:09:17.089Z
Learning: In packages/features/ee/workflows/components/WorkflowStepContainer.tsx, Cal.AI actions are intentionally filtered out/hidden for organization workflows when props.isOrganization is true. This restriction is by design per maintainer Udit-takkar in PR #22995, despite the broader goal of enabling Cal.AI self-serve.
Applied to files:
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
📚 Learning: 2025-08-15T00:27:33.280Z
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/ee/workflows/components/AgentConfigurationSheet.tsx:348-371
Timestamp: 2025-08-15T00:27:33.280Z
Learning: In calcom/cal.com workflows and AI agent components, variable insertion follows a consistent pattern of directly transforming the input variable with toUpperCase() and replace(/ /g, "_") to create tokens like {VARIABLE_NAME}. The AgentConfigurationSheet.tsx implementation correctly follows this same pattern as WorkflowStepContainer.tsx, per maintainer Udit-takkar in PR #22995.
Applied to files:
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Install dependencies / Yarn install & cache
| <div | ||
| className="flex cursor-pointer items-center justify-between" | ||
| onClick={(e) => { | ||
| const target = e.target as HTMLElement; | ||
| if ( | ||
| target.closest("button") || | ||
| target.closest('[role="menu"]') || | ||
| target.closest('[role="menuitem"]') | ||
| ) { | ||
| return; | ||
| } | ||
| if (!props.readOnly) { | ||
| setAgentConfigurationSheet({ open: true, activeTab: "prompt" }); | ||
| } | ||
| }}> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Make the header click target accessible and readOnly-aware
- Add keyboard support (Enter/Space), role, tabIndex, and aria-disabled.
- Only show cursor-pointer when interactive.
- Broaden interactive-element guard (anchors, inputs, contenteditable) to avoid accidental sheet opens.
- <div
- className="flex cursor-pointer items-center justify-between"
- onClick={(e) => {
- const target = e.target as HTMLElement;
- if (
- target.closest("button") ||
- target.closest('[role="menu"]') ||
- target.closest('[role="menuitem"]')
- ) {
- return;
- }
- if (!props.readOnly) {
- setAgentConfigurationSheet({ open: true, activeTab: "prompt" });
- }
- }}>
+ <div
+ className={classNames("flex items-center justify-between", !props.readOnly && "cursor-pointer")}
+ role={!props.readOnly ? "button" : undefined}
+ aria-disabled={props.readOnly || undefined}
+ tabIndex={!props.readOnly ? 0 : -1}
+ onClick={(e) => {
+ if (props.readOnly) return;
+ const target = e.target as HTMLElement;
+ if (
+ target.closest(
+ "button,[role='menu'],[role='menuitem'],a,[contenteditable='true'],input,textarea,select"
+ )
+ ) {
+ return;
+ }
+ setAgentConfigurationSheet({ open: true, activeTab: "prompt" });
+ }}
+ onKeyDown={(e) => {
+ if (props.readOnly) return;
+ if (e.key === "Enter" || e.key === " ") {
+ const target = e.target as HTMLElement;
+ if (
+ target.closest(
+ "button,[role='menu'],[role='menuitem'],a,[contenteditable='true'],input,textarea,select"
+ )
+ ) {
+ return;
+ }
+ e.preventDefault();
+ setAgentConfigurationSheet({ open: true, activeTab: "prompt" });
+ }
+ }}>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div | |
| className="flex cursor-pointer items-center justify-between" | |
| onClick={(e) => { | |
| const target = e.target as HTMLElement; | |
| if ( | |
| target.closest("button") || | |
| target.closest('[role="menu"]') || | |
| target.closest('[role="menuitem"]') | |
| ) { | |
| return; | |
| } | |
| if (!props.readOnly) { | |
| setAgentConfigurationSheet({ open: true, activeTab: "prompt" }); | |
| } | |
| }}> | |
| <div | |
| className={classNames("flex items-center justify-between", !props.readOnly && "cursor-pointer")} | |
| role={!props.readOnly ? "button" : undefined} | |
| aria-disabled={props.readOnly || undefined} | |
| tabIndex={!props.readOnly ? 0 : -1} | |
| onClick={(e) => { | |
| if (props.readOnly) return; | |
| const target = e.target as HTMLElement; | |
| if ( | |
| target.closest( | |
| "button,[role='menu'],[role='menuitem'],a,[contenteditable='true'],input,textarea,select" | |
| ) | |
| ) { | |
| return; | |
| } | |
| setAgentConfigurationSheet({ open: true, activeTab: "prompt" }); | |
| }} | |
| onKeyDown={(e) => { | |
| if (props.readOnly) return; | |
| if (e.key === "Enter" || e.key === " ") { | |
| const target = e.target as HTMLElement; | |
| if ( | |
| target.closest( | |
| "button,[role='menu'],[role='menuitem'],a,[contenteditable='true'],input,textarea,select" | |
| ) | |
| ) { | |
| return; | |
| } | |
| e.preventDefault(); | |
| setAgentConfigurationSheet({ open: true, activeTab: "prompt" }); | |
| } | |
| }}> |
🤖 Prompt for AI Agents
In packages/features/ee/workflows/components/WorkflowStepContainer.tsx around
lines 797 to 811, the header div is only clickable by mouse and always shows a
pointer; update it to be accessible and readOnly-aware by: give the header a
role="button", set tabIndex={props.readOnly ? -1 : 0}, add
aria-disabled={props.readOnly}, apply cursor-pointer conditionally only when not
readOnly, broaden the interactive-element guard to also check for anchors,
inputs, textareas and contenteditable elements (e.g., target.closest('a'),
'input', 'textarea', '[contenteditable="true"]'), and add an onKeyDown handler
that triggers the same open-sheet behavior for Enter/Space when not readOnly
while preventing default and preserving the existing guard checks.
E2E results are ready! |
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
What does this PR do?
Screen.Recording.2025-09-13.at.12.05.00.AM.mov
How should this be tested?