refactor(workflow): migrate legacy toast usage to ui toast (#34002)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/workflow/panel/env-panel/__tests__/integration.spec.tsx

@@ -1,11 +1,10 @@
 import type { ReactElement } from 'react'
-import type { IToastProps } from '@/app/components/base/toast/context'
 import type { Shape } from '@/app/components/workflow/store/workflow'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import { ToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { WorkflowContext } from '@/app/components/workflow/context'
 import { createWorkflowStore } from '@/app/components/workflow/store/workflow'
 import EnvItem from '../env-item'
@@ -16,6 +15,17 @@ vi.mock('uuid', () => ({
   v4: () => 'env-created',
 }))
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+  },
+}))
+
+const mockToastError = vi.mocked(toast.error)
+
 const createEnv = (overrides: Partial<EnvironmentVariable> = {}): EnvironmentVariable => ({
   id: 'env-1',
   name: 'api_key',
@@ -29,27 +39,22 @@ const renderWithProviders = (
   ui: ReactElement,
   options: {
     storeState?: Partial<Shape>
-    notify?: (props: IToastProps) => void
   } = {},
 ) => {
   const store = createWorkflowStore({})
-  const notify = options.notify ?? vi.fn<(props: IToastProps) => void>()
 
   if (options.storeState)
     store.setState(options.storeState)
 
   const result = render(
-    <ToastContext.Provider value={{ notify, close: vi.fn() }}>
-      <WorkflowContext.Provider value={store}>
-        {ui}
-      </WorkflowContext.Provider>
-    </ToastContext.Provider>,
+    <WorkflowContext.Provider value={store}>
+      {ui}
+    </WorkflowContext.Provider>,
   )
 
   return {
     ...result,
     store,
-    notify,
   }
 }
 
@@ -153,33 +158,27 @@ describe('EnvPanel integration', () => {
 
   it('should reject invalid and duplicate variable names', async () => {
     const user = userEvent.setup()
-    const notify = vi.fn()
-
     renderWithProviders(
       <VariableModal onClose={vi.fn()} onSave={vi.fn()} />,
       {
         storeState: {
           environmentVariables: [createEnv({ id: 'env-existing', name: 'duplicated', value_type: 'string', value: '1' })],
         },
-        notify,
       },
     )
 
     fireEvent.change(screen.getByPlaceholderText('workflow.env.modal.namePlaceholder'), {
       target: { value: '1bad' },
     })
-    expect(notify).toHaveBeenCalled()
+    expect(mockToastError).toHaveBeenCalled()
 
-    notify.mockClear()
+    mockToastError.mockClear()
     await user.clear(screen.getByPlaceholderText('workflow.env.modal.namePlaceholder'))
     await user.type(screen.getByPlaceholderText('workflow.env.modal.namePlaceholder'), 'duplicated')
     await user.type(screen.getByPlaceholderText('workflow.env.modal.valuePlaceholder'), '42')
     await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-    expect(notify).toHaveBeenCalledWith({
-      type: 'error',
-      message: 'name is existed',
-    })
+    expect(mockToastError).toHaveBeenCalledWith('appDebug.varKeyError.keyAlreadyExists:{"key":"workflow.env.modal.name"}')
   })
 
   it('should load existing secret values and convert them to numbers when editing', async () => {

web/app/components/workflow/panel/env-panel/variable-modal.tsx

@@ -3,12 +3,11 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import { v4 as uuid4 } from 'uuid'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
@@ -24,7 +23,6 @@ const VariableModal = ({
   onSave,
 }: ModalPropsType) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const workflowStore = useWorkflowStore()
   const [type, setType] = React.useState<'string' | 'number' | 'secret'>('string')
   const [name, setName] = React.useState('')
@@ -34,10 +32,7 @@ const VariableModal = ({
   const checkVariableName = (value: string) => {
     const { isValid, errorMessageKey } = checkKeys([value], false)
     if (!isValid) {
-      notify({
-        type: 'error',
-        message: t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: t('env.modal.name', { ns: 'workflow' }) }),
-      })
+      toast.error(t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: t('env.modal.name', { ns: 'workflow' }) }))
       return false
     }
     return true
@@ -54,15 +49,15 @@ const VariableModal = ({
     if (!checkVariableName(name))
       return
     if (!value)
-      return notify({ type: 'error', message: 'value can not be empty' })
+      return toast.error(t('env.modal.valueRequired', { ns: 'workflow' }))
 
     // Add check for duplicate name when editing
     const envList = workflowStore.getState().environmentVariables
     if (env && env.name !== name && envList.some(e => e.name === name))
-      return notify({ type: 'error', message: 'name is existed' })
+      return toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: t('env.modal.name', { ns: 'workflow' }) }))
     // Original check for create new variable
     if (!env && envList.some(e => e.name === name))
-      return notify({ type: 'error', message: 'name is existed' })
+      return toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: t('env.modal.name', { ns: 'workflow' }) }))
 
     onSave({
       id: env ? env.id : uuid4(),