apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-02 22:01:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

check if a google calendar exixst before adding it , in the add page

Browse source
This commit is contained in:
CREDO23 2025-08-02 05:36:43 +02:00
parent edf46e4de1
commit ad0a1e5c97
7 changed files with 62 additions and 311 deletions
Download patch file Download diff file Expand all files Collapse all files

340
surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx
View file

@ -19,128 +19,36 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
const googleCalendarConnectorFormSchema = z.object({
name: z.string().min(3, {
message: "Connector name must be at least 3 characters.",
}),
calendar_ids: z.array(z.string()).min(1, {
message: "At least one calendar must be selected.",
}),
});
// Define the type for the form values
type GoogleCalendarConnectorFormValues = z.infer<typeof googleCalendarConnectorFormSchema>;
// Interface for calendar data
interface Calendar {
id: string;
summary: string;
description?: string;
primary?: boolean;
access_role: string;
time_zone?: string;
}
// Interface for OAuth credentials
interface OAuthCredentials {
client_id: string;
client_secret: string;
refresh_token: string;
access_token: string;
}
type SearchSourceConnector,
useSearchSourceConnectors,
} from "@/hooks/useSearchSourceConnectors";
export default function GoogleCalendarConnectorPage() {
const router = useRouter();
const params = useParams();
const searchParams = useSearchParams();
const searchSpaceId = params.search_space_id as string;
const isSuccess = searchParams.get("success") === "true";
const { createConnector } = useSearchSourceConnectors();
const [isSubmitting, setIsSubmitting] = useState(false);
const [isConnecting, setIsConnecting] = useState(false);
const [isConnected, setIsConnected] = useState(false);
const [calendars, setCalendars] = useState<Calendar[]>([]);
const [credentials, setCredentials] = useState<OAuthCredentials | null>(null);
const [doesConnectorExist, setDoesConnectorExist] = useState(false);
// Initialize the form
const form = useForm<GoogleCalendarConnectorFormValues>({
resolver: zodResolver(googleCalendarConnectorFormSchema),
defaultValues: {
name: "",
calendar_ids: [],
},
});
const { fetchConnectors } = useSearchSourceConnectors();
useEffect(() => {
if (isSuccess) {
toast.success("Google Calendar connector created successfully!");
}
}, [isSuccess]);
// Check for OAuth callback parameters
useEffect(() => {
const success = searchParams.get("success");
const error = searchParams.get("error");
const message = searchParams.get("message");
const sessionKey = searchParams.get("session_key");
if (success === "true" && sessionKey) {
// Fetch OAuth data from backend
fetchOAuthData(sessionKey);
} else if (error) {
toast.error(message || "Failed to connect to Google Calendar");
}
}, [searchParams]);
// Fetch OAuth data from backend
const fetchOAuthData = async (sessionKey: string) => {
try {
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/google/session?session_key=${sessionKey}`,
{
method: "GET",
headers: {
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
},
}
fetchConnectors().then((data) => {
const connector = data.find(
(c: SearchSourceConnector) => c.connector_type === "GOOGLE_CALENDAR_CONNECTOR"
);
if (!response.ok) {
throw new Error("Failed to fetch OAuth data");
if (connector) {
setDoesConnectorExist(true);
}
const data = await response.json();
setCredentials(data.credentials);
setCalendars(data.calendars);
setIsConnected(true);
toast.success("Successfully connected to Google Calendar!");
} catch (error) {
console.error("Error fetching OAuth data:", error);
toast.error("Failed to retrieve Google Calendar data");
}
};
});
}, []);
// Handle Google OAuth connection
const handleConnectGoogle = async () => {
setIsConnecting(true);
try {
// Call backend to initiate OAuth flow
setIsConnecting(true);
// Call backend to initiate authorization flow
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/google/calendar/connector/add/?space_id=${searchSpaceId}`,
{
@ -162,46 +70,8 @@ export default function GoogleCalendarConnectorPage() {
} catch (error) {
console.error("Error connecting to Google:", error);
toast.error("Failed to connect to Google Calendar");
setIsConnecting(false);
}
};
// Handle form submission
const onSubmit = async (values: GoogleCalendarConnectorFormValues) => {
if (!isConnected || !credentials) {
toast.error("Please connect your Google account first");
return;
}
if (values.calendar_ids.length === 0) {
toast.error("Please select at least one calendar");
return;
}
setIsSubmitting(true);
try {
await createConnector({
name: values.name,
connector_type: "GOOGLE_CALENDAR_CONNECTOR",
config: {
GOOGLE_CALENDAR_CLIENT_ID: credentials.client_id,
GOOGLE_CALENDAR_CLIENT_SECRET: credentials.client_secret,
GOOGLE_CALENDAR_REFRESH_TOKEN: credentials.refresh_token,
GOOGLE_CALENDAR_CALENDAR_IDS: values.calendar_ids,
},
is_indexable: true,
last_indexed_at: null,
});
toast.success("Google Calendar connector created successfully!");
// Navigate back to connectors page
router.push(`/dashboard/${searchSpaceId}/connectors`);
} catch (error) {
console.error("Error creating connector:", error);
toast.error(error instanceof Error ? error.message : "Failed to create connector");
} finally {
setIsSubmitting(false);
setIsConnecting(false);
}
};
@ -228,14 +98,14 @@ export default function GoogleCalendarConnectorPage() {
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Google Calendar</h1>
<p className="text-muted-foreground">
Connect your Google Calendar to search events, meetings and schedules.
Connect your Google Calendar to search events.
</p>
</div>
</div>
</div>
{/* OAuth Connection Card */}
{!isConnected ? (
{!doesConnectorExist ? (
<Card>
<CardHeader>
<CardTitle>Connect Your Google Account</CardTitle>
@ -285,167 +155,35 @@ export default function GoogleCalendarConnectorPage() {
/* Configuration Form Card */
<Card>
<CardHeader>
<CardTitle>Configure Google Calendar Connector</CardTitle>
<CardDescription>
Your Google account is connected! Now select which calendars to include and give
your connector a name.
</CardDescription>
<CardTitle>✅ Your Google calendar is successfully connected!</CardTitle>
</CardHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<CardContent className="space-y-6">
{/* Connector Name */}
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Connector Name</FormLabel>
<FormControl>
<Input placeholder="My Google Calendar" {...field} />
</FormControl>
<FormDescription>
A friendly name to identify this connector.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
{/* Calendar Selection */}
<FormField
control={form.control}
name="calendar_ids"
render={() => (
<FormItem>
<div className="mb-4">
<FormLabel className="text-base">Select Calendars</FormLabel>
<FormDescription>
Choose which calendars you want to include in your search results.
</FormDescription>
</div>
{calendars.map((calendar) => (
<FormField
key={calendar.id}
control={form.control}
name="calendar_ids"
render={({ field }) => {
return (
<FormItem
key={calendar.id}
className="flex flex-row items-start space-x-3 space-y-0"
>
<FormControl>
<Checkbox
checked={field.value?.includes(calendar.id)}
onCheckedChange={(checked) => {
return checked
? field.onChange([...field.value, calendar.id])
: field.onChange(
field.value?.filter((value) => value !== calendar.id)
);
}}
/>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="font-normal">
{calendar.summary}
{calendar.primary && (
<span className="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
Primary
</span>
)}
</FormLabel>
{calendar.description && (
<FormDescription className="text-xs">
{calendar.description}
</FormDescription>
)}
</div>
</FormItem>
);
}}
/>
))}
<FormMessage />
</FormItem>
)}
/>
</CardContent>
<CardFooter className="flex justify-between">
<Button
type="button"
variant="outline"
onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
>
Cancel
</Button>
<Button
type="submit"
disabled={isSubmitting || form.watch("calendar_ids").length === 0}
>
{isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Creating...
</>
) : (
<>
<Check className="mr-2 h-4 w-4" />
Create Connector
</>
)}
</Button>
</CardFooter>
</form>
</Form>
</Card>
)}
{/* Help Section */}
<Card className="mt-6">
<CardHeader>
<CardTitle className="text-lg">How It Works</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<h4 className="font-medium mb-2">1. Connect Your Account</h4>
<p className="text-sm text-muted-foreground">
Click "Connect Your Google Account" to start the secure OAuth process. You'll be
redirected to Google to sign in.
</p>
</div>
<div>
<h4 className="font-medium mb-2">2. Grant Permissions</h4>
<p className="text-sm text-muted-foreground">
Google will ask for permission to read your calendar events. We only request
read-only access to keep your data safe.
</p>
</div>
<div>
<h4 className="font-medium mb-2">3. Select Calendars</h4>
<p className="text-sm text-muted-foreground">
Choose which calendars you want to include in your search results. You can select
multiple calendars.
</p>
</div>
<div>
<h4 className="font-medium mb-2">4. Start Searching</h4>
<p className="text-sm text-muted-foreground">
Once connected, your calendar events will be indexed and searchable alongside your
other content.
</p>
</div>
{isConnected && (
<div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
<p className="text-sm text-green-800">
✅ Your Google account is successfully connected! You can now configure your
connector above.
{!doesConnectorExist && (
<Card className="mt-6">
<CardHeader>
<CardTitle className="text-lg">How It Works</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<h4 className="font-medium mb-2">1. Connect Your Account</h4>
<p className="text-sm text-muted-foreground">
Click "Connect Your Google Account" to start the secure OAuth process. You'll be
redirected to Google to sign in.
</p>
</div>
)}
</CardContent>
</Card>
<div>
<h4 className="font-medium mb-2">2. Grant Permissions</h4>
<p className="text-sm text-muted-foreground">
Google will ask for permission to read your calendar events. We only request
read-only access to keep your data safe.
</p>
</div>
</CardContent>
</Card>
)}
</motion.div>
</div>
);

2
surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
View file

@ -8,8 +8,8 @@ import {
IconBrandSlack,
IconBrandWindows,
IconBrandZoom,
IconChecklist,
IconCalendar,
IconChecklist,
IconChevronDown,
IconChevronRight,
IconLayoutKanban,

2
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
View file

@ -7,8 +7,8 @@ import {
IconBrandNotion,
IconBrandSlack,
IconBrandYoutube,
IconChecklist,
IconCalendar,
IconChecklist,
IconLayoutKanban,
IconTicket,
} from "@tabler/icons-react";

2
surfsense_web/hooks/useSearchSourceConnectors.ts
View file

@ -86,6 +86,8 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
// Update connector source items when connectors change
updateConnectorSourceItems(data);
return data;
} catch (err) {
setError(err instanceof Error ? err : new Error("An unknown error occurred"));
console.error("Error fetching search source connectors:", err);