refactor: Update event handling in Checkbox and Radio components; optimize Online Drive file filtering

web/app/components/base/checkbox/index.tsx

@@ -5,19 +5,19 @@ import IndeterminateIcon from './assets/indeterminate-icon'
 type CheckboxProps = {
   id?: string
   checked?: boolean
-  onCheck?: () => void
+  onCheck?: (event: React.MouseEvent<HTMLDivElement>) => void
   className?: string
   disabled?: boolean
   indeterminate?: boolean
 }
 
 const Checkbox = ({
-    id,
-    checked,
-    onCheck,
-    className,
-    disabled,
-    indeterminate,
+  id,
+  checked,
+  onCheck,
+  className,
+  disabled,
+  indeterminate,
 }: CheckboxProps) => {
   const checkClassName = (checked || indeterminate)
     ? 'bg-components-checkbox-bg text-components-checkbox-icon hover:bg-components-checkbox-bg-hover'
@@ -35,10 +35,10 @@ const Checkbox = ({
         disabled && disabledClassName,
         className,
       )}
-      onClick={() => {
+      onClick={(event) => {
         if (disabled)
           return
-        onCheck?.()
+        onCheck?.(event)
       }}
       data-testid={`checkbox-${id}`}
     >

web/app/components/base/radio/ui.tsx

@@ -6,7 +6,7 @@ import cn from '@/utils/classnames'
 type Props = {
   isChecked: boolean
   disabled?: boolean
-  onCheck?: () => void
+  onCheck?: (event: React.MouseEvent<HTMLDivElement>) => void
   className?: string
 }
 
@@ -27,9 +27,9 @@ const RadioUI: FC<Props> = ({
         !disabled && 'bg-components-radio-bg shadow-xs shadow-shadow-shadow-3 hover:bg-components-radio-bg-hover',
         className,
       )}
-      onClick={() => {
+      onClick={(event) => {
         if (disabled) return
-        onCheck?.()
+        onCheck?.(event)
       }}
     />
   )

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

@@ -31,7 +31,8 @@ const Item = ({
 
   const Wrapper = disabled ? Tooltip : React.Fragment
 
-  const handleSelect = useCallback(() => {
+  const handleSelect = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
     onSelect(file)
   }, [file, onSelect])
 

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

@@ -1,6 +1,6 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import Header from './header'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import FileList from './file-list'
 import type { OnlineDriveFile } from '@/models/pipeline'
 import { DatasourceType, OnlineDriveFileType } from '@/models/pipeline'
@@ -79,6 +79,12 @@ const OnlineDrive = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bucket, prefix, startAfter])
 
+  const onlineDriveFileList = useMemo(() => {
+    if (keywords)
+      return fileList.filter(file => file.key.toLowerCase().includes(keywords.toLowerCase()))
+    return fileList
+  }, [fileList, keywords])
+
   const updateKeywords = useCallback((keywords: string) => {
     setKeywords(keywords)
   }, [setKeywords])
@@ -123,14 +129,14 @@ const OnlineDrive = ({
         docLink='https://docs.dify.ai/'
       />
       <FileList
-        fileList={fileList}
+        fileList={onlineDriveFileList}
         selectedFileList={selectedFileList}
         prefix={prefix}
         keywords={keywords}
         bucket={bucket}
         resetKeywords={resetPrefix}
         updateKeywords={updateKeywords}
-        searchResultsLength={fileList.length}
+        searchResultsLength={onlineDriveFileList.length}
         handleSelectFile={handleSelectFile}
         handleOpenFolder={handleOpenFolder}
         isInPipeline={isInPipeline}