mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-25 19:15:18 +02:00
feat: Refactor connector popup to include new components for active and all connectors, enhance indexing configuration view, and improve date range selection functionality.
This commit is contained in:
Anish Sarkar
parent
2898192ac4
commit
32b4a09c0e
11 changed files with 1298 additions and 930 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,152 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { Cable, Loader2 } from "lucide-react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import type { FC } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
|
||||||
|
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
||||||
|
import type { SearchSourceConnector } from "@/contracts/types/connector.types";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
TabsContent,
|
||||||
|
TabsTrigger,
|
||||||
|
} from "@/components/ui/tabs";
|
||||||
|
|
||||||
|
interface ActiveConnectorsTabProps {
|
||||||
|
hasSources: boolean;
|
||||||
|
totalSourceCount: number;
|
||||||
|
activeDocumentTypes: Array<[string, number]>;
|
||||||
|
connectors: SearchSourceConnector[];
|
||||||
|
indexingConnectorIds: Set<number>;
|
||||||
|
logsSummary: any;
|
||||||
|
searchSpaceId: string;
|
||||||
|
onTabChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
|
||||||
|
hasSources,
|
||||||
|
activeDocumentTypes,
|
||||||
|
connectors,
|
||||||
|
indexingConnectorIds,
|
||||||
|
logsSummary,
|
||||||
|
searchSpaceId,
|
||||||
|
onTabChange,
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TabsContent value="active" className="m-0">
|
||||||
|
{hasSources ? (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
Currently Active
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
{activeDocumentTypes.map(([docType, count]) => (
|
||||||
|
<div
|
||||||
|
key={docType}
|
||||||
|
className="flex items-center gap-4 p-4 rounded-xl bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border transition-all"
|
||||||
|
>
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
|
||||||
|
{getConnectorIcon(docType, "size-6")}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[14px] font-semibold leading-tight">
|
||||||
|
{getDocumentTypeLabel(docType)}
|
||||||
|
</p>
|
||||||
|
<p className="text-[11px] text-muted-foreground mt-1">
|
||||||
|
{count as number} documents indexed
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{connectors.map((connector) => {
|
||||||
|
const isIndexing = indexingConnectorIds.has(connector.id);
|
||||||
|
const activeTask = logsSummary?.active_tasks?.find(
|
||||||
|
(task: any) =>
|
||||||
|
task.source?.includes(`connector_${connector.id}`) ||
|
||||||
|
task.source?.includes(`connector-${connector.id}`)
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`connector-${connector.id}`}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
|
||||||
|
isIndexing
|
||||||
|
? "bg-primary/5 border-primary/20"
|
||||||
|
: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex h-12 w-12 items-center justify-center rounded-lg border",
|
||||||
|
isIndexing
|
||||||
|
? "bg-primary/10 border-primary/20"
|
||||||
|
: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{getConnectorIcon(connector.connector_type, "size-6")}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-[14px] font-semibold leading-tight truncate">
|
||||||
|
{connector.name}
|
||||||
|
</p>
|
||||||
|
{isIndexing ? (
|
||||||
|
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
||||||
|
<Loader2 className="size-3 animate-spin" />
|
||||||
|
Indexing...
|
||||||
|
{activeTask?.message && (
|
||||||
|
<span className="text-muted-foreground truncate max-w-[150px]">
|
||||||
|
• {activeTask.message}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-[11px] text-muted-foreground mt-1">
|
||||||
|
{connector.last_indexed_at
|
||||||
|
? `Last indexed: ${format(new Date(connector.last_indexed_at), "MMM d, yyyy")}`
|
||||||
|
: "Never indexed"}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 text-[11px] px-3 rounded-lg font-medium"
|
||||||
|
onClick={() =>
|
||||||
|
router.push(
|
||||||
|
`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={isIndexing}
|
||||||
|
>
|
||||||
|
{isIndexing ? "Syncing..." : "Manage"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||||
|
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
|
||||||
|
<Cable className="size-8 text-muted-foreground/50" />
|
||||||
|
</div>
|
||||||
|
<h4 className="text-lg font-semibold">No active sources</h4>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1 max-w-[280px]">
|
||||||
|
Connect your first service to start searching across all your data.
|
||||||
|
</p>
|
||||||
|
<TabsTrigger value="all" className="mt-6 text-primary hover:underline" onClick={() => onTabChange("all")}>
|
||||||
|
Browse available connectors
|
||||||
|
</TabsTrigger>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ChevronRight } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { type FC } from "react";
|
||||||
|
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
||||||
|
import { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./connector-constants";
|
||||||
|
import { ConnectorCard } from "./connector-card";
|
||||||
|
|
||||||
|
interface AllConnectorsTabProps {
|
||||||
|
searchQuery: string;
|
||||||
|
searchSpaceId: string;
|
||||||
|
connectedTypes: Set<string>;
|
||||||
|
connectingId: string | null;
|
||||||
|
onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[0]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
|
||||||
|
searchQuery,
|
||||||
|
searchSpaceId,
|
||||||
|
connectedTypes,
|
||||||
|
connectingId,
|
||||||
|
onConnectOAuth,
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
// Filter connectors based on search
|
||||||
|
const filteredOAuth = OAUTH_CONNECTORS.filter(
|
||||||
|
(c) =>
|
||||||
|
c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
c.description.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredOther = OTHER_CONNECTORS.filter(
|
||||||
|
(c) =>
|
||||||
|
c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
c.description.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Quick Connect */}
|
||||||
|
{filteredOAuth.length > 0 && (
|
||||||
|
<section>
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
Quick Connect
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
{filteredOAuth.map((connector) => {
|
||||||
|
const isConnected = connectedTypes.has(connector.connectorType);
|
||||||
|
const isConnecting = connectingId === connector.id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConnectorCard
|
||||||
|
key={connector.id}
|
||||||
|
id={connector.id}
|
||||||
|
title={connector.title}
|
||||||
|
description={connector.description}
|
||||||
|
connectorType={connector.connectorType}
|
||||||
|
isConnected={isConnected}
|
||||||
|
isConnecting={isConnecting}
|
||||||
|
onConnect={() => onConnectOAuth(connector)}
|
||||||
|
onManage={() =>
|
||||||
|
router.push(
|
||||||
|
`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* More Integrations */}
|
||||||
|
{filteredOther.length > 0 && (
|
||||||
|
<section>
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||||
|
More Integrations
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
{filteredOther.map((connector) => {
|
||||||
|
const isConnected = connectedTypes.has(connector.connectorType);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={connector.id}
|
||||||
|
href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
|
||||||
|
className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
|
||||||
|
{getConnectorIcon(connector.connectorType, "size-6")}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[14px] font-semibold leading-tight">
|
||||||
|
{connector.title}
|
||||||
|
</span>
|
||||||
|
{isConnected && (
|
||||||
|
<span
|
||||||
|
className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"
|
||||||
|
title="Connected"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-[11px] text-muted-foreground truncate mt-1">
|
||||||
|
{connector.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="size-4 text-muted-foreground/50 group-hover:text-foreground transition-colors flex-shrink-0" />
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { type FC } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
||||||
|
|
||||||
|
interface ConnectorCardProps {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
connectorType: string;
|
||||||
|
isConnected?: boolean;
|
||||||
|
isConnecting?: boolean;
|
||||||
|
onConnect?: () => void;
|
||||||
|
onManage?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ConnectorCard: FC<ConnectorCardProps> = ({
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
connectorType,
|
||||||
|
isConnected = false,
|
||||||
|
isConnecting = false,
|
||||||
|
onConnect,
|
||||||
|
onManage,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
|
||||||
|
{getConnectorIcon(connectorType, "size-6")}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[14px] font-semibold leading-tight">{title}</span>
|
||||||
|
{isConnected && (
|
||||||
|
<span
|
||||||
|
className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"
|
||||||
|
title="Connected"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-[11px] text-muted-foreground truncate mt-1">
|
||||||
|
{isConnected ? "Connected" : description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant={isConnected ? "outline" : "default"}
|
||||||
|
className="h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium"
|
||||||
|
onClick={isConnected ? onManage : onConnect}
|
||||||
|
disabled={isConnecting}
|
||||||
|
>
|
||||||
|
{isConnecting ? (
|
||||||
|
<Loader2 className="size-3 animate-spin" />
|
||||||
|
) : isConnected ? (
|
||||||
|
"Manage"
|
||||||
|
) : (
|
||||||
|
"Connect"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
import { EnumConnectorName } from "@/contracts/enums/connector";
|
||||||
|
|
||||||
|
// OAuth Connectors (Quick Connect)
|
||||||
|
export const OAUTH_CONNECTORS = [
|
||||||
|
{
|
||||||
|
id: "google-gmail-connector",
|
||||||
|
title: "Gmail",
|
||||||
|
description: "Search through your emails",
|
||||||
|
connectorType: EnumConnectorName.GOOGLE_GMAIL_CONNECTOR,
|
||||||
|
authEndpoint: "/api/v1/auth/google/gmail/connector/add/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "google-calendar-connector",
|
||||||
|
title: "Google Calendar",
|
||||||
|
description: "Search through your events",
|
||||||
|
connectorType: EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR,
|
||||||
|
authEndpoint: "/api/v1/auth/google/calendar/connector/add/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "airtable-connector",
|
||||||
|
title: "Airtable",
|
||||||
|
description: "Search your Airtable bases",
|
||||||
|
connectorType: EnumConnectorName.AIRTABLE_CONNECTOR,
|
||||||
|
authEndpoint: "/api/v1/auth/airtable/connector/add/",
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
// Non-OAuth Connectors
|
||||||
|
export const OTHER_CONNECTORS = [
|
||||||
|
{
|
||||||
|
id: "slack-connector",
|
||||||
|
title: "Slack",
|
||||||
|
description: "Search Slack messages",
|
||||||
|
connectorType: EnumConnectorName.SLACK_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "discord-connector",
|
||||||
|
title: "Discord",
|
||||||
|
description: "Search Discord messages",
|
||||||
|
connectorType: EnumConnectorName.DISCORD_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "notion-connector",
|
||||||
|
title: "Notion",
|
||||||
|
description: "Search Notion pages",
|
||||||
|
connectorType: EnumConnectorName.NOTION_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "confluence-connector",
|
||||||
|
title: "Confluence",
|
||||||
|
description: "Search documentation",
|
||||||
|
connectorType: EnumConnectorName.CONFLUENCE_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "bookstack-connector",
|
||||||
|
title: "BookStack",
|
||||||
|
description: "Search BookStack docs",
|
||||||
|
connectorType: EnumConnectorName.BOOKSTACK_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "github-connector",
|
||||||
|
title: "GitHub",
|
||||||
|
description: "Search repositories",
|
||||||
|
connectorType: EnumConnectorName.GITHUB_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "linear-connector",
|
||||||
|
title: "Linear",
|
||||||
|
description: "Search issues & projects",
|
||||||
|
connectorType: EnumConnectorName.LINEAR_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "jira-connector",
|
||||||
|
title: "Jira",
|
||||||
|
description: "Search Jira issues",
|
||||||
|
connectorType: EnumConnectorName.JIRA_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "clickup-connector",
|
||||||
|
title: "ClickUp",
|
||||||
|
description: "Search ClickUp tasks",
|
||||||
|
connectorType: EnumConnectorName.CLICKUP_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "luma-connector",
|
||||||
|
title: "Luma",
|
||||||
|
description: "Search Luma events",
|
||||||
|
connectorType: EnumConnectorName.LUMA_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "elasticsearch-connector",
|
||||||
|
title: "Elasticsearch",
|
||||||
|
description: "Search ES indexes",
|
||||||
|
connectorType: EnumConnectorName.ELASTICSEARCH_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "webcrawler-connector",
|
||||||
|
title: "Web Pages",
|
||||||
|
description: "Crawl web content",
|
||||||
|
connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tavily-api",
|
||||||
|
title: "Tavily AI",
|
||||||
|
description: "Search with Tavily",
|
||||||
|
connectorType: EnumConnectorName.TAVILY_API,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "searxng",
|
||||||
|
title: "SearxNG",
|
||||||
|
description: "Search with SearxNG",
|
||||||
|
connectorType: EnumConnectorName.SEARXNG_API,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "linkup-api",
|
||||||
|
title: "Linkup API",
|
||||||
|
description: "Search with Linkup",
|
||||||
|
connectorType: EnumConnectorName.LINKUP_API,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "baidu-search-api",
|
||||||
|
title: "Baidu Search",
|
||||||
|
description: "Search with Baidu",
|
||||||
|
connectorType: EnumConnectorName.BAIDU_SEARCH_API,
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
// Type for the indexing configuration state
|
||||||
|
export interface IndexingConfigState {
|
||||||
|
connectorType: string;
|
||||||
|
connectorId: number;
|
||||||
|
connectorTitle: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Search } from "lucide-react";
|
||||||
|
import { type FC } from "react";
|
||||||
|
import {
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
} from "@/components/ui/tabs";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface ConnectorDialogHeaderProps {
|
||||||
|
activeTab: string;
|
||||||
|
totalSourceCount: number;
|
||||||
|
searchQuery: string;
|
||||||
|
onTabChange: (value: string) => void;
|
||||||
|
onSearchChange: (query: string) => void;
|
||||||
|
isScrolled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
|
||||||
|
activeTab,
|
||||||
|
totalSourceCount,
|
||||||
|
searchQuery,
|
||||||
|
onTabChange,
|
||||||
|
onSearchChange,
|
||||||
|
isScrolled,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
|
||||||
|
isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="text-2xl sm:text-3xl font-semibold tracking-tight">
|
||||||
|
Connectors
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription className="text-sm sm:text-base text-muted-foreground/80 mt-1 sm:mt-1.5">
|
||||||
|
Search across all your apps and data in one place.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
|
||||||
|
<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
|
||||||
|
<TabsTrigger
|
||||||
|
value="all"
|
||||||
|
className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
|
||||||
|
>
|
||||||
|
All Connectors
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="active"
|
||||||
|
className="group px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground relative"
|
||||||
|
>
|
||||||
|
<span className="relative">
|
||||||
|
Active
|
||||||
|
<span className="absolute bottom-[-13.5px] left-1/2 -translate-x-1/2 w-12 h-[1.5px] bg-foreground dark:bg-white opacity-0 group-data-[state=active]:opacity-100 transition-all duration-200" />
|
||||||
|
</span>
|
||||||
|
{totalSourceCount > 0 && (
|
||||||
|
<span className="px-1.5 py-0.5 rounded-full bg-muted-foreground/15 text-[10px] font-bold">
|
||||||
|
{totalSourceCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<div className="w-full sm:w-72 sm:pb-1">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search"
|
||||||
|
className="w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => onSearchChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { format, subDays, subYears } from "date-fns";
|
||||||
|
import { Calendar as CalendarIcon } from "lucide-react";
|
||||||
|
import type { FC } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface DateRangeSelectorProps {
|
||||||
|
startDate: Date | undefined;
|
||||||
|
endDate: Date | undefined;
|
||||||
|
onStartDateChange: (date: Date | undefined) => void;
|
||||||
|
onEndDateChange: (date: Date | undefined) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
onStartDateChange,
|
||||||
|
onEndDateChange,
|
||||||
|
}) => {
|
||||||
|
const handleLast30Days = () => {
|
||||||
|
const today = new Date();
|
||||||
|
onStartDateChange(subDays(today, 30));
|
||||||
|
onEndDateChange(today);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLastYear = () => {
|
||||||
|
const today = new Date();
|
||||||
|
onStartDateChange(subYears(today, 1));
|
||||||
|
onEndDateChange(today);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClearDates = () => {
|
||||||
|
onStartDateChange(undefined);
|
||||||
|
onEndDateChange(undefined);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
|
||||||
|
<h3 className="font-medium mb-4">Select Date Range</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mb-6">
|
||||||
|
Choose how far back you want to sync your data. You can always re-index later with different dates.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
{/* Start Date */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="start-date">Start Date</Label>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
id="start-date"
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
|
||||||
|
!startDate && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{startDate ? format(startDate, "PPP") : "Default (1 year ago)"}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0 z-[100]" align="start">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={startDate}
|
||||||
|
onSelect={onStartDateChange}
|
||||||
|
disabled={(date) => date > new Date()}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* End Date */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="end-date">End Date</Label>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
id="end-date"
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
|
||||||
|
!endDate && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{endDate ? format(endDate, "PPP") : "Default (Today)"}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0 z-[100]" align="start">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={endDate}
|
||||||
|
onSelect={onEndDateChange}
|
||||||
|
disabled={(date) => date > new Date() || (startDate ? date < startDate : false)}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick date range buttons */}
|
||||||
|
<div className="flex flex-wrap gap-2 mt-4">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleClearDates}
|
||||||
|
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
|
||||||
|
>
|
||||||
|
Clear Dates
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleLast30Days}
|
||||||
|
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
|
||||||
|
>
|
||||||
|
Last 30 Days
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleLastYear}
|
||||||
|
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
|
||||||
|
>
|
||||||
|
Last Year
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
// Main component export
|
||||||
|
export { ConnectorIndicator } from "../connector-popup";
|
||||||
|
|
||||||
|
// Sub-components (if needed for external use)
|
||||||
|
export { ConnectorCard } from "./connector-card";
|
||||||
|
export { DateRangeSelector } from "./date-range-selector";
|
||||||
|
export { PeriodicSyncConfig } from "./periodic-sync-config";
|
||||||
|
export { IndexingConfigurationView } from "./indexing-configuration-view";
|
||||||
|
export { ConnectorDialogHeader } from "./connector-dialog-header";
|
||||||
|
export { AllConnectorsTab } from "./all-connectors-tab";
|
||||||
|
export { ActiveConnectorsTab } from "./active-connectors-tab";
|
||||||
|
|
||||||
|
// Constants and types
|
||||||
|
export { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./connector-constants";
|
||||||
|
export type { IndexingConfigState } from "./connector-constants";
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
export { useConnectorDialog } from "./use-connector-dialog";
|
||||||
|
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ArrowLeft, Check, Loader2 } from "lucide-react";
|
||||||
|
import { type FC } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
||||||
|
import type { IndexingConfigState } from "./connector-constants";
|
||||||
|
import { DateRangeSelector } from "./date-range-selector";
|
||||||
|
import { PeriodicSyncConfig } from "./periodic-sync-config";
|
||||||
|
|
||||||
|
interface IndexingConfigurationViewProps {
|
||||||
|
config: IndexingConfigState;
|
||||||
|
startDate: Date | undefined;
|
||||||
|
endDate: Date | undefined;
|
||||||
|
periodicEnabled: boolean;
|
||||||
|
frequencyMinutes: string;
|
||||||
|
isStartingIndexing: boolean;
|
||||||
|
onStartDateChange: (date: Date | undefined) => void;
|
||||||
|
onEndDateChange: (date: Date | undefined) => void;
|
||||||
|
onPeriodicEnabledChange: (enabled: boolean) => void;
|
||||||
|
onFrequencyChange: (frequency: string) => void;
|
||||||
|
onStartIndexing: () => void;
|
||||||
|
onSkip: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
|
||||||
|
config,
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
periodicEnabled,
|
||||||
|
frequencyMinutes,
|
||||||
|
isStartingIndexing,
|
||||||
|
onStartDateChange,
|
||||||
|
onEndDateChange,
|
||||||
|
onPeriodicEnabledChange,
|
||||||
|
onFrequencyChange,
|
||||||
|
onStartIndexing,
|
||||||
|
onSkip,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
|
||||||
|
{/* Fixed Header */}
|
||||||
|
<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
|
||||||
|
{/* Back button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onSkip}
|
||||||
|
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="size-4" />
|
||||||
|
Back to connectors
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Success header */}
|
||||||
|
<div className="flex items-center gap-4 mb-6">
|
||||||
|
<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-green-500/10 border border-green-500/20">
|
||||||
|
<Check className="size-7 text-green-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-semibold tracking-tight">
|
||||||
|
{config.connectorTitle} Connected!
|
||||||
|
</h2>
|
||||||
|
<p className="text-muted-foreground mt-1">
|
||||||
|
Configure when to start syncing your data
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scrollable Content */}
|
||||||
|
<div className="flex-1 min-h-0 overflow-y-auto px-6 sm:px-12">
|
||||||
|
<div className="space-y-6 pb-6">
|
||||||
|
<DateRangeSelector
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onStartDateChange={onStartDateChange}
|
||||||
|
onEndDateChange={onEndDateChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PeriodicSyncConfig
|
||||||
|
enabled={periodicEnabled}
|
||||||
|
frequencyMinutes={frequencyMinutes}
|
||||||
|
onEnabledChange={onPeriodicEnabledChange}
|
||||||
|
onFrequencyChange={onFrequencyChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Info box */}
|
||||||
|
<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
|
||||||
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
|
||||||
|
{getConnectorIcon(config.connectorType, "size-4")}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm">
|
||||||
|
<p className="font-medium">Indexing runs in the background</p>
|
||||||
|
<p className="text-muted-foreground mt-1">
|
||||||
|
You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fixed Footer - Action buttons */}
|
||||||
|
<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 border-t border-border bg-muted">
|
||||||
|
<Button variant="ghost" onClick={onSkip} disabled={isStartingIndexing}>
|
||||||
|
Skip for now
|
||||||
|
</Button>
|
||||||
|
<Button onClick={onStartIndexing} disabled={isStartingIndexing}>
|
||||||
|
{isStartingIndexing ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Starting...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
"Start Indexing"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { type FC } from "react";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
|
||||||
|
interface PeriodicSyncConfigProps {
|
||||||
|
enabled: boolean;
|
||||||
|
frequencyMinutes: string;
|
||||||
|
onEnabledChange: (enabled: boolean) => void;
|
||||||
|
onFrequencyChange: (frequency: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PeriodicSyncConfig: FC<PeriodicSyncConfigProps> = ({
|
||||||
|
enabled,
|
||||||
|
frequencyMinutes,
|
||||||
|
onEnabledChange,
|
||||||
|
onFrequencyChange,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<h3 className="font-medium">Enable Periodic Sync</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Automatically re-index at regular intervals
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch checked={enabled} onCheckedChange={onEnabledChange} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{enabled && (
|
||||||
|
<div className="mt-4 pt-4 border-t border-border/100 space-y-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="frequency">Sync Frequency</Label>
|
||||||
|
<Select value={frequencyMinutes} onValueChange={onFrequencyChange}>
|
||||||
|
<SelectTrigger
|
||||||
|
id="frequency"
|
||||||
|
className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20"
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Select frequency" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="z-[100]">
|
||||||
|
<SelectItem value="15">Every 15 minutes</SelectItem>
|
||||||
|
<SelectItem value="60">Every hour</SelectItem>
|
||||||
|
<SelectItem value="360">Every 6 hours</SelectItem>
|
||||||
|
<SelectItem value="720">Every 12 hours</SelectItem>
|
||||||
|
<SelectItem value="1440">Daily</SelectItem>
|
||||||
|
<SelectItem value="10080">Weekly</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,295 @@
|
||||||
|
import { useAtomValue } from "jotai";
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
|
||||||
|
import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
|
||||||
|
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
|
||||||
|
import { authenticatedFetch } from "@/lib/auth-utils";
|
||||||
|
import { queryClient } from "@/lib/query-client/client";
|
||||||
|
import { cacheKeys } from "@/lib/query-client/cache-keys";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import type { SearchSourceConnector } from "@/contracts/types/connector.types";
|
||||||
|
import { OAUTH_CONNECTORS } from "./connector-constants";
|
||||||
|
import type { IndexingConfigState } from "./connector-constants";
|
||||||
|
|
||||||
|
export const useConnectorDialog = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
|
||||||
|
const { data: allConnectors, refetch: refetchAllConnectors } = useAtomValue(connectorsAtom);
|
||||||
|
const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
|
||||||
|
const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
|
||||||
|
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [activeTab, setActiveTab] = useState("all");
|
||||||
|
const [connectingId, setConnectingId] = useState<string | null>(null);
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [indexingConfig, setIndexingConfig] = useState<IndexingConfigState | null>(null);
|
||||||
|
const [startDate, setStartDate] = useState<Date | undefined>(undefined);
|
||||||
|
const [endDate, setEndDate] = useState<Date | undefined>(undefined);
|
||||||
|
const [isStartingIndexing, setIsStartingIndexing] = useState(false);
|
||||||
|
const [periodicEnabled, setPeriodicEnabled] = useState(false);
|
||||||
|
const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
|
||||||
|
|
||||||
|
// Helper function to get frequency label
|
||||||
|
const getFrequencyLabel = useCallback((minutes: string): string => {
|
||||||
|
switch (minutes) {
|
||||||
|
case "15": return "15 minutes";
|
||||||
|
case "60": return "hour";
|
||||||
|
case "360": return "6 hours";
|
||||||
|
case "720": return "12 hours";
|
||||||
|
case "1440": return "day";
|
||||||
|
case "10080": return "week";
|
||||||
|
default: return `${minutes} minutes`;
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Synchronize state with URL query params
|
||||||
|
useEffect(() => {
|
||||||
|
const modalParam = searchParams.get("modal");
|
||||||
|
const tabParam = searchParams.get("tab");
|
||||||
|
const viewParam = searchParams.get("view");
|
||||||
|
const connectorParam = searchParams.get("connector");
|
||||||
|
|
||||||
|
if (modalParam === "connectors") {
|
||||||
|
if (!isOpen) setIsOpen(true);
|
||||||
|
|
||||||
|
if (tabParam === "active" || tabParam === "all") {
|
||||||
|
if (activeTab !== tabParam) setActiveTab(tabParam);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (viewParam === "configure" && connectorParam && !indexingConfig) {
|
||||||
|
const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
|
||||||
|
if (oauthConnector && allConnectors) {
|
||||||
|
const existingConnector = allConnectors.find(
|
||||||
|
(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
|
||||||
|
);
|
||||||
|
if (existingConnector) {
|
||||||
|
setIndexingConfig({
|
||||||
|
connectorType: oauthConnector.connectorType,
|
||||||
|
connectorId: existingConnector.id,
|
||||||
|
connectorTitle: oauthConnector.title,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (isOpen) setIsOpen(false);
|
||||||
|
}
|
||||||
|
}, [searchParams, isOpen, activeTab, indexingConfig, allConnectors]);
|
||||||
|
|
||||||
|
// Detect OAuth success and transition to config view
|
||||||
|
useEffect(() => {
|
||||||
|
const success = searchParams.get("success");
|
||||||
|
const connectorParam = searchParams.get("connector");
|
||||||
|
const modalParam = searchParams.get("modal");
|
||||||
|
|
||||||
|
if (success === "true" && connectorParam && searchSpaceId && modalParam === "connectors") {
|
||||||
|
const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
|
||||||
|
if (oauthConnector) {
|
||||||
|
refetchAllConnectors().then((result) => {
|
||||||
|
const newConnector = result.data?.find(
|
||||||
|
(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
|
||||||
|
);
|
||||||
|
if (newConnector) {
|
||||||
|
setIndexingConfig({
|
||||||
|
connectorType: oauthConnector.connectorType,
|
||||||
|
connectorId: newConnector.id,
|
||||||
|
connectorTitle: oauthConnector.title,
|
||||||
|
});
|
||||||
|
setIsOpen(true);
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.delete("success");
|
||||||
|
url.searchParams.set("view", "configure");
|
||||||
|
window.history.replaceState({}, "", url.toString());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [searchParams, searchSpaceId, refetchAllConnectors]);
|
||||||
|
|
||||||
|
// Handle OAuth connection
|
||||||
|
const handleConnectOAuth = useCallback(
|
||||||
|
async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
|
||||||
|
if (!searchSpaceId || !connector.authEndpoint) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setConnectingId(connector.id);
|
||||||
|
const response = await authenticatedFetch(
|
||||||
|
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}${connector.authEndpoint}?space_id=${searchSpaceId}`,
|
||||||
|
{ method: "GET" }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to initiate ${connector.title} OAuth`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
window.location.href = data.auth_url;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error connecting to ${connector.title}:`, error);
|
||||||
|
toast.error(`Failed to connect to ${connector.title}`);
|
||||||
|
} finally {
|
||||||
|
setConnectingId(null);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[searchSpaceId]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handle starting indexing
|
||||||
|
const handleStartIndexing = useCallback(async (refreshConnectors: () => void) => {
|
||||||
|
if (!indexingConfig || !searchSpaceId) return;
|
||||||
|
|
||||||
|
setIsStartingIndexing(true);
|
||||||
|
try {
|
||||||
|
const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
|
||||||
|
const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
|
||||||
|
|
||||||
|
if (periodicEnabled) {
|
||||||
|
const frequency = parseInt(frequencyMinutes, 10);
|
||||||
|
await updateConnector({
|
||||||
|
id: indexingConfig.connectorId,
|
||||||
|
data: {
|
||||||
|
periodic_indexing_enabled: true,
|
||||||
|
indexing_frequency_minutes: frequency,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
await indexConnector({
|
||||||
|
connector_id: indexingConfig.connectorId,
|
||||||
|
queryParams: {
|
||||||
|
search_space_id: searchSpaceId,
|
||||||
|
start_date: startDateStr,
|
||||||
|
end_date: endDateStr,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
toast.success(`${indexingConfig.connectorTitle} indexing started`, {
|
||||||
|
description: periodicEnabled
|
||||||
|
? `Periodic sync enabled every ${getFrequencyLabel(frequencyMinutes)}.`
|
||||||
|
: "You can continue working while we sync your data.",
|
||||||
|
});
|
||||||
|
|
||||||
|
setIndexingConfig(null);
|
||||||
|
setStartDate(undefined);
|
||||||
|
setEndDate(undefined);
|
||||||
|
setPeriodicEnabled(false);
|
||||||
|
setFrequencyMinutes("1440");
|
||||||
|
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.delete("view");
|
||||||
|
url.searchParams.delete("connector");
|
||||||
|
url.searchParams.set("tab", "active");
|
||||||
|
window.history.replaceState({}, "", url.toString());
|
||||||
|
setActiveTab("active");
|
||||||
|
|
||||||
|
refreshConnectors();
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error starting indexing:", error);
|
||||||
|
toast.error("Failed to start indexing");
|
||||||
|
} finally {
|
||||||
|
setIsStartingIndexing(false);
|
||||||
|
}
|
||||||
|
}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel]);
|
||||||
|
|
||||||
|
// Handle skipping indexing
|
||||||
|
const handleSkipIndexing = useCallback(() => {
|
||||||
|
setIndexingConfig(null);
|
||||||
|
setStartDate(undefined);
|
||||||
|
setEndDate(undefined);
|
||||||
|
setPeriodicEnabled(false);
|
||||||
|
setFrequencyMinutes("1440");
|
||||||
|
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.delete("view");
|
||||||
|
url.searchParams.delete("connector");
|
||||||
|
window.history.replaceState({}, "", url.toString());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Handle dialog open/close
|
||||||
|
const handleOpenChange = useCallback(
|
||||||
|
(open: boolean) => {
|
||||||
|
setIsOpen(open);
|
||||||
|
|
||||||
|
if (open) {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set("modal", "connectors");
|
||||||
|
url.searchParams.set("tab", activeTab);
|
||||||
|
window.history.pushState({ modal: true }, "", url.toString());
|
||||||
|
} else {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.delete("modal");
|
||||||
|
url.searchParams.delete("tab");
|
||||||
|
url.searchParams.delete("success");
|
||||||
|
url.searchParams.delete("connector");
|
||||||
|
url.searchParams.delete("view");
|
||||||
|
window.history.pushState({ modal: false }, "", url.toString());
|
||||||
|
setIsScrolled(false);
|
||||||
|
setSearchQuery("");
|
||||||
|
if (!isStartingIndexing) {
|
||||||
|
setIndexingConfig(null);
|
||||||
|
setStartDate(undefined);
|
||||||
|
setEndDate(undefined);
|
||||||
|
setPeriodicEnabled(false);
|
||||||
|
setFrequencyMinutes("1440");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[activeTab, isStartingIndexing]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handle tab change
|
||||||
|
const handleTabChange = useCallback(
|
||||||
|
(value: string) => {
|
||||||
|
setActiveTab(value);
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set("tab", value);
|
||||||
|
window.history.replaceState({ modal: true }, "", url.toString());
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handle scroll
|
||||||
|
const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
||||||
|
setIsScrolled(e.currentTarget.scrollTop > 0);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
// State
|
||||||
|
isOpen,
|
||||||
|
activeTab,
|
||||||
|
connectingId,
|
||||||
|
isScrolled,
|
||||||
|
searchQuery,
|
||||||
|
indexingConfig,
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
isStartingIndexing,
|
||||||
|
periodicEnabled,
|
||||||
|
frequencyMinutes,
|
||||||
|
searchSpaceId,
|
||||||
|
allConnectors,
|
||||||
|
|
||||||
|
// Setters
|
||||||
|
setSearchQuery,
|
||||||
|
setStartDate,
|
||||||
|
setEndDate,
|
||||||
|
setPeriodicEnabled,
|
||||||
|
setFrequencyMinutes,
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
handleOpenChange,
|
||||||
|
handleTabChange,
|
||||||
|
handleScroll,
|
||||||
|
handleConnectOAuth,
|
||||||
|
handleStartIndexing,
|
||||||
|
handleSkipIndexing,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue