gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

design sweep for ingest for connector page

Browse source
This commit is contained in:
Brent O'Neill 2025-10-03 15:00:53 -06:00
parent 886297a40d
commit 1eb0fb3593
2 changed files with 332 additions and 335 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/app/upload/[provider]/page.tsx
View file

@ -36,7 +36,7 @@ export default function UploadProviderPage() {
const [selectedFiles, setSelectedFiles] = useState<CloudFile[]>([]); const [selectedFiles, setSelectedFiles] = useState<CloudFile[]>([]);
const [isIngesting, setIsIngesting] = useState<boolean>(false); const [isIngesting, setIsIngesting] = useState<boolean>(false);
const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>( const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>(
null, null
); );
const [ingestSettings, setIngestSettings] = useState<IngestSettings>({ const [ingestSettings, setIngestSettings] = useState<IngestSettings>({
chunkSize: 1000, chunkSize: 1000,
@ -63,14 +63,14 @@ export default function UploadProviderPage() {
if (!providerInfo || !providerInfo.available) { if (!providerInfo || !providerInfo.available) {
setError( setError(
`Cloud provider "${provider}" is not available or configured.`, `Cloud provider "${provider}" is not available or configured.`
); );
return; return;
} }
// Check connector status // Check connector status
const statusResponse = await fetch( const statusResponse = await fetch(
`/api/connectors/${provider}/status`, `/api/connectors/${provider}/status`
); );
if (!statusResponse.ok) { if (!statusResponse.ok) {
throw new Error(`Failed to check ${provider} status`); throw new Error(`Failed to check ${provider} status`);
@ -80,7 +80,7 @@ export default function UploadProviderPage() {
const connections = statusData.connections || []; const connections = statusData.connections || [];
const activeConnection = connections.find( const activeConnection = connections.find(
(conn: { is_active: boolean; connection_id: string }) => (conn: { is_active: boolean; connection_id: string }) =>
conn.is_active, conn.is_active
); );
const isConnected = activeConnection !== undefined; const isConnected = activeConnection !== undefined;
@ -91,7 +91,7 @@ export default function UploadProviderPage() {
if (isConnected && activeConnection) { if (isConnected && activeConnection) {
try { try {
const tokenResponse = await fetch( const tokenResponse = await fetch(
`/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`, `/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`
); );
if (tokenResponse.ok) { if (tokenResponse.ok) {
const tokenData = await tokenResponse.json(); const tokenData = await tokenResponse.json();
@ -126,7 +126,7 @@ export default function UploadProviderPage() {
setError( setError(
error instanceof Error error instanceof Error
? error.message ? error.message
: "Failed to load connector information", : "Failed to load connector information"
); );
} finally { } finally {
setIsLoading(false); setIsLoading(false);
@ -143,7 +143,7 @@ export default function UploadProviderPage() {
if (!currentSyncTaskId) return; if (!currentSyncTaskId) return;
const currentTask = tasks.find( const currentTask = tasks.find(
(task) => task.task_id === currentSyncTaskId, (task) => task.task_id === currentSyncTaskId
); );
if (currentTask && currentTask.status === "completed") { if (currentTask && currentTask.status === "completed") {
@ -328,11 +328,11 @@ export default function UploadProviderPage() {
return ( return (
<div className="container mx-auto max-w-3xl p-6"> <div className="container mx-auto max-w-3xl p-6">
<div className="mb-6 flex gap-2 items-center"> <div className="mb-8 flex gap-2 items-center">
<Button variant="ghost" onClick={() => router.back()}> <Button variant="ghost" onClick={() => router.back()} size="icon">
<ArrowLeft className="h-4 w-4 scale-125" /> <ArrowLeft size={18} />
</Button> </Button>
<h2 className="text-2xl font-bold"> <h2 className="text-xl text-[18px] font-semibold">
Add from {getProviderDisplayName()} Add from {getProviderDisplayName()}
</h2> </h2>
</div> </div>
@ -366,9 +366,12 @@ export default function UploadProviderPage() {
disabled={selectedFiles.length === 0 || isIngesting} disabled={selectedFiles.length === 0 || isIngesting}
> >
{isIngesting ? ( {isIngesting ? (
<>Ingesting {selectedFiles.length} Files...</> <>
Ingesting {selectedFiles.length} file
{selectedFiles.length > 1 ? "s" : ""}...
</>
) : ( ) : (
<>Start ingest</> <>Ingest files</>
)} )}
</Button> </Button>
</div> </div>

8
frontend/src/components/cloud-picker/picker-header.tsx
View file

@ -51,19 +51,13 @@ export const PickerHeader = ({
Select files from {getProviderName(provider)} to ingest. Select files from {getProviderName(provider)} to ingest.
</p> </p>
<Button <Button
size="sm"
onClick={onAddFiles} onClick={onAddFiles}
disabled={!isPickerLoaded || isPickerOpen || !accessToken} disabled={!isPickerLoaded || isPickerOpen || !accessToken}
className="bg-foreground text-background hover:bg-foreground/90 font-semibold" className="bg-foreground text-background hover:bg-foreground/90 font-semibold"
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Add Files {isPickerOpen ? "Opening picker..." : "Add files"}
</Button> </Button>
<div className="text-xs text-muted-foreground pt-4">
csv, json, pdf,{" "}
<a className="underline dark:text-pink-400 text-pink-600">+16 more</a>{" "}
<b>150 MB</b> max
</div>
</CardContent> </CardContent>
</Card> </Card>
); );