Refactor: Webhook function

[priyanshu6238]

use this line after componentDidMount to have delay in api response to test the loading state

  await new Promise(resolve => setTimeout(resolve, 3000));

Summary by CodeRabbit

• New Features

  • Webhook router now shows a "Loading functions…" message while fetching available webhook functions.
  • Loading state introduced to improve user feedback during configuration.

• Bug Fixes

  • Improved error handling and loading state management when retrieving webhook options to reduce confusing or stale UI states.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Added an isLoading: boolean field to WebhookRouterForm state; component sets it true before fetching webhook options and clears it in a finally block. nodeToState initializes isLoading: false for restored nodes. The Function select shows "Loading functions…" while loading.

Changes

Cohort / File(s)	Summary
Webhook form state & fetch src/components/flow/routers/webhook/WebhookRouterForm.tsx	Added isLoading: boolean to WebhookRouterFormState; componentDidMount sets isLoading true before fetching webhook options, wraps fetch in try/catch/finally, logs errors, and ensures isLoading is cleared in finally. Function select placeholder displays "Loading functions…" when isLoading is true.
State initialization helper src/components/flow/routers/webhook/helpers.ts	nodeToState updated to include isLoading: false in the returned WebhookRouterFormState for restored nodes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Check all control paths set/clear isLoading (including error cases).
• Verify the placeholder binding and UI behavior when isLoading toggles.
• Confirm nodeToState default aligns with component initialization and restore flows.

Possibly related PRs

• Add list of webhook functions as dropdown in call a webhook node #172 — earlier changes adding webhook function/options fetch flow that this patch hardens with loading/error handling.
• Fix/webhook function #180 — overlaps at state shape and nodeToState behavior for the webhook form.

Suggested reviewers

• madclaws
• shijithkjayan
• akanshaaa19

Poem

🐇 I hopped to the form with a curious twitch,
isLoading true while I hunted the switch.
Try, catch, finally — I tidy the race,
"Loading functions…" waits in its place.
A rabbit's small fix to steady the interface.

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'Refactor: Webhook function' is vague and overly generic—it doesn't clearly convey the primary change of adding loading state management during webhook function fetching.	Use a more descriptive title that captures the main intent, such as 'Add loading state to webhook function fetch' or 'Show loading indicator while fetching webhook functions'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 fix/webhook

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2289bd7 and fcf28ea.

📒 Files selected for processing (1)

• src/components/flow/routers/webhook/WebhookRouterForm.tsx (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/flow/routers/webhook/WebhookRouterForm.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: Tests (16.x)
• GitHub Check: Coverage

---

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: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e3089c2 and b788d7b.

⛔ Files ignored due to path filters (1)

• src/components/flow/routers/webhook/__snapshots__/WebhookRouterForm.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• src/components/flow/routers/webhook/WebhookRouterForm.tsx (4 hunks)
• src/components/flow/routers/webhook/helpers.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

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

src/__mocks__/axios.ts (1)

• axios (3-3)

⏰ 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: Tests (16.x)

🔇 Additional comments (5)

src/components/flow/routers/webhook/helpers.ts (1)

67-68: LGTM!

The isLoading: true initialization is appropriate since the component always fetches webhook options on mount, regardless of whether there's an existing action.

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

55-55: LGTM!

The isLoading boolean field is a clean addition to the form state interface.

---

70-71: LGTM!

The initialization of webhookOptions and isLoading is appropriate for the component's loading flow.

---

83-110: Good error handling structure.

The try/catch/finally pattern correctly ensures isLoading is set to false regardless of success or failure, preventing the UI from being stuck in a loading state.

---

431-435: LGTM!

The dynamic placeholder appropriately communicates the loading state to users, showing "Loading functions…" during the fetch operation.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

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

54-55: Consider defining a specific type for webhook options.

Using any[] for webhookOptions reduces type safety. Consider defining an interface for the webhook option structure based on the shape used throughout the component (with properties like name, value, id, label, body).

+interface WebhookOption {
+  name: string;
+  value: string;
+  id: string;
+  label: string;
+  body: string;
+}
+
 export interface WebhookRouterFormState extends FormState {
   headers: HeaderEntry[];
   method: MethodEntry;
   url: StringEntry;
   body: StringEntry;
   resultName: StringEntry;
   webhookFunction: FormEntry;
-  webhookOptions: any[];
+  webhookOptions: WebhookOption[];
   isLoading: boolean;
 }

---

79-109: Add cleanup to prevent setState on unmounted component.

The async componentDidMount doesn't track whether the component is still mounted before calling setState in the finally block. If the component unmounts before the fetch completes, this will trigger a warning and could lead to memory leaks.

Add a mounted flag to track component lifecycle:

 export default class WebhookRouterForm extends React.Component<
   RouterFormProps,
   WebhookRouterFormState
 > {
   public static contextTypes = {
     config: fakePropType
   };
+
+  private _isMounted = false;

   constructor(props: RouterFormProps) {
     super(props);

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

     bindCallbacks(this, {
       include: [/^handle/]
     });
   }

   async componentDidMount() {
+    this._isMounted = true;
     const endpoint = this.context.config.endpoints.completion;
     try {
       const response = await axios.get(endpoint);
       const data = response.data;

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

       if (this.state.method.value.value === Methods.FUNCTION && this.state.url.value) {
         const functionName = this.state.url.value;
         const selectedOption = webhookOptions.find((opt: any) => opt.name === functionName);

-        this.setState({
-          webhookOptions,
-          webhookFunction: { value: selectedOption || null }
-        });
+        if (this._isMounted) {
+          this.setState({
+            webhookOptions,
+            webhookFunction: { value: selectedOption || null }
+          });
+        }
       } else {
-        this.setState({ webhookOptions });
+        if (this._isMounted) {
+          this.setState({ webhookOptions });
+        }
       }
     } catch (error) {
       console.error('Error fetching webhook options:', error);
     } finally {
-      this.setState({ isLoading: false });
+      if (this._isMounted) {
+        this.setState({ isLoading: false });
+      }
     }
   }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b788d7b and 5206545.

📒 Files selected for processing (1)

• src/components/flow/routers/webhook/WebhookRouterForm.tsx (4 hunks)

⏰ 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: Coverage

🔇 Additional comments (1)

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

429-433: Well-implemented loading state feedback.

The conditional placeholder provides clear user feedback during the webhook options fetch, improving the user experience by indicating that the function list is loading.

[akanshaaa19]

looks good, just small change