Fix(dataset): Optimized the dataset configuration page UI #9869 (#10066)

### What problem does this PR solve?
fix(dataset): Optimized the dataset configuration page UI

- Added the DataPipelineSelect component for selecting data pipelines
- Restructured the layout and style of the dataset settings page
- Removed unnecessary components and code
- Optimized data pipeline configuration
- Adjusted the Create Dataset dialog box
- Updated the processing log modal style

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/dataset/dataset-setting/chunk-method-form.tsx

@@ -1,31 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-
-import { NaiveConfiguration } from './naive';
-import { SavingButton } from './saving-button';
-
-export function ChunkMethodForm() {
-  const form = useFormContext();
-  const { t } = useTranslation();
-
-  return (
-    <section className="h-full flex flex-col">
-      <div className="overflow-auto flex-1 min-h-0">
-        <NaiveConfiguration></NaiveConfiguration>
-      </div>
-      <div className="text-right pt-4 flex justify-end gap-3">
-        <Button
-          type="reset"
-          className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
-          onClick={() => {
-            form.reset();
-          }}
-        >
-          {t('knowledgeConfiguration.cancel')}
-        </Button>
-        <SavingButton></SavingButton>
-      </div>
-    </section>
-  );
-}

web/src/pages/dataset/dataset-setting/components/link-data-pipeline.tsx

