From 2c9d01ba2db470b27d1232fd6f33d2811d81da28 Mon Sep 17 00:00:00 2001 From: CREDO23 Date: Tue, 10 Mar 2026 20:29:09 +0200 Subject: [PATCH] replace custom folder tree with Google Picker in Drive configs --- .../components/composio-drive-config.tsx | 106 ++++++++---------- .../components/google-drive-config.tsx | 105 ++++++++--------- 2 files changed, 90 insertions(+), 121 deletions(-) diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx index 239125565..c8aea8721 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx @@ -6,12 +6,12 @@ import { FileText, FolderClosed, Image, + Loader2, Presentation, X, } from "lucide-react"; import type { FC } from "react"; -import { useEffect, useState } from "react"; -import { ComposioDriveFolderTree } from "@/components/connectors/composio-drive-folder-tree"; +import { useCallback, useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { @@ -23,6 +23,7 @@ import { } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import type { SearchSourceConnector } from "@/contracts/types/connector.types"; +import { type PickerResult, useGooglePicker } from "@/hooks/use-google-picker"; interface ComposioDriveConfigProps { connector: SearchSourceConnector; @@ -30,7 +31,7 @@ interface ComposioDriveConfigProps { onNameChange?: (name: string) => void; } -interface SelectedFolder { +interface SelectedItem { id: string; name: string; } @@ -47,10 +48,8 @@ const DEFAULT_INDEXING_OPTIONS: IndexingOptions = { include_subfolders: true, }; -// Helper to get appropriate icon for file type based on file name function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") { const lowerName = fileName.toLowerCase(); - // Spreadsheets if ( lowerName.endsWith(".xlsx") || lowerName.endsWith(".xls") || @@ -59,7 +58,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr ) { return ; } - // Presentations if ( lowerName.endsWith(".pptx") || lowerName.endsWith(".ppt") || @@ -67,7 +65,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr ) { return ; } - // Documents (word, text only - not PDF) if ( lowerName.endsWith(".docx") || lowerName.endsWith(".doc") || @@ -78,7 +75,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr ) { return ; } - // Images if ( lowerName.endsWith(".png") || lowerName.endsWith(".jpg") || @@ -89,7 +85,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr ) { return ; } - // Default (including PDF) return ; } @@ -99,22 +94,18 @@ export const ComposioDriveConfig: FC = ({ }) => { const isIndexable = connector.config?.is_indexable as boolean; - // Initialize with existing selected folders and files from connector config - const existingFolders = - (connector.config?.selected_folders as SelectedFolder[] | undefined) || []; - const existingFiles = (connector.config?.selected_files as SelectedFolder[] | undefined) || []; + const existingFolders = (connector.config?.selected_folders as SelectedItem[] | undefined) || []; + const existingFiles = (connector.config?.selected_files as SelectedItem[] | undefined) || []; const existingIndexingOptions = (connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS; - const [selectedFolders, setSelectedFolders] = useState(existingFolders); - const [selectedFiles, setSelectedFiles] = useState(existingFiles); - const [showFolderSelector, setShowFolderSelector] = useState(false); + const [selectedFolders, setSelectedFolders] = useState(existingFolders); + const [selectedFiles, setSelectedFiles] = useState(existingFiles); const [indexingOptions, setIndexingOptions] = useState(existingIndexingOptions); - // Update selected folders and files when connector config changes useEffect(() => { - const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || []; - const files = (connector.config?.selected_files as SelectedFolder[] | undefined) || []; + const folders = (connector.config?.selected_folders as SelectedItem[] | undefined) || []; + const files = (connector.config?.selected_files as SelectedItem[] | undefined) || []; const options = (connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS; @@ -124,8 +115,8 @@ export const ComposioDriveConfig: FC = ({ }, [connector.config]); const updateConfig = ( - folders: SelectedFolder[], - files: SelectedFolder[], + folders: SelectedItem[], + files: SelectedItem[], options: IndexingOptions ) => { if (onConfigChange) { @@ -138,15 +129,26 @@ export const ComposioDriveConfig: FC = ({ } }; - const handleSelectFolders = (folders: SelectedFolder[]) => { - setSelectedFolders(folders); - updateConfig(folders, selectedFiles, indexingOptions); - }; + const handlePicked = useCallback( + (result: PickerResult) => { + const folders = result.folders.map((f) => ({ id: f.id, name: f.name })); + const files = result.files.map((f) => ({ id: f.id, name: f.name })); + setSelectedFolders(folders); + setSelectedFiles(files); + updateConfig(folders, files, indexingOptions); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [indexingOptions, connector.config] + ); - const handleSelectFiles = (files: SelectedFolder[]) => { - setSelectedFiles(files); - updateConfig(selectedFolders, files, indexingOptions); - }; + const { + openPicker, + loading: pickerLoading, + error: pickerError, + } = useGooglePicker({ + connectorId: connector.id, + onPicked: handlePicked, + }); const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => { const newOptions = { ...indexingOptions, [key]: value }; @@ -155,20 +157,19 @@ export const ComposioDriveConfig: FC = ({ }; const handleRemoveFolder = (folderId: string) => { - const newFolders = selectedFolders.filter((folder) => folder.id !== folderId); + const newFolders = selectedFolders.filter((f) => f.id !== folderId); setSelectedFolders(newFolders); updateConfig(newFolders, selectedFiles, indexingOptions); }; const handleRemoveFile = (fileId: string) => { - const newFiles = selectedFiles.filter((file) => file.id !== fileId); + const newFiles = selectedFiles.filter((f) => f.id !== fileId); setSelectedFiles(newFiles); updateConfig(selectedFolders, newFiles, indexingOptions); }; const totalSelected = selectedFolders.length + selectedFiles.length; - // Only show configuration if the connector is indexable if (!isIndexable) { return
; } @@ -241,35 +242,18 @@ export const ComposioDriveConfig: FC = ({
)} - {showFolderSelector ? ( -
- - -
- ) : ( - - )} + + + {pickerError &&

{pickerError}

} {/* Indexing Options */} diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx index 383f6ce0e..500ee133a 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx @@ -6,12 +6,12 @@ import { FileText, FolderClosed, Image, + Loader2, Presentation, X, } from "lucide-react"; import type { FC } from "react"; -import { useEffect, useState } from "react"; -import { GoogleDriveFolderTree } from "@/components/connectors/google-drive-folder-tree"; +import { useCallback, useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { @@ -22,9 +22,10 @@ import { SelectValue, } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; +import { type PickerResult, useGooglePicker } from "@/hooks/use-google-picker"; import type { ConnectorConfigProps } from "../index"; -interface SelectedFolder { +interface SelectedItem { id: string; name: string; } @@ -41,10 +42,8 @@ const DEFAULT_INDEXING_OPTIONS: IndexingOptions = { include_subfolders: true, }; -// Helper to get appropriate icon for file type based on file name function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") { const lowerName = fileName.toLowerCase(); - // Spreadsheets if ( lowerName.endsWith(".xlsx") || lowerName.endsWith(".xls") || @@ -53,7 +52,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr ) { return ; } - // Presentations if ( lowerName.endsWith(".pptx") || lowerName.endsWith(".ppt") || @@ -61,7 +59,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr ) { return ; } - // Documents (word, text only - not PDF) if ( lowerName.endsWith(".docx") || lowerName.endsWith(".doc") || @@ -72,7 +69,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr ) { return ; } - // Images if ( lowerName.endsWith(".png") || lowerName.endsWith(".jpg") || @@ -83,27 +79,22 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr ) { return ; } - // Default (including PDF) return ; } export const GoogleDriveConfig: FC = ({ connector, onConfigChange }) => { - // Initialize with existing selected folders and files from connector config - const existingFolders = - (connector.config?.selected_folders as SelectedFolder[] | undefined) || []; - const existingFiles = (connector.config?.selected_files as SelectedFolder[] | undefined) || []; + const existingFolders = (connector.config?.selected_folders as SelectedItem[] | undefined) || []; + const existingFiles = (connector.config?.selected_files as SelectedItem[] | undefined) || []; const existingIndexingOptions = (connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS; - const [selectedFolders, setSelectedFolders] = useState(existingFolders); - const [selectedFiles, setSelectedFiles] = useState(existingFiles); - const [showFolderSelector, setShowFolderSelector] = useState(false); + const [selectedFolders, setSelectedFolders] = useState(existingFolders); + const [selectedFiles, setSelectedFiles] = useState(existingFiles); const [indexingOptions, setIndexingOptions] = useState(existingIndexingOptions); - // Update selected folders and files when connector config changes useEffect(() => { - const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || []; - const files = (connector.config?.selected_files as SelectedFolder[] | undefined) || []; + const folders = (connector.config?.selected_folders as SelectedItem[] | undefined) || []; + const files = (connector.config?.selected_files as SelectedItem[] | undefined) || []; const options = (connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS; @@ -113,8 +104,8 @@ export const GoogleDriveConfig: FC = ({ connector, onConfi }, [connector.config]); const updateConfig = ( - folders: SelectedFolder[], - files: SelectedFolder[], + folders: SelectedItem[], + files: SelectedItem[], options: IndexingOptions ) => { if (onConfigChange) { @@ -127,15 +118,26 @@ export const GoogleDriveConfig: FC = ({ connector, onConfi } }; - const handleSelectFolders = (folders: SelectedFolder[]) => { - setSelectedFolders(folders); - updateConfig(folders, selectedFiles, indexingOptions); - }; + const handlePicked = useCallback( + (result: PickerResult) => { + const folders = result.folders.map((f) => ({ id: f.id, name: f.name })); + const files = result.files.map((f) => ({ id: f.id, name: f.name })); + setSelectedFolders(folders); + setSelectedFiles(files); + updateConfig(folders, files, indexingOptions); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [indexingOptions, connector.config] + ); - const handleSelectFiles = (files: SelectedFolder[]) => { - setSelectedFiles(files); - updateConfig(selectedFolders, files, indexingOptions); - }; + const { + openPicker, + loading: pickerLoading, + error: pickerError, + } = useGooglePicker({ + connectorId: connector.id, + onPicked: handlePicked, + }); const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => { const newOptions = { ...indexingOptions, [key]: value }; @@ -144,13 +146,13 @@ export const GoogleDriveConfig: FC = ({ connector, onConfi }; const handleRemoveFolder = (folderId: string) => { - const newFolders = selectedFolders.filter((folder) => folder.id !== folderId); + const newFolders = selectedFolders.filter((f) => f.id !== folderId); setSelectedFolders(newFolders); updateConfig(newFolders, selectedFiles, indexingOptions); }; const handleRemoveFile = (fileId: string) => { - const newFiles = selectedFiles.filter((file) => file.id !== fileId); + const newFiles = selectedFiles.filter((f) => f.id !== fileId); setSelectedFiles(newFiles); updateConfig(selectedFolders, newFiles, indexingOptions); }; @@ -225,35 +227,18 @@ export const GoogleDriveConfig: FC = ({ connector, onConfi )} - {showFolderSelector ? ( -
- - -
- ) : ( - - )} + + + {pickerError &&

{pickerError}

} {/* Indexing Options */}