@hanzo/build 0.2.34 → 0.2.35

package/lib/api/github.d.ts

@@ -4,7 +4,8 @@
  *   GET  /v1/provider/github/repos?q=&owner=&limit=&after=           most recently pushed first
  *   GET  /v1/provider/github/repos/{owner}/{repo}/branches?q=&limit=&after=   default first
  *   GET  /v1/provider/github/user              the person's own connection
- *   POST /v1/provider/github/user/connect      → {authorizeUrl}
+ *   POST /v1/provider/github/user/connect      {return} → {authorizeUrl}
+ *   POST /v1/provider/github/user/complete     {grant} → the connection
  *   POST /v1/provider/github/user/disconnect
  *   GET  /v1/provider/github/installations     the accounts this org has bound the App on
  *
@@ -14,8 +15,9 @@
  *
  * `connected` false with repositories is an org admin seeing the org's
  * installations; false with none is the cue to connect. GitHub returns a
- * connecting person to the console's /connectors?complete=github&grant=<id>,
- * which completes it.
+ * connecting person to the page the connect named as its return (a Hanzo app
+ * page; the console's /connectors otherwise) with `?complete=github&grant=<id>`,
+ * and that page completes it (`complete`, and `landed` in ../back.ts).
  */
 import { type Target } from './call.ts';
 export interface Repo {
@@ -74,8 +76,14 @@ export interface BranchQuery {
 }
 export declare function branches(t: Target, owner: string, name: string, p?: BranchQuery, signal?: AbortSignal): Promise<Branches>;
 export declare function connection(t: Target): Promise<Connection>;
-/** Where to send the person to authorize the platform's GitHub App — github.com only. */
-export declare function connect(t: Target): Promise<string>;
+/**
+ * Where to send the person to authorize the platform's GitHub App — github.com
+ * only. `back` is the page GitHub's return lands on; the platform keeps it only
+ * when it is a Hanzo app page.
+ */
+export declare function connect(t: Target, back?: string): Promise<string>;
+/** Finish the connect GitHub's return handed this page as `grant`. */
+export declare function complete(t: Target, grant: string): Promise<Connection>;
 export declare function disconnect(t: Target): Promise<void>;
 /** A GitHub account the platform's App is installed on, as this org sees it. */
 export interface Installation {

package/lib/api/github.js

@@ -4,7 +4,8 @@
  *   GET  /v1/provider/github/repos?q=&owner=&limit=&after=           most recently pushed first
  *   GET  /v1/provider/github/repos/{owner}/{repo}/branches?q=&limit=&after=   default first
  *   GET  /v1/provider/github/user              the person's own connection
- *   POST /v1/provider/github/user/connect      → {authorizeUrl}
+ *   POST /v1/provider/github/user/connect      {return} → {authorizeUrl}
+ *   POST /v1/provider/github/user/complete     {grant} → the connection
  *   POST /v1/provider/github/user/disconnect
  *   GET  /v1/provider/github/installations     the accounts this org has bound the App on
  *
@@ -14,8 +15,9 @@
  *
  * `connected` false with repositories is an org admin seeing the org's
  * installations; false with none is the cue to connect. GitHub returns a
- * connecting person to the console's /connectors?complete=github&grant=<id>,
- * which completes it.
+ * connecting person to the page the connect named as its return (a Hanzo app
+ * page; the console's /connectors otherwise) with `?complete=github&grant=<id>`,
+ * and that page completes it (`complete`, and `landed` in ../back.ts).
  */
 import { call, query, seg } from './call.js';
 const str = (v) => (typeof v === 'string' ? v : '');
@@ -57,18 +59,29 @@ export async function branches(t, owner, name, p = {}, signal) {
         total: num(raw.total),
     };
 }
+function own(raw) {
+    const c = obj(raw);
+    return { configured: c.configured === true, connected: c.connected === true, login: str(c.login) };
+}
 export async function connection(t) {
-    const raw = obj(await call(t, 'GET', '/v1/provider/github/user'));
-    return { configured: raw.configured === true, connected: raw.connected === true, login: str(raw.login) };
+    return own(await call(t, 'GET', '/v1/provider/github/user'));
 }
-/** Where to send the person to authorize the platform's GitHub App — github.com only. */
-export async function connect(t) {
-    const raw = obj(await call(t, 'POST', '/v1/provider/github/user/connect'));
+/**
+ * Where to send the person to authorize the platform's GitHub App — github.com
+ * only. `back` is the page GitHub's return lands on; the platform keeps it only
+ * when it is a Hanzo app page.
+ */
+export async function connect(t, back) {
+    const raw = obj(await call(t, 'POST', '/v1/provider/github/user/connect', back ? { return: back } : undefined));
     const url = str(raw.authorizeUrl);
     if (!/^https:\/\/github\.com\//.test(url))
         throw new Error('The platform did not name a GitHub address to connect at');
     return url;
 }
+/** Finish the connect GitHub's return handed this page as `grant`. */
+export async function complete(t, grant) {
+    return own(await call(t, 'POST', '/v1/provider/github/user/complete', { grant }));
+}
 export async function disconnect(t) {
     await call(t, 'POST', '/v1/provider/github/user/disconnect');
 }

package/lib/api/provider.d.ts

@@ -3,7 +3,7 @@
  * platform's GitHub App is installed on.
  *
  *   GET  /v1/provider/{id}              one connector and this org's connection to it
- *   POST /v1/provider/{id}/connect      {} → {authorizeUrl}: the provider's own consent page (org admin)
+ *   POST /v1/provider/{id}/connect      {return} → {authorizeUrl}: the provider's own consent page (org admin)
  *   POST /v1/provider/{id}/disconnect   forget the org's connection (org admin)
  *   GET  /v1/provider/slack/channels    the connected workspace's channels, a page at a time
  *
@@ -25,8 +25,8 @@ export interface Connector {
 }
 export declare function connector(raw: unknown, id?: string): Connector;
 export declare function read(t: Target, id: string): Promise<Connector>;
-/** The provider's consent page for this org. */
-export declare function authorize(t: Target, id: string): Promise<string>;
+/** The provider's consent page for this org; its return lands on `back` when that is a Hanzo app page. */
+export declare function authorize(t: Target, id: string, back?: string): Promise<string>;
 export declare function disconnect(t: Target, id: string): Promise<void>;
 export interface Channel {
     id: string;

package/lib/api/provider.js

@@ -3,7 +3,7 @@
  * platform's GitHub App is installed on.
  *
  *   GET  /v1/provider/{id}              one connector and this org's connection to it
- *   POST /v1/provider/{id}/connect      {} → {authorizeUrl}: the provider's own consent page (org admin)
+ *   POST /v1/provider/{id}/connect      {return} → {authorizeUrl}: the provider's own consent page (org admin)
  *   POST /v1/provider/{id}/disconnect   forget the org's connection (org admin)
  *   GET  /v1/provider/slack/channels    the connected workspace's channels, a page at a time
  *
@@ -35,9 +35,9 @@ const CONSENT = {
     slack: /^https:\/\/slack\.com\//,
     github: /^https:\/\/github\.com\//,
 };
-/** The provider's consent page for this org. */
-export async function authorize(t, id) {
-    const url = str(obj(await call(t, 'POST', `/v1/provider/${seg(id)}/connect`, {})).authorizeUrl);
+/** The provider's consent page for this org; its return lands on `back` when that is a Hanzo app page. */
+export async function authorize(t, id, back) {
+    const url = str(obj(await call(t, 'POST', `/v1/provider/${seg(id)}/connect`, back ? { return: back } : {})).authorizeUrl);
     const host = CONSENT[id];
     if (!host || !host.test(url))
         throw new Error(`The platform did not name a ${id} address to connect at`);

package/lib/back.d.ts

@@ -0,0 +1,29 @@
+import type { Target } from './api/call.ts';
+/** The query keys a return carries its answer in. */
+export declare const ANSWER: readonly ['complete', 'grant', 'connected', 'account', 'error', 'reason'];
+export type Landing = {
+    kind: 'grant';
+    provider: string;
+    grant: string;
+} | {
+    kind: 'connected';
+    provider: string;
+    account: string;
+} | {
+    kind: 'error';
+    provider: string;
+    reason: string;
+};
+/** The answer a return carried in `search`, or null when it carried none. */
+export declare function landed(search: string): Landing | null;
+/** `href` without the answer keys; `href` itself when it carries none. */
+export declare function clean(href: string): string;
+/** This page's address, as a connect's return. */
+export declare function here(): string;
+/** A provider id as people write it. */
+export declare const named: (id: string) => string;
+/**
+ * Finish what a return carried, once a person is signed in: `say` gets the
+ * sentence, and `after` runs once something was connected.
+ */
+export declare function useBack(t: Target, signed: boolean, say: (note: string) => void, after: () => void): void;

package/lib/back.js

@@ -0,0 +1,82 @@
+/**
+ * Coming back from a provider's consent page.
+ *
+ * A connect names the page it starts on as its return (`here`). The platform
+ * keeps that address when it is a Hanzo app page, and its callback lands the
+ * person back on it with the answer in the query:
+ *
+ *   ?complete=github&grant=<id>         a GitHub connect to finish (POST /v1/provider/github/user/complete)
+ *   ?connected=<provider>&account=<n>   an organization's connector, connected
+ *   ?error=<provider>&reason=<why>      either, refused
+ *
+ * `useBack` reads that answer once, takes it off the address so a reload does
+ * not replay it, finishes a GitHub grant, and says what happened.
+ */
+import { useEffect } from 'react';
+import { complete } from './api/github.js';
+/** The query keys a return carries its answer in. */
+export const ANSWER = ['complete', 'grant', 'connected', 'account', 'error', 'reason'];
+/** The answer a return carried in `search`, or null when it carried none. */
+export function landed(search) {
+    const q = new URLSearchParams(search);
+    const error = q.get('error');
+    if (error)
+        return { kind: 'error', provider: error, reason: q.get('reason') ?? '' };
+    const grant = q.get('grant');
+    const done = q.get('complete');
+    if (done && grant)
+        return { kind: 'grant', provider: done, grant };
+    const connected = q.get('connected');
+    if (connected)
+        return { kind: 'connected', provider: connected, account: q.get('account') ?? '' };
+    return null;
+}
+/** `href` without the answer keys; `href` itself when it carries none. */
+export function clean(href) {
+    const url = new URL(href);
+    if (!ANSWER.some((k) => url.searchParams.has(k)))
+        return href;
+    for (const k of ANSWER)
+        url.searchParams.delete(k);
+    return url.href;
+}
+/** This page's address, as a connect's return. */
+export function here() {
+    return clean(window.location.href);
+}
+const NAMES = { github: 'GitHub', slack: 'Slack' };
+/** A provider id as people write it. */
+export const named = (id) => NAMES[id] ?? (id ? id[0].toUpperCase() + id.slice(1) : 'The connection');
+/**
+ * Finish what a return carried, once a person is signed in: `say` gets the
+ * sentence, and `after` runs once something was connected.
+ */
+export function useBack(t, signed, say, after) {
+    useEffect(() => {
+        if (!signed)
+            return;
+        const l = landed(window.location.search);
+        if (!l)
+            return;
+        // Off the address first: a grant completes once, and a reload must not try again.
+        const next = clean(window.location.href);
+        window.history.replaceState(window.history.state, '', next);
+        if (l.kind === 'error') {
+            say(`${named(l.provider)}: ${l.reason || 'not connected'}`);
+            return;
+        }
+        if (l.kind === 'connected') {
+            say(`${named(l.provider)} is connected${l.account ? ` as ${l.account}` : ''}`);
+            after();
+            return;
+        }
+        if (l.provider !== 'github')
+            return;
+        complete(t, l.grant).then((c) => {
+            say(c.connected ? `Connected as @${c.login}` : 'GitHub did not connect; connect again');
+            after();
+        }, (e) => say(e.message));
+        // Once per landing: the address is clean after the first run.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [signed]);
+}

package/lib/settings/integrations.js

@@ -3,9 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Integrations: your own GitHub connection, the GitHub accounts the
  * organization has installed the platform's App on, and its Slack workspace.
  *
- * Connecting leaves this page once, for GitHub's or Slack's own consent screen.
- * Anyone connects their own GitHub; installing the App and connecting Slack are
- * an org admin's, which is the platform's rule.
+ * Connecting leaves this page once, for GitHub's or Slack's own consent screen,
+ * and the platform's callback brings the person back here with the answer
+ * (../back.ts), which this page finishes and reports. Anyone connects their own
+ * GitHub; installing the App and connecting Slack are an org admin's, which is
+ * the platform's rule.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Github, Hash, Lock, Slack } from '@hanzogui/lucide-icons-2';
@@ -13,6 +15,7 @@ import { Button } from '@hanzo/ui';
 import { useState } from 'react';
 import { connect, connection, disconnect as unlinkGithub, installations } from '../api/github.js';
 import { authorize, channels, disconnect, read } from '../api/provider.js';
+import { here, useBack } from '../back.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
@@ -27,6 +30,11 @@ export function Integrations() {
     const rooms = useRead(signed && joined ? () => channels(t) : null, { channels: [], next: '' }, [t, signed, joined]);
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
+    useBack(t, signed, setNote, () => {
+        mine.reload();
+        installed.reload();
+        slack.reload();
+    });
     if (!signed) {
         return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Integrations" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s integrations." })] }));
     }
@@ -67,7 +75,7 @@ export function Integrations() {
                                             ? 'This deployment cannot connect GitHub yet.'
                                             : me.connected
                                                 ? `Connected as @${me.login}`
-                                                : 'Not connected', trailing: me?.configured ? (me.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => unlinkGithub(t), 'Your GitHub is disconnected', mine.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => connect(t)), children: "Connect" }))) : null }), installed.error ? (_jsx(Row, { title: "App installations", detail: installed.error.message })) : (installed.value.map((i) => (_jsx(Row, { leading: _jsx(Github, { size: 16 }), title: i.login, detail: [i.type, i.grant === 'all' ? 'every repository' : i.grant === 'selected' ? 'selected repositories' : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: i.connected ? '$ink' : '$soft', children: i.connected ? 'Installed' : 'Removed on GitHub' }) }, i.login)))), !installed.error && !installed.loading && installed.value.length === 0 ? (_jsx(Row, { title: "No GitHub accounts installed", detail: "Install the App on a GitHub account to bring its repositories here." })) : null] }), host.admin ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'github')), children: "Install on a GitHub account" }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin installs the App on a GitHub account." }))] }), _jsxs(Group, { title: "Slack", detail: "Talk to Hanzo from your workspace\u2019s channels.", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Slack, { size: 16 }), title: s?.connected && s.account ? s.account : 'Slack', detail: slack.error
+                                                : 'Not connected', trailing: me?.configured ? (me.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => unlinkGithub(t), 'Your GitHub is disconnected', mine.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => connect(t, here())), children: "Connect" }))) : null }), installed.error ? (_jsx(Row, { title: "App installations", detail: installed.error.message })) : (installed.value.map((i) => (_jsx(Row, { leading: _jsx(Github, { size: 16 }), title: i.login, detail: [i.type, i.grant === 'all' ? 'every repository' : i.grant === 'selected' ? 'selected repositories' : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: i.connected ? '$ink' : '$soft', children: i.connected ? 'Installed' : 'Removed on GitHub' }) }, i.login)))), !installed.error && !installed.loading && installed.value.length === 0 ? (_jsx(Row, { title: "No GitHub accounts installed", detail: "Install the App on a GitHub account to bring its repositories here." })) : null] }), host.admin ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'github', here())), children: "Install on a GitHub account" }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin installs the App on a GitHub account." }))] }), _jsxs(Group, { title: "Slack", detail: "Talk to Hanzo from your workspace\u2019s channels.", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Slack, { size: 16 }), title: s?.connected && s.account ? s.account : 'Slack', detail: slack.error
                                     ? slack.error.message
                                     : !s
                                         ? 'Reading…'
