github.com/pingcap/tiflow@v0.0.0-20240520035814-5bf52d54e205/dm/ui/src/components/CreateOrUpdateTask/CreateTaskEditorMode.tsx (about)

     1  import React, { useEffect, useState } from 'react'
     2  import AceEditor from 'react-ace'
     3  import { useTranslation } from 'react-i18next'
     4  import { useNavigate } from 'react-router-dom'
     5  
     6  import { Space, Button } from '~/uikit'
     7  import { TaskFormData, useDmapiConverterTaskMutation } from '~/models/task'
     8  
     9  import 'ace-builds/src-noconflict/mode-yaml'
    10  import 'ace-builds/src-noconflict/theme-eclipse'
    11  
    12  const CreateTaskEditorMode: React.FC<{
    13    initialValues?: TaskFormData
    14    onSubmit: (data: TaskFormData) => void
    15  }> = ({ onSubmit, initialValues }) => {
    16    const [t] = useTranslation()
    17    const navigate = useNavigate()
    18    const [val, setVal] = useState('')
    19    const [convertTaskDataToConfigFile] = useDmapiConverterTaskMutation()
    20  
    21    const handleEditorChange = (v: string) => setVal(v)
    22    const handleCancel = () => navigate('/migration/task')
    23    const handleSubmit = async () => {
    24      const res = await convertTaskDataToConfigFile({
    25        task_config_file: val,
    26      }).unwrap()
    27      onSubmit(res.task)
    28    }
    29  
    30    useEffect(() => {
    31      if (initialValues?.name) {
    32        convertTaskDataToConfigFile({ task: initialValues })
    33          .unwrap()
    34          .then(res => {
    35            setVal(res.task_config_file)
    36          })
    37      }
    38    }, [initialValues])
    39  
    40    return (
    41      <div className="h-full flex flex-col p-4">
    42        <div className="mb-4 flex flex-row-reverse">
    43          <Space>
    44            <Button onClick={handleCancel}>{t('cancel')}</Button>
    45            <Button type="primary" onClick={handleSubmit}>
    46              {t('submit')}
    47            </Button>
    48          </Space>
    49        </div>
    50        <AceEditor
    51          className="flex-1"
    52          mode="yaml"
    53          theme="eclipse"
    54          width="100%"
    55          fontSize={14}
    56          name="task-ace-editor"
    57          value={val}
    58          onChange={handleEditorChange}
    59          editorProps={{ $blockScrolling: true }}
    60          showPrintMargin={false}
    61          setOptions={{
    62            enableBasicAutocompletion: false,
    63            enableLiveAutocompletion: false,
    64            enableSnippets: false,
    65            showLineNumbers: true,
    66            tabSize: 2,
    67          }}
    68        />
    69      </div>
    70    )
    71  }
    72  
    73  export default CreateTaskEditorMode