Feature: Added data source functionality #10703 (#11046)

### What problem does this PR solve?

Feature: Added data source functionality

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

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

@@ -7,6 +7,8 @@ import { Form } from '@/components/ui/form';
 import { FormLayout } from '@/constants/form';
 import { DocumentParserType } from '@/constants/knowledge';
 import { PermissionRole } from '@/constants/permission';
+import { DataSourceInfo } from '@/pages/user-setting/data-source/contant';
+import { IDataSourceBase } from '@/pages/user-setting/data-source/interface';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
@@ -19,6 +21,9 @@ import {
 } from '../dataset/generate-button/generate';
 import { ChunkMethodForm } from './chunk-method-form';
 import ChunkMethodLearnMore from './chunk-method-learn-more';
+import LinkDataSource, {
+  IDataSourceNodeProps,
+} from './components/link-data-source';
 import { MainContainer } from './configuration-form-container';
 import { ChunkMethodItem, ParseTypeItem } from './configuration/common-item';
 import { formSchema } from './form-schema';
@@ -78,10 +83,12 @@ export default function DatasetSettings() {
       pipeline_id: '',
       parseType: 1,
       pagerank: 0,
+      connectors: [],
     },
   });
   const knowledgeDetails = useFetchKnowledgeConfigurationOnMount(form);
   // const [pipelineData, setPipelineData] = useState<IDataPipelineNodeProps>();
+  const [sourceData, setSourceData] = useState<IDataSourceNodeProps[]>();
   const [graphRagGenerateData, setGraphRagGenerateData] =
     useState<IGenerateLogButtonProps>();
   const [raptorGenerateData, setRaptorGenerateData] =
@@ -97,6 +104,19 @@ export default function DatasetSettings() {
       //   linked: true,
       // };
       // setPipelineData(data);
+
+      const source_data: IDataSourceNodeProps[] =
+        knowledgeDetails?.connectors?.map((connector) => {
+          return {
+            ...connector,
+            icon:
+              DataSourceInfo[connector.source as keyof typeof DataSourceInfo]
+                ?.icon || '',
+          };
+        });
+
+      setSourceData(source_data);
+
       setGraphRagGenerateData({
         finish_at: knowledgeDetails.graphrag_task_finish_at,
         task_id: knowledgeDetails.graphrag_task_id,
@@ -129,6 +149,23 @@ export default function DatasetSettings() {
   //   }
   // };
 
+  const handleLinkOrEditSubmit = (data: IDataSourceBase[] | undefined) => {
+    if (data) {
+      const connectors = data.map((connector) => {
+        return {
+          ...connector,
+          icon:
+            DataSourceInfo[connector.source as keyof typeof DataSourceInfo]
+              ?.icon || '',
+        };
+      });
+      setSourceData(connectors as IDataSourceNodeProps[]);
+      form.setValue('connectors', connectors || []);
+      // form.setValue('pipeline_name', data.name || '');
+      // form.setValue('pipeline_avatar', data.avatar || '');
+    }
+  };
+
   const handleDeletePipelineTask = (type: GenerateType) => {
     if (type === GenerateType.KnowledgeGraph) {
       setGraphRagGenerateData({
@@ -158,6 +195,19 @@ export default function DatasetSettings() {
     }
     console.log('parseType', parseType);
   }, [parseType, form]);
+
+  const unbindFunc = (data: IDataSourceBase) => {
+    if (data) {
+      const connectors = sourceData?.filter((connector) => {
+        return connector.id !== data.id;
+      });
+      console.log('🚀 ~ DatasetSettings ~ connectors:', connectors);
+      setSourceData(connectors as IDataSourceNodeProps[]);
+      form.setValue('connectors', connectors || []);
+      // form.setValue('pipeline_name', data.name || '');
+      // form.setValue('pipeline_avatar', data.avatar || '');
+    }
+  };
   return (
     <section className="p-5 h-full flex flex-col">
       <TopTitle
@@ -205,6 +255,13 @@ export default function DatasetSettings() {
                   data={pipelineData}
                   handleLinkOrEditSubmit={handleLinkOrEditSubmit}
                 /> */}
+
+                <Divider />
+                <LinkDataSource
+                  data={sourceData}
+                  handleLinkOrEditSubmit={handleLinkOrEditSubmit}
+                  unbindFunc={unbindFunc}
+                />
               </MainContainer>
             </div>
             <div className="text-right items-center flex justify-end gap-3 w-[768px]">