refactor: Enhance Bucket and Breadcrumbs components; improve event handling and add button for bucket name

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx

@@ -1,16 +1,31 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { BucketsGray } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 
 type BucketProps = {
+  bucketName: string
+  isActive?: boolean
+  disabled?: boolean
+  showSeparator?: boolean
   handleBackToBucketList: () => void
+  handleClickBucketName: () => void
 }
 
 const Bucket = ({
+  bucketName,
   handleBackToBucketList,
+  handleClickBucketName,
+  disabled = false,
+  isActive = false,
+  showSeparator = true,
 }: BucketProps) => {
   const { t } = useTranslation()
+  const handleClickItem = useCallback(() => {
+    if (!disabled)
+      handleClickBucketName()
+  }, [disabled, handleClickBucketName])
 
   return (
     <>
@@ -26,6 +41,19 @@ const Bucket = ({
         </button>
       </Tooltip>
       <span className='system-xs-regular text-divider-deep'>/</span>
+      <button
+        type='button'
+        className={cn(
+          'rounded-md px-[5px] py-1',
+          isActive ? 'system-sm-medium text-text-secondary' : 'system-sm-regular text-text-tertiary',
+          !disabled && 'hover:bg-state-base-hover',
+        )}
+        disabled={disabled}
+        onClick={handleClickItem}
+      >
+        {bucketName}
+      </button>
+      {showSeparator && <span className='system-xs-regular text-divider-deep'>/</span>}
     </>
   )
 }

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx

@@ -24,8 +24,12 @@ const Breadcrumbs = ({
   const showSearchResult = !!keywords && searchResultsLength > 0
   const isRoot = prefix.length === 0 && bucket === ''
 
+  const displayBreadcrumbNum = useMemo(() => {
+    const num = isInPipeline ? 2 : 3
+    return bucket ? num - 1 : num
+  }, [isInPipeline, bucket])
+
   const breadcrumbs = useMemo(() => {
-    const displayBreadcrumbNum = isInPipeline ? 2 : 3
     const prefixToDisplay = prefix.slice(0, displayBreadcrumbNum - 1)
     const collapsedBreadcrumbs = prefix.slice(displayBreadcrumbNum - 1, prefix.length - 1)
     return {
@@ -35,7 +39,7 @@ const Breadcrumbs = ({
       collapsedBreadcrumbs,
       lastBreadcrumb: prefix[prefix.length - 1],
     }
-  }, [isInPipeline, prefix])
+  }, [displayBreadcrumbNum, prefix])
 
   const handleBackToBucketList = useCallback(() => {
     setFileList([])
@@ -44,6 +48,12 @@ const Breadcrumbs = ({
     setPrefix([])
   }, [setBucket, setFileList, setPrefix, setSelectedFileList])
 
+  const handleClickBucketName = useCallback(() => {
+    setFileList([])
+    setSelectedFileList([])
+    setPrefix([])
+  }, [setFileList, setPrefix, setSelectedFileList])
+
   const handleClickBreadcrumb = useCallback((index: number) => {
     const newPrefix = breadcrumbs.prefixBreadcrumbs.slice(0, index - 1)
     setFileList([])
@@ -69,7 +79,14 @@ const Breadcrumbs = ({
       {!showSearchResult && !isRoot && (
         <div className='flex items-center gap-x-0.5'>
           {bucket && (
-            <Bucket handleBackToBucketList={handleBackToBucketList} />
+            <Bucket
+              bucketName={bucket}
+              handleBackToBucketList={handleBackToBucketList}
+              handleClickBucketName={handleClickBucketName}
+              isActive={prefix.length === 0}
+              disabled={prefix.length === 0}
+              showSeparator={prefix.length > 0}
+            />
           )}
           {!breadcrumbs.needCollapsed && (
             <>

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx

@@ -102,11 +102,12 @@ const OnlineDrive = ({
         draft.splice(index, 1)
       }
       else {
+        if (isInPipeline && draft.length >= 1) return
         draft.push(file.key)
       }
     })
     setSelectedFileList(newSelectedFileList)
-  }, [selectedFileList, setSelectedFileList])
+  }, [isInPipeline, selectedFileList, setSelectedFileList])
 
   const handleOpenFolder = useCallback((file: OnlineDriveFile) => {
     if (file.type === OnlineDriveFileType.file) return
@@ -115,10 +116,9 @@ const OnlineDrive = ({
       setBucket(file.displayName)
     }
     else {
-      const key = file.displayName.endsWith('/') ? file.displayName.slice(0, -1) : file.displayName
+      const displayName = file.displayName.endsWith('/') ? file.displayName.slice(0, -1) : file.displayName
       const newPrefix = produce(prefix, (draft) => {
-        const newList = key.split('/')
-        draft.push(...newList)
+        draft.push(displayName)
       })
       setPrefix(newPrefix)
     }