Fix: Improved knowledge base configuration and related logic #9869 (#10315)

### What problem does this PR solve?

Fix: Improved knowledge base configuration and related logic #9869
- Optimized the display logic of the Generate Log button to support
displaying completion time and task ID
- Implemented the ability to pause task generation and connect to the
data flow cancellation interface
- Fixed issues with type definitions and optional chaining calls in some
components
### Type of change

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

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

@@ -1,23 +1,26 @@
+import { IDataPipelineSelectNode } from '@/components/data-pipeline-select';
 import { IconFont } from '@/components/icon-font';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
 import { Modal } from '@/components/ui/modal/modal';
-import { omit } from 'lodash';
-import { Link, Settings2, Unlink } from 'lucide-react';
-import { useState } from 'react';
+import { Link } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { linkPiplineFormSchema } from '../form-schema';
 import LinkDataPipelineModal from './link-data-pipline-modal';
-
-interface DataPipelineItemProps {
-  id: string;
-  name: string;
-  avatar?: string;
+export interface IDataPipelineNodeProps extends IDataPipelineSelectNode {
   isDefault?: boolean;
   linked?: boolean;
+}
+
+export interface ILinkDataPipelineProps {
+  data?: IDataPipelineNodeProps;
+  handleLinkOrEditSubmit?: (data: IDataPipelineNodeProps | undefined) => void;
+}
+
+interface DataPipelineItemProps extends IDataPipelineNodeProps {
   openLinkModalFunc?: (open: boolean, data?: IDataPipelineNodeProps) => void;
 }
+
 const DataPipelineItem = (props: DataPipelineItemProps) => {
   const { t } = useTranslation();
   const { name, avatar, isDefault, linked, openLinkModalFunc } = props;
@@ -57,17 +60,17 @@ const DataPipelineItem = (props: DataPipelineItemProps) => {
   };
 
   return (
-    <div className="flex items-center justify-between gap-1 px-2 rounded-lg border">
+    <div className="flex items-center justify-between gap-1 px-2 rounded-md border">
       <div className="flex items-center gap-1">
         <RAGFlowAvatar avatar={avatar} name={name} className="size-4" />
         <div>{name}</div>
-        {isDefault && (
+        {/* {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">
+      {/* <div className="flex gap-1 items-center">
         <Button
           variant={'transparent'}
           className="border-none"
@@ -94,50 +97,29 @@ const DataPipelineItem = (props: DataPipelineItemProps) => {
             )}
           </>
         )}
-      </div>
+      </div> */}
     </div>
   );
 };
 
-export interface IDataPipelineNodeProps {
-  id: string;
-  name: string;
-  avatar?: string;
-  isDefault?: boolean;
-  linked?: boolean;
-}
-const LinkDataPipeline = () => {
+const LinkDataPipeline = (props: ILinkDataPipelineProps) => {
+  const { data, handleLinkOrEditSubmit: submit } = props;
   const { t } = useTranslation();
   const [openLinkModal, setOpenLinkModal] = useState(false);
   const [currentDataPipeline, setCurrentDataPipeline] =
     useState<IDataPipelineNodeProps>();
-  const testNode = [
-    {
-      id: '1',
-      name: 'Data Pipeline 1',
-      avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
-      isDefault: true,
-      linked: true,
-    },
-    {
-      id: '2',
-      name: 'Data Pipeline 2',
-      avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
-      linked: false,
-    },
-    {
-      id: '3',
-      name: 'Data Pipeline 3',
-      avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
-      linked: false,
-    },
-    {
-      id: '4',
-      name: 'Data Pipeline 4',
-      avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
-      linked: true,
-    },
-  ];
+  const pipelineNode: IDataPipelineNodeProps[] = useMemo(
+    () => [
+      {
+        id: data?.id,
+        name: data?.name,
+        avatar: data?.avatar,
+        isDefault: data?.isDefault,
+        linked: true,
+      },
+    ],
+    [data],
+  );
   const openLinkModalFunc = (open: boolean, data?: IDataPipelineNodeProps) => {
     console.log('open', open, data);
     setOpenLinkModal(open);
@@ -148,9 +130,11 @@ const LinkDataPipeline = () => {
     }
   };
   const handleLinkOrEditSubmit = (
-    data: z.infer<typeof linkPiplineFormSchema>,
+    data: IDataPipelineSelectNode | undefined,
   ) => {
     console.log('handleLinkOrEditSubmit', data);
+    submit?.(data);
+    setOpenLinkModal(false);
   };
   return (
     <div className="flex flex-col gap-2">
@@ -178,13 +162,20 @@ const LinkDataPipeline = () => {
         </div>
       </section>
       <section className="flex flex-col gap-2">
-        {testNode.map((item) => (
-          <DataPipelineItem
-            key={item.name}
-            openLinkModalFunc={openLinkModalFunc}
-            {...item}
-          />
-        ))}
+        {pipelineNode.map(
+          (item) =>
+            item.id && (
+              <DataPipelineItem
+                key={item.id}
+                openLinkModalFunc={openLinkModalFunc}
+                id={item.id}
+                name={item.name}
+                avatar={item.avatar}
+                isDefault={item.isDefault}
+                linked={item.linked}
+              />
+            ),
+        )}
       </section>
       <LinkDataPipelineModal
         data={currentDataPipeline}