feat: support config modal edit

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -19,10 +19,8 @@ import Switch from '@/app/components/base/switch'
 export type IConfigModalProps = {
   isCreate?: boolean
   payload?: InputVar
-  type?: string
   isShow: boolean
   onClose: () => void
-  // onConfirm: (newValue: { type: string; value: any }) => void
   onConfirm: (newValue: InputVar) => void
 }
 
@@ -54,13 +52,20 @@ const ConfigModal: FC<IConfigModalProps> = ({
   }, [])
 
   const handleConfirm = () => {
+    if (!tempPayload.variable) {
+      Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.varNameRequired') })
+      return
+    }
+    if (!tempPayload.label) {
+      Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.labelNameRequired') })
+      return
+    }
     if (isStringInput) {
       onConfirm(tempPayload)
-      // onConfirm({ type: type, value: tempMaxLength })
     }
     else {
       if (options?.length === 0) {
-        Toast.notify({ type: 'error', message: 'At least one option requied' })
+        Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.atLeastOneOption') })
         return
       }
       const obj: Record<string, boolean> = {}
@@ -73,7 +78,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
         obj[o] = true
       })
       if (hasRepeatedItem) {
-        Toast.notify({ type: 'error', message: 'Has repeat items' })
+        Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.optionRepeat') })
         return
       }
       onConfirm(tempPayload)
@@ -124,7 +129,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
           )}
           {type === InputVarType.select && (
             <Field title={t('appDebug.variableConig.options')}>
-              <ConfigSelect options={options!} onChange={handlePayloadChange('options')} />
+              <ConfigSelect options={options || []} onChange={handlePayloadChange('options')} />
             </Field>
           )}
 

web/app/components/workflow/nodes/start/components/var-item.tsx

@@ -1,13 +1,14 @@
 'use client'
 import type { FC } from 'react'
-import React, { useRef } from 'react'
-import { useHover } from 'ahooks'
+import React, { useCallback, useRef } from 'react'
+import { useBoolean, useHover } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
 import type { InputVar } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 
 type Props = {
   readonly: boolean
@@ -19,11 +20,22 @@ type Props = {
 const VarItem: FC<Props> = ({
   readonly,
   payload,
+  onChange,
+  onRemove,
 }) => {
   const { t } = useTranslation()
 
   const ref = useRef(null)
   const isHovering = useHover(ref)
+  const [isShowEditVarModal, {
+    setTrue: showEditVarModal,
+    setFalse: hideEditVarModal,
+  }] = useBoolean(false)
+
+  const handlePayloadChange = useCallback((payload: InputVar) => {
+    onChange(payload)
+    hideEditVarModal()
+  }, [onChange, hideEditVarModal])
   return (
     <div ref={ref} className='flex items-center h-8 justify-between px-2.5 bg-white rounded-lg border border-gray-200 shadow-xs cursor-pointer hover:shadow-md'>
       <div className='flex items-center space-x-1 grow w-0'>
@@ -44,15 +56,25 @@ const VarItem: FC<Props> = ({
           )
           : (!readonly && (
             <>
-              <div className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
+              <div onClick={showEditVarModal} className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
                 <Edit03 className='w-4 h-4 text-gray-500' />
               </div>
-              <div className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
+              <div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
                 <Trash03 className='w-4 h-4 text-gray-500' />
               </div>
             </>
           ))}
       </div>
+      {
+        isShowEditVarModal && (
+          <ConfigVarModal
+            isShow
+            payload={payload}
+            onClose={hideEditVarModal}
+            onConfirm={handlePayloadChange}
+          />
+        )
+      }
     </div>
   )
 }