From 80406d0753afe9c120703f091fde509729b6cdc6 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Fri, 5 Sep 2025 13:25:36 +0530 Subject: [PATCH] (feat:drive) debounce search, ui/ux --- frontend/src/components/ToggleSwitch.tsx | 2 +- frontend/src/modals/WrapperModal.tsx | 6 +- frontend/src/upload/Upload.tsx | 180 +++++++++++------------ 3 files changed, 92 insertions(+), 96 deletions(-) diff --git a/frontend/src/components/ToggleSwitch.tsx b/frontend/src/components/ToggleSwitch.tsx index 69530e79..b27f4841 100644 --- a/frontend/src/components/ToggleSwitch.tsx +++ b/frontend/src/components/ToggleSwitch.tsx @@ -53,7 +53,7 @@ const ToggleSwitch: React.FC = ({ {label && ( {label} diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx index 5c580d1c..a2826b61 100644 --- a/frontend/src/modals/WrapperModal.tsx +++ b/frontend/src/modals/WrapperModal.tsx @@ -42,10 +42,10 @@ export default function WrapperModal({ }, [close, isPerformingTask]); const modalContent = ( -
+
{!isPerformingTask && ( )} -
{children}
+
{children}
); diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx index 3f0b5bfe..44369162 100644 --- a/frontend/src/upload/Upload.tsx +++ b/frontend/src/upload/Upload.tsx @@ -30,6 +30,8 @@ import { } from './types/ingestor'; import FileIcon from '../assets/file.svg'; import FolderIcon from '../assets/folder.svg'; +import SearchIcon from '../assets/search.svg'; +import CheckIcon from '../assets/checkmark.svg'; import ConnectorAuth from '../components/ConnectorAuth'; function Upload({ @@ -69,6 +71,7 @@ function Upload({ const [nextPageToken, setNextPageToken] = useState(null); const [hasMoreFiles, setHasMoreFiles] = useState(false); const scrollContainerRef = useRef(null); + const searchTimeoutRef = useRef(null); const renderFormFields = () => { const schema = IngestorFormSchemas[ingestor.type]; @@ -192,7 +195,8 @@ function Upload({ checked, ); }} - className="mt-2" + size="small" + className={`mt-2 text-base`} /> ); default: @@ -621,7 +625,18 @@ function Upload({ [token] ); + const debouncedSearch = useCallback((query: string) => { + if (searchTimeoutRef.current) { + clearTimeout(searchTimeoutRef.current); + } + searchTimeoutRef.current = window.setTimeout(() => { + const sessionToken = getSessionToken(ingestor.type); + if (sessionToken) { + loadGoogleDriveFiles(sessionToken, currentFolderId, undefined, query); + } + }, 300); + }, [ingestor.type, currentFolderId, loadGoogleDriveFiles]); // Handle file selection const handleFileSelect = (fileId: string) => { @@ -670,14 +685,6 @@ function Upload({ } }; - const handleSelectAll = () => { - if (selectedFiles.length === googleDriveFiles.length) { - setSelectedFiles([]); - } else { - setSelectedFiles(googleDriveFiles.map(file => file.id)); - } - }; - const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, multiple: true, @@ -888,7 +895,7 @@ function Upload({
{authError && (
-

+

⚠️ {authError}

@@ -917,7 +924,7 @@ function Upload({ ) : (
{/* Connection Status */} -
+
@@ -944,7 +951,7 @@ function Upload({ body: JSON.stringify({ provider: ingestor.type, session_token: getSessionToken(ingestor.type) }) }).catch(err => console.error('Error disconnecting from Google Drive:', err)); }} - className="text-white hover:text-gray-200 text-xs underline" + className="text-[#212121] hover:text-gray-700 text-xs underline" > Disconnect @@ -952,7 +959,7 @@ function Upload({ {/* File Browser */}
-
+
{/* Breadcrumb navigation */}
{folderPath.map((path, index) => ( @@ -960,7 +967,7 @@ function Upload({ {index > 0 && /}
@@ -1007,23 +1002,16 @@ function Upload({

Select Files from Google Drive

- {googleDriveFiles.length > 0 && ( - - )} + + {selectedFiles.length > 0 + ? `${selectedFiles.length} file${selectedFiles.length !== 1 ? 's' : ''} selected` + : '' + } +
- {selectedFiles.length > 0 && ( -

- {selectedFiles.length} file{selectedFiles.length !== 1 ? 's' : ''} selected -

- )}
-
+
{isLoadingFiles && googleDriveFiles.length === 0 ? (
@@ -1041,66 +1029,69 @@ function Upload({ {googleDriveFiles.map((file) => (
-
-
- handleFileSelect(file.id)} - className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" - /> -
- {file.type === 'application/vnd.google-apps.folder' || file.isFolder ? ( +
+
{ + e.stopPropagation(); + handleFileSelect(file.id); + }} + >
handleFolderClick(file.id, file.name)} + className="flex h-5 w-5 shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783] cursor-pointer" > - Folder + {selectedFiles.includes(file.id) && ( + Selected + )}
- ) : ( -
- File +
+
{ + if (file.type === 'application/vnd.google-apps.folder' || file.isFolder) { + handleFolderClick(file.id, file.name); + } else { + handleFileSelect(file.id); + } + }} + > +
+ {file.type +
+
+

+ {file.name} +

+

+ {file.size && `${formatBytes(file.size)} • `}Modified {formatDate(file.modifiedTime)} +

- )} -
-

{ - if (file.type === 'application/vnd.google-apps.folder' || file.isFolder) { - handleFolderClick(file.id, file.name); - } - }} - > - {file.name} -

-

- {file.size && `${formatBytes(file.size)} • `}Modified {formatDate(file.modifiedTime)} -

))}
-
- {isLoadingFiles && ( + {isLoadingFiles && ( +
Loading more files...
- )} - {!hasMoreFiles && !isLoadingFiles && ( - All files loaded - )} -
+
+ )} )}
@@ -1154,10 +1145,7 @@ function Upload({ : 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer text-white' }`} > - {ingestor.type === 'google_drive' && selectedFiles.length > 0 - ? `Train with ${selectedFiles.length} file${selectedFiles.length !== 1 ? 's' : ''}` - : t('modals.uploadDoc.train') - } + {t('modals.uploadDoc.train')} )}
@@ -1189,6 +1177,14 @@ function Upload({ }; }, [hasMoreFiles, isLoadingFiles, nextPageToken, currentFolderId, ingestor.type]); + useEffect(() => { + return () => { + if (searchTimeoutRef.current) { + clearTimeout(searchTimeoutRef.current); + } + }; + }, []); + return (