From 7544b5ec9a20029b405d0f1211296fcd4cccf929 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Wed, 3 Sep 2025 14:49:56 +0800
Subject: [PATCH] fix: delete var of webhook (#25038)

---
 .../nodes/trigger-webhook/use-config.ts       | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/web/app/components/workflow/nodes/trigger-webhook/use-config.ts b/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
index 9023631704..c1c86eceac 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
+++ b/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import type { HttpMethod, ParameterType, WebhookHeader, WebhookParameter, WebhookTriggerNodeType } from './types'
 import { getArrayElementType, isArrayType } from './types'
 
-import { useNodesReadOnly } from '@/app/components/workflow/hooks'
+import { useNodesReadOnly, useWorkflow } from '@/app/components/workflow/hooks'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { fetchWebhookUrl } from '@/service/apps'
@@ -18,6 +18,7 @@ const useConfig = (id: string, payload: WebhookTriggerNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<WebhookTriggerNodeType>(id, payload)
   const appId = useAppStore.getState().appDetail?.id
+  const { isVarUsedInNodes, removeUsedVarInNodes } = useWorkflow()
 
   const handleMethodChange = useCallback((method: HttpMethod) => {
     setInputs(produce(inputs, (draft) => {
@@ -64,6 +65,7 @@ const useConfig = (id: string, payload: WebhookTriggerNodeType) => {
   const syncVariablesInDraft = useCallback((
     draft: WebhookTriggerNodeType,
     newData: (WebhookParameter | WebhookHeader)[],
+    sourceType: 'param' | 'header' | 'body',
   ) => {
     if (!draft.variables)
       draft.variables = []
@@ -78,6 +80,25 @@ const useConfig = (id: string, payload: WebhookTriggerNodeType) => {
       return false
     }
 
+    // Create set of new variable names for this source
+    const newVarNames = new Set(newData.map(item => item.name))
+
+    // Find variables from current source that will be deleted and clean up references
+    draft.variables
+      .filter(v => v.label === sourceType && !newVarNames.has(v.variable))
+      .forEach((v) => {
+        // Clean up references if variable is used in other nodes
+        if (isVarUsedInNodes([id, v.variable]))
+          removeUsedVarInNodes([id, v.variable])
+      })
+
+    // Remove variables that no longer exist in newData for this specific source type
+    draft.variables = draft.variables.filter((v) => {
+      // Keep variables from other sources
+      if (v.label !== sourceType) return true
+      return newVarNames.has(v.variable)
+    })
+
     // Add or update variables
     newData.forEach((item) => {
       const varName = item.name
@@ -85,11 +106,11 @@ const useConfig = (id: string, payload: WebhookTriggerNodeType) => {
 
       const inputVarType = 'type' in item
         ? toInputVarType(item.type)
-        : InputVarType.textInput // Headers default to text
+        : InputVarType.textInput
 
       const newVar: InputVar = {
         type: inputVarType,
-        label: varName,
+        label: sourceType, // Use sourceType as label to identify source
         variable: varName,
         required: item.required,
       }
@@ -101,26 +122,26 @@ const useConfig = (id: string, payload: WebhookTriggerNodeType) => {
     })
 
     return true
-  }, [toInputVarType, t])
+  }, [toInputVarType, t, id, isVarUsedInNodes, removeUsedVarInNodes])
 
   const handleParamsChange = useCallback((params: WebhookParameter[]) => {
     setInputs(produce(inputs, (draft) => {
       draft.params = params
-      syncVariablesInDraft(draft, params)
+      syncVariablesInDraft(draft, params, 'param')
     }))
   }, [inputs, setInputs, syncVariablesInDraft])
 
   const handleHeadersChange = useCallback((headers: WebhookHeader[]) => {
     setInputs(produce(inputs, (draft) => {
       draft.headers = headers
-      syncVariablesInDraft(draft, headers)
+      syncVariablesInDraft(draft, headers, 'header')
     }))
   }, [inputs, setInputs, syncVariablesInDraft])
 
   const handleBodyChange = useCallback((body: WebhookParameter[]) => {
     setInputs(produce(inputs, (draft) => {
       draft.body = body
-      syncVariablesInDraft(draft, body)
+      syncVariablesInDraft(draft, body, 'body')
     }))
   }, [inputs, setInputs, syncVariablesInDraft])