@startsimpli/integrations 0.1.3 → 0.1.5

package/src/components/pages/ConnectionsPage.tsx

@@ -60,6 +60,21 @@ const DEFAULTS = {
   error: 'text-sm text-red-600',
 };
 
+/**
+ * WHAT AN ADMIN IS AGREEING TO, in their words rather than the wire's.
+ *
+ * Data, not a branch: an unknown key falls through to the key itself, because
+ * the capability vocabulary lives in the connector package and will outrun this
+ * bundle exactly the way the credential schema does. A capability this build has
+ * never heard of must render as a choice, not vanish from the list.
+ */
+const CAPABILITY_COPY: Record<string, string> = {
+  poll: 'Fetch new records on a schedule',
+  webhook_in: 'Receive events pushed to us',
+  action: 'Let us run actions in this account',
+  writeback_credential: 'Issue a token this vendor uses to call us',
+};
+
 /** A refusal must read as a refusal, not as an empty page. */
 function readFailureMessage(err: unknown): string {
   const status = (err as { status?: number })?.status;
@@ -120,6 +135,12 @@ export function ConnectionsPage({ api, foundrySlug, classNames = {} }: Connectio
             api={api}
             foundrySlug={foundrySlug}
             connection={connection}
+            // What the CONNECTOR declares, so the card can offer a capability
+            // this connection does not have yet — which is the only way an
+            // account connected before the picker existed ever gets one.
+            declared={
+              catalog.find((entry) => entry.key === connection.connector_key)?.capabilities
+            }
             canManage={permissions.manage}
             classNames={cn}
             onChanged={reload}
@@ -145,6 +166,75 @@ export function ConnectionsPage({ api, foundrySlug, classNames = {} }: Connectio
   );
 }
 
+// --------------------------------------------------------------------------
+//  the capability choice (bd startsim-768w.22.22)
+// --------------------------------------------------------------------------
+
+/**
+ * WHICH VERBS THIS ACCOUNT IS ALLOWED — the control this page did not have.
+ *
+ * `POST /connections/` and `PATCH /connections/<id>/` have both accepted
+ * `capabilities_enabled[]` since the endpoints were designed. Nothing here ever
+ * sent one, so every connection made through the product was stored with an
+ * EMPTY list, and an empty list enables nothing: the card goes green on a real
+ * `check()` and can then do none of the things it advertises. That is how a
+ * connected Granola account on a live foundry ingested nothing forever.
+ *
+ * Rendered from `entry.capabilities` — the connector's own declaration, off the
+ * catalog row — so a new vendor's verbs appear here with no code change, and a
+ * verb this build has never heard of still renders.
+ */
+function CapabilityPicker({
+  scope, declared, selected, disabled, idPrefix, onToggle, classNames: cn, children,
+}: {
+  scope: 'catalog' | 'connection';
+  declared: string[];
+  selected: string[];
+  disabled: boolean;
+  idPrefix: string;
+  onToggle: (capability: string, on: boolean) => void;
+  classNames: typeof DEFAULTS;
+  /** Whatever COMMITS the choice — inline, so the control and the thing that
+      saves it are one region for a screen reader and for a test. */
+  children?: React.ReactNode;
+}) {
+  if (declared.length === 0) return null;
+  return (
+    <fieldset data-capabilities={scope} className="mt-3 space-y-1 border-0 p-0">
+      <legend className="text-sm font-medium text-gray-900">What this account may do</legend>
+      {declared.map((capability) => {
+        const id = `${idPrefix}-cap-${capability}`;
+        return (
+          <label key={capability} htmlFor={id} className="flex items-start gap-2 text-sm">
+            <input
+              id={id}
+              type="checkbox"
+              value={capability}
+              className="mt-0.5"
+              checked={selected.includes(capability)}
+              disabled={disabled}
+              onChange={(event) => onToggle(capability, event.target.checked)}
+            />
+            <span>
+              <span className="text-gray-900">{capability}</span>
+              <span className={`ml-2 ${cn.muted}`}>
+                {CAPABILITY_COPY[capability] ?? ''}
+              </span>
+            </span>
+          </label>
+        );
+      })}
+      {children}
+    </fieldset>
+  );
+}
+
+/** Declaration order is the render order, and the wire order. */
+function orderCapabilities(declared: string[], selected: Iterable<string>): string[] {
+  const set = new Set(selected);
+  return declared.filter((capability) => set.has(capability));
+}
+
 // --------------------------------------------------------------------------
 //  catalog
 // --------------------------------------------------------------------------
@@ -163,6 +253,13 @@ function CatalogCard({
   const [values, setValues] = React.useState<Record<string, string>>({});
   const [busy, setBusy] = React.useState(false);
   const [error, setError] = React.useState('');
+  // Every declared capability starts ON. Not because "on" is a safe default in
+  // general, but because the alternative here is a connection that can do
+  // nothing — and the list is right there, unchecked with one click, before
+  // anything is saved. The privacy control that is genuinely opt-in lives one
+  // level down (a connector's own config, e.g. whether a poll fetches meeting
+  // transcript bytes at all) and is unaffected by this box.
+  const [capabilities, setCapabilities] = React.useState<string[]>(entry.capabilities);
 
   const credentialFields = schemaFields(entry.credential_schema);
   const configFields = schemaFields(entry.config_schema);
@@ -186,9 +283,12 @@ function CatalogCard({
       }
       await api.connect(foundrySlug, {
         connector_key: entry.key, name: entry.name, credentials, config,
+        // Always sent. Leaving it off is what wrote the inert cards.
+        capabilities_enabled: orderCapabilities(entry.capabilities, capabilities),
       });
       setOpen(false);
       setValues({});
+      setCapabilities(entry.capabilities);
       onConnected();
     } catch (err) {
       // The server's typed answer, verbatim. It already scrubbed itself of the
@@ -237,11 +337,34 @@ function CatalogCard({
               }));
             }}
           />
+          <CapabilityPicker
+            scope="catalog"
+            declared={entry.capabilities}
+            selected={capabilities}
+            disabled={busy}
+            idPrefix={`connect-${entry.key}`}
+            onToggle={(capability, on) => setCapabilities((prev) => (
+              on ? [...prev, capability] : prev.filter((c) => c !== capability)
+            ))}
+            classNames={cn}
+          />
+          {/* The server refuses an empty list with a 400 rather than storing a
+              card that can do nothing. Saying so here costs the admin a round
+              trip instead of a confusing error. */}
+          {entry.capabilities.length > 0 && capabilities.length === 0 ? (
+            <p className={cn.error}>
+              Enable at least one — a connection with nothing enabled can do nothing.
+            </p>
+          ) : null}
           {error ? <p className={cn.error} role="alert">{error}</p> : null}
           <button
             type="button"
             className={cn.button}
-            disabled={busy || missing.length > 0}
+            disabled={
+              busy
+              || missing.length > 0
+              || (entry.capabilities.length > 0 && capabilities.length === 0)
+            }
             onClick={() => void submit()}
           >
             {busy ? 'Testing…' : 'Test and save'}
@@ -257,11 +380,12 @@ function CatalogCard({
 // --------------------------------------------------------------------------
 
 function ConnectionCard({
-  api, foundrySlug, connection, canManage, classNames: cn, onChanged,
+  api, foundrySlug, connection, declared, canManage, classNames: cn, onChanged,
 }: {
   api: ConnectionsApi;
   foundrySlug: string;
   connection: Connection;
+  declared?: string[];
   canManage: boolean;
   classNames: typeof DEFAULTS;
   onChanged: () => void;
@@ -273,6 +397,26 @@ function ConnectionCard({
   const [error, setError] = React.useState('');
   const [notice, setNotice] = React.useState('');
 
+  const enabled = React.useMemo(
+    () => connection.capabilities_enabled ?? [], [connection.capabilities_enabled]);
+  // The catalog's declaration first, then anything this connection holds that
+  // the catalog no longer offers. A capability an admin cannot SEE is one they
+  // cannot turn off, and a catalog row that will not load must not blank the
+  // card's own state.
+  const offered = React.useMemo(() => {
+    const seen = new Set<string>();
+    return [...(declared ?? []), ...enabled].filter((capability) => {
+      if (seen.has(capability)) return false;
+      seen.add(capability);
+      return true;
+    });
+  }, [declared, enabled]);
+  const [selected, setSelected] = React.useState<string[]>(enabled);
+  React.useEffect(() => { setSelected(enabled); }, [enabled]);
+
+  const pending = orderCapabilities(offered, selected);
+  const dirty = pending.join(',') !== orderCapabilities(offered, enabled).join(',');
+
   async function guard(label: string, run: () => Promise<void>) {
     setBusy(label);
     setError('');
@@ -330,6 +474,46 @@ function ConnectionCard({
         ) : null}
       </div>
 
+      {/* THE FIX FOR THE CARDS THAT ALREADY EXIST. A connection written before
+          the connect form asked holds an empty list and can do nothing; the
+          connect form can never reach it. Turning `poll` on here is what makes
+          the server create the scheduled ingest leg. */}
+      <CapabilityPicker
+        scope="connection"
+        declared={offered}
+        selected={selected}
+        disabled={!canManage || Boolean(busy)}
+        idPrefix={`connection-${connection.id}`}
+        onToggle={(capability, on) => setSelected((prev) => (
+          on ? [...prev, capability] : prev.filter((c) => c !== capability)
+        ))}
+        classNames={cn}
+      >
+        {canManage ? (
+          <div className="mt-2 flex items-center gap-3">
+            <button
+              type="button"
+              className={cn.button}
+              disabled={!dirty || pending.length === 0 || Boolean(busy)}
+              onClick={() => void guard('capabilities', async () => {
+                await api.updateConnection(foundrySlug, connection.id, {
+                  capabilities_enabled: pending,
+                });
+                setNotice('Saved.');
+                onChanged();
+              })}
+            >
+              {busy === 'capabilities' ? 'Saving…' : 'Save'}
+            </button>
+            {pending.length === 0 ? (
+              <span className={cn.error}>
+                Enable at least one, or disconnect the account.
+              </span>
+            ) : null}
+          </div>
+        ) : null}
+      </CapabilityPicker>
+
       {notice ? <p className={cn.muted}>{notice}</p> : null}
       {error ? <p className={cn.error} role="alert">{error}</p> : null}