@startsimpli/integrations 0.2.20 → 0.2.22

package/src/components/pages/MemberConnectionRoster.tsx

@@ -0,0 +1,182 @@
+/**
+ * WHO IN THIS FOUNDRY HAS CONNECTED THEIR OWN ACCOUNT (bd startsim-768w.22.25.8).
+ *
+ * The other half of the allowlist. `MemberPolicyToggle` decides which connectors
+ * are open; this says who walked through the door, and gives an admin the one
+ * verb offboarding needs — cut a departing member's pipes.
+ *
+ * ITS OWN FILE, ON PURPOSE. `ConnectionsPage` renders two lists that belong to
+ * whoever is looking at it, and its whole security property is that the personal
+ * and foundry surfaces never see each other's rows. This list is the deliberate
+ * exception: it enumerates OTHER PEOPLE'S accounts, from a different endpoint,
+ * through a different serializer, behind a foundry permission. Keeping it out of
+ * the composer's own body means one forgotten `personal` guard in there cannot
+ * put somebody else's connections on a member's screen.
+ *
+ * METADATA ONLY, and there is nothing to widen. The server sends who, which
+ * vendor, whether it is working and when it was last checked; there is no
+ * credential, no masked hint, no config, and no verb here that reads into an
+ * account or replaces its key. Ending someone's access is governance and an
+ * admin needs it. Taking their account over is impersonation and no foundry
+ * permission grants it.
+ */
+import * as React from 'react';
+
+import type {
+  ConnectionPermissions,
+  MemberConnectionRow,
+} from './types';
+
+type ClassNames = {
+  section: string; heading: string; card: string; button: string;
+  muted: string; error: string;
+};
+
+export function MemberConnectionRoster({
+  list, disconnect, canManage, classNames: cn,
+}: {
+  list: () => Promise<{ results: MemberConnectionRow[]; permissions: ConnectionPermissions }>;
+  disconnect?: (id: string) => Promise<void>;
+  canManage: boolean;
+  classNames: ClassNames;
+}) {
+  const [rows, setRows] = React.useState<MemberConnectionRow[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState('');
+
+  const reload = React.useCallback(async () => {
+    setLoading(true);
+    try {
+      const page = await list();
+      setRows(page.results ?? []);
+      setError('');
+    } catch (err) {
+      // A control plane that predates these endpoints answers 404. That is not
+      // an error an admin can act on, so the section reports nothing and shows
+      // nothing rather than putting a red bar under a working page.
+      const status = (err as { status?: number })?.status;
+      setError(status === 404 ? '' : ((err as { message?: string })?.message
+        || 'Could not load members’ connections.'));
+      setRows([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [list]);
+
+  React.useEffect(() => { void reload(); }, [reload]);
+
+  return (
+    <section className={cn.section} data-member-roster>
+      <h2 className={cn.heading}>Members’ own connections</h2>
+      <p className={cn.muted}>
+        Accounts individual members connected with their own credentials. You can
+        see that they exist and whether they are working; you cannot see or
+        replace their keys. Disconnecting is permanent — it stops the account’s
+        scheduled fetches, revokes its tokens and deletes the stored key, and the
+        member has to reconnect with the vendor to come back.
+      </p>
+      {loading && rows.length === 0 ? <p className={cn.muted}>Loading…</p> : null}
+      {error ? <p className={cn.error} role="alert">{error}</p> : null}
+      {!loading && !error && rows.length === 0 ? (
+        <p className={cn.muted}>No member has connected their own account yet.</p>
+      ) : null}
+      {rows.map((row) => (
+        <MemberConnectionCard
+          key={row.id}
+          row={row}
+          canManage={canManage}
+          disconnect={disconnect}
+          classNames={cn}
+          onChanged={reload}
+        />
+      ))}
+    </section>
+  );
+}
+
+function MemberConnectionCard({
+  row, canManage, disconnect, classNames: cn, onChanged,
+}: {
+  row: MemberConnectionRow;
+  canManage: boolean;
+  disconnect?: (id: string) => Promise<void>;
+  classNames: ClassNames;
+  onChanged: () => void;
+}) {
+  const [confirming, setConfirming] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState('');
+  const who = row.owner?.email || row.owner?.name || 'Unknown member';
+
+  async function cut() {
+    if (!disconnect) return;
+    setBusy(true);
+    setError('');
+    try {
+      await disconnect(row.id);
+      setConfirming(false);
+      onChanged();
+    } catch (err) {
+      setError((err as { message?: string })?.message || 'Could not disconnect.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className={cn.card} data-member-connection={row.id}>
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="font-medium text-gray-900">{who}</p>
+          <p className={cn.muted}>
+            {row.connector_name}
+            {row.account_label ? ` · ${row.account_label}` : ''}
+          </p>
+          <p className="mt-1 text-xs text-gray-400">
+            {row.status}
+            {row.health ? ` · ${row.health}` : ''}
+            {row.last_checked_at
+              ? ` · last checked ${new Date(row.last_checked_at).toLocaleString()}`
+              : ' · never checked'}
+          </p>
+          {/* The vendor's own failure text, which the server already scrubbed of
+              anything the member submitted. An admin deciding whether to cut a
+              pipe is entitled to know it is already broken. */}
+          {row.check_error ? <p className={cn.error}>{row.check_error}</p> : null}
+        </div>
+        {canManage && disconnect ? (
+          <button
+            type="button"
+            className={cn.button}
+            disabled={busy}
+            onClick={() => setConfirming((v) => !v)}
+          >
+            {confirming ? 'Cancel' : 'Disconnect'}
+          </button>
+        ) : null}
+      </div>
+      {confirming ? (
+        <div className="mt-3 space-y-2">
+          {/* NAMES THE PERSON, because the cost of this button falls on them and
+              not on the admin pressing it. A generic "are you sure?" over a list
+              of near-identical rows is how the wrong pipe gets cut. */}
+          <p className={cn.muted}>
+            Disconnect <strong className="text-gray-900">{who}</strong>’s{' '}
+            {row.connector_name} account? Their stored key is deleted and their
+            scheduled fetches stop. This cannot be undone — they would have to
+            connect again themselves.
+          </p>
+          {error ? <p className={cn.error} role="alert">{error}</p> : null}
+          <button
+            type="button"
+            className={cn.button}
+            disabled={busy}
+            onClick={() => void cut()}
+          >
+            {busy ? 'Disconnecting…' : 'Yes, disconnect'}
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/pages/types.ts

@@ -61,6 +61,47 @@ export interface ConnectorCatalogEntry {
   supports_webhooks: boolean;
   /** A row whose class will not import says so here rather than vanishing. */
   availability: { available: boolean; reason: string };
+  /**
+   * MAY MEMBERS CONNECT THEIR OWN ACCOUNT ON THIS ONE (bd startsim-768w.22.25.8).
+   *
+   * Present on the FOUNDRY catalog only — the member catalog is already filtered
+   * to what is allowed, so the field would be a constant `true` there and a
+   * client could mistake it for a control the member has.
+   *
+   * Optional because an app may be running against a control plane that predates
+   * this field; the toggle renders when the catalog says so and the api has the
+   * verb, never on an assumption about either.
+   *
+   *   allowed   the stored answer — is this connector open to members today
+   *   settable  may it be CHANGED at all. `false` is not "you lack permission";
+   *             it is "this connector cannot be offered to members yet"
+   *   reason    why not, in an admin's words, when `settable` is false
+   */
+  member_policy?: { allowed: boolean; settable: boolean; reason: string };
+}
+
+/**
+ * One member's own connection, as the ADMIN roster sees it (bd
+ * startsim-768w.22.25.8).
+ *
+ * Note what is NOT here and cannot be added by widening a type: no credential,
+ * no masked hint, no config, no token. An admin governs which connectors are
+ * open and ends access when somebody leaves; neither act needs to see inside
+ * another person's account. The server serializes exactly these fields for the
+ * same reason.
+ */
+export interface MemberConnectionRow {
+  id: string;
+  owner: { id: string; email: string; name: string };
+  connector_key: string;
+  connector_name: string;
+  name: string;
+  account_label: string;
+  status: ConnectionStatus;
+  health: string;
+  last_checked_at?: string | null;
+  check_error?: string;
+  created_at?: string;
 }
 
 export type ConnectionStatus = 'connected' | 'needs_reauth' | 'error' | 'disabled';
@@ -219,4 +260,101 @@ export interface ConnectionsApi {
     destination_id: string; record_type?: string; records?: unknown[];
   }): Promise<ConnectionInvokeResult>;
   connectionRuns(slug: string, id: string): Promise<{ results: ConnectionRun[] }>;
+
+  /**
+   * GOVERNING PER-MEMBER CONNECTIONS (bd startsim-768w.22.25.8) — three verbs,
+   * all OPTIONAL, and the optionality is load-bearing rather than timidity.
+   *
+   * Apps consume `@startsimpli/*` as PUBLISHED packages, so a client pinned to
+   * an older `@startsimpli/api` is a normal state of the world, not a mistake.
+   * Required methods here would make that combination a type error in an app
+   * that never asked for this feature. Optional, the composer renders each
+   * control only when the verb behind it exists — the same rule `BoundApi`
+   * already uses to keep the personal surface from rendering foundry-only
+   * buttons.
+   */
+
+  /**
+   * Open or close ONE connector to this foundry's members.
+   *
+   * `allowed: true` is an agreement to RECEIVE member-owned vendor data into
+   * this foundry, under each member's own credential. `allowed: false` stops NEW
+   * personal connections immediately and leaves existing ones running — ending
+   * those is `disconnectMemberConnection`, per connection, deliberately.
+   */
+  setMemberConnectorPolicy?(slug: string, connectorKey: string, allowed: boolean):
+    Promise<{ connector_key: string; member_connect_allowed: boolean; changed: boolean }>;
+
+  /** The roster: every member-owned connection in the foundry. Metadata only. */
+  memberConnections?(slug: string): Promise<{
+    results: MemberConnectionRow[];
+    permissions: ConnectionPermissions;
+  }>;
+
+  /**
+   * END one member's connection — offboarding. The same irreversible disconnect
+   * an admin has on a shared connection: the poll stops, the push stops, issued
+   * tokens are revoked and the stored credential is deleted. There is no
+   * replace-key and no credential read beside it, and that is the design: ending
+   * access is governance, taking an account over is impersonation.
+   */
+  disconnectMemberConnection?(slug: string, id: string): Promise<void>;
+}
+
+/**
+ * THE SAME PAGE, FOR A PERSON RATHER THAN A FOUNDRY (bd startsim-768w.22.25.6).
+ *
+ * A seated member of a foundry connects THEIR OWN account — their Granola key,
+ * not the foundry's — from inside their tenant app. The endpoints are
+ * `connections/me/...` and the differences from the interface above are not
+ * stylistic; each one is a shape the member router deliberately does not serve
+ * (`backend/apps/connectors/member_urls.py`, `api/member_views.py`):
+ *
+ * NO SLUG. Every method here is slugless, and that is the whole security
+ * property rather than a convenience. The member surface names the foundry
+ * through the TOKEN'S AUDIENCE, so — in the router's own words — "there is no id
+ * here to substitute, no slug to swap, and therefore nothing in the URL space
+ * that names anybody else." A client whose signatures take a slug hands that
+ * affordance back at the type level, and reads to the next person as a client
+ * that scopes by slug. It must not exist.
+ *
+ * NO `updateConnection`. `MyConnectionDetailView` serves GET and DELETE only.
+ * Renaming a card or changing its config or enabled capabilities stays on the
+ * control-plane router; a member who needs one asks an admin.
+ *
+ * NO choices, targets, actions or tokens. Discovering what a credential reaches,
+ * wiring it to a destination, invoking it and minting `ConnectionToken`s are
+ * foundry-level and stay owner- or admin-exclusive. That is a design decision,
+ * not a backlog item — a member's key is theirs to install and revoke, not a
+ * lever on the foundry's pipelines.
+ *
+ * `connectorCatalog` here returns the ALLOWED catalog — `member_connectable`
+ * for this foundry, filtered server-side, default-deny per connector. The
+ * composer renders exactly what it is handed: a client-side filter over the
+ * full catalog would ship the withheld vendors in the bundle.
+ */
+export interface MemberConnectionsApi {
+  connectorCatalog(): Promise<{ results: ConnectorCatalogEntry[] }>;
+  connections(): Promise<{
+    results: Connection[];
+    permissions: ConnectionPermissions;
+  }>;
+  connect(input: {
+    connector_key: string;
+    name?: string;
+    credentials?: Record<string, unknown>;
+    config?: Record<string, unknown>;
+    /**
+     * Chosen once, at connect time, and not editable afterwards on this
+     * surface — there is no PATCH. The picker on an existing card is therefore
+     * informational, and saying so is the honest rendering of both halves.
+     */
+    capabilities_enabled?: string[];
+  }): Promise<Connection>;
+  checkConnection(id: string): Promise<{
+    ok: boolean; account_label: string; detail: string;
+  }>;
+  rotateCredential(id: string, credentials: Record<string, unknown>): Promise<Connection>;
+  disconnect(id: string): Promise<void>;
+  connectionRuns(id: string): Promise<{ results: ConnectionRun[] }>;
 }