@@ -0,0 +1,79 @@
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { Button } from '@/components/ui/button';
+import { Link, Route, Settings2, Unlink } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface DataPipelineItemProps {
+  name: string;
+  avatar?: string;
+  isDefault?: boolean;
+  linked?: boolean;
+}
+const DataPipelineItem = (props: DataPipelineItemProps) => {
+  const { t } = useTranslation();
+  const { name, avatar, isDefault, linked } = props;
+  return (
+    <div className="flex items-center justify-between gap-1 px-2 rounded-lg border">
+      <div className="flex items-center gap-1">
+        <RAGFlowAvatar avatar={avatar} name={name} className="size-4" />
+        <div>{name}</div>
+        {isDefault && (
+          <div className="text-xs bg-text-secondary text-bg-base px-2 py-1 rounded-md">
+            {t('knowledgeConfiguration.default')}
+          </div>
+        )}
+      </div>
+      <div className="flex gap-1 items-center">
+        <Button variant={'transparent'} className="border-none">
+          <Settings2 />
+        </Button>
+        <Button variant={'transparent'} className="border-none">
+          {linked ? <Link /> : <Unlink />}
+        </Button>
+      </div>
+    </div>
+  );
+};
+const LinkDataPipeline = () => {
+  const { t } = useTranslation();
+  const testNode = [
+    {
+      name: 'Data Pipeline 1',
+      avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
+      isDefault: true,
+      linked: true,
+    },
+    {
+      name: 'Data Pipeline 2',
+      avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
+      linked: false,
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-2">
+      <section className="flex flex-col">
+        <div className="flex items-center gap-1 text-text-primary text-sm">
+          <Route className="size-4" />
+          {t('knowledgeConfiguration.dataPipeline')}
+        </div>
+        <div className="flex justify-between items-center">
+          <div className="text-center text-xs text-text-secondary">
+            Manage data pipeline linkage with this dataset
+          </div>
+          <Button variant={'transparent'}>
+            <Link />
+            <span className="text-xs text-text-primary">
+              {t('knowledgeConfiguration.linkDataPipeline')}
+            </span>
+          </Button>
+        </div>
+      </section>
+      <section className="flex flex-col gap-2">
+        {testNode.map((item) => (
+          <DataPipelineItem key={item.name} {...item} />
+        ))}
+      </section>
+    </div>
+  );
+};
+export default LinkDataPipeline;

web/src/pages/dataset/dataset-setting/configuration/common-item.tsx

@@ -10,7 +10,6 @@ import { RAGFlowSelect } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { useTranslate } from '@/hooks/common-hooks';
 import { cn } from '@/lib/utils';
-import { ArrowUpRight } from 'lucide-react';
 import { useFormContext } from 'react-hook-form';
 import {
   useHasParsedDocument,
@@ -70,8 +69,13 @@ export function EmbeddingModelItem({ line = 1 }: { line?: 1 | 2 }) {
       control={form.control}
       name={'embd_id'}
       render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className={cn({ 'flex items-center': line === 1 })}>
+        <FormItem className={cn(' items-center space-y-0 ')}>
+          <div
+            className={cn('flex', {
+              ' items-center': line === 1,
+              'flex-col gap-1': line === 2,
+            })}
+          >
             <FormLabel
               required
               tooltip={t('embeddingModelTip')}
@@ -142,155 +146,6 @@ export function ParseTypeItem() {
   );
 }
 
-export function DataFlowItem() {
-  const { t } = useTranslate('knowledgeConfiguration');
-  const form = useFormContext();
-
-  return (
-    <FormField
-      control={form.control}
-      name={'data_flow'}
-      render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className="">
-            <div className="flex gap-2 justify-between ">
-              <FormLabel
-                tooltip={t('dataFlowTip')}
-                className="text-sm text-text-primary whitespace-wrap "
-              >
-                {t('dataFlow')}
-              </FormLabel>
-              <div className="text-sm flex text-text-primary">
-                {t('buildItFromScratch')}
-                <ArrowUpRight size={14} />
-              </div>
-            </div>
-
-            <div className="text-muted-foreground">
-              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  placeholder={t('dataFlowPlaceholder')}
-                  options={[{ value: '0', label: t('dataFlowDefault') }]}
-                />
-              </FormControl>
-            </div>
-          </div>
-          <div className="flex pt-1">
-            <div className="w-1/4"></div>
-            <FormMessage />
-          </div>
-        </FormItem>
-      )}
-    />
-  );
-}
-
-export function DataExtractKnowledgeItem() {
-  const { t } = useTranslate('knowledgeConfiguration');
-  const form = useFormContext();
-
-  return (
-    <>
-      {' '}
-      <FormField
-        control={form.control}
-        name={'extractKnowledgeGraph'}
-        render={({ field }) => (
-          <FormItem className=" items-center space-y-0 ">
-            <div className="">
-              <FormLabel
-                tooltip={t('extractKnowledgeGraphTip')}
-                className="text-sm  whitespace-wrap "
-              >
-                {t('extractKnowledgeGraph')}
-              </FormLabel>
-              <div className="text-muted-foreground">
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                </FormControl>
-              </div>
-            </div>
-            <div className="flex pt-1">
-              <div className="w-1/4"></div>
-              <FormMessage />
-            </div>
-          </FormItem>
-        )}
-      />{' '}
-      <FormField
-        control={form.control}
-        name={'useRAPTORToEnhanceRetrieval'}
-        render={({ field }) => (
-          <FormItem className=" items-center space-y-0 ">
-            <div className="">
-              <FormLabel
-                tooltip={t('useRAPTORToEnhanceRetrievalTip')}
-                className="text-sm  whitespace-wrap "
-              >
-                {t('useRAPTORToEnhanceRetrieval')}
-              </FormLabel>
-              <div className="text-muted-foreground">
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                </FormControl>
-              </div>
-            </div>
-            <div className="flex pt-1">
-              <div className="w-1/4"></div>
-              <FormMessage />
-            </div>
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-export function TeamItem() {
-  const { t } = useTranslate('knowledgeConfiguration');
-  const form = useFormContext();
-
-  return (
-    <FormField
-      control={form.control}
-      name={'team'}
-      render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className="">
-            <FormLabel
-              tooltip={t('teamTip')}
-              className="text-sm  whitespace-wrap "
-            >
-              <span className="text-destructive mr-1"> *</span>
-              {t('team')}
-            </FormLabel>
-            <div className="text-muted-foreground">
-              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  placeholder={t('teamPlaceholder')}
-                  options={[{ value: '0', label: t('teamDefault') }]}
-                />
-              </FormControl>
-            </div>
-          </div>
-          <div className="flex pt-1">
-            <div className="w-1/4"></div>
-            <FormMessage />
-          </div>
-        </FormItem>
-      )}
-    />
-  );
-}
-
 export function EnableAutoGenerateItem() {
   const { t } = useTranslate('knowledgeConfiguration');
   const form = useFormContext();

web/src/pages/dataset/dataset-setting/general-form.tsx

@@ -17,7 +17,7 @@ export function GeneralForm() {
   const { t } = useTranslation();
 
   return (
-    <section className="space-y-4">
+    <>
       <FormField
         control={form.control}
         name="name"
@@ -87,6 +87,6 @@ export function GeneralForm() {
       />
       <PermissionFormField></PermissionFormField>
       <EmbeddingModelItem></EmbeddingModelItem>
-    </section>
+    </>
   );
 }

web/src/pages/dataset/dataset-setting/index.tsx

@@ -1,3 +1,6 @@
+import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
+import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import { Button } from '@/components/ui/button';
 import Divider from '@/components/ui/divider';
 import { Form } from '@/components/ui/form';
 import { DocumentParserType } from '@/constants/knowledge';
@@ -7,11 +10,12 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { TopTitle } from '../dataset-title';
-import { ChunkMethodForm } from './chunk-method-form';
+import LinkDataPipeline from './components/link-data-pipeline';
+import { MainContainer } from './configuration-form-container';
 import { formSchema } from './form-schema';
 import { GeneralForm } from './general-form';
 import { useFetchKnowledgeConfigurationOnMount } from './hooks';
-
+import { SavingButton } from './saving-button';
 const enum DocumentType {
   DeepDOC = 'DeepDOC',
   PlainText = 'Plain Text',
@@ -77,10 +81,29 @@ export default function DatasetSettings() {
             onSubmit={form.handleSubmit(onSubmit)}
             className="space-y-6 flex-1"
           >
-            <div className="w-[768px] h-[calc(100vh-220px)] overflow-y-auto scrollbar-thin">
-              <GeneralForm></GeneralForm>
-              <Divider />
-              <ChunkMethodForm></ChunkMethodForm>
+            <div className="w-[768px] h-[calc(100vh-240px)] pr-1 overflow-y-auto scrollbar-auto">
+              <MainContainer>
+                <GeneralForm></GeneralForm>
+                <Divider />
+
+                <GraphRagItems className="border-none p-0"></GraphRagItems>
+                <Divider />
+                <RaptorFormFields></RaptorFormFields>
+                <Divider />
+                <LinkDataPipeline />
+              </MainContainer>
+            </div>
+            <div className="text-right items-center flex justify-end gap-3 w-[768px]">
+              <Button
+                type="reset"
+                className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
+                onClick={() => {
+                  form.reset();
+                }}
+              >
+                {t('knowledgeConfiguration.cancel')}
+              </Button>
+              <SavingButton></SavingButton>
             </div>
           </form>
         </Form>

web/src/pages/dataset/dataset-setting/naive.tsx

@@ -1,20 +0,0 @@
-import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
-import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
-import Divider from '@/components/ui/divider';
-import {
-  ConfigurationFormContainer,
-  MainContainer,
-} from './configuration-form-container';
-
-export function NaiveConfiguration() {
-  return (
-    <MainContainer>
-      <GraphRagItems className="border-none p-0"></GraphRagItems>
-      <Divider />
-      <ConfigurationFormContainer>
-        <RaptorFormFields></RaptorFormFields>
-      </ConfigurationFormContainer>
-      <Divider />
-    </MainContainer>
-  );
-}