apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: enhance OneDrive folder management by adding mimeType handling and integrating DriveFolderTree component for improved UI

Browse source
This commit is contained in:
Anish Sarkar 2026-03-29 03:29:31 +05:30
parent 101e426792
commit c8767272ec
10 changed files with 257 additions and 606 deletions
Download patch file Download diff file Expand all files Collapse all files

4
surfsense_backend/app/connectors/onedrive/folder_manager.py
View file

@ -24,6 +24,10 @@ async def list_folder_contents(
for item in items:
item["isFolder"] = is_folder(item)
if item["isFolder"]:
item.setdefault("mimeType", "application/vnd.ms-folder")
else:
item.setdefault("mimeType", item.get("file", {}).get("mimeType", "application/octet-stream"))
items.sort(key=lambda x: (not x["isFolder"], x.get("name", "").lower()))

118
surfsense_backend/app/routes/onedrive_add_connector_route.py
View file

@ -5,8 +5,7 @@ Endpoints:
- GET /auth/onedrive/connector/add - Initiate OAuth
- GET /auth/onedrive/connector/callback - Handle OAuth callback
- GET /auth/onedrive/connector/reauth - Re-authenticate existing connector
- GET /connectors/{connector_id}/onedrive/folders - List folder contents (legacy custom browser)
- GET /connectors/{connector_id}/onedrive/picker-token - Get SharePoint token for File Picker v8
- GET /connectors/{connector_id}/onedrive/folders - List folder contents
"""
import logging
@ -396,121 +395,6 @@ async def list_onedrive_folders(
raise HTTPException(status_code=500, detail=f"Failed to list OneDrive contents: {e!s}") from e
@router.get("/connectors/{connector_id}/onedrive/picker-token")
async def get_onedrive_picker_token(
connector_id: int,
resource: str | None = None,
session: AsyncSession = Depends(get_async_session),
user: User = Depends(current_active_user),
):
"""Get an access token scoped for the OneDrive File Picker v8.
The picker requires SharePoint-audience tokens, not Graph tokens.
If *resource* is omitted the user's OneDrive root URL is resolved via
Graph and used as the resource.
"""
try:
result = await session.execute(
select(SearchSourceConnector).filter(
SearchSourceConnector.id == connector_id,
SearchSourceConnector.user_id == user.id,
SearchSourceConnector.connector_type == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
)
)
connector = result.scalars().first()
if not connector:
raise HTTPException(status_code=404, detail="OneDrive connector not found or access denied")
token_encryption = get_token_encryption()
is_encrypted = connector.config.get("_token_encrypted", False)
# Resolve the SharePoint base URL when the caller doesn't provide one
if not resource:
access_token = connector.config.get("access_token")
if is_encrypted and access_token:
access_token = token_encryption.decrypt_token(access_token)
# Refresh the Graph token if it has expired
expires_at_str = connector.config.get("expires_at")
if expires_at_str:
from dateutil.parser import parse as parse_date
if datetime.now(UTC) >= parse_date(expires_at_str):
connector = await refresh_onedrive_token(session, connector)
access_token = connector.config.get("access_token")
if connector.config.get("_token_encrypted") and access_token:
access_token = token_encryption.decrypt_token(access_token)
async with httpx.AsyncClient() as client:
drive_resp = await client.get(
"https://graph.microsoft.com/v1.0/me/drive/root",
headers={"Authorization": f"Bearer {access_token}"},
timeout=30.0,
)
if drive_resp.status_code != 200:
raise HTTPException(
status_code=500,
detail="Failed to resolve OneDrive base URL from Graph API",
)
from urllib.parse import urlparse
web_url = drive_resp.json().get("webUrl", "")
parsed = urlparse(web_url)
resource = f"{parsed.scheme}://{parsed.hostname}"
# Exchange the refresh token for a SharePoint-audience token
refresh_token = connector.config.get("refresh_token")
if is_encrypted and refresh_token:
refresh_token = token_encryption.decrypt_token(refresh_token)
if not refresh_token:
raise HTTPException(status_code=400, detail="No refresh token available")
token_data = {
"client_id": config.MICROSOFT_CLIENT_ID,
"client_secret": config.MICROSOFT_CLIENT_SECRET,
"grant_type": "refresh_token",
"refresh_token": refresh_token,
"scope": f"{resource}/.default",
}
async with httpx.AsyncClient() as client:
token_response = await client.post(
TOKEN_URL,
data=token_data,
headers={"Content-Type": "application/x-www-form-urlencoded"},
timeout=30.0,
)
if token_response.status_code != 200:
error_detail = "Failed to acquire picker token"
try:
error_json = token_response.json()
error_detail = error_json.get("error_description", error_detail)
except Exception:
pass
logger.error("Picker token exchange failed for connector %s: %s", connector_id, error_detail)
raise HTTPException(status_code=400, detail=error_detail)
token_json = token_response.json()
# Persist new refresh token when Microsoft rotates it
new_refresh = token_json.get("refresh_token")
if new_refresh:
cfg = dict(connector.config)
cfg["refresh_token"] = token_encryption.encrypt_token(new_refresh)
connector.config = cfg
flag_modified(connector, "config")
await session.commit()
return {
"access_token": token_json["access_token"],
"base_url": resource,
}
except HTTPException:
raise
except Exception as e:
logger.error("Error getting OneDrive picker token: %s", str(e), exc_info=True)
raise HTTPException(status_code=500, detail=f"Failed to get picker token: {e!s}") from e
async def refresh_onedrive_token(
session: AsyncSession, connector: SearchSourceConnector
) -> SearchSourceConnector:

8
surfsense_web/components/assistant-ui/connector-popup.tsx
View file

@ -22,10 +22,6 @@ import { Tabs, TabsContent } from "@/components/ui/tabs";
import type { SearchSourceConnector } from "@/contracts/types/connector.types";
import { useConnectorsSync } from "@/hooks/use-connectors-sync";
import { PICKER_CLOSE_EVENT, PICKER_OPEN_EVENT } from "@/hooks/use-google-picker";
import {
ONEDRIVE_PICKER_CLOSE_EVENT,
ONEDRIVE_PICKER_OPEN_EVENT,
} from "@/hooks/use-onedrive-picker";
import { cn } from "@/lib/utils";
import { ConnectorDialogHeader } from "./connector-popup/components/connector-dialog-header";
import { ConnectorConnectView } from "./connector-popup/connector-configs/views/connector-connect-view";
@ -153,13 +149,9 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
const onClose = () => setPickerOpen(false);
window.addEventListener(PICKER_OPEN_EVENT, onOpen);
window.addEventListener(PICKER_CLOSE_EVENT, onClose);
window.addEventListener(ONEDRIVE_PICKER_OPEN_EVENT, onOpen);
window.addEventListener(ONEDRIVE_PICKER_CLOSE_EVENT, onClose);
return () => {
window.removeEventListener(PICKER_OPEN_EVENT, onOpen);
window.removeEventListener(PICKER_CLOSE_EVENT, onClose);
window.removeEventListener(ONEDRIVE_PICKER_OPEN_EVENT, onOpen);
window.removeEventListener(ONEDRIVE_PICKER_CLOSE_EVENT, onClose);
};
}, []);

30
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
View file

@ -13,7 +13,7 @@ import {
} from "lucide-react";
import type { FC } from "react";
import { useCallback, useEffect, useState } from "react";
import { ComposioDriveFolderTree } from "@/components/connectors/composio-drive-folder-tree";
import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
import { Label } from "@/components/ui/label";
import {
Select,
@ -23,13 +23,9 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { connectorsApiService } from "@/lib/apis/connectors-api.service";
import type { ConnectorConfigProps } from "../index";
interface SelectedFolder {
id: string;
name: string;
}
interface IndexingOptions {
max_files_per_folder: number;
incremental_sync: boolean;
@ -102,6 +98,16 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
setAuthError(true);
}, []);
const fetchItems = useCallback(
async (parentId?: string) => {
return connectorsApiService.listComposioDriveFolders({
connector_id: connector.id,
parent_id: parentId,
});
},
[connector.id]
);
const [isEditMode] = useState(() => existingFolders.length > 0 || existingFiles.length > 0);
const [isFolderTreeOpen, setIsFolderTreeOpen] = useState(!isEditMode);
@ -255,24 +261,28 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
)}
</button>
{isFolderTreeOpen && (
<ComposioDriveFolderTree
connectorId={connector.id}
<DriveFolderTree
fetchItems={fetchItems}
selectedFolders={selectedFolders}
onSelectFolders={handleSelectFolders}
selectedFiles={selectedFiles}
onSelectFiles={handleSelectFiles}
onAuthError={handleAuthError}
rootLabel="My Drive"
providerName="Google Drive"
/>
)}
</div>
) : (
<ComposioDriveFolderTree
connectorId={connector.id}
<DriveFolderTree
fetchItems={fetchItems}
selectedFolders={selectedFolders}
onSelectFolders={handleSelectFolders}
selectedFiles={selectedFiles}
onSelectFiles={handleSelectFiles}
onAuthError={handleAuthError}
rootLabel="My Drive"
providerName="Google Drive"
/>
)}
</div>

169
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
View file

@ -1,6 +1,8 @@
"use client";
import {
ChevronDown,
ChevronRight,
File,
FileSpreadsheet,
FileText,
@ -11,7 +13,7 @@ import {
} from "lucide-react";
import type { FC } from "react";
import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
import { Label } from "@/components/ui/label";
import {
Select,
@ -20,17 +22,10 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Spinner } from "@/components/ui/spinner";
import { Switch } from "@/components/ui/switch";
import { type OneDrivePickerResult, useOneDrivePicker } from "@/hooks/use-onedrive-picker";
import { connectorsApiService } from "@/lib/apis/connectors-api.service";
import type { ConnectorConfigProps } from "../index";
interface SelectedItem {
id: string;
name: string;
driveId?: string;
}
interface IndexingOptions {
max_files_per_folder: number;
incremental_sync: boolean;
@ -43,7 +38,7 @@ const DEFAULT_INDEXING_OPTIONS: IndexingOptions = {
include_subfolders: true,
};
function getFileIconFromName(fileName: string, className = "size-3.5 shrink-0") {
function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") {
const lowerName = fileName.toLowerCase();
if (lowerName.endsWith(".xlsx") || lowerName.endsWith(".xls") || lowerName.endsWith(".csv")) {
return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
@ -61,18 +56,39 @@ function getFileIconFromName(fileName: string, className = "size-3.5 shrink-0")
}
export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigChange }) => {
const existingFolders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
const existingFiles = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
const existingFolders =
(connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
const existingFiles = (connector.config?.selected_files as SelectedFolder[] | undefined) || [];
const existingIndexingOptions =
(connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS;
const [selectedFolders, setSelectedFolders] = useState<SelectedItem[]>(existingFolders);
const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles);
const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders);
const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles);
const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
const [authError, setAuthError] = useState(false);
const isAuthExpired = connector.config?.auth_expired === true || authError;
const handleAuthError = useCallback(() => {
setAuthError(true);
}, []);
const fetchItems = useCallback(
async (parentId?: string) => {
return connectorsApiService.listOneDriveFolders({
connector_id: connector.id,
parent_id: parentId,
});
},
[connector.id]
);
const [isEditMode] = useState(() => existingFolders.length > 0 || existingFiles.length > 0);
const [isFolderTreeOpen, setIsFolderTreeOpen] = useState(!isEditMode);
useEffect(() => {
const folders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
const files = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
const files = (connector.config?.selected_files as SelectedFolder[] | undefined) || [];
const options =
(connector.config?.indexing_options as IndexingOptions | undefined) ||
DEFAULT_INDEXING_OPTIONS;
@ -82,9 +98,9 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
}, [connector.config]);
const updateConfig = (
folders: SelectedItem[],
files: SelectedItem[],
options: IndexingOptions,
folders: SelectedFolder[],
files: SelectedFolder[],
options: IndexingOptions
) => {
if (onConfigChange) {
onConfigChange({
@ -96,30 +112,15 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
}
};
const handlePicked = useCallback(
(result: OneDrivePickerResult) => {
const folders = result.folders.map((f) => ({ id: f.id, name: f.name, driveId: f.driveId }));
const files = result.files.map((f) => ({ id: f.id, name: f.name, driveId: f.driveId }));
setSelectedFolders(folders);
setSelectedFiles(files);
updateConfig(folders, files, indexingOptions);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[indexingOptions, connector.config],
);
const handleSelectFolders = (folders: SelectedFolder[]) => {
setSelectedFolders(folders);
updateConfig(folders, selectedFiles, indexingOptions);
};
const {
openPicker,
loading: pickerLoading,
error: pickerError,
} = useOneDrivePicker({
connectorId: connector.id,
onPicked: handlePicked,
});
const isAuthExpired =
connector.config?.auth_expired === true ||
(!!pickerError && pickerError.toLowerCase().includes("authentication expired"));
const handleSelectFiles = (files: SelectedFolder[]) => {
setSelectedFiles(files);
updateConfig(selectedFolders, files, indexingOptions);
};
const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => {
const newOptions = { ...indexingOptions, [key]: value };
@ -128,13 +129,13 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
};
const handleRemoveFolder = (folderId: string) => {
const newFolders = selectedFolders.filter((f) => f.id !== folderId);
const newFolders = selectedFolders.filter((folder) => folder.id !== folderId);
setSelectedFolders(newFolders);
updateConfig(newFolders, selectedFiles, indexingOptions);
};
const handleRemoveFile = (fileId: string) => {
const newFiles = selectedFiles.filter((f) => f.id !== fileId);
const newFiles = selectedFiles.filter((file) => file.id !== fileId);
setSelectedFiles(newFiles);
updateConfig(selectedFolders, newFiles, indexingOptions);
};
@ -142,13 +143,13 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
const totalSelected = selectedFolders.length + selectedFiles.length;
return (
<div className="space-y-4">
<div className="space-y-6">
{/* Folder & File Selection */}
<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
<div className="space-y-1 sm:space-y-2">
<h3 className="font-medium text-sm sm:text-base">Folder & File Selection</h3>
<p className="text-xs sm:text-sm text-muted-foreground">
Select specific folders and/or individual files to index.
Select specific folders and/or individual files to index from your OneDrive.
</p>
</div>
@ -159,7 +160,7 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
const parts: string[] = [];
if (selectedFolders.length > 0) {
parts.push(
`${selectedFolders.length} folder${selectedFolders.length > 1 ? "s" : ""}`,
`${selectedFolders.length} folder${selectedFolders.length > 1 ? "s" : ""}`
);
}
if (selectedFiles.length > 0) {
@ -209,23 +210,52 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
</div>
)}
<Button
type="button"
variant="outline"
onClick={openPicker}
disabled={pickerLoading || isAuthExpired}
className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
>
{pickerLoading && <Spinner size="xs" className="mr-1.5" />}
{totalSelected > 0 ? "Change Selection" : "Select from OneDrive"}
</Button>
{isAuthExpired && (
<p className="text-xs text-amber-600 dark:text-amber-500">
Your OneDrive authentication has expired. Please re-authenticate using the button
below.
</p>
)}
{isEditMode ? (
<div className="space-y-2">
<button
type="button"
onClick={() => setIsFolderTreeOpen(!isFolderTreeOpen)}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground transition-colors w-fit"
>
Change Selection
{isFolderTreeOpen ? (
<ChevronDown className="size-4" />
) : (
<ChevronRight className="size-4" />
)}
</button>
{isFolderTreeOpen && (
<DriveFolderTree
fetchItems={fetchItems}
selectedFolders={selectedFolders}
onSelectFolders={handleSelectFolders}
selectedFiles={selectedFiles}
onSelectFiles={handleSelectFiles}
onAuthError={handleAuthError}
rootLabel="OneDrive"
providerName="OneDrive"
/>
)}
</div>
) : (
<DriveFolderTree
fetchItems={fetchItems}
selectedFolders={selectedFolders}
onSelectFolders={handleSelectFolders}
selectedFiles={selectedFiles}
onSelectFiles={handleSelectFiles}
onAuthError={handleAuthError}
rootLabel="OneDrive"
providerName="OneDrive"
/>
)}
</div>
{/* Indexing Options */}
@ -237,6 +267,7 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
</p>
</div>
{/* Max files per folder */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
@ -260,16 +291,27 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
<SelectValue placeholder="Select limit" />
</SelectTrigger>
<SelectContent className="z-[100]">
<SelectItem value="50">50 files</SelectItem>
<SelectItem value="100">100 files</SelectItem>
<SelectItem value="250">250 files</SelectItem>
<SelectItem value="500">500 files</SelectItem>
<SelectItem value="1000">1000 files</SelectItem>
<SelectItem value="50" className="text-xs sm:text-sm">
50 files
</SelectItem>
<SelectItem value="100" className="text-xs sm:text-sm">
100 files
</SelectItem>
<SelectItem value="250" className="text-xs sm:text-sm">
250 files
</SelectItem>
<SelectItem value="500" className="text-xs sm:text-sm">
500 files
</SelectItem>
<SelectItem value="1000" className="text-xs sm:text-sm">
1000 files
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{/* Incremental sync toggle */}
<div className="flex items-center justify-between pt-2 border-t border-slate-400/20">
<div className="space-y-0.5">
<Label htmlFor="od-incremental-sync" className="text-sm font-medium">
@ -286,6 +328,7 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
/>
</div>
{/* Include subfolders toggle */}
<div className="flex items-center justify-between pt-2 border-t border-slate-400/20">
<div className="space-y-0.5">
<Label htmlFor="od-include-subfolders" className="text-sm font-medium">

246
surfsense_web/components/connectors/composio-drive-folder-tree.tsx → surfsense_web/components/connectors/drive-folder-tree.tsx
View file

@ -12,15 +12,13 @@ import {
Image,
Presentation,
} from "lucide-react";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Spinner } from "@/components/ui/spinner";
import { useComposioDriveFolders } from "@/hooks/use-composio-drive-folders";
import { connectorsApiService } from "@/lib/apis/connectors-api.service";
import { cn } from "@/lib/utils";
interface DriveItem {
export interface DriveItem {
id: string;
name: string;
mimeType: string;
@ -32,73 +30,92 @@ interface DriveItem {
interface ItemTreeNode {
item: DriveItem;
children: DriveItem[] | null; // null = not loaded, [] = loaded but empty
children: DriveItem[] | null;
isExpanded: boolean;
isLoading: boolean;
}
interface SelectedFolder {
export interface SelectedFolder {
id: string;
name: string;
}
interface ComposioDriveFolderTreeProps {
connectorId: number;
interface DriveFolderTreeProps {
fetchItems: (parentId?: string) => Promise<{ items: DriveItem[] }>;
selectedFolders: SelectedFolder[];
onSelectFolders: (folders: SelectedFolder[]) => void;
selectedFiles?: SelectedFolder[];
onSelectFiles?: (files: SelectedFolder[]) => void;
onAuthError?: (message: string) => void;
rootLabel?: string;
providerName?: string;
}
// Helper to get appropriate icon for file type
function getFileIcon(mimeType: string, className: string = "h-4 w-4") {
if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) {
function getFileIcon(mimeType?: string, className: string = "h-4 w-4") {
const type = mimeType ?? "";
if (type.includes("spreadsheet") || type.includes("excel")) {
return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
}
if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) {
if (type.includes("presentation") || type.includes("powerpoint")) {
return <Presentation className={`${className} text-muted-foreground`} />;
}
if (mimeType.includes("document") || mimeType.includes("word") || mimeType.includes("text")) {
if (type.includes("document") || type.includes("word") || type.includes("text")) {
return <FileText className={`${className} text-muted-foreground`} />;
}
if (mimeType.includes("image")) {
if (type.includes("image")) {
return <Image className={`${className} text-muted-foreground`} />;
}
return <File className={`${className} text-muted-foreground`} />;
}
export function ComposioDriveFolderTree({
connectorId,
export function DriveFolderTree({
fetchItems,
selectedFolders,
onSelectFolders,
selectedFiles = [],
onSelectFiles = () => {},
onAuthError,
}: ComposioDriveFolderTreeProps) {
rootLabel = "My Drive",
providerName = "Drive",
}: DriveFolderTreeProps) {
const [itemStates, setItemStates] = useState<Map<string, ItemTreeNode>>(new Map());
const {
data: rootData,
isLoading: isLoadingRoot,
error: rootError,
} = useComposioDriveFolders({
connectorId,
});
const [rootItems, setRootItems] = useState<DriveItem[]>([]);
const [isLoadingRoot, setIsLoadingRoot] = useState(true);
const [rootError, setRootError] = useState<Error | null>(null);
useEffect(() => {
if (rootError && onAuthError) {
const msg = rootError instanceof Error ? rootError.message : String(rootError);
if (
msg.toLowerCase().includes("authentication expired") ||
msg.toLowerCase().includes("re-authenticate")
) {
onAuthError(msg);
}
}
}, [rootError, onAuthError]);
let cancelled = false;
setIsLoadingRoot(true);
setRootError(null);
const rootItems = rootData?.items || [];
fetchItems()
.then((data) => {
if (!cancelled) {
setRootItems(data.items || []);
setIsLoadingRoot(false);
}
})
.catch((err) => {
if (!cancelled) {
const error = err instanceof Error ? err : new Error(String(err));
setRootError(error);
setIsLoadingRoot(false);
if (onAuthError) {
const msg = error.message;
if (
msg.toLowerCase().includes("authentication expired") ||
msg.toLowerCase().includes("re-authenticate")
) {
onAuthError(msg);
}
}
}
});
return () => {
cancelled = true;
};
}, [fetchItems, onAuthError]);
const isFolderSelected = (folderId: string): boolean => {
return selectedFolders.some((f) => f.id === folderId);
@ -124,89 +141,81 @@ export function ComposioDriveFolderTree({
}
};
/**
* Find an item by ID across all loaded items (root and nested).
*/
const findItem = (itemId: string): DriveItem | undefined => {
const state = itemStates.get(itemId);
if (state?.item) return state.item;
const findItem = useCallback(
(itemId: string): DriveItem | undefined => {
const state = itemStates.get(itemId);
if (state?.item) return state.item;
const rootItem = rootItems.find((item) => item.id === itemId);
if (rootItem) return rootItem;
const rootItem = rootItems.find((item) => item.id === itemId);
if (rootItem) return rootItem;
for (const [, nodeState] of itemStates) {
if (nodeState.children) {
const found = nodeState.children.find((child) => child.id === itemId);
if (found) return found;
for (const [, nodeState] of itemStates) {
if (nodeState.children) {
const found = nodeState.children.find((child) => child.id === itemId);
if (found) return found;
}
}
}
return undefined;
};
return undefined;
},
[itemStates, rootItems]
);
const loadFolderContents = useCallback(
async (folderId: string) => {
try {
setItemStates((prev) => {
const newMap = new Map(prev);
const existing = newMap.get(folderId);
if (existing) {
newMap.set(folderId, { ...existing, isLoading: true });
} else {
const item = findItem(folderId);
if (item) {
newMap.set(folderId, {
item,
children: null,
isExpanded: false,
isLoading: true,
});
}
}
return newMap;
});
const data = await fetchItems(folderId);
const items = data.items || [];
setItemStates((prev) => {
const newMap = new Map(prev);
const existing = newMap.get(folderId);
const item = existing?.item || findItem(folderId);
/**
* Load and display contents of a specific folder.
*/
const loadFolderContents = async (folderId: string) => {
try {
setItemStates((prev) => {
const newMap = new Map(prev);
const existing = newMap.get(folderId);
if (existing) {
newMap.set(folderId, { ...existing, isLoading: true });
} else {
const item = findItem(folderId);
if (item) {
newMap.set(folderId, {
item,
children: null,
isExpanded: false,
isLoading: true,
children: items,
isExpanded: true,
isLoading: false,
});
}
}
return newMap;
});
return newMap;
});
} catch (error) {
console.error("Error loading folder contents:", error);
setItemStates((prev) => {
const newMap = new Map(prev);
const existing = newMap.get(folderId);
if (existing) {
newMap.set(folderId, { ...existing, isLoading: false });
}
return newMap;
});
}
},
[fetchItems, findItem]
);
const data = await connectorsApiService.listComposioDriveFolders({
connector_id: connectorId,
parent_id: folderId,
});
const items = data.items || [];
setItemStates((prev) => {
const newMap = new Map(prev);
const existing = newMap.get(folderId);
const item = existing?.item || findItem(folderId);
if (item) {
newMap.set(folderId, {
item,
children: items,
isExpanded: true,
isLoading: false,
});
} else {
console.error(`Could not find item for folderId: ${folderId}`);
}
return newMap;
});
} catch (error) {
console.error("Error loading folder contents:", error);
setItemStates((prev) => {
const newMap = new Map(prev);
const existing = newMap.get(folderId);
if (existing) {
newMap.set(folderId, { ...existing, isLoading: false });
}
return newMap;
});
}
};
/**
* Toggle folder expand/collapse state.
*/
const toggleFolder = async (item: DriveItem) => {
if (!item.isFolder) return;
@ -226,9 +235,6 @@ export function ComposioDriveFolderTree({
}
};
/**
* Render a single item (folder or file) with its children.
*/
const renderItem = (item: DriveItem, level: number = 0) => {
const state = itemStates.get(item.id);
const isExpanded = state?.isExpanded || false;
@ -240,7 +246,7 @@ export function ComposioDriveFolderTree({
const childFolders = children?.filter((c) => c.isFolder) || [];
const childFiles = children?.filter((c) => !c.isFolder) || [];
const indentSize = 0.75; // Smaller indent for mobile
const indentSize = 0.75;
return (
<div
@ -346,16 +352,16 @@ export function ComposioDriveFolderTree({
<div className="flex items-center gap-1 sm:gap-2 h-auto py-1 sm:py-2 px-1 sm:px-2 rounded-md hover:bg-accent cursor-pointer">
<Checkbox
checked={isFolderSelected("root")}
onCheckedChange={() => toggleFolderSelection("root", "My Drive")}
onCheckedChange={() => toggleFolderSelection("root", rootLabel)}
className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20"
/>
<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" />
<button
type="button"
className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left"
onClick={() => toggleFolderSelection("root", "My Drive")}
onClick={() => toggleFolderSelection("root", rootLabel)}
>
My Drive
{rootLabel}
</button>
</div>
</div>
@ -372,17 +378,15 @@ export function ComposioDriveFolderTree({
{!isLoadingRoot && rootError && (
<div className="text-center text-xs sm:text-sm text-amber-600 dark:text-amber-500 py-4 sm:py-8">
{(rootError instanceof Error ? rootError.message : String(rootError)).includes(
"authentication expired"
)
? "Google Drive authentication has expired. Please re-authenticate above."
: "Failed to load Google Drive contents."}
{rootError.message.includes("authentication expired")
? `${providerName} authentication has expired. Please re-authenticate above.`
: `Failed to load ${providerName} contents.`}
</div>
)}
{!isLoadingRoot && !rootError && rootItems.length === 0 && (
<div className="text-center text-xs sm:text-sm text-muted-foreground py-4 sm:py-8">
No files or folders found in your Google Drive
No files or folders found in your {providerName}
</div>
)}
</div>

2
surfsense_web/contracts/types/connector.types.ts
View file

@ -54,7 +54,7 @@ export const searchSourceConnector = z.object({
export const googleDriveItem = z.object({
id: z.string(),
name: z.string(),
mimeType: z.string(),
mimeType: z.string().optional().default("application/octet-stream"),
isFolder: z.boolean(),
parents: z.array(z.string()).optional(),
size: z.coerce.number().optional(),

28
surfsense_web/hooks/use-composio-drive-folders.ts
View file

@ -1,28 +0,0 @@
import { useQuery } from "@tanstack/react-query";
import { connectorsApiService } from "@/lib/apis/connectors-api.service";
import { cacheKeys } from "@/lib/query-client/cache-keys";
interface UseComposioDriveFoldersOptions {
connectorId: number;
parentId?: string;
enabled?: boolean;
}
export function useComposioDriveFolders({
connectorId,
parentId,
enabled = true,
}: UseComposioDriveFoldersOptions) {
return useQuery({
queryKey: cacheKeys.connectors.composioDrive.folders(connectorId, parentId),
queryFn: async () => {
return connectorsApiService.listComposioDriveFolders({
connector_id: connectorId,
parent_id: parentId,
});
},
enabled: enabled && !!connectorId,
staleTime: 5 * 60 * 1000, // 5 minutes
retry: 2,
});
}

254
surfsense_web/hooks/use-onedrive-picker.ts
View file

@ -1,254 +0,0 @@
"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { authenticatedFetch } from "@/lib/auth-utils";
export interface OneDrivePickerItem {
id: string;
name: string;
isFolder: boolean;
driveId?: string;
}
export interface OneDrivePickerResult {
folders: OneDrivePickerItem[];
files: OneDrivePickerItem[];
}
interface UseOneDrivePickerOptions {
connectorId: number;
onPicked: (result: OneDrivePickerResult) => void;
}
export const ONEDRIVE_PICKER_OPEN_EVENT = "onedrive-picker-open";
export const ONEDRIVE_PICKER_CLOSE_EVENT = "onedrive-picker-close";
async function fetchPickerToken(
connectorId: number,
resource?: string,
): Promise<{ access_token: string; base_url: string }> {
const backendUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
const params = new URLSearchParams();
if (resource) params.set("resource", resource);
const qs = params.toString();
const url = `${backendUrl}/api/v1/connectors/${connectorId}/onedrive/picker-token${qs ? `?${qs}` : ""}`;
const response = await authenticatedFetch(url);
if (!response.ok) {
const data = await response.json().catch(() => ({}));
throw new Error(data.detail || `Failed to get picker token (${response.status})`);
}
return response.json();
}
export function useOneDrivePicker({ connectorId, onPicked }: UseOneDrivePickerOptions) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const onPickedRef = useRef(onPicked);
onPickedRef.current = onPicked;
const openingRef = useRef(false);
const winRef = useRef<Window | null>(null);
const portRef = useRef<MessagePort | null>(null);
const messageHandlerRef = useRef<((e: MessageEvent) => void) | null>(null);
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
const closePicker = useCallback(() => {
window.dispatchEvent(new Event(ONEDRIVE_PICKER_CLOSE_EVENT));
if (pollRef.current) {
clearInterval(pollRef.current);
pollRef.current = null;
}
if (messageHandlerRef.current) {
window.removeEventListener("message", messageHandlerRef.current);
messageHandlerRef.current = null;
}
if (winRef.current && !winRef.current.closed) {
winRef.current.close();
}
winRef.current = null;
portRef.current = null;
openingRef.current = false;
}, []);
useEffect(() => {
const onEscape = (e: KeyboardEvent) => {
if (e.key === "Escape" && winRef.current) {
closePicker();
}
};
window.addEventListener("keydown", onEscape);
return () => {
window.removeEventListener("keydown", onEscape);
closePicker();
};
}, [closePicker]);
const openPicker = useCallback(async () => {
if (openingRef.current) return;
openingRef.current = true;
setLoading(true);
setError(null);
try {
const { access_token, base_url } = await fetchPickerToken(connectorId);
const win = window.open("", "OneDrivePicker", "width=1080,height=680");
if (!win) {
throw new Error("Popup blocked. Please allow popups for this site.");
}
winRef.current = win;
const channelId = crypto.randomUUID();
const pickerConfig = {
sdk: "8.0",
entry: { oneDrive: { files: {} } },
authentication: {},
messaging: {
origin: window.location.origin,
channelId,
},
selection: { mode: "multiple" },
typesAndSources: {
mode: "all" as const,
pivots: { oneDrive: true, recent: true },
},
};
const qs = new URLSearchParams({
filePicker: JSON.stringify(pickerConfig),
locale: navigator.language || "en-us",
});
const pickerUrl = `${base_url}/_layouts/15/FilePicker.aspx?${qs}`;
const form = win.document.createElement("form");
form.setAttribute("action", pickerUrl);
form.setAttribute("method", "POST");
const input = win.document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "access_token");
input.setAttribute("value", access_token);
form.appendChild(input);
win.document.body.append(form);
form.submit();
const handleMessage = (event: MessageEvent) => {
if (event.source !== win) return;
const msg = event.data;
if (msg?.type !== "initialize" || msg.channelId !== channelId) return;
const port = event.ports[0];
portRef.current = port;
port.addEventListener("message", async (portEvent: MessageEvent) => {
const payload = portEvent.data;
if (payload.type !== "command") return;
port.postMessage({ type: "acknowledge", id: payload.id });
const cmd = payload.data;
switch (cmd.command) {
case "authenticate": {
try {
const result = await fetchPickerToken(connectorId, cmd.resource);
port.postMessage({
type: "result",
id: payload.id,
data: { result: "token", token: result.access_token },
});
} catch (err) {
port.postMessage({
type: "result",
id: payload.id,
data: {
result: "error",
error: {
code: "unableToObtainToken",
message: err instanceof Error ? err.message : "Token error",
},
},
});
}
break;
}
case "pick": {
const items: Record<string, unknown>[] = cmd.items || [];
const folders: OneDrivePickerItem[] = [];
const files: OneDrivePickerItem[] = [];
for (const item of items) {
const isFolder =
item.folder != null ||
(typeof item["@odata.type"] === "string" &&
(item["@odata.type"] as string).includes("folder"));
const parentRef = item.parentReference as
| { driveId?: string }
| undefined;
const pickerItem: OneDrivePickerItem = {
id: item.id as string,
name: (item.name as string) || "Untitled",
isFolder,
driveId: parentRef?.driveId,
};
if (isFolder) {
folders.push(pickerItem);
} else {
files.push(pickerItem);
}
}
onPickedRef.current({ folders, files });
port.postMessage({
type: "result",
id: payload.id,
data: { result: "success" },
});
closePicker();
break;
}
case "close": {
closePicker();
break;
}
default: {
port.postMessage({
type: "result",
id: payload.id,
data: {
result: "error",
error: { code: "unsupportedCommand", message: cmd.command },
},
});
break;
}
}
});
port.start();
port.postMessage({ type: "activate" });
};
messageHandlerRef.current = handleMessage;
window.addEventListener("message", handleMessage);
pollRef.current = setInterval(() => {
if (win.closed) {
closePicker();
}
}, 500);
window.dispatchEvent(new Event(ONEDRIVE_PICKER_OPEN_EVENT));
} catch (err) {
openingRef.current = false;
const msg = err instanceof Error ? err.message : "Failed to open OneDrive Picker";
setError(msg);
toast.error("OneDrive Picker failed", { description: msg });
console.error("OneDrive Picker error:", err);
window.dispatchEvent(new Event(ONEDRIVE_PICKER_CLOSE_EVENT));
} finally {
setLoading(false);
}
}, [connectorId, closePicker]);
return { openPicker, closePicker, loading, error };
}

4
surfsense_web/lib/query-client/cache-keys.ts
View file

@ -79,10 +79,6 @@ export const cacheKeys = {
folders: (connectorId: number, parentId?: string) =>
["connectors", "google-drive", connectorId, "folders", parentId] as const,
},
composioDrive: {
folders: (connectorId: number, parentId?: string) =>
["connectors", "composio-drive", connectorId, "folders", parentId] as const,
},
},
comments: {
byMessage: (messageId: number) => ["comments", "message", messageId] as const,