refactor: enhance document preview functionality and refactor form handling

web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx

@@ -2,22 +2,25 @@ import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
 import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
 import Toast from '@/app/components/base/toast'
-import { useImperativeHandle } from 'react'
+import { useCallback, useImperativeHandle } from 'react'
 import type { ZodSchema } from 'zod'
+import Header from './header'
 
 type OptionsProps = {
   initialData: Record<string, any>
   configurations: BaseConfiguration[]
   schema: ZodSchema
   onSubmit: (data: Record<string, any>) => void
+  onPreview: () => void
   ref: React.RefObject<any>
 }
 
-const Options = ({
+const Form = ({
   initialData,
   configurations,
   schema,
   onSubmit,
+  onPreview,
   ref,
 }: OptionsProps) => {
   const form = useAppForm({
@@ -48,24 +51,32 @@ const Options = ({
       submit: () => {
         form.handleSubmit()
       },
-      reset: () => {
-        form.reset()
-      },
-      isDirty: () => {
-        return form.state.isDirty
-      },
     }
   }, [form])
 
+  const handleReset = useCallback(() => {
+    form.reset()
+  }, [form])
+
   return (
     <form
-      className='w-full'
+      className='flex w-full flex-col rounded-lg border border-components-panel-border bg-components-panel-bg'
       onSubmit={(e) => {
         e.preventDefault()
         e.stopPropagation()
         form.handleSubmit()
       }}
     >
+      <form.Subscribe
+        selector={state => state.isDirty}
+        children={isDirty => (
+          <Header
+            onReset={handleReset}
+            resetDisabled={!isDirty}
+            onPreview={onPreview}
+          />
+        )}
+      />
       <div className='flex flex-col gap-3 border-t border-divider-subtle px-4 py-3'>
         {configurations.map((config, index) => {
           const FieldComponent = BaseField({
@@ -79,4 +90,4 @@ const Options = ({
   )
 }
 
-export default Options
+export default Form

web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx

@@ -5,13 +5,13 @@ import { RiSearchEyeLine } from '@remixicon/react'
 
 type HeaderProps = {
   onReset: () => void
-  disableReset?: boolean
+  resetDisabled: boolean
   onPreview?: () => void
 }
 
 const Header = ({
   onReset,
-  disableReset = true,
+  resetDisabled,
   onPreview,
 }: HeaderProps) => {
   const { t } = useTranslation()
@@ -21,7 +21,7 @@ const Header = ({
       <div className='system-sm-semibold-uppercase grow text-text-secondary'>
         {t('datasetPipeline.addDocuments.stepTwo.chunkSettings')}
       </div>
-      <Button variant='ghost' disabled={disableReset} onClick={onReset}>
+      <Button variant='ghost' disabled={resetDisabled} onClick={onReset}>
         {t('common.operation.reset')}
       </Button>
       <Button

web/app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx

@@ -1,15 +1,13 @@
 import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
 import { useConfigurations } from './hooks'
-import Options from './options'
+import Form from './form'
 import Actions from './actions'
-import Header from './header'
 
 type ProcessDocumentsProps = {
   dataSourceNodeId: string
   ref: React.RefObject<any>
   onProcess: () => void
   onPreview: () => void
-  onReset: () => void
   onSubmit: (data: Record<string, any>) => void
   onBack: () => void
 }
@@ -19,7 +17,6 @@ const ProcessDocuments = ({
   onProcess,
   onPreview,
   onSubmit,
-  onReset,
   onBack,
   ref,
 }: ProcessDocumentsProps) => {
@@ -28,20 +25,14 @@ const ProcessDocuments = ({
 
   return (
     <div className='flex flex-col gap-y-4 pt-4'>
-      <div className='flex flex-col rounded-lg border border-components-panel-border bg-components-panel-bg'>
-        <Header
-          onReset={onReset}
-          disableReset={!ref.current?.isDirty()}
-          onPreview={onPreview}
-        />
-        <Options
-          ref={ref}
-          initialData={initialData}
-          configurations={configurations}
-          schema={schema}
-          onSubmit={onSubmit}
-        />
-      </div>
+      <Form
+        ref={ref}
+        initialData={initialData}
+        configurations={configurations}
+        schema={schema}
+        onSubmit={onSubmit}
+        onPreview={onPreview}
+      />
       <Actions onBack={onBack} onProcess={onProcess} />
     </div>
   )