@startsimpli/integrations 0.2.24 → 0.2.26

package/src/components/pages/ConnectionsPage.tsx

@@ -123,6 +123,16 @@ interface BoundApi {
   }): Promise<ConnectionInvokeResult>;
   /** Per-member governance (bd startsim-768w.22.25.8). Foundry mode only, and
       absent on an api that predates the endpoints — see `ConnectionsApi`. */
+  /** The OAuth hand-off (bd startsim-768w.22.25.14/.23). Optional: an app on an
+      older client keeps type-checking, and the card renders the connector as
+      not-connectable-here rather than offering a button that cannot fire. */
+  startOAuth?(input: {
+    connector_key: string;
+    name?: string;
+    config?: Record<string, unknown>;
+    capabilities_enabled?: string[];
+    return_to?: string;
+  }): Promise<{ authorization_url: string; state: string; redirect_uri: string }>;
   setMemberConnectorPolicy?(connectorKey: string, allowed: boolean): Promise<unknown>;
   memberConnections?(): Promise<{
     results: MemberConnectionRow[]; permissions: ConnectionPermissions;
@@ -144,6 +154,10 @@ function bindApi(props: ConnectionsPageProps): BoundApi {
     ? { setMemberConnectorPolicy: (key: string, allowed: boolean) =>
       api.setMemberConnectorPolicy!(slug, key, allowed) }
     : {};
+  const oauth = api.startOAuth
+    ? { startOAuth: (input: Parameters<NonNullable<BoundApi['startOAuth']>>[0]) =>
+      api.startOAuth!(slug, input) }
+    : {};
   const roster = api.memberConnections
     ? { memberConnections: () => api.memberConnections!(slug) }
     : {};
@@ -153,6 +167,7 @@ function bindApi(props: ConnectionsPageProps): BoundApi {
     : {};
   return {
     ...memberPolicy,
+    ...oauth,
     ...roster,
     ...cutMember,
     connectorCatalog: () => api.connectorCatalog(slug),
@@ -467,12 +482,76 @@ function CatalogCard({
   // transcript bytes at all) and is unaffected by this box.
   const [capabilities, setCapabilities] = React.useState<string[]>(entry.capabilities);
 
-  const credentialFields = schemaFields(entry.credential_schema);
+  // THE ONE THING THIS CARD BRANCHES ON (bd startsim-768w.22.25.14/.23).
+  // `schema.auth_mode_for` derives it server-side and its docstring says so;
+  // this component had no reference to it at all, so an OAuth connector got the
+  // same credential form as everything else — which on the admin catalog meant
+  // the product asking a human to paste a refresh token, the exact thing
+  // `auth_mode` exists to prevent.
+  const isOAuth = entry.auth_mode === 'oauth';
+  // A stale client is not a dead button. The verb is optional on both api
+  // shapes, so an app pinned to an older `@startsimpli/api` says the connector
+  // cannot be connected from here instead of rendering a hand-off that throws.
+  const canHandOff = isOAuth && typeof api.startOAuth === 'function';
+
+  // NO credential fields in OAuth mode. Not hidden — never collected: the whole
+  // point is that the token comes back from the vendor, and a form that
+  // "helpfully" accepted one would keep the paste-a-refresh-token path alive
+  // beside the consent flow that replaced it.
+  const credentialFields = isOAuth ? [] : schemaFields(entry.credential_schema);
+  // Config IS still asked for, in both modes. It is the folder a Dropbox card
+  // will poll, it is not a secret, and dropping it here would mean asking for it
+  // again after the round trip.
   const configFields = schemaFields(entry.config_schema);
   const fields = [...credentialFields, ...configFields];
   const warnings = patternWarnings(fields, values);
   const missing = missingRequired(fields, values);
 
+  /** Collect the config fields the form did gather. Shared by both submits. */
+  function collectConfig(): Record<string, unknown> {
+    const config: Record<string, unknown> = {};
+    for (const spec of configFields) {
+      const v = values[isSecret(spec) ? `${spec.key}__draft` : spec.key];
+      if (typeof v === 'boolean' || typeof v === 'number' || v) config[spec.key] = v;
+    }
+    return config;
+  }
+
+  /**
+   * Hand the browser to the vendor (bd startsim-768w.22.25.21/.22).
+   *
+   * ONE call: the server writes the shell card AND returns the consent URL,
+   * because neither half is usable alone. The URL is opened VERBATIM — it is
+   * already complete, and this client has no `client_id` to add to it and must
+   * not have one to choose.
+   *
+   * `return_to` is where the member should land afterwards. It is sent, not
+   * trusted: the server validates it against this tenant's own recorded origins
+   * before folding it into the signed state, because the callback is an
+   * anonymous browser mid-redirect from the vendor's domain.
+   *
+   * `location.assign`, not a new tab. A vendor consent screen that opens in a
+   * popup is the one an ad blocker eats, and the whole point of the round trip
+   * is that the browser comes BACK here.
+   */
+  async function handOff() {
+    setBusy(true);
+    setError('');
+    try {
+      const { authorization_url: url } = await api.startOAuth!({
+        connector_key: entry.key,
+        name: entry.name,
+        config: collectConfig(),
+        capabilities_enabled: orderCapabilities(entry.capabilities, capabilities),
+        return_to: typeof window !== 'undefined' ? window.location.href : undefined,
+      });
+      if (typeof window !== 'undefined') window.location.assign(url);
+    } catch (err) {
+      setError((err as { message?: string })?.message || 'Could not start sign-in.');
+      setBusy(false);
+    }
+  }
+
   async function submit() {
     setBusy(true);
     setError('');
@@ -566,18 +645,56 @@ function CatalogCard({
               Connecting here adds a SECOND account.
             </p>
           ) : null}
-          <CredentialSchemaForm
-            fields={fields}
-            values={values}
-            warnings={warnings}
-            idPrefix={`connect-${entry.key}`}
-            onChange={(key, value) => {
-              const spec = fields.find((f) => f.key === key);
-              setValues((prev) => ({
-                ...prev, [spec && isSecret(spec) ? `${key}__draft` : key]: value,
-              }));
-            }}
-          />
+          {/* SIGN IN AT THE VENDOR — never a form asking for token material.
+              `auth_mode: oauth` means the credential schema is `access_token` /
+              `refresh_token` / `expires_at`, and rendering those as inputs asks
+              a human to go and mint a refresh token by hand. That is what this
+              card did to every admin who opened Dropbox. */}
+          {isOAuth ? (
+            <div className="space-y-2" data-oauth-connect={entry.key}>
+              <p className={cn.muted}>
+                {entry.name} signs you in on its own site. You will be sent there
+                to approve access and returned here — no keys to copy, and
+                StartSimpli never sees your password.
+              </p>
+              {!canHandOff ? (
+                <p className={cn.error}>
+                  This app cannot start a {entry.name} sign-in yet. Update it, or
+                  connect {entry.name} from the foundry control plane.
+                </p>
+              ) : null}
+            </div>
+          ) : (
+            <CredentialSchemaForm
+              fields={fields}
+              values={values}
+              warnings={warnings}
+              idPrefix={`connect-${entry.key}`}
+              onChange={(key, value) => {
+                const spec = fields.find((f) => f.key === key);
+                setValues((prev) => ({
+                  ...prev, [spec && isSecret(spec) ? `${key}__draft` : key]: value,
+                }));
+              }}
+            />
+          )}
+          {/* Config is asked for in BOTH modes — it is not a secret, and it is
+              the folder this card will poll. Rendered separately in OAuth mode
+              because the credential half of the same form is gone. */}
+          {isOAuth && configFields.length > 0 ? (
+            <CredentialSchemaForm
+              fields={configFields}
+              values={values}
+              warnings={warnings}
+              idPrefix={`connect-${entry.key}`}
+              onChange={(key, value) => {
+                const spec = configFields.find((f) => f.key === key);
+                setValues((prev) => ({
+                  ...prev, [spec && isSecret(spec) ? `${key}__draft` : key]: value,
+                }));
+              }}
+            />
+          ) : null}
           <CapabilityPicker
             scope="catalog"
             declared={entry.capabilities}
@@ -603,12 +720,19 @@ function CatalogCard({
             className={cn.button}
             disabled={
               busy
+              // `missing` counts only the fields this mode actually collects.
+              // In OAuth mode that is config alone — gating the hand-off on a
+              // required `access_token` would disable the very button whose job
+              // is to go and get one.
               || missing.length > 0
+              || (isOAuth && !canHandOff)
               || (entry.capabilities.length > 0 && capabilities.length === 0)
             }
-            onClick={() => void submit()}
+            onClick={() => void (isOAuth ? handOff() : submit())}
           >
-            {busy ? 'Testing…' : 'Test and save'}
+            {isOAuth
+              ? (busy ? 'Redirecting…' : `Continue to ${entry.name}`)
+              : (busy ? 'Testing…' : 'Test and save')}
           </button>
         </div>
       ) : null}