import { useCallback, useEffect, useMemo, useRef, useState } from "react";import { useAtomSet, useAtomValue, useAtomRefresh, Result } from "@effect-atom/atom-react"; import { secretsAtom, setSecret } from "@executor/react/api/atoms";import { useScope } from "@executor/react/api/scope-context";import { SecretPicker, type SecretPickerSecret } from "@executor/react/plugins/secret-picker";import { SecretId } from "@executor/sdk";import { Badge } from "@executor/react/components/badge";import { Button } from "@executor/react/components/button";import { Collapsible, CollapsibleContent, CollapsibleTrigger,} from "@executor/react/components/collapsible";import { Input } from "@executor/react/components/input";import { Label } from "@executor/react/components/label";import { RadioGroup, RadioGroupItem } from "@executor/react/components/radio-group";import { Spinner } from "@executor/react/components/spinner";import { addGoogleDiscoverySource, probeGoogleDiscovery, startGoogleDiscoveryOAuth,} from "./atoms"; // ---------------------------------------------------------------------------// Inline secret creation// --------------------------------------------------------------------------- function InlineCreateSecret(props: { headerName: string; suggestedId: string; onCreated: (secretId: string) => void; onCancel: () => void;}) { const [secretId, setSecretIdValue] = useState(props.suggestedId); const [secretName, setSecretName] = useState(props.headerName); const [secretValue, setSecretValue] = useState(""); const [saving, setSaving] = useState(false); const [error, setError] = useState<string | null>(null); const scopeId = useScope(); const doSet = useAtomSet(setSecret, { mode: "promise" }); const refreshSecrets = useAtomRefresh(secretsAtom(scopeId)); const handleSave = async () => { if (!secretId.trim() || !secretValue.trim()) return; setSaving(true); setError(null); try { await doSet({ path: { scopeId }, payload: { id: SecretId.make(secretId.trim()), name: secretName.trim() || secretId.trim(), value: secretValue.trim(), purpose: `Google OAuth: ${props.headerName}`, }, }); refreshSecrets(); props.onCreated(secretId.trim()); } catch (e) { setError(e instanceof Error ? e.message : "Failed to save secret"); setSaving(false); } }; return ( <div className="rounded-lg border border-primary/20 bg-primary/[0.02] p-3 space-y-2.5"> <p className="text-[11px] font-semibold text-primary tracking-wide uppercase">New secret</p> <div className="grid grid-cols-2 gap-2"> <div className="space-y-1"> <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">ID</Label> <Input value={secretId} onChange={(e) => setSecretIdValue((e.target as HTMLInputElement).value)} placeholder="google-client-secret" className="h-8 text-xs font-mono" /> </div> <div className="space-y-1"> <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Label</Label> <Input value={secretName} onChange={(e) => setSecretName((e.target as HTMLInputElement).value)} placeholder="Client Secret" className="h-8 text-xs" /> </div> </div> <div className="space-y-1"> <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Value</Label> <Input type="password" value={secretValue} onChange={(e) => setSecretValue((e.target as HTMLInputElement).value)} placeholder="paste your client secret…" className="h-8 text-xs font-mono" /> </div> {error && <p className="text-[11px] text-destructive">{error}</p>} <div className="flex gap-1.5 pt-0.5"> <Button variant="outline" size="xs" onClick={props.onCancel}> Cancel </Button> <Button size="xs" onClick={handleSave} disabled={!secretId.trim() || !secretValue.trim() || saving} > {saving ? "Saving…" : "Create & use"} </Button> </div> </div> );} // ---------------------------------------------------------------------------// Client secret field with inline creation// --------------------------------------------------------------------------- function ClientSecretField(props: { clientSecretSecretId: string | null; onSelect: (secretId: string | null) => void; secretList: readonly SecretPickerSecret[];}) { const [creating, setCreating] = useState(false); const { clientSecretSecretId, onSelect, secretList } = props; if (creating) { return ( <div className="space-y-2"> <Label>OAuth Client Secret</Label> <InlineCreateSecret headerName="Client Secret" suggestedId="google-oauth-client-secret" onCreated={(id) => { onSelect(id); setCreating(false); }} onCancel={() => setCreating(false)} /> </div> ); } return ( <div className="space-y-2"> <Label>OAuth Client Secret</Label> <div className="flex items-center gap-2"> <div className="flex-1 min-w-0"> <SecretPicker value={clientSecretSecretId} onSelect={onSelect} secrets={secretList} placeholder="Optional for confidential clients" /> </div> <Button variant="outline" size="sm" className="shrink-0" onClick={() => setCreating(true)} > + New </Button> {clientSecretSecretId && ( <Button variant="outline" onClick={() => onSelect(null)} > Clear </Button> )} </div> </div> );} type GoogleDiscoveryTemplate = { id: string; name: string; summary: string; service: string; version: string; discoveryUrl: string;}; const defaultGoogleDiscoveryUrl = (service: string, version: string): string => `https://www.googleapis.com/discovery/v1/apis/${service}/${version}/rest`; const googleDiscoveryTemplate = ( template: GoogleDiscoveryTemplate,): GoogleDiscoveryTemplate => ({ ...template, discoveryUrl: template.discoveryUrl || defaultGoogleDiscoveryUrl(template.service, template.version),}); const GOOGLE_DISCOVERY_TEMPLATES: readonly GoogleDiscoveryTemplate[] = [ googleDiscoveryTemplate({ id: "google-calendar", name: "Google Calendar", summary: "Calendars, events, ACLs, and scheduling workflows.", service: "calendar", version: "v3", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest", }), googleDiscoveryTemplate({ id: "google-drive", name: "Google Drive", summary: "Files, folders, permissions, comments, and shared drives.", service: "drive", version: "v3", discoveryUrl: defaultGoogleDiscoveryUrl("drive", "v3"), }), googleDiscoveryTemplate({ id: "google-gmail", name: "Gmail", summary: "Messages, threads, labels, drafts, and mailbox automation.", service: "gmail", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest", }), googleDiscoveryTemplate({ id: "google-docs", name: "Google Docs", summary: "Documents, structural edits, text ranges, and formatting.", service: "docs", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/docs/v1/rest", }), googleDiscoveryTemplate({ id: "google-sheets", name: "Google Sheets", summary: "Spreadsheets, values, ranges, formatting, and batch updates.", service: "sheets", version: "v4", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/sheets/v4/rest", }), googleDiscoveryTemplate({ id: "google-slides", name: "Google Slides", summary: "Presentations, slides, page elements, and deck updates.", service: "slides", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/slides/v1/rest", }), googleDiscoveryTemplate({ id: "google-forms", name: "Google Forms", summary: "Forms, questions, responses, quizzes, and form metadata.", service: "forms", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/forms/v1/rest", }), googleDiscoveryTemplate({ id: "google-people", name: "Google People", summary: "Contacts, profiles, directory people, and contact groups.", service: "people", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/people/v1/rest", }), googleDiscoveryTemplate({ id: "google-tasks", name: "Google Tasks", summary: "Task lists, task items, notes, and due dates.", service: "tasks", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/tasks/v1/rest", }), googleDiscoveryTemplate({ id: "google-chat", name: "Google Chat", summary: "Spaces, messages, members, reactions, and chat workflows.", service: "chat", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/chat/v1/rest", }), googleDiscoveryTemplate({ id: "google-bigquery", name: "Google BigQuery", summary: "Datasets, tables, jobs, routines, and analytics workflows.", service: "bigquery", version: "v2", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/bigquery/v2/rest", }), googleDiscoveryTemplate({ id: "google-youtube", name: "YouTube Data", summary: "Channels, playlists, videos, comments, captions, and uploads.", service: "youtube", version: "v3", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest", }),]; const GOOGLE_SERVICE_ICON_URLS: Record<string, string> = { calendar: "https://fonts.gstatic.com/s/i/productlogos/calendar_2020q4/v8/192px.svg", drive: "https://fonts.gstatic.com/s/i/productlogos/drive_2020q4/v8/192px.svg", gmail: "https://fonts.gstatic.com/s/i/productlogos/gmail_2020q4/v8/web-96dp/logo_gmail_2020q4_color_2x_web_96dp.png", docs: "https://fonts.gstatic.com/s/i/productlogos/docs_2020q4/v12/192px.svg", sheets: "https://fonts.gstatic.com/s/i/productlogos/sheets_2020q4/v8/192px.svg", slides: "https://fonts.gstatic.com/s/i/productlogos/slides_2020q4/v12/192px.svg", forms: "https://fonts.gstatic.com/s/i/productlogos/forms_2020q4/v6/192px.svg", people: "https://fonts.gstatic.com/s/i/productlogos/contacts/v9/192px.svg", tasks: "https://fonts.gstatic.com/s/i/productlogos/tasks/v10/192px.svg", chat: "https://fonts.gstatic.com/s/i/productlogos/chat_2020q4/v8/192px.svg", bigquery: "https://fonts.gstatic.com/s/i/productlogos/cloud/v8/192px.svg", youtube: "https://fonts.gstatic.com/s/i/productlogos/youtube/v9/192px.svg",}; function GoogleServiceIcon(props: { readonly service: string; readonly className?: string;}) { const { service, className = "size-11" } = props; const src = GOOGLE_SERVICE_ICON_URLS[service] ?? GOOGLE_SERVICE_ICON_URLS.bigquery; return ( <img alt="" aria-hidden="true" className={`${className} shrink-0 object-contain`} decoding="async" draggable={false} loading="lazy" src={src} /> );} type ProbeResult = { name: string; title: string | null; service: string; version: string; toolCount: number; scopes: readonly string[];}; type OAuthAuth = { kind: "oauth2"; clientId: string; clientSecretSecretId: string | null; accessTokenSecretId: string; refreshTokenSecretId: string | null; tokenType: string; expiresAt: number | null; scope: string | null; scopes: string[];}; type OAuthPopupResult = | ({ type: "executor:oauth-result"; ok: true; sessionId: string; } & OAuthAuth) | { type: "executor:oauth-result"; ok: false; sessionId: null; error: string; }; function openOAuthPopup( url: string, onResult: (data: OAuthPopupResult) => void, onClosed?: () => void,): void { const w = 640; const h = 760; const left = window.screenX + (window.outerWidth - w) / 2; const top = window.screenY + (window.outerHeight - h) / 2; const popup = window.open( url, "google-discovery-oauth", `width=${w},height=${h},left=${left},top=${top},popup=1`, ); let settled = false; const settle = () => { settled = true; window.removeEventListener("message", onMessage); }; const onMessage = (event: MessageEvent) => { if ( event.origin === window.location.origin && event.data?.type === "executor:oauth-result" && !settled ) { settle(); onResult(event.data as OAuthPopupResult); } }; window.addEventListener("message", onMessage); if (popup) { const interval = window.setInterval(() => { if (popup.closed) { window.clearInterval(interval); if (!settled) { settle(); onClosed?.(); } } }, 500); }} export default function AddGoogleDiscoverySource(props: { readonly onComplete: () => void; readonly onCancel: () => void; readonly initialUrl?: string;}) { const defaultTemplate = GOOGLE_DISCOVERY_TEMPLATES.find((template) => template.id === "google-sheets") ?? GOOGLE_DISCOVERY_TEMPLATES[0]!; const [discoveryUrl, setDiscoveryUrl] = useState( props.initialUrl ?? defaultTemplate.discoveryUrl, ); const [name, setName] = useState(props.initialUrl ? "" : defaultTemplate.name); const [selectedTemplateId, setSelectedTemplateId] = useState(props.initialUrl ? "" : defaultTemplate.id); const selectedTemplate = GOOGLE_DISCOVERY_TEMPLATES.find((template) => template.id === selectedTemplateId) ?? null; const [authKind, setAuthKind] = useState<"none" | "oauth2">("oauth2"); const [clientId, setClientId] = useState(""); const [clientSecretSecretId, setClientSecretSecretId] = useState<string | null>(null); const [probe, setProbe] = useState<ProbeResult | null>(null); const [oauthAuth, setOauthAuth] = useState<OAuthAuth | null>(null); const [loadingProbe, setLoadingProbe] = useState(false); const [startingOAuth, setStartingOAuth] = useState(false); const [adding, setAdding] = useState(false); const [error, setError] = useState<string | null>(null); const [showScopes, setShowScopes] = useState(false); const scopeId = useScope(); const doProbe = useAtomSet(probeGoogleDiscovery, { mode: "promise" }); const doAdd = useAtomSet(addGoogleDiscoverySource, { mode: "promise" }); const doStartOAuth = useAtomSet(startGoogleDiscoveryOAuth, { mode: "promise" }); const secrets = useAtomValue(secretsAtom(scopeId)); const canUseOAuth = useMemo( () => (probe?.scopes.length ?? 0) > 0, [probe], ); const secretList: readonly SecretPickerSecret[] = Result.match(secrets, { onInitial: () => [] as SecretPickerSecret[], onFailure: () => [] as SecretPickerSecret[], onSuccess: ({ value }) => value.map((secret) => ({ id: secret.id, name: secret.name, provider: secret.provider ? String(secret.provider) : undefined, })), }); const applyTemplate = useCallback((template: GoogleDiscoveryTemplate) => { setSelectedTemplateId(template.id); setDiscoveryUrl(template.discoveryUrl); setName(template.name); setClientSecretSecretId(null); setProbe(null); setOauthAuth(null); setError(null); setShowScopes(false); setAuthKind("oauth2"); }, []); const handleProbe = useCallback(async () => { setLoadingProbe(true); setError(null); setOauthAuth(null); setShowScopes(false); try { const result = await doProbe({ path: { scopeId }, payload: { discoveryUrl: discoveryUrl.trim() }, }); setProbe({ ...result, scopes: [...result.scopes] }); if (!name.trim()) { setName(result.name); } if (result.scopes.length === 0) { setAuthKind("none"); } } catch (e) { setProbe(null); setError(e instanceof Error ? e.message : "Failed to inspect discovery document"); } finally { setLoadingProbe(false); } }, [discoveryUrl, doProbe, name]); const autoProbed = useRef(false); useEffect(() => { if (props.initialUrl && !autoProbed.current) { autoProbed.current = true;Lines 1–500 of 810. Load more
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useAtomSet, useAtomValue, useAtomRefresh, Result } from "@effect-atom/atom-react"; import { secretsAtom, setSecret } from "@executor/react/api/atoms"; import { useScope } from "@executor/react/api/scope-context"; import { SecretPicker, type SecretPickerSecret } from "@executor/react/plugins/secret-picker"; import { SecretId } from "@executor/sdk"; import { Badge } from "@executor/react/components/badge"; import { Button } from "@executor/react/components/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@executor/react/components/collapsible"; import { Input } from "@executor/react/components/input"; import { Label } from "@executor/react/components/label"; import { RadioGroup, RadioGroupItem } from "@executor/react/components/radio-group"; import { Spinner } from "@executor/react/components/spinner"; import { addGoogleDiscoverySource, probeGoogleDiscovery, startGoogleDiscoveryOAuth, } from "./atoms"; // --------------------------------------------------------------------------- // Inline secret creation // --------------------------------------------------------------------------- function InlineCreateSecret(props: { headerName: string; suggestedId: string; onCreated: (secretId: string) => void; onCancel: () => void; }) { const [secretId, setSecretIdValue] = useState(props.suggestedId); const [secretName, setSecretName] = useState(props.headerName); const [secretValue, setSecretValue] = useState(""); const [saving, setSaving] = useState(false); const [error, setError] = useState<string | null>(null); const scopeId = useScope(); const doSet = useAtomSet(setSecret, { mode: "promise" }); const refreshSecrets = useAtomRefresh(secretsAtom(scopeId)); const handleSave = async () => { if (!secretId.trim() || !secretValue.trim()) return; setSaving(true); setError(null); try { await doSet({ path: { scopeId }, payload: { id: SecretId.make(secretId.trim()), name: secretName.trim() || secretId.trim(), value: secretValue.trim(), purpose: `Google OAuth: ${props.headerName}`, }, }); refreshSecrets(); props.onCreated(secretId.trim()); } catch (e) { setError(e instanceof Error ? e.message : "Failed to save secret"); setSaving(false); } }; return ( <div className="rounded-lg border border-primary/20 bg-primary/[0.02] p-3 space-y-2.5"> <p className="text-[11px] font-semibold text-primary tracking-wide uppercase">New secret</p> <div className="grid grid-cols-2 gap-2"> <div className="space-y-1"> <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">ID</Label> <Input value={secretId} onChange={(e) => setSecretIdValue((e.target as HTMLInputElement).value)} placeholder="google-client-secret" className="h-8 text-xs font-mono" /> </div> <div className="space-y-1"> <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Label</Label> <Input value={secretName} onChange={(e) => setSecretName((e.target as HTMLInputElement).value)} placeholder="Client Secret" className="h-8 text-xs" /> </div> </div> <div className="space-y-1"> <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Value</Label> <Input type="password" value={secretValue} onChange={(e) => setSecretValue((e.target as HTMLInputElement).value)} placeholder="paste your client secret…" className="h-8 text-xs font-mono" /> </div> {error && <p className="text-[11px] text-destructive">{error}</p>} <div className="flex gap-1.5 pt-0.5"> <Button variant="outline" size="xs" onClick={props.onCancel}> Cancel </Button> <Button size="xs" onClick={handleSave} disabled={!secretId.trim() || !secretValue.trim() || saving} > {saving ? "Saving…" : "Create & use"} </Button> </div> </div> ); } // --------------------------------------------------------------------------- // Client secret field with inline creation // --------------------------------------------------------------------------- function ClientSecretField(props: { clientSecretSecretId: string | null; onSelect: (secretId: string | null) => void; secretList: readonly SecretPickerSecret[]; }) { const [creating, setCreating] = useState(false); const { clientSecretSecretId, onSelect, secretList } = props; if (creating) { return ( <div className="space-y-2"> <Label>OAuth Client Secret</Label> <InlineCreateSecret headerName="Client Secret" suggestedId="google-oauth-client-secret" onCreated={(id) => { onSelect(id); setCreating(false); }} onCancel={() => setCreating(false)} /> </div> ); } return ( <div className="space-y-2"> <Label>OAuth Client Secret</Label> <div className="flex items-center gap-2"> <div className="flex-1 min-w-0"> <SecretPicker value={clientSecretSecretId} onSelect={onSelect} secrets={secretList} placeholder="Optional for confidential clients" /> </div> <Button variant="outline" size="sm" className="shrink-0" onClick={() => setCreating(true)} > + New </Button> {clientSecretSecretId && ( <Button variant="outline" onClick={() => onSelect(null)} > Clear </Button> )} </div> </div> ); } type GoogleDiscoveryTemplate = { id: string; name: string; summary: string; service: string; version: string; discoveryUrl: string; }; const defaultGoogleDiscoveryUrl = (service: string, version: string): string => `https://www.googleapis.com/discovery/v1/apis/${service}/${version}/rest`; const googleDiscoveryTemplate = ( template: GoogleDiscoveryTemplate, ): GoogleDiscoveryTemplate => ({ ...template, discoveryUrl: template.discoveryUrl || defaultGoogleDiscoveryUrl(template.service, template.version), }); const GOOGLE_DISCOVERY_TEMPLATES: readonly GoogleDiscoveryTemplate[] = [ googleDiscoveryTemplate({ id: "google-calendar", name: "Google Calendar", summary: "Calendars, events, ACLs, and scheduling workflows.", service: "calendar", version: "v3", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest", }), googleDiscoveryTemplate({ id: "google-drive", name: "Google Drive", summary: "Files, folders, permissions, comments, and shared drives.", service: "drive", version: "v3", discoveryUrl: defaultGoogleDiscoveryUrl("drive", "v3"), }), googleDiscoveryTemplate({ id: "google-gmail", name: "Gmail", summary: "Messages, threads, labels, drafts, and mailbox automation.", service: "gmail", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest", }), googleDiscoveryTemplate({ id: "google-docs", name: "Google Docs", summary: "Documents, structural edits, text ranges, and formatting.", service: "docs", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/docs/v1/rest", }), googleDiscoveryTemplate({ id: "google-sheets", name: "Google Sheets", summary: "Spreadsheets, values, ranges, formatting, and batch updates.", service: "sheets", version: "v4", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/sheets/v4/rest", }), googleDiscoveryTemplate({ id: "google-slides", name: "Google Slides", summary: "Presentations, slides, page elements, and deck updates.", service: "slides", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/slides/v1/rest", }), googleDiscoveryTemplate({ id: "google-forms", name: "Google Forms", summary: "Forms, questions, responses, quizzes, and form metadata.", service: "forms", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/forms/v1/rest", }), googleDiscoveryTemplate({ id: "google-people", name: "Google People", summary: "Contacts, profiles, directory people, and contact groups.", service: "people", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/people/v1/rest", }), googleDiscoveryTemplate({ id: "google-tasks", name: "Google Tasks", summary: "Task lists, task items, notes, and due dates.", service: "tasks", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/tasks/v1/rest", }), googleDiscoveryTemplate({ id: "google-chat", name: "Google Chat", summary: "Spaces, messages, members, reactions, and chat workflows.", service: "chat", version: "v1", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/chat/v1/rest", }), googleDiscoveryTemplate({ id: "google-bigquery", name: "Google BigQuery", summary: "Datasets, tables, jobs, routines, and analytics workflows.", service: "bigquery", version: "v2", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/bigquery/v2/rest", }), googleDiscoveryTemplate({ id: "google-youtube", name: "YouTube Data", summary: "Channels, playlists, videos, comments, captions, and uploads.", service: "youtube", version: "v3", discoveryUrl: "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest", }), ]; const GOOGLE_SERVICE_ICON_URLS: Record<string, string> = { calendar: "https://fonts.gstatic.com/s/i/productlogos/calendar_2020q4/v8/192px.svg", drive: "https://fonts.gstatic.com/s/i/productlogos/drive_2020q4/v8/192px.svg", gmail: "https://fonts.gstatic.com/s/i/productlogos/gmail_2020q4/v8/web-96dp/logo_gmail_2020q4_color_2x_web_96dp.png", docs: "https://fonts.gstatic.com/s/i/productlogos/docs_2020q4/v12/192px.svg", sheets: "https://fonts.gstatic.com/s/i/productlogos/sheets_2020q4/v8/192px.svg", slides: "https://fonts.gstatic.com/s/i/productlogos/slides_2020q4/v12/192px.svg", forms: "https://fonts.gstatic.com/s/i/productlogos/forms_2020q4/v6/192px.svg", people: "https://fonts.gstatic.com/s/i/productlogos/contacts/v9/192px.svg", tasks: "https://fonts.gstatic.com/s/i/productlogos/tasks/v10/192px.svg", chat: "https://fonts.gstatic.com/s/i/productlogos/chat_2020q4/v8/192px.svg", bigquery: "https://fonts.gstatic.com/s/i/productlogos/cloud/v8/192px.svg", youtube: "https://fonts.gstatic.com/s/i/productlogos/youtube/v9/192px.svg", }; function GoogleServiceIcon(props: { readonly service: string; readonly className?: string; }) { const { service, className = "size-11" } = props; const src = GOOGLE_SERVICE_ICON_URLS[service] ?? GOOGLE_SERVICE_ICON_URLS.bigquery; return ( <img alt="" aria-hidden="true" className={`${className} shrink-0 object-contain`} decoding="async" draggable={false} loading="lazy" src={src} /> ); } type ProbeResult = { name: string; title: string | null; service: string; version: string; toolCount: number; scopes: readonly string[]; }; type OAuthAuth = { kind: "oauth2"; clientId: string; clientSecretSecretId: string | null; accessTokenSecretId: string; refreshTokenSecretId: string | null; tokenType: string; expiresAt: number | null; scope: string | null; scopes: string[]; }; type OAuthPopupResult = | ({ type: "executor:oauth-result"; ok: true; sessionId: string; } & OAuthAuth) | { type: "executor:oauth-result"; ok: false; sessionId: null; error: string; }; function openOAuthPopup( url: string, onResult: (data: OAuthPopupResult) => void, onClosed?: () => void, ): void { const w = 640; const h = 760; const left = window.screenX + (window.outerWidth - w) / 2; const top = window.screenY + (window.outerHeight - h) / 2; const popup = window.open( url, "google-discovery-oauth", `width=${w},height=${h},left=${left},top=${top},popup=1`, ); let settled = false; const settle = () => { settled = true; window.removeEventListener("message", onMessage); }; const onMessage = (event: MessageEvent) => { if ( event.origin === window.location.origin && event.data?.type === "executor:oauth-result" && !settled ) { settle(); onResult(event.data as OAuthPopupResult); } }; window.addEventListener("message", onMessage); if (popup) { const interval = window.setInterval(() => { if (popup.closed) { window.clearInterval(interval); if (!settled) { settle(); onClosed?.(); } } }, 500); } } export default function AddGoogleDiscoverySource(props: { readonly onComplete: () => void; readonly onCancel: () => void; readonly initialUrl?: string; }) { const defaultTemplate = GOOGLE_DISCOVERY_TEMPLATES.find((template) => template.id === "google-sheets") ?? GOOGLE_DISCOVERY_TEMPLATES[0]!; const [discoveryUrl, setDiscoveryUrl] = useState( props.initialUrl ?? defaultTemplate.discoveryUrl, ); const [name, setName] = useState(props.initialUrl ? "" : defaultTemplate.name); const [selectedTemplateId, setSelectedTemplateId] = useState(props.initialUrl ? "" : defaultTemplate.id); const selectedTemplate = GOOGLE_DISCOVERY_TEMPLATES.find((template) => template.id === selectedTemplateId) ?? null; const [authKind, setAuthKind] = useState<"none" | "oauth2">("oauth2"); const [clientId, setClientId] = useState(""); const [clientSecretSecretId, setClientSecretSecretId] = useState<string | null>(null); const [probe, setProbe] = useState<ProbeResult | null>(null); const [oauthAuth, setOauthAuth] = useState<OAuthAuth | null>(null); const [loadingProbe, setLoadingProbe] = useState(false); const [startingOAuth, setStartingOAuth] = useState(false); const [adding, setAdding] = useState(false); const [error, setError] = useState<string | null>(null); const [showScopes, setShowScopes] = useState(false); const scopeId = useScope(); const doProbe = useAtomSet(probeGoogleDiscovery, { mode: "promise" }); const doAdd = useAtomSet(addGoogleDiscoverySource, { mode: "promise" }); const doStartOAuth = useAtomSet(startGoogleDiscoveryOAuth, { mode: "promise" }); const secrets = useAtomValue(secretsAtom(scopeId)); const canUseOAuth = useMemo( () => (probe?.scopes.length ?? 0) > 0, [probe], ); const secretList: readonly SecretPickerSecret[] = Result.match(secrets, { onInitial: () => [] as SecretPickerSecret[], onFailure: () => [] as SecretPickerSecret[], onSuccess: ({ value }) => value.map((secret) => ({ id: secret.id, name: secret.name, provider: secret.provider ? String(secret.provider) : undefined, })), }); const applyTemplate = useCallback((template: GoogleDiscoveryTemplate) => { setSelectedTemplateId(template.id); setDiscoveryUrl(template.discoveryUrl); setName(template.name); setClientSecretSecretId(null); setProbe(null); setOauthAuth(null); setError(null); setShowScopes(false); setAuthKind("oauth2"); }, []); const handleProbe = useCallback(async () => { setLoadingProbe(true); setError(null); setOauthAuth(null); setShowScopes(false); try { const result = await doProbe({ path: { scopeId }, payload: { discoveryUrl: discoveryUrl.trim() }, }); setProbe({ ...result, scopes: [...result.scopes] }); if (!name.trim()) { setName(result.name); } if (result.scopes.length === 0) { setAuthKind("none"); } } catch (e) { setProbe(null); setError(e instanceof Error ? e.message : "Failed to inspect discovery document"); } finally { setLoadingProbe(false); } }, [discoveryUrl, doProbe, name]); const autoProbed = useRef(false); useEffect(() => { if (props.initialUrl && !autoProbed.current) { autoProbed.current = true;