apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-12 09:12:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix: improve Google Drive folder selection UX

Browse source
This commit is contained in:
CREDO23 2026-03-09 14:39:40 +02:00
parent d70e292fbe
commit 79daebbd7d
2 changed files with 62 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,8 @@
"use client"; "use client";
import { import {
ChevronDown,
ChevronRight,
File, File,
FileSpreadsheet, FileSpreadsheet,
FileText, FileText,
@ -12,7 +14,6 @@ import {
import type { FC } from "react"; import type { FC } from "react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ComposioDriveFolderTree } from "@/components/connectors/composio-drive-folder-tree"; import { ComposioDriveFolderTree } from "@/components/connectors/composio-drive-folder-tree";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
Select, Select,
@ -108,9 +109,11 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders); const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders);
const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles); const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles);
const [showFolderSelector, setShowFolderSelector] = useState(false);
const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions); const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
const [isEditMode] = useState(() => existingFolders.length > 0 || existingFiles.length > 0);
const [isFolderTreeOpen, setIsFolderTreeOpen] = useState(!isEditMode);
// Update selected folders and files when connector config changes // Update selected folders and files when connector config changes
useEffect(() => { useEffect(() => {
const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || []; const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
@ -241,8 +244,21 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
</div> </div>
)} )}
{showFolderSelector ? ( {isEditMode ? (
<div className="space-y-2 sm:space-y-3"> <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"
>
{isFolderTreeOpen ? (
<ChevronDown className="size-4" />
) : (
<ChevronRight className="size-4" />
)}
Change Selection
</button>
{isFolderTreeOpen && (
<ComposioDriveFolderTree <ComposioDriveFolderTree
connectorId={connector.id} connectorId={connector.id}
selectedFolders={selectedFolders} selectedFolders={selectedFolders}
@ -250,26 +266,17 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
selectedFiles={selectedFiles} selectedFiles={selectedFiles}
onSelectFiles={handleSelectFiles} onSelectFiles={handleSelectFiles}
/> />
<Button )}
type="button" </div>
variant="outline" ) : (
size="sm" <ComposioDriveFolderTree
onClick={() => setShowFolderSelector(false)} connectorId={connector.id}
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" selectedFolders={selectedFolders}
> onSelectFolders={handleSelectFolders}
Done Selecting selectedFiles={selectedFiles}
</Button> onSelectFiles={handleSelectFiles}
</div> />
) : ( )}
<Button
type="button"
variant="outline"
onClick={() => setShowFolderSelector(true)}
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"
>
{totalSelected > 0 ? "Change Selection" : "Select Folders & Files"}
</Button>
)}
</div> </div>
{/* Indexing Options */} {/* Indexing Options */}

55
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
View file

@ -1,6 +1,8 @@
"use client"; "use client";
import { import {
ChevronDown,
ChevronRight,
File, File,
FileSpreadsheet, FileSpreadsheet,
FileText, FileText,
@ -12,7 +14,6 @@ import {
import type { FC } from "react"; import type { FC } from "react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { GoogleDriveFolderTree } from "@/components/connectors/google-drive-folder-tree"; import { GoogleDriveFolderTree } from "@/components/connectors/google-drive-folder-tree";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
Select, Select,
@ -97,9 +98,11 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders); const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders);
const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles); const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles);
const [showFolderSelector, setShowFolderSelector] = useState(false);
const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions); const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
const [isEditMode] = useState(() => existingFolders.length > 0 || existingFiles.length > 0);
const [isFolderTreeOpen, setIsFolderTreeOpen] = useState(!isEditMode);
// Update selected folders and files when connector config changes // Update selected folders and files when connector config changes
useEffect(() => { useEffect(() => {
const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || []; const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
@ -225,8 +228,21 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
</div> </div>
)} )}
{showFolderSelector ? ( {isEditMode ? (
<div className="space-y-2 sm:space-y-3"> <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"
>
{isFolderTreeOpen ? (
<ChevronDown className="size-4" />
) : (
<ChevronRight className="size-4" />
)}
Change Selection
</button>
{isFolderTreeOpen && (
<GoogleDriveFolderTree <GoogleDriveFolderTree
connectorId={connector.id} connectorId={connector.id}
selectedFolders={selectedFolders} selectedFolders={selectedFolders}
@ -234,26 +250,17 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
selectedFiles={selectedFiles} selectedFiles={selectedFiles}
onSelectFiles={handleSelectFiles} onSelectFiles={handleSelectFiles}
/> />
<Button )}
type="button" </div>
variant="outline" ) : (
size="sm" <GoogleDriveFolderTree
onClick={() => setShowFolderSelector(false)} connectorId={connector.id}
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" selectedFolders={selectedFolders}
> onSelectFolders={handleSelectFolders}
Done Selecting selectedFiles={selectedFiles}
</Button> onSelectFiles={handleSelectFiles}
</div> />
) : ( )}
<Button
type="button"
variant="outline"
onClick={() => setShowFolderSelector(true)}
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"
>
{totalSelected > 0 ? "Change Selection" : "Select Folders & Files"}
</Button>
)}
</div> </div>
{/* Indexing Options */} {/* Indexing Options */}