Add custom webhook function support and refactor fetch logic

[akanshaaa19]

Summary

• Add ability to create custom webhook functions via the function dropdown (closes Add “Add Function Manually” option in Webhook Function dropdown #194)
• Extracted webhook options fetching and state computation from componentDidMount into a fetchWebhookOptions helper in helpers.ts
• Consolidated multiple setState calls into a single update for consistent state transitions
• Moved axios dependency out of the form component into the helper

Summary by CodeRabbit

• New Features

  • Webhook function selector now lets users create custom webhook entries directly from the configuration UI, with configurable creation/labeling behavior.
  • Dropdown creation flow returns and displays newly created entries immediately.

• Bug Fixes / Improvements

  • Webhook options are now fetched via a centralized helper and populated more reliably on form load, with improved loading and error handling.

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactors webhook option loading into a new fetchWebhookOptions helper that HTTP-fetches and maps remote webhook configs; WebhookRouterForm now calls that helper on mount and its function Select supports creating arbitrary options via new props (allowCreate, createArbitraryOption, createPrefix).

Changes

Cohort / File(s)	Summary
Webhook Helpers src/components/flow/routers/webhook/helpers.ts	Added fetchWebhookOptions(endpoint, currentUrl) using axios to GET remote webhook config, map to WebhookOption objects, and return partial form state (webhookOptions, webhookFunction, isLoading). Exports WebhookOption.
Webhook Form & UI src/components/flow/routers/webhook/WebhookRouterForm.tsx	Replaced inline axios usage with fetchWebhookOptions in componentDidMount; initialize state from helper result. Added SelectElement props: allowCreate, createArbitraryOption, createPrefix to allow manual/custom webhook functions. Removed axios import.
Metadata package.json	Bumped package version from 1.43.0-9 → 1.43.0-10.

Sequence Diagram(s)

sequenceDiagram
  participant Form as WebhookRouterForm
  participant Helper as helpers.fetchWebhookOptions
  participant API as Remote API
  participant Select as SelectElement

  Form->>Helper: fetchWebhookOptions(endpoint, currentUrl)
  Helper->>API: HTTP GET /webhook/options
  API-->>Helper: webhook config payload
  Helper-->>Form: { webhookOptions, webhookFunction, isLoading }
  Form->>Select: render with webhookOptions + allowCreate/createArbitraryOption
  Select->>Form: user creates arbitrary option (createArbitraryOption)
  Form-->>Select: add new option, set webhookFunction

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Refactor WebhookRouterForm to use axios for API calls instead of fetch #177 — also modifies how webhook options are fetched/initialized; likely touches same helper/component boundaries.
• Refactor: Webhook function #184 — related edits around fetch/isLoading/state handling for webhook options in WebhookRouterForm.
• Add list of webhook functions as dropdown in call a webhook node #172 — modifies webhook form and helper fetching logic; overlaps with webhookOptions/webhookFunction state changes.

Suggested reviewers

• shijithkjayan
• AmishaBisht
• madclaws

Poem

🐰 I hopped to fetch the webhook song,
Called the helper, waited not long,
Options landed, I added one new,
A manual function — just for you!
Tiny hops, a webhook or two.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main changes: adding custom webhook function support and refactoring the fetch logic into a helper function.
Linked Issues check	✅ Passed	The PR implements the acceptance criteria from issue #194 by adding allowCreate, createArbitraryOption, and createPrefix props to the webhook function select, enabling users to manually enter custom webhook functions.
Out of Scope Changes check	✅ Passed	All changes are directly related to the PR objectives: webhook function select UI enhancement, helper refactoring, and version bump are all within scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch enhancement/select_function

---

No actionable comments were generated in the recent review. 🎉

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@src/components/flow/routers/webhook/helpers.ts`:
- Around line 169-182: fetchWebhookOptions currently assumes data.webhook is an
array and uses (data.webhook || []).map(...), which will throw if data.webhook
is a non-array; update the function (fetchWebhookOptions) to normalize the
payload first (e.g., const webhooks = Array.isArray(data.webhook) ? data.webhook
: []) and then build webhookOptions from webhooks so mapping is safe and the UI
won’t crash on non-array payloads; keep the same mapping logic and return shape
(webhookOptions, webhookFunction, isLoading).

In `@src/components/flow/routers/webhook/WebhookRouterForm.tsx`:
- Around line 383-385: Remove the stray debug console.log call in
WebhookRouterForm: locate the line using console.log(this.state.webhookFunction)
near where tabs.reverse() is called (inside the render/return flow) and delete
it (or replace with a proper logger if persistent logging is required); ensure
no other leftover console.debug/console.log calls remain in the
WebhookRouterForm component before merging.
- Around line 419-423: The createArbitraryOption passed to TembaSelectElement in
WebhookRouterForm currently mutates state by calling
this.handleWebhookFunctionChanged and then returning an option, causing a double
update when the select's onChange (this.handleWebhookFunctionChanged) fires;
change createArbitraryOption to be pure—only construct and return { name: val,
value: val, id: val, label: val } with no side effects—and let the existing
onChange={this.handleWebhookFunctionChanged} perform the single state update and
body reset.

[mdshamoon]

why are we removing finally?

[akanshaaa19]

because isLoading is set to false in the fetchWebhookOptions function itself

[mdshamoon]

but it would not get called on any failiure right. So it doesn't gets called when it reaches the catch block.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/components/flow/routers/webhook/WebhookRouterForm.tsx (2)

68-71: ⚠️ Potential issue | 🟡 Minor

isLoading is not initialized in the constructor.

WebhookRouterFormState declares isLoading: boolean, but the constructor doesn't set it. Between mount and componentDidMount, it will be undefined. Initialize it to prevent the type mismatch and avoid a brief render with indeterminate state.

Proposed fix

     this.state = {
       ...nodeToState(this.props.nodeSettings),
-      webhookOptions: []
+      webhookOptions: [],
+      isLoading: false
     };

---

78-88: ⚠️ Potential issue | 🟠 Major

Fix null-safety bug in fetchWebhookOptions: data.webhook may be undefined

At src/components/flow/routers/webhook/helpers.ts (lines 176–183), data.webhook.map(...) will throw a TypeError if data.webhook is undefined or null, since the ?? [] operator runs after .map(). Although the error is caught in the component's try-catch block, webhook options silently fail to load.

Use optional chaining instead:

Suggested fix

const webhookOptions: WebhookOption[] =
  data.webhook?.map((webhook: any) => ({
    name: webhook.name,
    value: webhook.name,
    id: webhook.name,
    label: webhook.name,
    body: webhook.body
  })) ?? [];

[priyanshu6238]

Right now, even if an incorrect value is entered, it still gets saved. We should not allow this. Instead, the user should be prevented from saving when the value is invalid.