test email sender

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

@@ -13,6 +13,7 @@ import type {
 const i18nPrefix = 'workflow.nodes.humanInput'
 
 type Props = {
+  nodeId: string
   value: DeliveryMethod[]
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
@@ -20,6 +21,7 @@ type Props = {
 }
 
 const DeliveryMethodForm: React.FC<Props> = ({
+  nodeId,
   value,
   nodesOutputVars,
   availableNodes,
@@ -69,6 +71,7 @@ const DeliveryMethodForm: React.FC<Props> = ({
         <div className='space-y-1'>
           {value.map((method, index) => (
             <MethodItem
+              nodeId={nodeId}
               method={method}
               key={index}
               onChange={handleMethodChange}

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

@@ -25,6 +25,7 @@ import TestEmailSender from './test-email-sender'
 const i18nPrefix = 'workflow.nodes.humanInput'
 
 type Props = {
+  nodeId: string
   method: DeliveryMethod
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
@@ -33,6 +34,7 @@ type Props = {
 }
 
 const DeliveryMethodItem: React.FC<Props> = ({
+  nodeId,
   method,
   nodesOutputVars,
   availableNodes,
@@ -134,6 +136,8 @@ const DeliveryMethodItem: React.FC<Props> = ({
       )}
       {showTestEmailModal && (
         <TestEmailSender
+          nodeId={nodeId}
+          deliveryId={method.id}
           isShow={showTestEmailModal}
           config={method.config as EmailConfig}
           nodesOutputVars={nodesOutputVars}

web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx

@@ -21,7 +21,9 @@ import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
 import { InputVarType, VarType } from '@/app/components/workflow/types'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import { fetchMembers } from '@/service/common'
+import { useTestEmailSender } from '@/service/use-workflow'
 import { noop, unionBy } from 'lodash-es'
 import { isOutput } from '../../utils'
 import cn from '@/utils/classnames'
@@ -29,6 +31,8 @@ import cn from '@/utils/classnames'
 const i18nPrefix = 'workflow.nodes.humanInput'
 
 type EmailConfigureModalProps = {
+  nodeId: string
+  deliveryId: string
   isShow: boolean
   onClose: () => void
   onConfirm: (data: any) => void
@@ -60,6 +64,8 @@ const getOriginVar = (valueSelector: string[], list: NodeOutPutVar[]) => {
 }
 
 const EmailSenderModal = ({
+  nodeId,
+  deliveryId,
   isShow,
   onClose,
   onConfirm,
@@ -69,6 +75,8 @@ const EmailSenderModal = ({
 }: EmailConfigureModalProps) => {
   const { t } = useTranslation()
   const { userProfile, currentWorkspace } = useAppContext()
+  const appDetail = useAppStore(state => state.appDetail)
+  const { mutateAsync: testEmailSender } = useTestEmailSender()
 
   const debugEnabled = !!config?.debug_mode
   const onlyWholeTeam = config?.recipients?.whole_workspace && (!config?.recipients?.items || config?.recipients?.items.length === 0)
@@ -123,6 +131,7 @@ const EmailSenderModal = ({
 
   const [inputs, setInputs] = useState<Record<string, any>>({})
   const [collapsed, setCollapsed] = useState(true)
+  const [sendingEmail, setSendingEmail] = useState(false)
   const [done, setDone] = useState(false)
 
   const handleValueChange = (variable: string, v: string) => {
@@ -132,10 +141,20 @@ const EmailSenderModal = ({
     })
   }
 
-  const handleConfirm = useCallback(() => {
-    // TODO send api
-    setDone(true)
-  }, [onConfirm])
+  const handleConfirm = useCallback(async () => {
+    setSendingEmail(true)
+    try {
+      await testEmailSender({
+        appID: appDetail?.id || '',
+        nodeID: nodeId,
+        deliveryID: deliveryId,
+      })
+      setDone(true)
+    }
+    finally {
+      setSendingEmail(false)
+    }
+  }, [appDetail, onConfirm, nodeId, deliveryId, testEmailSender])
 
   if (done) {
     return (
@@ -302,6 +321,8 @@ const EmailSenderModal = ({
       </>
       <div className='flex flex-row-reverse gap-2 p-6 pt-5'>
         <Button
+          disabled={sendingEmail}
+          loading={sendingEmail}
           variant='primary'
           onClick={handleConfirm}
         >

web/app/components/workflow/nodes/human-input/panel.tsx

@@ -73,6 +73,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
     <div className='py-2'>
       {/* delivery methods */}
       <DeliveryMethod
+        nodeId={id}
         value={inputs.delivery_methods || []}
         nodesOutputVars={availableVars}
         availableNodes={availableNodesWithParent}

web/service/use-workflow.ts

@@ -217,3 +217,10 @@ export const useEditInspectorVar = (flowType: FlowType, flowId: string) => {
     },
   })
 }
+
+export const useTestEmailSender = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'test email sender'],
+    mutationFn: async (data: { appID: string, nodeID: string, deliveryID: string }) => post<CommonResponse>(`apps/${data.appID}/human-input/test-delivery/${data.nodeID}/${data.deliveryID}`),
+  })
+}