feat: allow inserting webhook variables into custom payload template#22835
feat: allow inserting webhook variables into custom payload template#22835CarinaWolli merged 9 commits intocalcom:mainfrom
Conversation
|
@keerthikumanduri is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
|
|
github-actions
bot
added
Low priority
WalkthroughThis update to the Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes were found. Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 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). (2)
✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (07/31/25)1 reviewer was added to this PR based on Keith Williams's automation. "Add community label" took an action on this PR • (07/31/25)1 label was added to this PR based on Keith Williams's automation. "Add ready-for-e2e label" took an action on this PR • (08/11/25)1 label was added to this PR based on Keith Williams's automation. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/features/webhooks/components/WebhookForm.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.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/webhooks/components/WebhookForm.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/webhooks/components/WebhookForm.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: Check for E2E label
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (5)
packages/features/webhooks/components/WebhookForm.tsx (5)
76-210: Well-structured webhook variables constant with comprehensive coverage.The
WEBHOOK_VARIABLESconstant provides a well-organized categorization of available webhook template variables with clear descriptions and proper typing information. The structure facilitates easy UI rendering and user understanding.
281-300: Robust JSON template insertion logic with good error handling.The
insertVariableIntoTemplatefunction handles multiple scenarios well:
- Valid JSON parsing and formatting
- Empty/minimal JSON handling
- Partial JSON string manipulation
- Proper comma insertion logic
The implementation correctly handles edge cases like empty strings, malformed JSON, and maintains proper JSON formatting.
302-302: State management for variable visibility toggle looks good.The
showVariablesstate is properly initialized and will be used to control the visibility of the variables list.
501-510: Enhanced textarea configuration improves user experience.The expanded textarea (8 rows instead of 3) and
{}placeholder provide better visual space and guidance for users creating custom payload templates.
526-536: Variable insertion logic correctly integrates with form state.The click handler properly:
- Retrieves current payload template value
- Uses the helper function to insert the variable
- Updates the form state with
shouldDirty: trueThis ensures the form correctly tracks changes and enables the save button.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
packages/features/webhooks/components/WebhookForm.tsx (2)
512-514: Use localization for button text.The button text is hardcoded instead of using the
t()function for localization.- <Button type="button" color="secondary" onClick={() => setShowVariables(!showVariables)}> - {showVariables ? t("Hide Variables") : t("Show Available Variables")} - </Button> + <Button type="button" color="secondary" onClick={() => setShowVariables(!showVariables)}> + {showVariables ? t("hide_variables") : t("show_available_variables")} + </Button>
516-547: Variable insertion UI needs localization and accessibility improvements.Multiple issues identified:
- Localization violations: Category names, descriptions, and "Click to add to template" text are hardcoded
- Accessibility: Missing proper ARIA labels and keyboard navigation support
- Styling: Hardcoded color classes should use design system tokens
Apply these critical localization fixes:
- <h4 className="mb-2 text-sm font-medium">{category}</h4> + <h4 className="mb-2 text-sm font-medium">{t(category.toLowerCase().replace(/ /g, '_'))}</h4>- <div className="text-muted mt-1 text-xs">{description}</div> + <div className="text-muted mt-1 text-xs">{t(description.toLowerCase().replace(/ /g, '_'))}</div>- <div className="text-muted mt-1 text-xs">{t("Click to add to template")}</div> + <div className="text-muted mt-1 text-xs">{t("click_to_add_to_template")}</div>Additionally:
- Add
role="button"andtabIndex={0}to clickable elements- Add keyboard event handlers for Enter/Space keys
- Replace hardcoded
text-whitewith appropriate design system class
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/features/webhooks/components/WebhookForm.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.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/webhooks/components/WebhookForm.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/webhooks/components/WebhookForm.tsx
🧠 Learnings (3)
📚 Learning: applies to **/*.tsx : always use `t()` for text localization in frontend code; direct text embedding...
Learnt from: CR
PR: calcom/cal.com#0
File: .cursor/rules/review.mdc:0-0
Timestamp: 2025-07-28T11:50:23.946Z
Learning: Applies to **/*.tsx : Always use `t()` for text localization in frontend code; direct text embedding should trigger a warning
Applied to files:
packages/features/webhooks/components/WebhookForm.tsx
📚 Learning: in signup-view.tsx, when checking if redirecturl contains certain strings, using explicit && checks ...
Learnt from: Anshumancanrock
PR: calcom/cal.com#22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.
Applied to files:
packages/features/webhooks/components/WebhookForm.tsx
📚 Learning: when making localization changes for new features, it's often safer to add new strings rather than m...
Learnt from: bandhan-majumder
PR: calcom/cal.com#22359
File: packages/lib/server/locales/en/common.json:1336-1339
Timestamp: 2025-07-14T16:31:45.233Z
Learning: When making localization changes for new features, it's often safer to add new strings rather than modify existing ones to avoid breaking existing functionality that depends on the original strings. This approach allows for feature-specific customization while maintaining backward compatibility.
Applied to files:
packages/features/webhooks/components/WebhookForm.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). (3)
- GitHub Check: Tests / Unit
- GitHub Check: Type check / check-types
- GitHub Check: Linters / lint
🔇 Additional comments (4)
packages/features/webhooks/components/WebhookForm.tsx (4)
76-210: LGTM! Well-structured webhook variables definition.The
WEBHOOK_VARIABLESconstant is well-organized with clear categorization and comprehensive documentation. The structure withcategory,variables, and detailed metadata (name, variable, type, description) provides excellent developer experience.
281-300: Robust JSON template insertion function with good error handling.The
insertVariableIntoTemplatefunction handles multiple scenarios well:
- Valid JSON parsing and formatting
- Empty/default object initialization
- Graceful fallback for malformed JSON
- Proper comma handling for JSON structure
The implementation correctly maintains JSON formatting with proper indentation.
302-302: LGTM! State management for variables visibility.The
showVariablesstate is appropriately added to control the visibility of the webhook variables section.
501-510: Good improvements to the textarea component.The changes enhance the user experience:
- Increased rows from 3 to 8 provides better visibility
- Added helpful placeholder
{\n\n}guides users on JSON structure- Proper form integration maintained
| onClick={() => { | ||
| const currentValue = formMethods.getValues("payloadTemplate") || "{}"; | ||
| const updatedValue = insertVariableIntoTemplate( | ||
| currentValue, | ||
| name, | ||
| variable | ||
| ); | ||
| formMethods.setValue("payloadTemplate", updatedValue, { | ||
| shouldDirty: true, | ||
| }); | ||
| }}> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify template insertion functionality.
The variable insertion logic looks correct, but ensure that the JSON structure is maintained properly when multiple variables are added sequentially.
🏁 Script executed:
#!/bin/bash
# Description: Check if there are any existing tests for the insertVariableIntoTemplate function
# Expected: Find test files that verify the JSON template insertion functionality
echo "Searching for test files related to webhook template insertion..."
rg -l "insertVariableIntoTemplate|webhook.*template" --type test
echo "Searching for webhook form test files..."
fd -e test.ts -e test.tsx -e spec.ts -e spec.tsx | xargs rg -l "WebhookForm"
echo "Checking for existing webhook payload template tests..."
rg -A 5 -B 5 "payloadTemplate.*test" Length of output: 564
🏁 Script executed:
#!/bin/bash
set -e
echo "1. Locating definition of insertVariableIntoTemplate..."
rg -n "insertVariableIntoTemplate" -g '*.ts' -g '*.tsx'
echo
echo "2. Searching for tests referencing insertVariableIntoTemplate..."
rg -n "insertVariableIntoTemplate" -g '*.spec.ts*' -g '*.test.ts*' || true
echo
echo "3. Identifying directory of the function to look for nearby tests..."
func_file=$(rg -l "insertVariableIntoTemplate" -g '*.ts' -g '*.tsx' | head -n1)
echo "Function file: $func_file"
if [ -n "$func_file" ]; then
search_dir=$(dirname "$func_file")
echo
echo "4. Listing any test files in $search_dir..."
find "$search_dir" -type f \( -name '*.spec.ts' -o -name '*.spec.tsx' -o -name '*.test.ts' -o -name '*.test.tsx' \) -print
echo
echo "5. Searching those tests for payloadTemplate usage..."
find "$search_dir" -type f \( -name '*.spec.ts' -o -name '*.spec.tsx' -o -name '*.test.ts' -o -name '*.test.tsx' \) -print0 \
| xargs -0 grep -H "payloadTemplate" || true
fiLength of output: 1946
Add unit tests for JSON template insertion
There’s currently no test coverage for the insertVariableIntoTemplate helper, which lives in packages/features/webhooks/components/WebhookForm.tsx. To ensure the JSON structure remains valid—especially when inserting multiple variables in sequence—please add focused tests that cover:
- Inserting into an empty template (
"{}") - Single-variable insertion
- Multiple insertions back-to-back
- Edge cases (e.g. reserved characters, nested braces)
- Round-trip parsing (assert
JSON.parse(insertedString)succeeds)
Suggested locations:
- Create a new spec alongside the component, e.g.
packages/features/webhooks/components/WebhookForm.spec.ts - Import and unit-test
insertVariableIntoTemplatedirectly
🤖 Prompt for AI Agents
In packages/features/webhooks/components/WebhookForm.tsx around lines 526 to
536, there are no unit tests for the insertVariableIntoTemplate helper function.
To fix this, create a new test file named WebhookForm.spec.ts in the same
directory. Import insertVariableIntoTemplate into this test file and write
focused unit tests covering inserting into an empty template ("{}"),
single-variable insertion, multiple sequential insertions, edge cases like
reserved characters and nested braces, and verify that the output string can be
parsed by JSON.parse without errors.
Devanshusharma2005
left a comment
Devanshusharma2005
left a comment
There was a problem hiding this comment.
PR looks good. but lets wait for @CarinaWolli review too.
keerthikumanduri
force-pushed
the
custom-payload-guide
branch
from
3230668 to
79190ca
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/public/static/locales/en/common.json (1)
3420-3444: Standardize wording & refine a couple of variable descriptionsAll new keys are syntactically valid JSON – great.
Tiny copy-editing tweaks will keep the doc-strings uniform and easier for translators:-"webhook_reschedule_uid": "The UID for rescheduling", +"webhook_reschedule_uid": "The UID of the rescheduled booking", -"webhook_type": "The event type slug", +"webhook_type": "The event-type slug", -"webhook_video_call_url": "Video call URL for the meeting", +"webhook_video_call_url": "Video-call URL for the meeting",This aligns tense/possessive usage with neighbouring strings (“event’s start time”, “organizer’s email” etc.) and removes a minor plural-noun clash.
No functional impact – purely polish.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/public/static/locales/en/common.json(1 hunks)packages/features/webhooks/components/WebhookForm.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/features/webhooks/components/WebhookForm.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: when making localization changes for new features, it's often safer to add new strings rather than m...
Learnt from: bandhan-majumder
PR: calcom/cal.com#22359
File: packages/lib/server/locales/en/common.json:1336-1339
Timestamp: 2025-07-14T16:31:45.233Z
Learning: When making localization changes for new features, it's often safer to add new strings rather than modify existing ones to avoid breaking existing functionality that depends on the original strings. This approach allows for feature-specific customization while maintaining backward compatibility.
Applied to files:
apps/web/public/static/locales/en/common.json
⏰ 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). (1)
- GitHub Check: Install dependencies / Yarn install & cache
CarinaWolli
left a comment
CarinaWolli
left a comment
There was a problem hiding this comment.
Just some more missing translations. Everything else works great
E2E results are ready! |
4 participants
What does this PR do?
This PR adds a option to add webhook variables in the custom webhook field section by introducing a dropdown with the webhook variables (found in docs) that can be inserted into the custom payload text area with a click.
Video Demo (if applicable):
Before:
After:
https://www.loom.com/share/c9cebe0d78f842659958fddead627b95?sid=51820dfd-4db7-46b2-a8e6-13300d190747
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?
Checklist