refactor(workflow): migrate schedule cron input (#41550)

oxlint-suppressions.json

@@ -4349,11 +4349,6 @@
       "count": 4
     }
   },
-  "web/app/components/workflow/nodes/trigger-schedule/panel.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5390,4 +5385,4 @@
       "count": 2
     }
   }
-}
+}

web/app/components/workflow/nodes/trigger-schedule/__tests__/panel.spec.tsx

@@ -204,7 +204,12 @@ describe('TriggerSchedulePanel', () => {
 
       renderPanel('node-3', createData({ mode: 'cron' }))
 
-      fireEvent.change(screen.getByDisplayValue('0 0 * * *'), { target: { value: '*/5 * * * *' } })
+      fireEvent.change(
+        screen.getByRole('textbox', {
+          name: 'workflow.nodes.triggerSchedule.cronExpression',
+        }),
+        { target: { value: '*/5 * * * *' } },
+      )
 
       expect(handleCronExpressionChange).toHaveBeenCalledWith('*/5 * * * *')
     })
@@ -255,7 +260,11 @@ describe('TriggerSchedulePanel', () => {
           panelProps={panelProps}
         />,
       )
-      expect(screen.getByRole('textbox')).toHaveValue('')
+      expect(
+        screen.getByRole('textbox', {
+          name: 'workflow.nodes.triggerSchedule.cronExpression',
+        }),
+      ).toHaveValue('')
     })
 
     it('should render the hourly minute selector when the frequency is hourly', async () => {

web/app/components/workflow/nodes/trigger-schedule/panel.tsx

@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { ScheduleTriggerNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { Input } from '@langgenius/dify-ui/input'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
-import Input from '@/app/components/base/input'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import FrequencySelector from './components/frequency-selector'
 import ModeToggle from './components/mode-toggle'
@@ -18,6 +18,7 @@ const i18nPrefix = 'nodes.triggerSchedule'
 
 const Panel: FC<NodePanelProps<ScheduleTriggerNodeType>> = ({ id, data }) => {
   const { t } = useTranslation()
+  const cronExpressionId = React.useId()
   const {
     inputs,
     setInputs,
@@ -112,12 +113,16 @@ const Panel: FC<NodePanelProps<ScheduleTriggerNodeType>> = ({ id, data }) => {
             {inputs.mode === 'cron' && (
               <div className="space-y-2">
                 <div>
-                  <label className="mb-2 block text-xs font-medium text-gray-500">
+                  <label
+                    htmlFor={cronExpressionId}
+                    className="mb-2 block text-xs font-medium text-gray-500"
+                  >
                     {t(($) => $['nodes.triggerSchedule.cronExpression'], { ns: 'workflow' })}
                   </label>
                   <Input
+                    id={cronExpressionId}
                     value={inputs.cron_expression || ''}
-                    onChange={(e) => handleCronExpressionChange(e.target.value)}
+                    onValueChange={(value) => handleCronExpressionChange(value)}
                     placeholder="0 0 * * *"
                     className="font-mono"
                   />