refactor: update email configuration modal to use selector for user email and enhance tooltip functionality in delivery method item

web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx

@@ -9,7 +9,7 @@ import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
-import { useAppContext } from '@/context/app-context'
+import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import MailBodyInput from './mail-body-input'
 import Recipient from './recipient'
 
@@ -29,7 +29,7 @@ const EmailConfigureModal = ({
   config,
 }: EmailConfigureModalProps) => {
   const { t } = useTranslation()
-  const { userProfile } = useAppContext()
+  const email = useAppContextWithSelector(s => s.userProfile.email)
   const [recipients, setRecipients] = useState(config?.recipients || { whole_workspace: false, items: [] })
   const [subject, setSubject] = useState(config?.subject || '')
   const [body, setBody] = useState(config?.body || '')
@@ -132,8 +132,8 @@ const EmailConfigureModal = ({
               <Trans
                 i18nKey={`${i18nPrefix}.deliveryMethod.emailConfigure.debugModeTip1`}
                 ns="workflow"
-                components={{ email: <span className="body-md-medium text-text-primary">{userProfile.email}</span> }}
-                values={{ email: userProfile.email }}
+                components={{ email: <span className="body-md-medium text-text-primary">{email}</span> }}
+                values={{ email }}
               />
               <div>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.debugModeTip2`, { ns: 'workflow' })}</div>
             </div>

web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react'
 import type { DeliveryMethod, EmailConfig } from '../../types'
 import type {
   Node,
@@ -10,13 +11,15 @@ import {
   RiRobot2Fill,
   RiSendPlane2Line,
 } from '@remixicon/react'
-import * as React from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge/index'
 import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
+import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { cn } from '@/utils/classnames'
 import { DeliveryMethodType } from '../../types'
 import EmailConfigureModal from './email-configure-modal'
@@ -24,7 +27,7 @@ import TestEmailSender from './test-email-sender'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type DeliveryMethodItemProps = {
   nodeId: string
   method: DeliveryMethod
   nodesOutputVars?: NodeOutPutVar[]
@@ -35,7 +38,7 @@ type Props = {
   readonly?: boolean
 }
 
-const DeliveryMethodItem: React.FC<Props> = ({
+const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
   nodeId,
   method,
   nodesOutputVars,
@@ -46,9 +49,10 @@ const DeliveryMethodItem: React.FC<Props> = ({
   readonly,
 }) => {
   const { t } = useTranslation()
-  const [isHovering, setIsHovering] = React.useState(false)
-  const [showEmailModal, setShowEmailModal] = React.useState(false)
-  const [showTestEmailModal, setShowTestEmailModal] = React.useState(false)
+  const email = useAppContextWithSelector(s => s.userProfile.email)
+  const [isHovering, setIsHovering] = useState(false)
+  const [showEmailModal, setShowEmailModal] = useState(false)
+  const [showTestEmailModal, setShowTestEmailModal] = useState(false)
 
   const handleEnableStatusChange = (enabled: boolean) => {
     onChange({
@@ -64,10 +68,23 @@ const DeliveryMethodItem: React.FC<Props> = ({
     })
   }
 
+  const emailSenderTooltipContent = useMemo(() => {
+    if (method.type !== DeliveryMethodType.Email) {
+      return ''
+    }
+    if (method.config?.debug_mode) {
+      return t(`${i18nPrefix}.deliveryMethod.emailSender.testSendTipInDebugMode`, { ns: 'workflow', email })
+    }
+    return t(`${i18nPrefix}.deliveryMethod.emailSender.testSendTip`, { ns: 'workflow' })
+  }, [method.type, method.config?.debug_mode, t, email])
+
   return (
     <>
       <div
-        className={cn('group flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-1.5 pr-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isHovering && 'border-state-destructive-border bg-state-destructive-hover hover:bg-state-destructive-hover')}
+        className={cn(
+          'group flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-1.5 pr-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
+          isHovering && 'border-state-destructive-border bg-state-destructive-hover hover:bg-state-destructive-hover',
+        )}
       >
         <div className="flex items-center gap-1.5">
           {method.type === DeliveryMethodType.WebApp && (
@@ -88,25 +105,41 @@ const DeliveryMethodItem: React.FC<Props> = ({
             <div className="hidden items-end gap-1 group-hover:flex">
               {method.type === DeliveryMethodType.Email && method.config && (
                 <>
-                  <ActionButton onClick={() => setShowTestEmailModal(true)}>
-                    <RiSendPlane2Line className="h-4 w-4" />
-                  </ActionButton>
-                  <ActionButton onClick={() => setShowEmailModal(true)}>
-                    <RiEqualizer2Line className="h-4 w-4" />
-                  </ActionButton>
+                  <Tooltip
+                    popupContent={emailSenderTooltipContent}
+                    asChild={false}
+                  >
+                    <ActionButton onClick={() => setShowTestEmailModal(true)}>
+                      <RiSendPlane2Line className="h-4 w-4" />
+                    </ActionButton>
+                  </Tooltip>
+                  <Tooltip
+                    popupContent={t('common.configure', { ns: 'workflow' })}
+                    asChild={false}
+                  >
+                    <ActionButton onClick={() => setShowEmailModal(true)}>
+                      <RiEqualizer2Line className="h-4 w-4" />
+                    </ActionButton>
+
+                  </Tooltip>
                 </>
               )}
-              <div
-                onMouseEnter={() => setIsHovering(true)}
-                onMouseLeave={() => setIsHovering(false)}
+              <Tooltip
+                popupContent={t('operation.remove', { ns: 'common' })}
+                asChild={false}
               >
-                <ActionButton
-                  state={isHovering ? ActionButtonState.Destructive : ActionButtonState.Default}
-                  onClick={() => onDelete(method.type)}
+                <div
+                  onMouseEnter={() => setIsHovering(true)}
+                  onMouseLeave={() => setIsHovering(false)}
                 >
-                  <RiDeleteBinLine className="h-4 w-4" />
-                </ActionButton>
-              </div>
+                  <ActionButton
+                    state={isHovering ? ActionButtonState.Destructive : ActionButtonState.Default}
+                    onClick={() => onDelete(method.type)}
+                  >
+                    <RiDeleteBinLine className="h-4 w-4" />
+                  </ActionButton>
+                </div>
+              </Tooltip>
             </div>
           )}
           {(method.config || method.type === DeliveryMethodType.WebApp) && (

web/i18n/en-US/workflow.json

@@ -531,6 +531,8 @@
   "nodes.humanInput.deliveryMethod.emailSender.done": "Email Sent",
   "nodes.humanInput.deliveryMethod.emailSender.optional": "(optional)",
   "nodes.humanInput.deliveryMethod.emailSender.send": "Send Email",
+  "nodes.humanInput.deliveryMethod.emailSender.testSendTip": "Send test emails to your configured recipients",
+  "nodes.humanInput.deliveryMethod.emailSender.testSendTipInDebugMode": "Send a test email to {{email}}",
   "nodes.humanInput.deliveryMethod.emailSender.tip": "It is recommended to <strong>enable Debug Mode</strong> for testing email delivery.",
   "nodes.humanInput.deliveryMethod.emailSender.title": "Test Email Sender",
   "nodes.humanInput.deliveryMethod.emailSender.vars": "Variables in Form Content",

web/i18n/zh-Hans/workflow.json

@@ -531,6 +531,8 @@
   "nodes.humanInput.deliveryMethod.emailSender.done": "邮件已发送",
   "nodes.humanInput.deliveryMethod.emailSender.optional": "(可选)",
   "nodes.humanInput.deliveryMethod.emailSender.send": "发送邮件",
+  "nodes.humanInput.deliveryMethod.emailSender.testSendTip": "发送测试邮件到您的配置收件人",
+  "nodes.humanInput.deliveryMethod.emailSender.testSendTipInDebugMode": "发送测试邮件到 {{email}}",
   "nodes.humanInput.deliveryMethod.emailSender.tip": "建议为测试邮件发送启用 <strong>调试模式</strong>。",
   "nodes.humanInput.deliveryMethod.emailSender.title": "测试邮件发送器",
   "nodes.humanInput.deliveryMethod.emailSender.vars": "表单内容中的变量",