feat: enhance online drive connection UI and add localization for connection status in dataset pipeline

web/app/components/base/notion-connector/index.tsx

@@ -23,7 +23,7 @@ const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
         </span>
         <div className='system-sm-regular text-text-tertiary'>{t('datasetCreation.stepOne.notionSyncTip')}</div>
       </div>
-      <Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
+      <Button variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
     </div>
   )
 }

web/app/components/datasets/documents/create-from-pipeline/hooks.ts

@@ -57,25 +57,26 @@ export const useDatasourceOptions = (pipelineNodes: Node<DataSourceNodeType>[])
         data: node.data,
       })
     })
-    // todo: delete mock data
+    if (process.env.NODE_ENV === 'development') {
-    options.push({
+      // todo: delete mock data
-      label: 'Google Drive',
+      options.push({
-      value: '123456',
+        label: 'Google Drive',
-      // @ts-expect-error mock data
+        value: '123456',
-      data: {
+        // @ts-expect-error mock data
-        datasource_parameters: {},
+        data: {
-        datasource_configurations: {},
+          datasource_parameters: {},
-        type: BlockEnum.DataSource,
+          datasource_configurations: {},
-        title: 'Google Drive',
+          type: BlockEnum.DataSource,
-        plugin_id: 'langgenius/google-drive',
+          title: 'Google Drive',
-        provider_type: 'online_drive',
+          plugin_id: 'langgenius/google-drive',
-        provider_name: 'google_drive',
+          provider_type: 'online_drive',
-        datasource_name: 'google-drive',
+          provider_name: 'google_drive',
-        datasource_label: 'Google Drive',
+          datasource_name: 'google-drive',
-        selected: false,
+          datasource_label: 'Google Drive',
-      },
+          selected: false,
-    })
+        },
-
+      })
+    }
     return options
   }, [datasourceNodes])
 

web/app/components/rag-pipeline/components/panel/test-run/data-source/online-drive/connect/index.tsx

@@ -1,3 +1,6 @@
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useToolIcon } from '@/app/components/workflow/hooks'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
@@ -5,15 +8,18 @@ import { BlockEnum } from '@/app/components/workflow/types'
 
 type ConnectProps = {
   nodeData: DataSourceNodeType
+  onSetting: () => void
 }
 
 const Connect = ({
   nodeData,
+  onSetting,
 }: ConnectProps) => {
+  const { t } = useTranslation()
   const toolIcon = useToolIcon(nodeData)
 
   return (
-    <div className='flex flex-col p-6'>
+    <div className='flex flex-col items-start gap-y-2 rounded-xl bg-workflow-process-bg p-6'>
       <div className='flex size-12 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5'>
         <BlockIcon
           type={BlockEnum.DataSource}
@@ -21,12 +27,22 @@ const Connect = ({
           size='md'
         />
       </div>
-      <p className='mb-6 text-gray-600'>
+      <div className='flex flex-col gap-y-1'>
-        To connect your online drive, please follow the instructions provided by your service provider.
+        <div className='flex flex-col gap-y-1 pb-3 pt-1'>
-      </p>
+          <div className='system-md-semibold text-text-secondary'>
-      <button className='rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600'>
+            <span className='relative'>
-        Connect Now
+              {t('datasetPipeline.onlineDrive.notConnected', { name: nodeData.title })}
-      </button>
+              <Icon3Dots className='absolute -right-2.5 -top-1.5 size-4 text-text-secondary' />
+            </span>
+          </div>
+          <div className='system-sm-regular text-text-tertiary'>
+            {t('datasetPipeline.onlineDrive.notConnectedTip', { name: nodeData.title })}
+          </div>
+        </div>
+        <Button className='w-fit' variant='primary' onClick={onSetting}>
+          {t('datasetCreation.stepOne.connect')}
+        </Button>
+      </div>
     </div>
   )
 }

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

@@ -55,24 +55,26 @@ export const useDatasourceOptions = () => {
         data: node.data,
       })
     })
-    // todo: delete mock data
+    if (process.env.NODE_ENV === 'development') {
-    options.push({
+      // todo: delete mock data
-      label: 'Google Drive',
+      options.push({
-      value: '123456',
+        label: 'Google Drive',
-      // @ts-expect-error mock data
+        value: '123456',
-      data: {
+        // @ts-expect-error mock data
-        datasource_parameters: {},
+        data: {
-        datasource_configurations: {},
+          datasource_parameters: {},
-        type: BlockEnum.DataSource,
+          datasource_configurations: {},
-        title: 'Google Drive',
+          type: BlockEnum.DataSource,
-        plugin_id: 'langgenius/google-drive',
+          title: 'Google Drive',
-        provider_type: 'online_drive',
+          plugin_id: 'langgenius/google-drive',
-        provider_name: 'google_drive',
+          provider_type: 'online_drive',
-        datasource_name: 'google-drive',
+          provider_name: 'google_drive',
-        datasource_label: 'Google Drive',
+          datasource_name: 'google-drive',
-        selected: false,
+          datasource_label: 'Google Drive',
-      },
+          selected: false,
-    })
+        },
+      })
+    }
     return options
   }, [datasourceNodes])
 

web/i18n/en-US/dataset-pipeline.ts

@@ -106,6 +106,10 @@ const translation = {
   documentSettings: {
     title: 'Document Settings',
   },
+  onlineDrive: {
+    notConnected: '{{name}} is not connected',
+    notConnectedTip: 'To sync with {{name}}, connection to {{name}} must be established first.',
+  },
 }
 
 export default translation

web/i18n/zh-Hans/dataset-pipeline.ts

@@ -106,6 +106,10 @@ const translation = {
   documentSettings: {
     title: '文档设置',
   },
+  onlineDrive: {
+    notConnected: '{{name}} 未绑定',
+    notConnectedTip: '同步 {{name}} 内容前, 须先绑定 {{name}}。',
+  },
 }
 
 export default translation