@startsimpli/integrations 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/integrations",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Provider-agnostic types, API clients, hooks, and UI primitives for email + calendar integrations across StartSimpli apps.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/__tests__/connections.test.tsx

@@ -15,7 +15,7 @@
  * theme classNames.
  */
 import { describe, expect, it, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { CredentialSchemaForm, schemaFields } from '../components/CredentialSchemaForm';
@@ -203,6 +203,7 @@ function stubApi(overrides: Partial<ConnectionsApi> = {}): ConnectionsApi {
       run_status: 'running', external_ref: null, output: {}, error: '',
     }),
     connectionRuns: vi.fn().mockResolvedValue({ results: [] }),
+    updateConnection: vi.fn().mockResolvedValue(CONNECTED.results[0]),
     ...overrides,
   } as ConnectionsApi;
 }
@@ -268,6 +269,120 @@ describe('ConnectionsPage — injected, not contextual', () => {
   });
 });
 
+// --------------------------------------------------------------------------
+//  the capability choice (bd startsim-768w.22.22)
+// --------------------------------------------------------------------------
+
+/**
+ * WHAT WENT WRONG ON PRODUCTION. An admin connected Granola on the `tandem`
+ * foundry through this very page. The card went green — `check()` really
+ * reached the vendor — and `capabilities_enabled` was stored as `[]`. With an
+ * empty list NO capability is enabled: not `poll`, not `action`, not
+ * `webhook_in`. So `poll_is_enabled()` answered false, no scheduled ingest leg
+ * was ever created, and the card sat there connected and completely inert.
+ *
+ * The server was not the liar. `POST /connections/` has accepted
+ * `capabilities_enabled[]` since the endpoint was designed, and
+ * `PATCH /connections/<id>/` has accepted edits to it and created the poll leg
+ * on the spot. THIS PAGE never sent either one — there was no control for it
+ * anywhere, at connect time or after — so the server received nothing, wrote
+ * nothing, and the admin had no way to say what they wanted.
+ *
+ * Both halves are asserted here: the choice is offered when connecting, and it
+ * stays changeable afterwards, because the connections that already exist
+ * cannot be fixed by anything the connect form does.
+ */
+describe('capabilities are the admin’s choice, and the page has to ask', () => {
+  /** The capability picker inside ONE card. Both surfaces render one. */
+  function picker(scope: HTMLElement, which: 'catalog' | 'connection') {
+    const group = scope.querySelector<HTMLElement>(`[data-capabilities="${which}"]`);
+    if (!group) throw new Error(`no ${which} capability picker rendered`);
+    return within(group);
+  }
+
+  async function openConnectForm() {
+    const api = stubApi();
+    const { container } = render(<ConnectionsPage api={api} foundrySlug="acme" />);
+    // The catalog's available row. The unavailable one offers no button at all.
+    await userEvent.click(await screen.findByRole('button', { name: /^connect$/i }));
+    return { api, container };
+  }
+
+  it('offers every capability the connector declares, from the catalog row', async () => {
+    const { container } = await openConnectForm();
+    // The n8n fixture declares action + poll. Both are offered; nothing else is.
+    const boxes = picker(container, 'catalog').getAllByRole('checkbox');
+    expect(boxes.map((b) => b.getAttribute('value')).sort()).toEqual(['action', 'poll']);
+    for (const box of boxes) expect(box).toBeChecked();
+  });
+
+  it('SENDS the capability list on connect instead of leaving the card inert', async () => {
+    const { api } = await openConnectForm();
+    await userEvent.type(screen.getByLabelText(/Instance URL/i), 'https://n8n.example.com');
+    await userEvent.click(screen.getByRole('button', { name: /test and save/i }));
+
+    await waitFor(() => expect(api.connect).toHaveBeenCalled());
+    const sent = (api.connect as ReturnType<typeof vi.fn>).mock.calls[0][1];
+    expect(sent.capabilities_enabled).toEqual(['action', 'poll']);
+  });
+
+  it('honours an admin who unchecks one before saving', async () => {
+    const { api, container } = await openConnectForm();
+    await userEvent.type(screen.getByLabelText(/Instance URL/i), 'https://n8n.example.com');
+    await userEvent.click(picker(container, 'catalog').getByRole('checkbox', { name: /action/i }));
+    await userEvent.click(screen.getByRole('button', { name: /test and save/i }));
+
+    await waitFor(() => expect(api.connect).toHaveBeenCalled());
+    const sent = (api.connect as ReturnType<typeof vi.fn>).mock.calls[0][1];
+    expect(sent.capabilities_enabled).toEqual(['poll']);
+  });
+
+  it('will not let an admin save a connection that can do nothing', async () => {
+    const { container } = await openConnectForm();
+    await userEvent.type(screen.getByLabelText(/Instance URL/i), 'https://n8n.example.com');
+    for (const box of picker(container, 'catalog').getAllByRole('checkbox')) {
+      await userEvent.click(box);
+    }
+    // The server refuses an empty list with a 400 (bd startsim-768w.22.22);
+    // refusing it here means the admin finds out before a round trip.
+    expect(screen.getByRole('button', { name: /test and save/i })).toBeDisabled();
+  });
+
+  it('lets an admin turn a capability ON for a connection that already exists', async () => {
+    // THE UNBLOCK. The `tandem` Granola card is already there with an empty
+    // list; nothing the connect form does can reach it. `Ops n8n` here has only
+    // `action` enabled, and the connector declares `poll` too.
+    const api = stubApi();
+    const { container } = render(<ConnectionsPage api={api} foundrySlug="acme" />);
+    await screen.findByText('Ops n8n');
+
+    const on = picker(container, 'connection');
+    const poll = on.getByRole('checkbox', { name: /poll/i });
+    expect(poll).not.toBeChecked();
+    await userEvent.click(poll);
+    await userEvent.click(on.getByRole('button', { name: /save/i }));
+
+    await waitFor(() => expect(api.updateConnection).toHaveBeenCalledWith('acme', 'c1', {
+      capabilities_enabled: ['action', 'poll'],
+    }));
+  });
+
+  it('shows the capability state read-only when manage is false', async () => {
+    const api = stubApi({
+      connections: vi.fn().mockResolvedValue({
+        ...CONNECTED,
+        permissions: { view: true, manage: false, issue_tokens: false },
+      }),
+    });
+    const { container } = render(<ConnectionsPage api={api} foundrySlug="acme" />);
+    await screen.findByText('Ops n8n');
+
+    const on = picker(container, 'connection');
+    expect(on.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+    for (const box of on.getAllByRole('checkbox')) expect(box).toBeDisabled();
+  });
+});
+
 describe('the catalog envelope, as the server actually ships it', () => {
   // REGRESSION. The first browser drive of this page died on
   // `(entry.credential_schema ?? []) is not iterable`, because these fixtures

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}
 

package/src/components/pages/types.ts

@@ -156,6 +156,27 @@ export interface ConnectionsApi {
     name?: string;
     credentials?: Record<string, unknown>;
     config?: Record<string, unknown>;
+    /**
+     * WHICH VERBS THIS ACCOUNT IS ALLOWED. Omitting it used to leave the server
+     * to write `[]`, which enables nothing at all — a green card that cannot
+     * poll, cannot be invoked and cannot receive a webhook (bd
+     * startsim-768w.22.22). The composer always sends it now, and the server
+     * refuses an empty list rather than storing the inert card.
+     */
+    capabilities_enabled?: string[];
+  }): Promise<Connection>;
+
+  /**
+   * Edit a connection in place. The only field this page changes today is
+   * `capabilities_enabled`, and it must be changeable AFTER connect: every
+   * connection that already exists was written before the connect form asked,
+   * so nothing the connect form does can reach them. Turning `poll` on here is
+   * what creates the scheduled ingest leg, server-side, in the same request.
+   */
+  updateConnection(slug: string, id: string, input: {
+    name?: string;
+    capabilities_enabled?: string[];
+    config?: Record<string, unknown>;
   }): Promise<Connection>;
   checkConnection(slug: string, id: string): Promise<{
     ok: boolean; account_label: string; detail: string;