diff --git a/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts b/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts index 918b97a0f6..9d7ef407af 100644 --- a/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts +++ b/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts @@ -1,6 +1,8 @@ -import { useCallback } from 'react' +import { useCallback, useState } from 'react' import produce from 'immer' +import { useBoolean } from 'ahooks' import { type OutputVar } from '../../code/types' +import type { ValueSelector } from '@/app/components/workflow/types' import { VarType } from '@/app/components/workflow/types' import { useWorkflow, @@ -22,7 +24,7 @@ function useOutputVarList({ outputKeyOrders = [], onOutputKeyOrdersChange, }: Params) { - const { handleOutVarRenameChange } = useWorkflow() + const { handleOutVarRenameChange, isVarUsedInNodes, removeUsedVarInNodes } = useWorkflow() const handleVarsChange = useCallback((newVars: OutputVar, changedIndex?: number, newKey?: string) => { const newInputs = produce(inputs, (draft: any) => { @@ -56,19 +58,38 @@ function useOutputVarList({ onOutputKeyOrdersChange([...outputKeyOrders, newKey]) }, [inputs, setInputs, varKey, outputKeyOrders, onOutputKeyOrdersChange]) + const [isShowRemoveVarConfirm, { + setTrue: showRemoveVarConfirm, + setFalse: hideRemoveVarConfirm, + }] = useBoolean(false) + const [removedVar, setRemovedVar] = useState([]) + const removeVarInNode = useCallback(() => { + removeUsedVarInNodes(removedVar) + hideRemoveVarConfirm() + }, [hideRemoveVarConfirm, removeUsedVarInNodes, removedVar]) const handleRemoveVariable = useCallback((index: number) => { const key = outputKeyOrders[index] + + if (isVarUsedInNodes([id, key])) { + showRemoveVarConfirm() + setRemovedVar([id, key]) + return + } + const newInputs = produce(inputs, (draft: any) => { delete draft[varKey][key] }) setInputs(newInputs) onOutputKeyOrdersChange(outputKeyOrders.filter((_, i) => i !== index)) - }, [inputs, setInputs, varKey, outputKeyOrders, onOutputKeyOrdersChange]) + }, [outputKeyOrders, isVarUsedInNodes, id, inputs, setInputs, onOutputKeyOrdersChange, showRemoveVarConfirm, varKey]) return { handleVarsChange, handleAddVariable, handleRemoveVariable, + isShowRemoveVarConfirm, + hideRemoveVarConfirm, + onRemoveVarConfirm: removeVarInNode, } } diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx index 087f3cd758..b7c94d4856 100644 --- a/web/app/components/workflow/nodes/code/panel.tsx +++ b/web/app/components/workflow/nodes/code/panel.tsx @@ -1,6 +1,7 @@ import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' +import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm' import useConfig from './use-config' import type { CodeNodeType } from './types' import { CodeLanguage } from './types' @@ -14,6 +15,7 @@ import TypeSelector from '@/app/components/workflow/nodes/_base/components/selec import type { NodePanelProps } from '@/app/components/workflow/types' import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form' import ResultPanel from '@/app/components/workflow/run/result-panel' + const i18nPrefix = 'workflow.nodes.code' const codeLanguages = [ @@ -44,6 +46,9 @@ const Panel: FC> = ({ handleVarsChange, handleAddOutputVariable, filterVar, + isShowRemoveVarConfirm, + hideRemoveVarConfirm, + onRemoveVarConfirm, // single run isShowSingleRun, hideSingleRun, @@ -125,6 +130,11 @@ const Panel: FC> = ({ /> ) } + ) } diff --git a/web/app/components/workflow/nodes/code/use-config.ts b/web/app/components/workflow/nodes/code/use-config.ts index 9d86a4e2a9..1ae4533b2b 100644 --- a/web/app/components/workflow/nodes/code/use-config.ts +++ b/web/app/components/workflow/nodes/code/use-config.ts @@ -85,7 +85,14 @@ const useConfig = (id: string, payload: CodeNodeType) => { setInputs(newInputs) }, [allLanguageDefault, inputs, setInputs]) - const { handleVarsChange, handleAddVariable: handleAddOutputVariable, handleRemoveVariable } = useOutputVarList({ + const { + handleVarsChange, + handleAddVariable: handleAddOutputVariable, + handleRemoveVariable, + isShowRemoveVarConfirm, + hideRemoveVarConfirm, + onRemoveVarConfirm, + } = useOutputVarList({ id, inputs, setInputs, @@ -142,6 +149,9 @@ const useConfig = (id: string, payload: CodeNodeType) => { handleVarsChange, filterVar, handleAddOutputVariable, + isShowRemoveVarConfirm, + hideRemoveVarConfirm, + onRemoveVarConfirm, // single run isShowSingleRun, hideSingleRun,