@@ -75,7 +83,7 @@ export function Integrations() {
                                             ? `Connected${s.since ? ` since ${day(s.since)}` : ''}`
                                             : s.available
                                                 ? 'Not connected'
-                                                : s.note || 'This deployment cannot connect Slack yet.', trailing: host.admin && s && (s.connected || s.available) ? (s.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(t, 'slack'), 'Slack is disconnected', slack.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'slack')), children: "Connect" }))) : null }), joined && rooms.error ? _jsx(Row, { title: "Channels", detail: rooms.error.message }) : null, joined
+                                                : s.note || 'This deployment cannot connect Slack yet.', trailing: host.admin && s && (s.connected || s.available) ? (s.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(t, 'slack'), 'Slack is disconnected', slack.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'slack', here())), children: "Connect" }))) : null }), joined && rooms.error ? _jsx(Row, { title: "Channels", detail: rooms.error.message }) : null, joined
                                 ? rooms.value.channels.map((c) => (_jsx(Row, { leading: c.private ? _jsx(Lock, { size: 14 }) : _jsx(Hash, { size: 14 }), title: c.name || c.id, trailing: _jsx(SizableText, { size: "$1", color: c.member ? '$ink' : '$soft', children: c.member ? 'Joined' : 'Not joined' }) }, c.id)))
                                 : null] }), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin connects the Slack workspace." })) : null] }), _jsx(Note, { children: note })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.34",
+  "version": "0.2.35",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",