refactor: streamline input field data conversion and enhance datasource component

web/app/components/rag-pipeline/components/input-field/editor/index.tsx

@@ -1,7 +1,7 @@
 import { RiCloseLine } from '@remixicon/react'
 import DialogWrapper from './dialog-wrapper'
 import InputFieldForm from './form'
-import { convertToInputFieldFormData } from './utils'
+import { convertFormDataToINputField, convertToInputFieldFormData } from './utils'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { InputVar } from '@/models/pipeline'
@@ -24,35 +24,8 @@ const InputFieldEditor = ({
   const formData = convertToInputFieldFormData(initialData)
 
   const handleSubmit = useCallback((value: FormData) => {
-    const {
+    const inputFieldData = convertFormDataToINputField(value)
-      type,
+    onSubmit(inputFieldData)
-      label,
-      variable,
-      maxLength,
-      required,
-      tooltips,
-      options,
-      placeholder,
-      unit,
-      default: defaultValue,
-      allowedFileUploadMethods,
-      allowedTypesAndExtensions,
-    } = value
-    onSubmit({
-      type,
-      label,
-      variable,
-      max_length: maxLength,
-      required,
-      tooltips,
-      options,
-      placeholder,
-      unit,
-      default_value: defaultValue,
-      allowed_file_upload_methods: allowedFileUploadMethods,
-      allowed_file_types: allowedTypesAndExtensions.allowedFileTypes,
-      allowed_file_extensions: allowedTypesAndExtensions.allowedFileExtensions,
-    })
     onClose()
   }, [onSubmit, onClose])
 

web/app/components/rag-pipeline/components/input-field/editor/utils.ts

@@ -43,3 +43,36 @@ export const convertToInputFieldFormData = (data?: InputVar): FormData => {
     },
   }
 }
+
+export const convertFormDataToINputField = (data: FormData): InputVar => {
+  const {
+    type,
+    label,
+    variable,
+    maxLength,
+    default: defaultValue,
+    required,
+    tooltips,
+    options,
+    placeholder,
+    unit,
+    allowedFileUploadMethods,
+    allowedTypesAndExtensions: { allowedFileTypes, allowedFileExtensions },
+  } = data
+
+  return {
+    type,
+    label,
+    variable,
+    max_length: maxLength,
+    default_value: defaultValue,
+    required,
+    tooltips,
+    options,
+    placeholder,
+    unit,
+    allowed_file_upload_methods: allowedFileUploadMethods,
+    allowed_file_types: allowedFileTypes,
+    allowed_file_extensions: allowedFileExtensions,
+  }
+}

web/app/components/rag-pipeline/components/input-field/label-right-content/datasource.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
-import { RiDatabase2Fill } from '@remixicon/react'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { useToolIcon } from '@/app/components/workflow/hooks'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
 
 type DatasourceProps = {
   nodeData: DataSourceNodeType
@@ -9,10 +11,16 @@ type DatasourceProps = {
 const Datasource = ({
   nodeData,
 }: DatasourceProps) => {
+  const toolIcon = useToolIcon(nodeData)
+
   return (
     <div className='flex items-center gap-x-1.5'>
       <div className='flex size-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default'>
-        <RiDatabase2Fill className='size-3.5 text-text-secondary' />
+        <BlockIcon
+          className='size-3.5'
+          type={BlockEnum.DataSource}
+          toolIcon={toolIcon}
+        />
       </div>
       <span className='system-sm-medium text-text-secondary'>{nodeData.title}</span>
     </div>

web/app/components/rag-pipeline/components/panel/test-run/consts.ts

@@ -1,11 +0,0 @@
-import type { CrawlOptions } from '@/models/datasets'
-
-export const DEFAULT_CRAWL_OPTIONS: CrawlOptions = {
-  crawl_sub_pages: true,
-  only_main_content: true,
-  includes: '',
-  excludes: '',
-  limit: 10,
-  max_depth: '',
-  use_sitemap: true,
-}