From a32465eeb8be1e5c655c7bb29d574aac90967ceb Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 29 Mar 2024 11:37:16 +0800
Subject: [PATCH] chore: handle key exists check

---
 .../config-var/config-modal/index.tsx         | 26 ++++++++++++++++++-
 .../app/configuration/config-var/index.tsx    |  2 +-
 .../nodes/start/components/var-item.tsx       |  3 +++
 .../nodes/start/components/var-list.tsx       |  1 +
 .../components/workflow/nodes/start/panel.tsx |  1 +
 5 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 23163a8991..9f3009ee29 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -20,6 +20,7 @@ export type IConfigModalProps = {
   isCreate?: boolean
   payload?: InputVar
   isShow: boolean
+  varKeys?: string[]
   onClose: () => void
   onConfirm: (newValue: InputVar, moreInfo?: MoreInfo) => void
 }
@@ -30,6 +31,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
   isCreate,
   payload,
   isShow,
+  varKeys = [],
   onClose,
   onConfirm,
 }) => {
@@ -52,14 +54,28 @@ const ConfigModal: FC<IConfigModalProps> = ({
         }
       }
       setTempPayload((prev) => {
-        return {
+        const newPayload = {
           ...prev,
           [key]: value,
         }
+
+        return newPayload
       })
     }
   }, [t])
 
+  const handleVarKeyBlur = useCallback((e: any) => {
+    if (tempPayload.label)
+      return
+
+    setTempPayload((prev) => {
+      return {
+        ...prev,
+        label: e.target.value,
+      }
+    })
+  }, [tempPayload])
+
   const handleConfirm = () => {
     const moreInfo = tempPayload.variable === payload?.variable
       ? undefined
@@ -71,6 +87,13 @@ const ConfigModal: FC<IConfigModalProps> = ({
       Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.varNameRequired') })
       return
     }
+    if (varKeys.map(key => key?.trim()).includes(tempPayload.variable.trim())) {
+      Toast.notify({
+        type: 'error',
+        message: t('appDebug.varKeyError.keyAlreadyExists', { key: tempPayload.variable }),
+      })
+      return
+    }
     if (!tempPayload.label) {
       Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.labelNameRequired') })
       return
@@ -125,6 +148,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
               className={inputClassName}
               value={variable}
               onChange={e => handlePayloadChange('variable')(e.target.value)}
+              onBlur={handleVarKeyBlur}
             />
           </Field>
           <Field title={t('appDebug.variableConig.labelName')}>
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 00933a3919..45bb1d05c7 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -54,7 +54,6 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
   const {
     mode,
     dataSets,
-    externalDataToolsConfig,
   } = useContext(ConfigContext)
   const { eventEmitter } = useEventEmitterContextContext()
 
@@ -381,6 +380,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
             updatePromptVariableItem(item)
             hideEditModal()
           }}
+          varKeys={promptVariables.map(v => v.key)}
         />
       )}
 
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index ebe2cc20e9..dbc44fa55b 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -16,6 +16,7 @@ type Props = {
   onChange?: (item: InputVar, moreInfo?: MoreInfo) => void
   onRemove?: () => void
   rightContent?: JSX.Element
+  varKeys?: string[]
 }
 
 const VarItem: FC<Props> = ({
@@ -24,6 +25,7 @@ const VarItem: FC<Props> = ({
   onChange = () => { },
   onRemove = () => { },
   rightContent,
+  varKeys = [],
 }) => {
   const { t } = useTranslation()
 
@@ -78,6 +80,7 @@ const VarItem: FC<Props> = ({
             payload={payload}
             onClose={hideEditVarModal}
             onConfirm={handlePayloadChange}
+            varKeys={varKeys}
           />
         )
       }
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index f35ab77b32..90a7809f01 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -61,6 +61,7 @@ const VarList: FC<Props> = ({
           payload={item}
           onChange={handleVarChange(index)}
           onRemove={handleVarRemove(index)}
+          varKeys={list.map(item => item.variable)}
         />
       ))}
     </div>
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 9ab362c0a0..41c365f484 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -93,6 +93,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
           isShow={isShowAddVarModal}
           onClose={hideAddVarModal}
           onConfirm={handleAddVarConfirm}
+          varKeys={inputs.variables.map(v => v.variable)}
         />
       )}