Fix/variable input validation issue (#23300)
This commit is contained in:
@@ -29,6 +29,10 @@ type IToastContext = {
|
||||
close: () => void
|
||||
}
|
||||
|
||||
export type ToastHandle = {
|
||||
clear?: VoidFunction
|
||||
}
|
||||
|
||||
export const ToastContext = createContext<IToastContext>({} as IToastContext)
|
||||
export const useToastContext = () => useContext(ToastContext)
|
||||
const Toast = ({
|
||||
@@ -46,7 +50,7 @@ const Toast = ({
|
||||
|
||||
return <div className={classNames(
|
||||
className,
|
||||
'fixed w-[360px] rounded-xl my-4 mx-8 flex-grow z-[9999] overflow-hidden',
|
||||
'fixed z-[9999] mx-8 my-4 w-[360px] grow overflow-hidden rounded-xl',
|
||||
size === 'md' ? 'p-3' : 'p-2',
|
||||
'border border-components-panel-border-subtle bg-components-panel-bg-blur shadow-sm',
|
||||
'top-0',
|
||||
@@ -127,12 +131,22 @@ Toast.notify = ({
|
||||
className,
|
||||
customComponent,
|
||||
onClose,
|
||||
}: Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent' | 'onClose'>) => {
|
||||
}: Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent' | 'onClose'>): ToastHandle => {
|
||||
const defaultDuring = (type === 'success' || type === 'info') ? 3000 : 6000
|
||||
const toastHandler: ToastHandle = {}
|
||||
|
||||
if (typeof window === 'object') {
|
||||
const holder = document.createElement('div')
|
||||
const root = createRoot(holder)
|
||||
|
||||
toastHandler.clear = () => {
|
||||
if (holder) {
|
||||
root.unmount()
|
||||
holder.remove()
|
||||
}
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
root.render(
|
||||
<ToastContext.Provider value={{
|
||||
notify: noop,
|
||||
@@ -148,14 +162,10 @@ Toast.notify = ({
|
||||
</ToastContext.Provider>,
|
||||
)
|
||||
document.body.appendChild(holder)
|
||||
setTimeout(() => {
|
||||
if (holder) {
|
||||
root.unmount()
|
||||
holder.remove()
|
||||
}
|
||||
onClose?.()
|
||||
}, duration || defaultDuring)
|
||||
setTimeout(toastHandler.clear, duration || defaultDuring)
|
||||
}
|
||||
|
||||
return toastHandler
|
||||
}
|
||||
|
||||
export default Toast
|
||||
|
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import produce from 'immer'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { OutputVar } from '../../../code/types'
|
||||
@@ -9,7 +9,9 @@ import VarTypePicker from './var-type-picker'
|
||||
import Input from '@/app/components/base/input'
|
||||
import type { VarType } from '@/app/components/workflow/types'
|
||||
import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
|
||||
import type { ToastHandle } from '@/app/components/base/toast'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { useDebounceFn } from 'ahooks'
|
||||
|
||||
type Props = {
|
||||
readonly: boolean
|
||||
@@ -27,6 +29,7 @@ const OutputVarList: FC<Props> = ({
|
||||
onRemove,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [toastHandler, setToastHandler] = useState<ToastHandle>()
|
||||
|
||||
const list = outputKeyOrders.map((key) => {
|
||||
return {
|
||||
@@ -34,6 +37,27 @@ const OutputVarList: FC<Props> = ({
|
||||
variable_type: outputs[key]?.type,
|
||||
}
|
||||
})
|
||||
|
||||
const { run: validateVarInput } = useDebounceFn((existingVariables: typeof list, newKey: string) => {
|
||||
const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
|
||||
if (!isValid) {
|
||||
setToastHandler(Toast.notify({
|
||||
type: 'error',
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
|
||||
}))
|
||||
return
|
||||
}
|
||||
if (existingVariables.some(key => key.variable?.trim() === newKey.trim())) {
|
||||
setToastHandler(Toast.notify({
|
||||
type: 'error',
|
||||
message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }),
|
||||
}))
|
||||
}
|
||||
else {
|
||||
toastHandler?.clear?.()
|
||||
}
|
||||
}, { wait: 500 })
|
||||
|
||||
const handleVarNameChange = useCallback((index: number) => {
|
||||
return (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const oldKey = list[index].variable
|
||||
@@ -41,22 +65,8 @@ const OutputVarList: FC<Props> = ({
|
||||
replaceSpaceWithUnderscreInVarNameInput(e.target)
|
||||
const newKey = e.target.value
|
||||
|
||||
const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
|
||||
if (!isValid) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (list.map(item => item.variable?.trim()).includes(newKey.trim())) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }),
|
||||
})
|
||||
return
|
||||
}
|
||||
toastHandler?.clear?.()
|
||||
validateVarInput(list.toSpliced(index, 1), newKey)
|
||||
|
||||
const newOutputs = produce(outputs, (draft) => {
|
||||
draft[newKey] = draft[oldKey]
|
||||
@@ -64,8 +74,7 @@ const OutputVarList: FC<Props> = ({
|
||||
})
|
||||
onChange(newOutputs, index, newKey)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [list, onChange, outputs, outputKeyOrders])
|
||||
}, [list, onChange, outputs, outputKeyOrders, validateVarInput])
|
||||
|
||||
const handleVarTypeChange = useCallback((index: number) => {
|
||||
return (value: string) => {
|
||||
@@ -75,7 +84,6 @@ const OutputVarList: FC<Props> = ({
|
||||
})
|
||||
onChange(newOutputs)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [list, onChange, outputs, outputKeyOrders])
|
||||
|
||||
const handleVarRemove = useCallback((index: number) => {
|
||||
|
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useMemo } from 'react'
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import produce from 'immer'
|
||||
import RemoveButton from '../remove-button'
|
||||
@@ -9,11 +9,13 @@ import Input from '@/app/components/base/input'
|
||||
import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
|
||||
import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
|
||||
import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
|
||||
import type { ToastHandle } from '@/app/components/base/toast'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { ReactSortable } from 'react-sortablejs'
|
||||
import { v4 as uuid4 } from 'uuid'
|
||||
import { RiDraggable } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useDebounceFn } from 'ahooks'
|
||||
|
||||
type Props = {
|
||||
nodeId: string
|
||||
@@ -39,6 +41,7 @@ const VarList: FC<Props> = ({
|
||||
isSupportFileVar = true,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [toastHandle, setToastHandle] = useState<ToastHandle>()
|
||||
|
||||
const listWithIds = useMemo(() => list.map((item) => {
|
||||
const id = uuid4()
|
||||
@@ -48,27 +51,35 @@ const VarList: FC<Props> = ({
|
||||
}
|
||||
}), [list])
|
||||
|
||||
const { run: validateVarInput } = useDebounceFn((list: Variable[], newKey: string) => {
|
||||
const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
|
||||
if (!isValid) {
|
||||
setToastHandle(Toast.notify({
|
||||
type: 'error',
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
|
||||
}))
|
||||
return
|
||||
}
|
||||
if (list.some(item => item.variable?.trim() === newKey.trim())) {
|
||||
console.log('new key', newKey.trim())
|
||||
setToastHandle(Toast.notify({
|
||||
type: 'error',
|
||||
message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }),
|
||||
}))
|
||||
}
|
||||
else {
|
||||
toastHandle?.clear?.()
|
||||
}
|
||||
}, { wait: 500 })
|
||||
|
||||
const handleVarNameChange = useCallback((index: number) => {
|
||||
return (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
replaceSpaceWithUnderscreInVarNameInput(e.target)
|
||||
|
||||
const newKey = e.target.value
|
||||
const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
|
||||
if (!isValid) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (list.map(item => item.variable?.trim()).includes(newKey.trim())) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }),
|
||||
})
|
||||
return
|
||||
}
|
||||
toastHandle?.clear?.()
|
||||
validateVarInput(list.toSpliced(index, 1), newKey)
|
||||
|
||||
onVarNameChange?.(list[index].variable, newKey)
|
||||
const newList = produce(list, (draft) => {
|
||||
@@ -76,7 +87,7 @@ const VarList: FC<Props> = ({
|
||||
})
|
||||
onChange(newList)
|
||||
}
|
||||
}, [list, onVarNameChange, onChange])
|
||||
}, [list, onVarNameChange, onChange, validateVarInput])
|
||||
|
||||
const handleVarReferenceChange = useCallback((index: number) => {
|
||||
return (value: ValueSelector | string, varKindType: VarKindType, varInfo?: Var) => {
|
||||
|
Reference in New Issue
Block a user