@skillcdn/console 0.1.24 → 0.3.1

package/src/components/pack-connect.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useState } from "react";
+import type { PackConnectEnding, RestPackConnect, RestPackConnectStarted } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Button, Time } from "./ui.js";
+
+// A private pack connected with a code a person approves (ADR-0036): an owner, or for the
+// workspace's token an administrator, asks, the console asks the deployment and shows what it
+// answered, the code and the page, and the person approves there; the page asks the console
+// again at the interval the deployment named until the token is kept or the request ended.
+// Takes its data through the callbacks and keeps nothing itself.
+
+/**
+ * How a connection stands, as the component needs it: what the API answers for a project's
+ * token and for the workspace's both say this much, with what was connected beside it.
+ */
+export type PackConnectState =
+  | Extract<RestPackConnect, { status: "none" | "pending" | "ended" }>
+  | { readonly status: "connected" };
+
+export interface PackConnectProps {
+  /** Asks the deployment to connect; answers what the person is shown. */
+  readonly onStart: () => Promise<RestPackConnectStarted>;
+  /** How the connection stands; the token is kept when the person approved. */
+  readonly poll: (signal?: AbortSignal) => Promise<PackConnectState>;
+  /** Gives the connection up. */
+  readonly onCancel: () => Promise<void>;
+  /** Called once the token is kept. */
+  readonly onConnected?: (() => void) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+type Shown =
+  | { readonly kind: "idle" }
+  | {
+      readonly kind: "waiting";
+      readonly code: string;
+      readonly url: string;
+      readonly expiresAt: string;
+      readonly intervalSeconds: number;
+    }
+  | { readonly kind: "ended"; readonly reason: PackConnectEnding }
+  | { readonly kind: "connected" };
+
+/** The least often the console is asked again, whatever the deployment says. */
+const MIN_INTERVAL_SECONDS = 2;
+
+export function PackConnect(props: PackConnectProps) {
+  const words = useWords();
+  const pack = words.projects.packToken;
+  const { poll, onConnected } = props;
+  const [shown, setShown] = useState<Shown>({ kind: "idle" });
+  const [problem, setProblem] = useState<string | undefined>(undefined);
+
+  // A request begun before the page was opened is picked up where it stands.
+  useEffect(() => {
+    const controller = new AbortController();
+    poll(controller.signal)
+      .then((state) => {
+        if (!controller.signal.aborted && state.status === "pending") {
+          setShown({ kind: "waiting", ...state });
+        }
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [poll]);
+
+  // While waiting, the console is asked again at the interval the deployment named; a new
+  // answer, pending still, is a new state, which schedules the next asking.
+  useEffect(() => {
+    if (shown.kind !== "waiting") {
+      return;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      poll(controller.signal)
+        .then((state) => {
+          if (controller.signal.aborted) {
+            return;
+          }
+          setProblem(undefined);
+          if (state.status === "pending") {
+            setShown({ kind: "waiting", ...state });
+          } else if (state.status === "connected") {
+            setShown({ kind: "connected" });
+            onConnected?.();
+          } else if (state.status === "ended") {
+            setShown({ kind: "ended", reason: state.reason });
+          } else {
+            setShown({ kind: "idle" });
+          }
+        })
+        .catch((failure: unknown) => {
+          if (controller.signal.aborted) {
+            return;
+          }
+          // The console could not be asked this time; it is asked again.
+          setProblem(failure instanceof Error ? failure.message : String(failure));
+          setShown((current) => (current.kind === "waiting" ? { ...current } : current));
+        });
+    }, Math.max(shown.intervalSeconds, MIN_INTERVAL_SECONDS) * 1000);
+    return () => {
+      controller.abort();
+      clearTimeout(timer);
+    };
+  }, [shown, poll, onConnected]);
+
+  const start = () => {
+    setProblem(undefined);
+    props
+      .onStart()
+      .then((started) => setShown({ kind: "waiting", ...started }))
+      .catch((failure: unknown) => {
+        setProblem(failure instanceof Error ? failure.message : String(failure));
+      });
+  };
+  const cancel = () => {
+    props
+      .onCancel()
+      .then(() => setShown({ kind: "idle" }))
+      .catch((failure: unknown) => {
+        setProblem(failure instanceof Error ? failure.message : String(failure));
+      });
+  };
+
+  return (
+    <div className="sc-pack-connect" aria-live="polite">
+      {shown.kind === "waiting" ? (
+        <>
+          <p className="sc-pack-connect-code">
+            <span className="sc-field-label">{pack.connectCode}</span>
+            <code className="sc-pack-code">{shown.code}</code>
+          </p>
+          <div className="sc-form-actions">
+            <a
+              className="sc-button sc-button-primary"
+              href={shown.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {pack.connectOpen}
+            </a>
+            <Button variant="ghost" disabled={props.busy === true} onClick={cancel}>
+              {pack.connectCancel}
+            </Button>
+          </div>
+          <p className="sc-pack-connect-waiting">
+            <span className="sc-spinner" aria-hidden="true">
+              <span className="sc-spinner-ring" />
+            </span>
+            <span>
+              {pack.connectWaiting} {pack.connectExpires} <Time iso={shown.expiresAt} />
+            </span>
+          </p>
+        </>
+      ) : shown.kind === "connected" ? (
+        <p>{pack.connectDone}</p>
+      ) : (
+        <>
+          <p className="sc-field-hint">{pack.connectHint}</p>
+          {shown.kind === "ended" && (
+            <p className="sc-form-error" role="alert">
+              {pack.connectEnded[shown.reason]}
+            </p>
+          )}
+          <div className="sc-form-actions">
+            <Button variant="primary" disabled={props.busy === true} onClick={start}>
+              {pack.connect}
+            </Button>
+          </div>
+        </>
+      )}
+      {problem !== undefined && (
+        <p className="sc-form-error" role="alert">
+          {problem}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/pack-token.tsx

@@ -0,0 +1,74 @@
+import type { RestPackConnectStarted } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { PackConnect, type PackConnectState } from "./pack-connect.js";
+import { PackTokenForm } from "./projects.js";
+import { Button } from "./ui.js";
+
+// The SkillCDN token a private pack is read with (ADR-0028, ADR-0036), as a project's Settings
+// page and the workspace's offer it: what the token is for, then the two ways to one side by
+// side, a code approved at SkillCDN and a token made there by hand. Takes its data through the
+// callbacks and keeps nothing itself; whose token it is, the page says in the title and the intro.
+
+export interface PackTokenWaysProps {
+  /** What the section is called, and what assistive technology reads it as. */
+  readonly title: string;
+  /** What the token is for, in the words of the page it is on. */
+  readonly intro: string;
+  /** Whether a token is held now, and since when. */
+  readonly set: boolean;
+  readonly setAt?: string | undefined;
+  readonly busy?: boolean | undefined;
+  /** Asks the deployment to connect; answers what the person is shown. */
+  readonly onStart: () => Promise<RestPackConnectStarted>;
+  /** How the connection stands; the token is kept when the person approved. */
+  readonly poll: (signal?: AbortSignal) => Promise<PackConnectState>;
+  /** Gives the connection up. */
+  readonly onCancelConnect: () => Promise<void>;
+  /** Called once the token is kept. */
+  readonly onConnected?: (() => void) | undefined;
+  /** Called with a token made by hand, as typed or pasted. */
+  readonly onSubmit: (token: string) => void;
+  readonly onRemove?: (() => void) | undefined;
+  /** Leaves the page without changing anything. */
+  readonly onBack?: (() => void) | undefined;
+}
+
+export function PackTokenWays(props: PackTokenWaysProps) {
+  const words = useWords();
+  const pack = words.projects.packToken;
+  return (
+    <section className="sc-panel sc-panel-form" aria-label={props.title}>
+      <h2 className="sc-section-title">{props.title}</h2>
+      <p className="sc-pack-intro">{props.intro}</p>
+      <div className="sc-pack-ways">
+        <section className="sc-pack-way" aria-label={pack.connectTitle}>
+          <h3 className="sc-pack-way-title">{pack.connectTitle}</h3>
+          <PackConnect
+            onStart={props.onStart}
+            poll={props.poll}
+            onCancel={props.onCancelConnect}
+            onConnected={props.onConnected}
+            busy={props.busy}
+          />
+        </section>
+        <section className="sc-pack-way" aria-label={pack.pasteTitle}>
+          <h3 className="sc-pack-way-title">{pack.pasteTitle}</h3>
+          <PackTokenForm
+            set={props.set}
+            setAt={props.setAt}
+            busy={props.busy}
+            onSubmit={props.onSubmit}
+            onRemove={props.onRemove}
+          />
+        </section>
+      </div>
+      {props.onBack !== undefined && (
+        <div className="sc-form-actions sc-pack-actions">
+          <Button variant="ghost" onClick={props.onBack}>
+            {words.common.cancel}
+          </Button>
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/paged.tsx

@@ -2,13 +2,17 @@ import { useState } from "react";
 import { useWords } from "../i18n/index.js";
 import { Button } from "./ui.js";
 
-// A long list shown a page at a time, from what the page already holds: the record of the
-// decisions, the feed, the tasks with no day. The next page is a click away and nothing is
-// asked of the server; the API's own pages (`limit`, `offset`) are for the command and scripts.
+// A long list shown a page at a time, from what the page already holds: the feed and the tasks
+// with no day grow by a page on a click; the record of the decisions turns its pages, each with
+// an address. Nothing is asked of the server either way; the API's own pages (`limit`, `offset`)
+// are for the command and scripts.
 
 /** How many items a list shows before it asks to be told to show more. */
 export const PAGE_SIZE = 50;
 
+/** How many rows the record of the decisions shows on a page: each says what was asked and what was answered. */
+export const RECORD_PAGE_SIZE = 20;
+
 /** The first `shown` items of a list, and the way to show the next page of it. */
 export function usePaged<T>(
   items: readonly T[],
@@ -37,3 +41,68 @@ export function ShowMore(props: { readonly rest: number; readonly onMore: () =>
     </div>
   );
 }
+
+/**
+ * The page `page` of a list, counted from one and `pageSize` long, and which it is of how many:
+ * a page past the end, or no page at all, is the last or the first, and an empty list has one.
+ */
+export function pageOf<T>(
+  items: readonly T[],
+  page: number | undefined,
+  pageSize = RECORD_PAGE_SIZE,
+): { readonly shown: readonly T[]; readonly page: number; readonly pages: number } {
+  const pages = Math.max(1, Math.ceil(items.length / pageSize));
+  const current =
+    page === undefined || !Number.isInteger(page) ? 1 : Math.min(Math.max(page, 1), pages);
+  return {
+    shown: items.slice((current - 1) * pageSize, current * pageSize),
+    page: current,
+    pages,
+  };
+}
+
+/**
+ * The way between the pages of a list: the page before, which items of how many are shown, the
+ * page after; nothing for a list of one page. Given `pageHref`, each page has an address and the
+ * steps lead there; else `onPage` turns the page in place.
+ */
+export function Pager(props: {
+  readonly page: number;
+  readonly pages: number;
+  readonly total: number;
+  readonly pageSize: number;
+  readonly pageHref?: ((page: number) => string) | undefined;
+  readonly onPage?: ((page: number) => void) | undefined;
+}) {
+  const words = useWords().common.pager;
+  if (props.pages <= 1) {
+    return null;
+  }
+  const from = (props.page - 1) * props.pageSize + 1;
+  const to = Math.min(props.page * props.pageSize, props.total);
+  const step = (label: string, target: number, there: boolean) => {
+    if (!there) {
+      return (
+        <span className="sc-button sc-button-secondary sc-button-sm" aria-disabled="true">
+          {label}
+        </span>
+      );
+    }
+    return props.pageHref === undefined ? (
+      <Button variant="secondary" size="sm" onClick={() => props.onPage?.(target)}>
+        {label}
+      </Button>
+    ) : (
+      <a className="sc-button sc-button-secondary sc-button-sm" href={props.pageHref(target)}>
+        {label}
+      </a>
+    );
+  };
+  return (
+    <nav className="sc-pager" aria-label={words.label}>
+      {step(words.previous, props.page - 1, props.page > 1)}
+      <span className="sc-pager-range">{words.range(from, to, props.total)}</span>
+      {step(words.next, props.page + 1, props.page < props.pages)}
+    </nav>
+  );
+}

package/src/components/projects.tsx

@@ -305,7 +305,7 @@ export function ProjectForm(props: ProjectFormProps) {
               onChange={(event) => setSkillsAddress(event.target.value)}
             />
           </span>
-          <span className="sc-muted">
+          <span className="sc-field-hint">
             {form.skillsAddressHint(props.organizationAddress ?? null)}
           </span>
         </label>
@@ -383,8 +383,19 @@ export interface MemberListProps {
   readonly people: readonly RestPerson[];
   /** Whoever is looking, so that their own row says so. */
   readonly me?: RestPerson | undefined;
+  /**
+   * Whether the project is open to the workspace (ADR-0035): everyone of it is a member, the
+   * list is everyone, nobody is added or removed, and an owner is made from a row.
+   */
+  readonly open?: boolean | undefined;
   /** Called with a person to list, and what they are to be. Left out, the list is read here, not changed. */
   readonly onAdd?: ((input: RestMemberInput) => void) | undefined;
+  /**
+   * Finds a person of the workspace by their exact login, or nobody: given to an owner whose
+   * People page shows only whom they share a project with, so that they list someone it does
+   * not show (ADR-0035). With `onAdd` only.
+   */
+  readonly lookup?: ((login: string) => Promise<RestPerson | undefined>) | undefined;
   readonly onChangeRole?: ((member: RestMember, role: ProjectRole) => void) | undefined;
   readonly onRemove?: ((member: RestMember) => void) | undefined;
   /** Where a member's work is seen; given to the project's owners. */
@@ -400,6 +411,30 @@ export function MemberList(props: MemberListProps) {
   const candidates = props.people.filter((person) => !listed.has(person.id));
   const [personId, setPersonId] = useState("");
   const [role, setRole] = useState<ProjectRole>("member");
+  const [login, setLogin] = useState("");
+  const [notFound, setNotFound] = useState<string | undefined>(undefined);
+  const [looking, setLooking] = useState(false);
+  const addByLogin = async () => {
+    const wanted = login.trim();
+    if (wanted === "" || props.lookup === undefined) {
+      return;
+    }
+    setLooking(true);
+    try {
+      const found = await props.lookup(wanted);
+      if (found === undefined) {
+        setNotFound(wanted);
+        return;
+      }
+      setNotFound(undefined);
+      setLogin("");
+      props.onAdd?.({ personId: found.id, role });
+    } catch {
+      setNotFound(wanted);
+    } finally {
+      setLooking(false);
+    }
+  };
   return (
     <div className="sc-members">
       {props.members.length === 0 ? (
@@ -419,8 +454,14 @@ export function MemberList(props: MemberListProps) {
                   {members.since} <Time iso={member.addedAt} />
                 </span>
               </span>
-              {props.onChangeRole === undefined ? (
-                <ProjectRoleBadge role={member.role} />
+              {props.onChangeRole === undefined || member.person.role === "admin" ? (
+                // An administrator owns every project by office: nothing here changes that.
+                <span className="sc-member-role">
+                  <ProjectRoleBadge role={member.role} />
+                  {member.person.role === "admin" && (
+                    <span className="sc-muted"> {words.vocabulary.role.admin}</span>
+                  )}
+                </span>
               ) : (
                 <label className="sc-field sc-field-inline">
                   <span className="sc-visually-hidden">
@@ -447,7 +488,7 @@ export function MemberList(props: MemberListProps) {
                   {words.people.work}
                 </a>
               )}
-              {props.onRemove !== undefined && (
+              {props.onRemove !== undefined && props.open !== true && (
                 <Button
                   variant="danger"
                   size="sm"
@@ -461,7 +502,7 @@ export function MemberList(props: MemberListProps) {
           ))}
         </ul>
       )}
-      {props.onAdd !== undefined && candidates.length > 0 && (
+      {props.onAdd !== undefined && props.open !== true && candidates.length > 0 && (
         <form
           className="sc-form sc-member-form"
           aria-label={members.addAria}
@@ -515,6 +556,57 @@ export function MemberList(props: MemberListProps) {
           </div>
         </form>
       )}
+      {props.onAdd !== undefined && props.lookup !== undefined && props.open !== true && (
+        <form
+          className="sc-form sc-member-form sc-member-lookup"
+          aria-label={members.addByLoginAria}
+          onSubmit={(event) => {
+            event.preventDefault();
+            void addByLogin();
+          }}
+        >
+          <div className="sc-field-row">
+            <label className="sc-field">
+              <span className="sc-field-label">{members.login}</span>
+              <input
+                className="sc-input"
+                value={login}
+                autoComplete="off"
+                onChange={(event) => {
+                  setLogin(event.target.value);
+                  setNotFound(undefined);
+                }}
+              />
+            </label>
+            <label className="sc-field">
+              <span className="sc-field-label">{members.as}</span>
+              <select
+                className="sc-input"
+                value={role}
+                onChange={(event) => setRole(event.target.value as ProjectRole)}
+              >
+                {PROJECT_ROLES.map((candidate) => (
+                  <option key={candidate} value={candidate}>
+                    {words.vocabulary.projectRole[candidate]}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <div className="sc-form-actions">
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={props.busy === true || looking || login.trim() === ""}
+              >
+                {members.addByLogin}
+              </Button>
+            </div>
+          </div>
+          <p className="sc-field-hint">
+            {notFound === undefined ? members.lookupHint : members.nobodyCalled(notFound)}
+          </p>
+        </form>
+      )}
     </div>
   );
 }
@@ -522,6 +614,8 @@ export function MemberList(props: MemberListProps) {
 export interface PackTokenFormProps {
   /** Whether the project holds a pack token now, so that it can be taken away. */
   readonly set: boolean;
+  /** When the token held now was set, so that an owner knows what they replace. */
+  readonly setAt?: string | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   /** Called with the token as typed or pasted; it travels to the console once and is shown nowhere after. */
@@ -539,8 +633,8 @@ export function PackTokenForm(props: PackTokenFormProps) {
   const ready = typed.length >= 8 && !/\s/.test(typed);
   return (
     <form
-      className="sc-form"
-      aria-label={pack.aria}
+      className="sc-form sc-pack-token-form"
+      aria-label={pack.pasteAria}
       onSubmit={(event: FormEvent) => {
         event.preventDefault();
         if (ready && props.busy !== true) {
@@ -550,6 +644,11 @@ export function PackTokenForm(props: PackTokenFormProps) {
       }}
     >
       <p className="sc-field-hint">{pack.hint}</p>
+      {props.set && props.setAt !== undefined && (
+        <p className="sc-muted">
+          {pack.setSince} <Time iso={props.setAt} />
+        </p>
+      )}
       <label className="sc-field">
         <span className="sc-field-label">{pack.label}</span>
         <input
@@ -569,8 +668,8 @@ export function PackTokenForm(props: PackTokenFormProps) {
         </p>
       )}
       <div className="sc-form-actions">
-        <Button type="submit" variant="primary" disabled={!ready || props.busy === true}>
-          {pack.set}
+        <Button type="submit" variant="secondary" disabled={!ready || props.busy === true}>
+          {props.set ? pack.replace : pack.set}
         </Button>
         {props.set && props.onRemove !== undefined && (
           <Button variant="danger" disabled={props.busy === true} onClick={props.onRemove}>

package/src/components/skills.tsx

@@ -2,9 +2,10 @@ import type { RestSkills } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Callout, EmptyState, Spinner } from "./ui.js";
 
-// The organization's skills, as SkillCDN serves them at the console's address: where a person
-// reads each, and what an agent loads it by. Takes its data as props and nothing from the
-// network; what the console answered is shown as text, never as HTML.
+// A project's skills, as the pack lists them: at a SkillCDN deployment, where a person reads
+// each and what an agent loads it by; or from a directory on the console's machine (ADR-0031),
+// with nothing to link to. Takes its data as props and nothing from the network; what the
+// console answered is shown as text, never as HTML.
 
 export interface SkillListProps {
   /** What the console answered, or nothing while it has not yet. */
@@ -21,35 +22,48 @@ export function SkillList(props: SkillListProps) {
   if (skills.status === "unavailable" && skills.address === null) {
     return <Callout tone="warning">{words.status.unavailable}</Callout>;
   }
-  if (skills.status === "none" || skills.address === null || skills.page === null) {
+  if (skills.status === "none" || skills.address === null) {
     return <EmptyState title={words.noAddress.title} body={words.noAddress.body} />;
   }
-  const where = (
-    <>
-      <p className="sc-lead">
-        {words.servedBy}{" "}
-        <a href={skills.source} target="_blank" rel="noopener noreferrer">
-          SkillCDN
-        </a>{" "}
-        {words.at}{" "}
-        <a href={skills.page} target="_blank" rel="noopener noreferrer">
-          <code>{skills.address}</code>
-        </a>
-      </p>
-      <p className="sc-muted">
-        {words.connect}{" "}
-        <a href={skills.page} target="_blank" rel="noopener noreferrer">
-          {words.connectLink}
-        </a>
-      </p>
-    </>
-  );
+  const deployment =
+    skills.source !== null && skills.page !== null
+      ? { source: skills.source, page: skills.page }
+      : undefined;
+  const local = deployment === undefined;
+  const where =
+    deployment === undefined ? (
+      <>
+        <p className="sc-lead">
+          {words.fromMachine} <code>{skills.address}</code>
+        </p>
+        <p className="sc-muted">{words.connectLocal}</p>
+      </>
+    ) : (
+      <>
+        <p className="sc-lead">
+          {words.servedBy}{" "}
+          <a href={deployment.source} target="_blank" rel="noopener noreferrer">
+            SkillCDN
+          </a>{" "}
+          {words.at}{" "}
+          <a href={deployment.page} target="_blank" rel="noopener noreferrer">
+            <code>{skills.address}</code>
+          </a>
+        </p>
+        <p className="sc-muted">
+          {words.connect}{" "}
+          <a href={deployment.page} target="_blank" rel="noopener noreferrer">
+            {words.connectLink}
+          </a>
+        </p>
+      </>
+    );
   if (skills.status !== "ready") {
     return (
       <>
         {where}
         <Callout tone={skills.status === "indexing" ? "info" : "warning"}>
-          {words.status[skills.status]}
+          {(local ? words.localStatus[skills.status] : undefined) ?? words.status[skills.status]}
         </Callout>
       </>
     );
@@ -69,14 +83,18 @@ export function SkillList(props: SkillListProps) {
         {skills.items.map((skill) => (
           <li key={skill.path} className="sc-skill">
             <p className="sc-skill-head">
-              <a
-                className="sc-skill-name"
-                href={skill.page}
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-              >
-                {skill.name}
-              </a>
+              {skill.page === null ? (
+                <span className="sc-skill-name">{skill.name}</span>
+              ) : (
+                <a
+                  className="sc-skill-name"
+                  href={skill.page}
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                >
+                  {skill.name}
+                </a>
+              )}
               <span className="sc-muted">{skill.directory === "" ? "/" : skill.directory}</span>
             </p>
             <p className="sc-skill-description">{skill.description}</p>