Add custom webhook option #193
Conversation
📝 WalkthroughWalkthroughAdds a custom-webhook option and UI to WebhookRouterForm: CSS for the custom input and toggle; component logic to detect/fallback to a custom function, update URL/body accordingly, and conditionally render either a select or the custom input with toggle. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebhookForm as WebhookRouterForm
participant API as Backend / webhookOptions
User->>WebhookForm: Open form (METHOD = FUNCTION, URL present)
WebhookForm->>API: fetchWebhookOptions()
API-->>WebhookForm: webhookOptions (list)
alt URL function in options
WebhookForm->>WebhookForm: set selected named function, set URL to function name, keep/restore body
else URL function not in options
WebhookForm->>WebhookForm: set selected = custom_webhook, set URL to '' or custom name, set body = '{}'
end
User->>WebhookForm: change function selection
alt selects named function
WebhookForm->>WebhookForm: set URL = selected name, restore backend/default body
else selects custom_webhook
WebhookForm->>WebhookForm: render custom input + toggle, set URL = '', set body = '{}'
end
User->>WebhookForm: toggle/reset custom
WebhookForm->>WebhookForm: clear URL or switch back to select UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
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 |
priyanshu6238
changed the title
![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 (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx (1)
95-110: Redundant null check on line 106.Since
selectedOptionis always assigned a value (either fromfind()or from the fallback object creation on lines 97-101), the|| nullis unreachable.🔎 Suggested simplification
this.setState({ webhookOptions, - webhookFunction: { value: selectedOption || null }, + webhookFunction: { value: selectedOption }, url: { value: selectedOption.value === 'custom' ? this.state.url.value : selectedOption.name } });
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/flow/routers/webhook/WebhookRouterForm.module.scsssrc/components/flow/routers/webhook/WebhookRouterForm.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx (2)
src/components/form/textinput/TextInputElement.tsx (1)
TextInputElement(35-94)src/temba/TembaSelectElement.tsx (1)
TembaSelectElement(13-26)
🔇 Additional comments (3)
src/components/flow/routers/webhook/WebhookRouterForm.module.scss (1)
101-127: LGTM!The styling for the custom function wrapper and toggle icon is well-structured. The absolute positioning with vertical centering, hover state, and
user-select: noneare appropriate for an interactive toggle element.src/components/flow/routers/webhook/WebhookRouterForm.tsx (2)
142-146: Potential validation inconsistency when clearing function selection.When
selectedis null (line 145),bodyis set to an empty string. However, inhandleUpdate(lines 238-243), an empty body only bypasses JSON validation for FUNCTION method, but if the user then saves, the empty body may cause issues downstream.Consider whether clearing the function should also set body to
'{}'to maintain valid JSON, or verify that empty body is acceptable throughout the flow.
85-91: Verify: How do users select the "Custom" option initially?The
Customoption is only created incomponentDidMountwhen loading an existing node with a non-matching function name (lines 96-101). However, thewebhookOptionsarray built from the backend (lines 85-91) doesn't include aCustomoption.This means users cannot switch to custom mode from a fresh state—they can only end up in custom mode by loading a previously saved custom function. Is this intentional, or should a
Customoption be appended towebhookOptionsso users can select it?Also applies to: 439-472
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx (1)
441-475: Conditional rendering logic is correct.The implementation properly switches between custom input and function selection based on the
webhookFunctionvalue. The loading state and placeholder text provide good user feedback.Note: The accessibility issue with the toggle icon (lines 451-456) lacking keyboard support has already been flagged in previous reviews.
🧹 Nitpick comments (3)
src/components/flow/routers/webhook/WebhookRouterForm.tsx (3)
122-153: Logic looks good with proper null safety.The function correctly handles custom vs named webhooks with appropriate URL and body updates. The use of optional chaining (
selected?.value) provides good defensive programming.One minor observation: At line 106 in
componentDidMount, the expressionselectedOption || nullis redundant sinceselectedOptionis always defined (either fromfindor the custom fallback object on lines 97-101). You can simplify to:- webhookFunction: { value: selectedOption || null }, + webhookFunction: { value: selectedOption },
85-91: Consider defining a proper type for webhook options.The webhook options are currently mapped to objects with specific properties but lack a defined type. While using
any(line 95) works, defining an interface would improve type safety and code maintainability.🔎 Suggested enhancement
Add an interface at the top of the file:
interface WebhookOption { name: string; value: string; id: string; label: string; body?: string; }Then update the state type and usage:
export interface WebhookRouterFormState extends FormState { headers: HeaderEntry[]; method: MethodEntry; url: StringEntry; body: StringEntry; resultName: StringEntry; webhookFunction: FormEntry; - webhookOptions: any[]; + webhookOptions: WebhookOption[]; isLoading: boolean; }And at line 95:
- let selectedOption = webhookOptions.find((opt: any) => opt.name === functionName); + let selectedOption = webhookOptions.find((opt) => opt.name === functionName);
93-111: Consider adding a permanent "Custom" option to webhookOptions for better UX discoverability.The current implementation requires users to click the toggle icon (▾) to switch into custom webhook mode. While functional, a "Custom" option in the dropdown would be more discoverable. If TembaSelect's
allowCreateprop is already enabled, this change is unnecessary; otherwise, consider adding a permanent custom option as shown in the suggested enhancement.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/flow/routers/webhook/WebhookRouterForm.tsx (2)
src/components/form/textinput/TextInputElement.tsx (1)
TextInputElement(35-94)src/temba/TembaSelectElement.tsx (1)
TembaSelectElement(13-26)
⏰ 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: Coverage
- GitHub Check: Tests (16.x)
priyanshu6238
changed the title
|
Closing this — will create new pr , that provides a direct way to add a custom webhook directly from the dropdown. when the option is not present. |
Summary
This PR enhances the Webhook Router Form by allowing users to manually input a custom function name when the predefined options from the backend do not meet their needs. This provides greater flexibility for developers using the webhook router in FUNCTION mode.
Changes
2-Where you can edit the label name and body.