refactor(web): migrate remaining toast usage (#34433)

web/app/components/base/block-input/index.tsx

@@ -1,17 +1,14 @@
 'use client'
-
 import type { ChangeEvent, FC } from 'react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 import VarHighlight from '../../app/configuration/base/var-highlight'
-import Toast from '../toast'
-
 // regex to match the {{}} and replace it with a span
 const regex = /\{\{([^}]+)\}\}/g
-
 export const getInputKeys = (value: string) => {
   const keys = value.match(regex)?.map((item) => {
     return item.replace('{{', '').replace('}}', '')
@@ -22,13 +19,11 @@ export const getInputKeys = (value: string) => {
   keys.forEach((key) => {
     if (keyObj[key])
       return
-
     keyObj[key] = true
     res.push(key)
   })
   return res
 }
-
 export type IBlockInputProps = {
   value: string
   className?: string // wrapper class
@@ -36,20 +31,13 @@ export type IBlockInputProps = {
   readonly?: boolean
   onConfirm?: (value: string, keys: string[]) => void
 }
-
-const BlockInput: FC<IBlockInputProps> = ({
-  value = '',
-  className,
-  readonly = false,
-  onConfirm,
-}) => {
+const BlockInput: FC<IBlockInputProps> = ({ value = '', className, readonly = false, onConfirm }) => {
   const { t } = useTranslation()
   // current is used to store the current value of the contentEditable element
   const [currentValue, setCurrentValue] = useState<string>(value)
   useEffect(() => {
     setCurrentValue(value)
   }, [value])
-
   const contentEditableRef = useRef<HTMLTextAreaElement>(null)
   const [isEditing, setIsEditing] = useState<boolean>(false)
   useEffect(() => {
@@ -57,57 +45,42 @@ const BlockInput: FC<IBlockInputProps> = ({
       // TODO: Focus at the click position
       if (currentValue)
         contentEditableRef.current.setSelectionRange(currentValue.length, currentValue.length)
-
       contentEditableRef.current.focus()
     }
   }, [isEditing])
-
   const style = cn({
     'block h-full w-full break-all border-0 px-4 py-2 text-sm text-gray-900 outline-0': true,
     'block-input--editing': isEditing,
   })
-
   const renderSafeContent = (value: string) => {
     const parts = value.split(/(\{\{[^}]+\}\}|\n)/g)
     return parts.map((part, index) => {
       const variableMatch = /^\{\{([^}]+)\}\}$/.exec(part)
       if (variableMatch) {
-        return (
-          <VarHighlight
-            key={`var-${index}`}
-            name={variableMatch[1]}
-          />
-        )
+        return (<VarHighlight key={`var-${index}`} name={variableMatch[1]} />)
       }
       if (part === '\n')
         return <br key={`br-${index}`} />
-
       return <span key={`text-${index}`}>{part}</span>
     })
   }
-
   // Not use useCallback. That will cause out callback get old data.
   const handleSubmit = (value: string) => {
     if (onConfirm) {
       const keys = getInputKeys(value)
       const result = checkKeys(keys)
       if (!result.isValid) {
-        Toast.notify({
-          type: 'error',
-          message: t(`varKeyError.${result.errorMessageKey}`, { ns: 'appDebug', key: result.errorKey }),
-        })
+        toast.error(t(`varKeyError.${result.errorMessageKey}`, { ns: 'appDebug', key: result.errorKey }))
         return
       }
       onConfirm(value, keys)
     }
   }
-
   const onValueChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value
     setCurrentValue(value)
     handleSubmit(value)
   }, [])
-
   // Prevent rerendering caused cursor to jump to the start of the contentEditable element
   const TextAreaContentView = () => {
     return (
@@ -116,10 +89,8 @@ const BlockInput: FC<IBlockInputProps> = ({
       </div>
     )
   }
-
   const placeholder = ''
   const editAreaClassName = 'focus:outline-none bg-transparent text-sm'
-
   const textAreaContent = (
     <div className={cn(readonly ? 'max-h-[180px] pb-5' : 'h-[180px]', 'overflow-y-auto')} onClick={() => !readonly && setIsEditing(true)}>
       {isEditing
@@ -134,10 +105,10 @@ const BlockInput: FC<IBlockInputProps> = ({
                 onBlur={() => {
                   blur()
                   setIsEditing(false)
-                // click confirm also make blur. Then outer value is change. So below code has problem.
-                // setTimeout(() => {
-                //   handleCancel()
-                // }, 1000)
+                  // click confirm also make blur. Then outer value is change. So below code has problem.
+                  // setTimeout(() => {
+                  //   handleCancel()
+                  // }, 1000)
                 }}
               />
             </div>
@@ -145,7 +116,6 @@ const BlockInput: FC<IBlockInputProps> = ({
         : <TextAreaContentView />}
     </div>
   )
-
   return (
     <div className={cn('block-input w-full overflow-y-auto rounded-xl border-none bg-white')} data-testid="block-input">
       {textAreaContent}
@@ -159,5 +129,4 @@ const BlockInput: FC<IBlockInputProps> = ({
     </div>
   )
 }
-
 export default React.memo(BlockInput)