refactor(credential-icon, create-from-pipeline, test-run): improve component structure and enhance data handling for online drive files

web/app/components/datasets/common/credential-icon.tsx

@@ -26,13 +26,17 @@ export const CredentialIcon: React.FC<CredentialIconProps> = ({
 
   if (avatar_url && avatar_url !== 'default') {
     return (
-      <img
-        src={avatar_url}
-        alt={`${name} logo`}
-        width={size}
-        height={size}
-        className={cn('shrink-0 rounded-md border border-divider-regular object-contain', className)}
-      />
+      <div
+        className='flex shrink-0 items-center justify-center overflow-hidden rounded-md border border-divider-regular'
+        style={{ width: `${size}px`, height: `${size}px` }}
+      >
+        <img
+          src={avatar_url}
+          width={size}
+          height={size}
+          className={cn('shrink-0 object-contain', className)}
+        />
+      </div>
     )
   }
 

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

@@ -209,10 +209,11 @@ const CreateFormPipeline = () => {
     }
     if (datasourceType === DatasourceType.onlineDrive) {
       const { bucket } = dataSourceStore.getState()
-      const { id } = previewOnlineDriveFileRef.current!
+      const { id, type } = previewOnlineDriveFileRef.current!
       datasourceInfoList.push({
         bucket,
         id,
+        type,
         credential_id: currentCredentialId,
       })
     }
@@ -233,7 +234,7 @@ const CreateFormPipeline = () => {
   const handleProcess = useCallback(async (data: Record<string, any>) => {
     if (!datasource)
       return
-    const { bucket, currentCredentialId } = dataSourceStore.getState()
+    const { bucket, currentCredentialId, fileList: onlineDriveFileList } = dataSourceStore.getState()
     const datasourceInfoList: Record<string, any>[] = []
     if (datasourceType === DatasourceType.localFile) {
       fileList.forEach((file) => {
@@ -273,10 +274,12 @@ const CreateFormPipeline = () => {
     }
     if (datasourceType === DatasourceType.onlineDrive) {
       if (datasourceType === DatasourceType.onlineDrive) {
-        selectedFileIds.forEach((key) => {
+        selectedFileIds.forEach((id) => {
+          const file = onlineDriveFileList.find(file => file.id === id)
           datasourceInfoList.push({
             bucket,
-            key,
+            id: file?.id,
+            type: file?.type,
             credential_id: currentCredentialId,
           })
         })

web/app/components/rag-pipeline/components/panel/test-run/index.tsx

@@ -107,10 +107,12 @@ const TestRunPanel = () => {
       })
     }
     if (datasourceType === DatasourceType.onlineDrive) {
-      const { bucket } = dataSourceStore.getState()
+      const { bucket, fileList } = dataSourceStore.getState()
+      const file = fileList.find(file => file.id === selectedFileIds[0])
       datasourceInfoList.push({
         bucket,
-        id: selectedFileIds[0],
+        id: file?.id,
+        type: file?.type,
         credential_id: credentialId,
       })
     }