From 2a25ca2b2cbf04bb2f4ca02cd7f15a7042ef0171 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 26 Jun 2025 14:24:50 +0800
Subject: [PATCH] feat: enhance online drive connection UI and add localization
 for connection status in dataset pipeline

---
 .../base/notion-connector/index.tsx           |  2 +-
 .../documents/create-from-pipeline/hooks.ts   | 39 ++++++++++---------
 .../online-drive/connect/index.tsx            | 30 ++++++++++----
 .../components/panel/test-run/hooks.ts        | 38 +++++++++---------
 web/i18n/en-US/dataset-pipeline.ts            |  4 ++
 web/i18n/zh-Hans/dataset-pipeline.ts          |  4 ++
 6 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/web/app/components/base/notion-connector/index.tsx b/web/app/components/base/notion-connector/index.tsx
index 8e172608cc..7635fc2818 100644
--- a/web/app/components/base/notion-connector/index.tsx
+++ b/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>
   )
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/hooks.ts b/web/app/components/datasets/documents/create-from-pipeline/hooks.ts
index 07351930d0..5139605ee6 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/hooks.ts
+++ b/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
-    options.push({
-      label: 'Google Drive',
-      value: '123456',
-      // @ts-expect-error mock data
-      data: {
-        datasource_parameters: {},
-        datasource_configurations: {},
-        type: BlockEnum.DataSource,
-        title: 'Google Drive',
-        plugin_id: 'langgenius/google-drive',
-        provider_type: 'online_drive',
-        provider_name: 'google_drive',
-        datasource_name: 'google-drive',
-        datasource_label: 'Google Drive',
-        selected: false,
-      },
-    })
-
+    if (process.env.NODE_ENV === 'development') {
+      // todo: delete mock data
+      options.push({
+        label: 'Google Drive',
+        value: '123456',
+        // @ts-expect-error mock data
+        data: {
+          datasource_parameters: {},
+          datasource_configurations: {},
+          type: BlockEnum.DataSource,
+          title: 'Google Drive',
+          plugin_id: 'langgenius/google-drive',
+          provider_type: 'online_drive',
+          provider_name: 'google_drive',
+          datasource_name: 'google-drive',
+          datasource_label: 'Google Drive',
+          selected: false,
+        },
+      })
+    }
     return options
   }, [datasourceNodes])
 
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/data-source/online-drive/connect/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/data-source/online-drive/connect/index.tsx
index 9287bb24bf..95c0847194 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/data-source/online-drive/connect/index.tsx
+++ b/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'>
-        To connect your online drive, please follow the instructions provided by your service provider.
-      </p>
-      <button className='rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600'>
-        Connect Now
-      </button>
+      <div className='flex flex-col gap-y-1'>
+        <div className='flex flex-col gap-y-1 pb-3 pt-1'>
+          <div className='system-md-semibold text-text-secondary'>
+            <span className='relative'>
+              {t('datasetPipeline.onlineDrive.notConnected', { name: nodeData.title })}
+              <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>
   )
 }
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/hooks.ts b/web/app/components/rag-pipeline/components/panel/test-run/hooks.ts
index a730501722..46e5627184 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/hooks.ts
+++ b/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
-    options.push({
-      label: 'Google Drive',
-      value: '123456',
-      // @ts-expect-error mock data
-      data: {
-        datasource_parameters: {},
-        datasource_configurations: {},
-        type: BlockEnum.DataSource,
-        title: 'Google Drive',
-        plugin_id: 'langgenius/google-drive',
-        provider_type: 'online_drive',
-        provider_name: 'google_drive',
-        datasource_name: 'google-drive',
-        datasource_label: 'Google Drive',
-        selected: false,
-      },
-    })
+    if (process.env.NODE_ENV === 'development') {
+      // todo: delete mock data
+      options.push({
+        label: 'Google Drive',
+        value: '123456',
+        // @ts-expect-error mock data
+        data: {
+          datasource_parameters: {},
+          datasource_configurations: {},
+          type: BlockEnum.DataSource,
+          title: 'Google Drive',
+          plugin_id: 'langgenius/google-drive',
+          provider_type: 'online_drive',
+          provider_name: 'google_drive',
+          datasource_name: 'google-drive',
+          datasource_label: 'Google Drive',
+          selected: false,
+        },
+      })
+    }
     return options
   }, [datasourceNodes])
 
diff --git a/web/i18n/en-US/dataset-pipeline.ts b/web/i18n/en-US/dataset-pipeline.ts
index e2187de048..0e83490e65 100644
--- a/web/i18n/en-US/dataset-pipeline.ts
+++ b/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
diff --git a/web/i18n/zh-Hans/dataset-pipeline.ts b/web/i18n/zh-Hans/dataset-pipeline.ts
index e0b7702911..66076a1081 100644
--- a/web/i18n/zh-Hans/dataset-pipeline.ts
+++ b/web/i18n/zh-Hans/dataset-pipeline.ts
@@ -106,6 +106,10 @@ const translation = {
   documentSettings: {
     title: '文档设置',
   },
+  onlineDrive: {
+    notConnected: '{{name}} 未绑定',
+    notConnectedTip: '同步 {{name}} 内容前, 须先绑定 {{name}}。',
+  },
 }
 
 export default translation