@opengeni/react 1.0.1 → 1.0.2-canary.37191796234001

package/src/connect-accounts.tsx

@@ -0,0 +1,233 @@
+import { useEffect, useRef, useState } from "react";
+import type { ConnectAccount, ConnectController } from "@opengeni/connect";
+import { useConnect } from "./hooks/use-connect";
+import { ConnectAccountIdentity } from "./connect-account-identity";
+import { ConnectionSkeleton } from "./connection-skeleton";
+import type { CapabilityCatalogItem, OpenGeniClient } from "@opengeni/sdk";
+
+export type ConnectAccountsProps = {
+  controller: ConnectController;
+  className?: string;
+  /** Enables explicit account-bound reconnect. Host supplies the exact destination. */
+  returnUrl?: string;
+  /** Uses authenticated catalogue assets and exact connection references for service identity. */
+  client?: OpenGeniClient | undefined;
+  /** Reconcile surrounding service state after a confirmed account disconnect. */
+  onDisconnected?: (() => void) | undefined;
+};
+
+/** Local credential revocation only. Unknown or changed versions must be
+ * refreshed; this component never retries a destructive operation implicitly. */
+export function ConnectAccounts(props: ConnectAccountsProps) {
+  const [scope, setScope] = useState(props.controller);
+  const [generation, setGeneration] = useState(0);
+  if (scope !== props.controller) {
+    setScope(props.controller);
+    setGeneration(generation + 1);
+  }
+  return <ScopedAccounts key={generation} {...props} />;
+}
+
+function ScopedAccounts({
+  controller,
+  className,
+  returnUrl,
+  client,
+  onDisconnected,
+}: ConnectAccountsProps) {
+  const view = useConnect(controller);
+  const [accounts, setAccounts] = useState<ConnectAccount[] | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(false);
+  const [reload, setReload] = useState(0);
+  const [catalog, setCatalog] = useState<{
+    client: OpenGeniClient;
+    items: CapabilityCatalogItem[];
+  } | null>(null);
+  const mutation = useRef<AbortController | null>(null);
+  useEffect(() => () => mutation.current?.abort(), []);
+  useEffect(() => {
+    const abort = new AbortController();
+    setAccounts(null);
+    setCatalog(null);
+    setSelected(null);
+    setError(false);
+    void Promise.resolve()
+      .then(() => {
+        abort.signal.throwIfAborted();
+        return Promise.all([
+          controller.transport.accounts(controller.workspaceId, { signal: abort.signal }),
+          client?.listCapabilities(controller.workspaceId).catch(() => null) ?? null,
+        ]);
+      })
+      .then(([result, metadata]) => {
+        if (!abort.signal.aborted) {
+          setAccounts(structuredClone(result.filter((account) => account.status !== "disabled")));
+          if (client && metadata) setCatalog({ client, items: metadata.items });
+        }
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setError(true);
+      });
+    return () => abort.abort();
+  }, [client, controller, reload]);
+
+  const disconnect = async (account: ConnectAccount) => {
+    const expectedVersion = account.version;
+    if (
+      mutation.current ||
+      view.busy ||
+      expectedVersion === undefined ||
+      !Number.isSafeInteger(expectedVersion) ||
+      expectedVersion < 1
+    )
+      return;
+    const abort = new AbortController();
+    mutation.current = abort;
+    setBusy(true);
+    setError(false);
+    try {
+      await controller.transport.disconnect(controller.workspaceId, account.id, {
+        expectedVersion,
+        signal: abort.signal,
+      });
+      if (!abort.signal.aborted) {
+        setReload((value) => value + 1);
+        onDisconnected?.();
+      }
+    } catch {
+      if (!abort.signal.aborted) {
+        // Outcome may be unknown. Drop the inventory so a second click cannot
+        // replay against the stale selection; let the host reload live state.
+        setAccounts(null);
+        setError(true);
+      }
+    } finally {
+      if (!abort.signal.aborted) {
+        mutation.current = null;
+        setBusy(false);
+        setSelected(null);
+      }
+    }
+  };
+  const reconnect = async (account: ConnectAccount) => {
+    if (!returnUrl || mutation.current || view.busy) return;
+    setError(false);
+    try {
+      await controller.begin({
+        providerId: account.providerId,
+        ownership: account.ownership,
+        reconnectAccountId: account.id,
+        returnUrl,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    } catch {
+      setError(true);
+    }
+  };
+
+  return (
+    <section
+      className={className}
+      aria-label="Connected accounts"
+      aria-busy={busy || view.busy || (!accounts && !error)}
+    >
+      <h3>Your connections</h3>
+      {error && (
+        <p role="alert">Account state could not be confirmed. Reload before trying again.</p>
+      )}
+      {!accounts && !error && <ConnectionSkeleton label="Loading accounts" />}
+      {accounts?.length === 0 && <p role="status">No connected accounts.</p>}
+      {accounts && accounts.length > 0 && (
+        <ul>
+          {accounts.map((account) => (
+            <li className="og-connect-account" key={`${account.providerId}:${account.id}`}>
+              <details className="og-connect-account-details">
+                <summary className="og-connect-account-heading">
+                  <ConnectAccountIdentity
+                    account={account}
+                    client={client}
+                    capabilities={catalog?.client === client ? (catalog?.items ?? []) : []}
+                  />
+                  <span className="og-connect-account-status" data-status={account.status}>
+                    {account.status === "connected"
+                      ? "✓ Connected"
+                      : account.status === "auth_needed"
+                        ? "Reconnect needed"
+                        : "Disconnected"}
+                  </span>
+                  <svg
+                    className="og-connect-account-chevron"
+                    aria-hidden="true"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                  >
+                    <path d="m9 6 6 6-6 6" />
+                  </svg>
+                </summary>
+                <div className="og-connect-account-actions">
+                  {returnUrl && account.status === "auth_needed" && (
+                    <button
+                      type="button"
+                      aria-label={`Reconnect ${account.label}`}
+                      disabled={busy || view.busy}
+                      onClick={() => void reconnect(account)}
+                    >
+                      Reconnect
+                    </button>
+                  )}
+                  {selected === `${account.providerId}:${account.id}` ? (
+                    <div role="group" aria-label={`Disconnect ${account.label}`}>
+                      <p>
+                        This removes local Opengeni access. It does not revoke consent at the
+                        provider.
+                      </p>
+                      <button
+                        type="button"
+                        disabled={busy || view.busy}
+                        onClick={() => void disconnect(account)}
+                      >
+                        Confirm disconnect
+                      </button>
+                      <button type="button" disabled={busy} onClick={() => setSelected(null)}>
+                        Keep account
+                      </button>
+                    </div>
+                  ) : (
+                    <button
+                      type="button"
+                      aria-label={`Disconnect ${account.label}`}
+                      disabled={
+                        busy ||
+                        view.busy ||
+                        account.status === "disabled" ||
+                        !Number.isSafeInteger(account.version) ||
+                        account.version! < 1
+                      }
+                      onClick={() => setSelected(`${account.providerId}:${account.id}`)}
+                    >
+                      Disconnect
+                    </button>
+                  )}
+                </div>
+              </details>
+            </li>
+          ))}
+        </ul>
+      )}
+      <button
+        hidden={!error}
+        type="button"
+        disabled={busy}
+        onClick={() => setReload((value) => value + 1)}
+      >
+        Reload accounts
+      </button>
+    </section>
+  );
+}

package/src/connect-chooser.tsx

@@ -0,0 +1,336 @@
+import { connectionServicePresentation } from "./connection-service-presentation";
+import { ConnectionCatalog } from "./connection-catalog";
+import { ConnectionLogo } from "./connection-logo";
+import { useEffect, useState, type FormEvent } from "react";
+import type { ConnectAccount, ConnectController, ConnectProvider } from "@opengeni/connect";
+import { useConnect } from "./hooks/use-connect";
+
+export type ConnectChooserProps = {
+  controller: ConnectController;
+  /** Exact host return string; no completion parameters are added. */
+  returnUrl: string;
+  className?: string;
+  presentation?: "select" | "catalog";
+  /** Compact mechanism picker when service discovery is already shown by the host. */
+  customOnly?: boolean;
+  providerOnly?: boolean;
+  compact?: boolean;
+  /** Select a service from the unified discovery list. */
+  initialProviderId?: string;
+};
+
+/** Catalog readiness is supplied by the authenticated backend, never inferred
+ * from the existence of a provider definition. Host replaces the controller on
+ * actor/workspace change. This form does not open OAuth windows itself. */
+export function ConnectChooser(props: ConnectChooserProps) {
+  // Remount scope-local selections synchronously when the controller changes,
+  // before effects can expose a previous actor's inventory for one frame.
+  const [scope, setScope] = useState(props.controller);
+  const [generation, setGeneration] = useState(0);
+  if (scope !== props.controller) {
+    setScope(props.controller);
+    setGeneration(generation + 1);
+  }
+  return <ScopedChooser key={generation} {...props} />;
+}
+
+function ScopedChooser({
+  controller,
+  returnUrl,
+  className,
+  presentation = "select",
+  customOnly = false,
+  providerOnly = false,
+  compact = false,
+  initialProviderId = "",
+}: ConnectChooserProps) {
+  const view = useConnect(controller);
+  const [catalog, setCatalog] = useState<ConnectProvider[] | null>(null);
+  const [accounts, setAccounts] = useState<ConnectAccount[]>([]);
+  const [failed, setFailed] = useState(false);
+  const [load, setLoad] = useState(0);
+  const [query, setQuery] = useState("");
+  const [providerId, setProviderId] = useState(initialProviderId);
+  const [ownership, setOwnership] = useState("");
+  useEffect(() => {
+    const abort = new AbortController();
+    setCatalog(null);
+    setAccounts([]);
+    setFailed(false);
+    setProviderId(initialProviderId);
+    setOwnership("");
+    // Promise boundary also handles a synchronously throwing injected transport.
+    void Promise.resolve()
+      .then(() => {
+        abort.signal.throwIfAborted();
+        return Promise.all([
+          controller.transport.catalog(controller.workspaceId, { signal: abort.signal }),
+          presentation === "catalog"
+            ? controller.transport.accounts(controller.workspaceId, { signal: abort.signal })
+            : Promise.resolve([] as ConnectAccount[]),
+        ]);
+      })
+      .then(([providers, inventory]) => {
+        if (!abort.signal.aborted) {
+          setCatalog(
+            structuredClone(
+              providers.filter(
+                (entry) =>
+                  entry.readiness === "available" &&
+                  entry.ownership.length > 0 &&
+                  (!providerOnly ||
+                    (entry.family !== "mcp" &&
+                      !entry.setup.some((kind) =>
+                        ["installation", "openapi", "graphql"].includes(kind),
+                      ))) &&
+                  (!customOnly ||
+                    entry.family === "mcp" ||
+                    entry.setup.some((kind) =>
+                      ["installation", "openapi", "graphql"].includes(kind),
+                    )),
+              ),
+            ),
+          );
+          setAccounts(structuredClone(inventory));
+          const initial = providers.find((entry) => entry.id === initialProviderId);
+          if (initial)
+            setOwnership(
+              initial.ownership.includes("personal") &&
+                ["google", "microsoft"].includes(initial.family)
+                ? "personal"
+                : initial.ownership.includes("workspace")
+                  ? "workspace"
+                  : (initial.ownership[0] ?? ""),
+            );
+        }
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setFailed(true);
+      });
+    return () => abort.abort();
+  }, [controller, load, presentation, customOnly, providerOnly, initialProviderId]);
+  const provider = catalog?.find((entry) => entry.id === providerId);
+  const canBegin =
+    provider?.readiness === "available" &&
+    (ownership === "personal" || ownership === "workspace") &&
+    provider.ownership.includes(ownership);
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (!canBegin || view.busy || (ownership !== "personal" && ownership !== "workspace")) return;
+    setFailed(false);
+    try {
+      void controller
+        .begin({ providerId, ownership, returnUrl, idempotencyKey: crypto.randomUUID() })
+        .catch(() => setFailed(true));
+    } catch {
+      setFailed(true);
+    }
+  };
+  // Optional adapters must not add a temporary section that disappears once
+  // readiness arrives. The primary discovery surface already owns loading.
+  if (compact && (!catalog || catalog.length === 0) && !failed) return null;
+  return (
+    <section
+      className={className}
+      aria-label="Choose a connection"
+      aria-busy={view.busy || (!catalog && !failed)}
+    >
+      {failed && (
+        <p role="alert">
+          Connections could not be loaded or started. Check setup status before retrying.
+        </p>
+      )}
+      {!catalog && !failed && <p role="status">Loading connections…</p>}
+      {catalog?.length === 0 && <p role="status">No connections are available.</p>}
+      {Boolean(catalog?.length) && (
+        <form onSubmit={submit}>
+          <fieldset disabled={view.busy}>
+            <legend hidden={customOnly || compact}>
+              {presentation === "catalog" ? "Add a connection" : "Provider and ownership"}
+            </legend>
+            {presentation === "catalog" && !provider ? (
+              <>
+                <label hidden={customOnly || compact}>
+                  Search connections
+                  <input
+                    type="search"
+                    placeholder="Find a service…"
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                  />
+                </label>
+                {[
+                  {
+                    name: "Services",
+                    entries: catalog!.filter(
+                      (entry) =>
+                        entry.readiness === "available" &&
+                        entry.family !== "mcp" &&
+                        !entry.setup.some((kind) =>
+                          ["installation", "openapi", "graphql"].includes(kind),
+                        ),
+                    ),
+                    secondary: false,
+                  },
+                  {
+                    name: "Custom connections",
+                    entries: catalog!.filter(
+                      (entry) =>
+                        entry.readiness === "available" &&
+                        (entry.family === "mcp" ||
+                          entry.setup.some((kind) =>
+                            ["installation", "openapi", "graphql"].includes(kind),
+                          )),
+                    ),
+                    secondary: true,
+                  },
+                ].map((group) => {
+                  const entries = group.entries.filter((entry) =>
+                    entry.label.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim()),
+                  );
+                  if (!entries.length) return null;
+                  const rows = (
+                    <ConnectionCatalog
+                      services={entries.map((entry) => {
+                        const connected = accounts.some(
+                          (account) =>
+                            account.providerId === entry.id && account.status === "connected",
+                        );
+                        return {
+                          id: entry.id,
+                          name: entry.label,
+                          logo: (
+                            <ConnectionLogo
+                              src={connectionServicePresentation(entry).logo}
+                              name={entry.label}
+                            />
+                          ),
+                          options: [
+                            {
+                              id: entry.id,
+                              name: entry.label,
+                              status: connected
+                                ? "Connected"
+                                : entry.readiness === "available"
+                                  ? "Connect"
+                                  : "Unavailable",
+                              state: connected
+                                ? "added"
+                                : entry.readiness === "available"
+                                  ? "available"
+                                  : "unavailable",
+                              connected,
+                              onOpen: () => {
+                                if (!view.busy) {
+                                  setProviderId(entry.id);
+                                  setOwnership(
+                                    entry.ownership.length === 1 ? entry.ownership[0]! : "",
+                                  );
+                                }
+                              },
+                            },
+                          ],
+                        };
+                      })}
+                    />
+                  );
+                  return group.secondary && !customOnly ? (
+                    <details
+                      className="og-connect-secondary"
+                      key={group.name}
+                      open={query.trim() ? true : undefined}
+                    >
+                      <summary>
+                        {group.name}
+                        <span>{entries.length}</span>
+                      </summary>
+                      {rows}
+                    </details>
+                  ) : (
+                    <div key={group.name}>{rows}</div>
+                  );
+                })}
+                {!catalog!.some((entry) =>
+                  entry.label.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim()),
+                ) && <p role="status">No services match your search.</p>}
+              </>
+            ) : null}
+            {presentation === "catalog" && provider && !initialProviderId ? (
+              <button
+                type="button"
+                onClick={() => {
+                  setProviderId("");
+                  setOwnership("");
+                }}
+              >
+                Back to connections
+              </button>
+            ) : null}
+            <label hidden={presentation === "catalog"}>
+              Provider
+              <select
+                required
+                value={providerId}
+                onChange={(event) => {
+                  setProviderId(event.target.value);
+                  setOwnership("");
+                }}
+              >
+                <option value="" disabled>
+                  Choose a provider
+                </option>
+                {catalog!.map((entry) => (
+                  <option
+                    key={entry.id}
+                    value={entry.id}
+                    disabled={entry.readiness !== "available" || entry.ownership.length === 0}
+                  >
+                    {entry.label} — {entry.id} ({entry.readiness.replaceAll("_", " ")})
+                  </option>
+                ))}
+              </select>
+            </label>
+            {provider && (
+              <>
+                <strong>{presentation === "catalog" ? provider.label : null}</strong>
+                {provider.readiness !== "available" && (
+                  <p role="status">
+                    {provider.reason ??
+                      "This service is not available in this environment. Contact your administrator to enable it."}
+                  </p>
+                )}
+                <label>
+                  Who can use this connection?
+                  <select
+                    required
+                    value={ownership}
+                    onChange={(event) => setOwnership(event.target.value)}
+                  >
+                    <option value="" disabled>
+                      Choose ownership
+                    </option>
+                    {provider.ownership.map((choice) => (
+                      <option key={choice} value={choice}>
+                        {choice === "personal" ? "Only me" : "Everyone in this workspace"}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              </>
+            )}
+            <button
+              hidden={presentation === "catalog" && !provider}
+              type="submit"
+              disabled={!canBegin}
+            >
+              Continue
+            </button>
+          </fieldset>
+        </form>
+      )}
+      <button hidden={!failed} type="button" disabled={view.busy} onClick={() => setLoad(load + 1)}>
+        Reload providers
+      </button>
+    </section>
+  );
+}

package/src/connect-panel.tsx

@@ -0,0 +1,99 @@
+import { ConnectAccounts } from "./connect-accounts";
+import { ConnectChooser } from "./connect-chooser";
+import { ConnectSetup, type ConnectSetupProps } from "./connect-setup";
+import { useConnect } from "./hooks/use-connect";
+import type { OpenGeniClient } from "@opengeni/sdk";
+import { useState } from "react";
+import { connectionServicePresentation } from "./connection-service-presentation";
+import { ConnectionDiscovery } from "./connection-discovery";
+
+export type ConnectPanelProps = ConnectSetupProps & {
+  returnUrl: string;
+  /** Null omits the heading when the host already supplies one. */
+  title?: string | null;
+  showAccounts?: boolean;
+  /** Presentation only; the host backend owns acquisition admission. */
+  showCustomConnections?: boolean;
+  /** Include ready, non-custom adapters from the host's Connect catalogue. */
+  showProviderConnections?: boolean;
+  presentation?: "select" | "catalog";
+  client?: OpenGeniClient | undefined;
+};
+
+/** Optional composition over the same unstyled surfaces. Import
+ * @opengeni/react/connect.css for styling; the host retains navigation,
+ * transport, actor admission, and controller lifetime. */
+export function ConnectPanel({
+  returnUrl,
+  title = "Connections",
+  showAccounts = true,
+  showCustomConnections = true,
+  showProviderConnections = false,
+  presentation = "select",
+  className,
+  client,
+  ...setup
+}: ConnectPanelProps) {
+  const { attempt } = useConnect(setup.controller);
+  const [inventoryRevision, setInventoryRevision] = useState(0);
+  // Unknown/failed outcomes still need reconciliation or cancellation, not a
+  // competing new acquisition. Unmounting observers never cancels controller work.
+  const activeSetup =
+    attempt !== null && !["complete", "cancelled", "expired"].includes(attempt.state);
+  const serviceName = attempt
+    ? connectionServicePresentation({ id: attempt.providerId, label: "" }).name
+    : "";
+  return (
+    <div className={["og-connect", className].filter(Boolean).join(" ")}>
+      {title !== null && <h2>{title}</h2>}
+      {showAccounts && !activeSetup && (
+        <ConnectAccounts
+          key={inventoryRevision}
+          controller={setup.controller}
+          returnUrl={returnUrl}
+          client={client}
+          onDisconnected={() => setInventoryRevision((value) => value + 1)}
+        />
+      )}
+      {!activeSetup &&
+        (client && presentation === "catalog" ? (
+          <>
+            <ConnectionDiscovery
+              key={inventoryRevision}
+              controller={showProviderConnections ? setup.controller : undefined}
+              client={client}
+              workspaceId={setup.controller.workspaceId}
+              returnUrl={returnUrl}
+              onConfigured={() => setInventoryRevision((value) => value + 1)}
+            />
+            {showCustomConnections && (
+              <details className="og-connect-secondary">
+                <summary>Custom connection</summary>
+                <ConnectChooser
+                  customOnly
+                  presentation={presentation}
+                  controller={setup.controller}
+                  returnUrl={returnUrl}
+                />
+              </details>
+            )}
+          </>
+        ) : (
+          <ConnectChooser
+            presentation={presentation}
+            controller={setup.controller}
+            returnUrl={returnUrl}
+          />
+        ))}
+      {activeSetup && (
+        <ConnectSetup
+          {...setup}
+          authorizeLabel={
+            setup.authorizeLabel ??
+            (serviceName ? `Continue to ${serviceName}` : "Authorize connection")
+          }
+        />
+      )}
+    </div>
+  );
+}