@skillcdn/console 0.1.14 → 0.1.15

package/src/components/people.tsx

@@ -1,17 +1,46 @@
-import type { PersonRole, RestPerson } from "../api.js";
+import { type FormEvent, useState } from "react";
+import {
+  hostOfLogin,
+  isLoginAt,
+  type PersonRole,
+  type PersonStatus,
+  type ProviderKey,
+  type RestListing,
+  type RestListingInput,
+  type RestOrganization,
+  type RestPerson,
+  type RestProvider,
+} from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { MAX_LOGIN_LENGTH } from "../limits.js";
 import { PERSON_ROLES } from "../vocabulary.js";
-import { PersonChip, personName, RoleBadge } from "./ui.js";
+import { Badge, Button, PersonChip, personName, RoleBadge, Time } from "./ui.js";
 
-// The people of the board, with what each may do. An administrator changes roles here; a
-// member reads. Takes its data as props and nothing from the network.
+// The people of the board, with what each may do and whether they are in (ADR-0022): those in,
+// the logins let in that nobody has signed in with yet, and those deactivated. An administrator
+// changes roles here, takes people out and back in, and takes a listing away; a member reads.
+// Takes its data as props and nothing from the network.
 
 export interface PeopleListProps {
   readonly people: readonly RestPerson[];
+  /** The logins let in that nobody has signed in with yet. */
+  readonly listed?: readonly RestListing[] | undefined;
+  /** The organization at the git host that says who is in, where the deployment names one. */
+  readonly organization?: RestOrganization | null | undefined;
   /** Whoever is looking, so that their own row says so. */
   readonly me?: RestPerson | undefined;
   /** Called with the role an administrator chose. Left out, roles are read here, not changed. */
   readonly onChangeRole?: ((person: RestPerson, role: PersonRole) => void) | undefined;
+  /**
+   * Called when an administrator takes a person out, or back in. Left out, standings are read
+   * here, not changed. Never offered for a person the organization let in, who comes and goes
+   * with it.
+   */
+  readonly onChangeStatus?: ((person: RestPerson, status: PersonStatus) => void) | undefined;
+  /** Called when an administrator takes a listing away. Left out, listings are read here. */
+  readonly onUnlist?: ((listing: RestListing) => void) | undefined;
+  /** Where a person's work is seen; given to an administrator, or an owner of a project. */
+  readonly workHref?: ((person: RestPerson) => string) | undefined;
   /** Where a person's agents are seen; given to an administrator. */
   readonly agentsHref?: ((person: RestPerson) => string) | undefined;
   readonly busy?: boolean | undefined;
@@ -19,41 +48,221 @@ export interface PeopleListProps {
 
 export function PeopleList(props: PeopleListProps) {
   const words = useWords();
+  const people = words.people;
+  const active = props.people.filter((person) => person.status === "active");
+  const deactivated = props.people.filter((person) => person.status === "deactivated");
+  const listed = props.listed ?? [];
+  const mayChange = (person: RestPerson): boolean =>
+    props.onChangeStatus !== undefined &&
+    person.source !== "organization" &&
+    props.me?.id !== person.id;
+  const organization = props.organization ?? undefined;
   return (
-    <ul className="sc-people" aria-label={words.people.list}>
-      {props.people.map((person) => (
-        <li key={person.id} className="sc-person-row">
-          <PersonChip person={person} size="md" />
-          <span className="sc-person-name sc-muted">
-            {person.name === null ? "" : person.login}
-            {props.me?.id === person.id && <span> {words.common.you}</span>}
-          </span>
-          {props.onChangeRole === undefined ? (
-            <RoleBadge role={person.role} />
+    <div className="sc-people-page">
+      {organization !== undefined && (
+        <p className="sc-people-organization sc-muted">
+          {people.organization(organization.name)}{" "}
+          {organization.syncedAt === null ? (
+            people.organizationNotRead
           ) : (
-            <label className="sc-field sc-field-inline">
-              <span className="sc-visually-hidden">{words.people.roleOf(personName(person))}</span>
-              <select
-                className="sc-input"
-                value={person.role}
+            <>
+              {people.organizationRead} <Time iso={organization.syncedAt} />
+            </>
+          )}
+        </p>
+      )}
+      <ul className="sc-people" aria-label={people.list}>
+        {active.map((person) => (
+          <li key={person.id} className="sc-person-row">
+            <PersonChip person={person} size="md" />
+            <span className="sc-person-name sc-muted">
+              {person.name === null ? "" : person.login}
+              {props.me?.id === person.id && <span> {words.common.you}</span>}
+              <span className="sc-person-note"> {people.source[person.source]}</span>
+            </span>
+            {props.onChangeRole === undefined ? (
+              <RoleBadge role={person.role} />
+            ) : (
+              <label className="sc-field sc-field-inline">
+                <span className="sc-visually-hidden">{people.roleOf(personName(person))}</span>
+                <select
+                  className="sc-input"
+                  value={person.role}
+                  disabled={props.busy === true}
+                  onChange={(event) =>
+                    props.onChangeRole?.(person, event.target.value as PersonRole)
+                  }
+                >
+                  {PERSON_ROLES.map((role) => (
+                    <option key={role} value={role}>
+                      {words.vocabulary.role[role]}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            )}
+            {props.workHref !== undefined && (
+              <a className="sc-button sc-button-ghost sc-button-sm" href={props.workHref(person)}>
+                {people.work}
+              </a>
+            )}
+            {props.agentsHref !== undefined && (
+              <a className="sc-button sc-button-ghost sc-button-sm" href={props.agentsHref(person)}>
+                {people.agents}
+              </a>
+            )}
+            {mayChange(person) && (
+              <Button
+                variant="ghost"
+                size="sm"
                 disabled={props.busy === true}
-                onChange={(event) => props.onChangeRole?.(person, event.target.value as PersonRole)}
+                onClick={() => props.onChangeStatus?.(person, "deactivated")}
               >
-                {PERSON_ROLES.map((role) => (
-                  <option key={role} value={role}>
-                    {words.vocabulary.role[role]}
-                  </option>
-                ))}
-              </select>
-            </label>
-          )}
-          {props.agentsHref !== undefined && (
-            <a className="sc-button sc-button-ghost sc-button-sm" href={props.agentsHref(person)}>
-              {words.people.agents}
-            </a>
+                {people.deactivate}
+              </Button>
+            )}
+          </li>
+        ))}
+      </ul>
+      {listed.length > 0 && (
+        <section className="sc-people-section" aria-label={people.notSignedIn}>
+          <h2 className="sc-section-title">{people.notSignedIn}</h2>
+          <ul className="sc-people">
+            {listed.map((listing) => (
+              <li key={listing.id} className="sc-person-row">
+                <span className="sc-person-login">{listing.login}</span>
+                <span className="sc-person-name sc-muted">
+                  {people.at[listing.host]}
+                  <span className="sc-person-note">
+                    {" "}
+                    <Time iso={listing.createdAt} />
+                  </span>
+                </span>
+                {props.onUnlist !== undefined && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    disabled={props.busy === true}
+                    onClick={() => props.onUnlist?.(listing)}
+                  >
+                    {words.common.remove}
+                  </Button>
+                )}
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+      {deactivated.length > 0 && (
+        <section className="sc-people-section" aria-label={people.deactivated}>
+          <h2 className="sc-section-title">{people.deactivated}</h2>
+          <ul className="sc-people">
+            {deactivated.map((person) => (
+              <li key={person.id} className="sc-person-row sc-person-row-out">
+                <PersonChip person={person} size="md" />
+                <span className="sc-person-name sc-muted">
+                  {person.name === null ? "" : person.login}
+                  <span className="sc-person-note">
+                    {" "}
+                    {person.source === "organization"
+                      ? people.leftOrganization
+                      : people.source[person.source]}
+                    {person.deactivatedAt !== null && (
+                      <>
+                        {" "}
+                        <Time iso={person.deactivatedAt} />
+                      </>
+                    )}
+                  </span>
+                </span>
+                <Badge tone="neutral">{words.vocabulary.status.deactivated}</Badge>
+                {mayChange(person) && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    disabled={props.busy === true}
+                    onClick={() => props.onChangeStatus?.(person, "active")}
+                  >
+                    {people.reactivate}
+                  </Button>
+                )}
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+}
+
+export interface ListingFormProps {
+  /** The providers people sign in through here: what a listing may name. */
+  readonly providers: readonly RestProvider[];
+  readonly busy?: boolean | undefined;
+  readonly onSubmit: (input: RestListingInput) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+/** Where an administrator lets someone in by login: whoever signs in with that account is in. */
+export function ListingForm(props: ListingFormProps) {
+  const words = useWords();
+  const form = words.people.form;
+  const [login, setLogin] = useState("");
+  const [chosen, setChosen] = useState<ProviderKey | "">("");
+  const only = props.providers.length === 1 ? props.providers[0]?.key : undefined;
+  /** The provider named, else the one the login's shape says, else the only one. */
+  const host: ProviderKey | undefined =
+    chosen !== "" ? chosen : only !== undefined ? only : hostOfLogin(login.trim());
+  const offered = props.providers.some((provider) => provider.key === host);
+  const valid = host !== undefined && offered && isLoginAt(host, login.trim());
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (valid && host !== undefined) {
+      props.onSubmit({ host, login: login.trim() });
+    }
+  };
+  return (
+    <form className="sc-form sc-listing-form" aria-label={words.people.letInAria} onSubmit={submit}>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.login}</span>
+          <input
+            className="sc-input"
+            value={login}
+            maxLength={MAX_LOGIN_LENGTH}
+            autoComplete="off"
+            onChange={(event) => setLogin(event.target.value)}
+          />
+        </label>
+        {props.providers.length > 1 && (
+          <label className="sc-field">
+            <span className="sc-field-label">{form.provider}</span>
+            <select
+              className="sc-input"
+              value={chosen}
+              onChange={(event) => setChosen(event.target.value as ProviderKey | "")}
+            >
+              <option value="">{form.byShape}</option>
+              {props.providers.map((provider) => (
+                <option key={provider.key} value={provider.key}>
+                  {provider.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+        <div className="sc-form-actions">
+          <Button type="submit" variant="primary" disabled={props.busy === true || !valid}>
+            {form.submit}
+          </Button>
+          {props.onCancel !== undefined && (
+            <Button type="button" variant="ghost" onClick={props.onCancel}>
+              {words.common.cancel}
+            </Button>
           )}
-        </li>
-      ))}
-    </ul>
+        </div>
+      </div>
+      <p className="sc-field-hint">{form.hint}</p>
+    </form>
   );
 }

package/src/components/projects.tsx

@@ -119,7 +119,11 @@ export function ProjectList(props: ProjectListProps) {
             </a>
             <code className="sc-project-key">{project.key}</code>
             <ProjectRoleBadge role={project.role} />
-            {project.visibility === "private" && <Badge tone="neutral">{words.private}</Badge>}
+            {project.visibility === "private" ? (
+              <Badge tone="neutral">{words.private}</Badge>
+            ) : (
+              <Badge tone="warning">{words.public}</Badge>
+            )}
           </div>
           {project.description.length > 0 && (
             <p className="sc-project-description">{project.description}</p>
@@ -146,6 +150,10 @@ export interface ProjectFormProps {
    */
   readonly onSubmit: (input: RestProjectInput | RestProjectPatch, icon?: File | null) => void;
   readonly onCancel?: (() => void) | undefined;
+  /** The origin of the SkillCDN deployment the skills are read through, shown before the address typed. */
+  readonly skillsSource?: string | undefined;
+  /** The organization's address, which a project without one of its own reads; `null` for none. */
+  readonly organizationAddress?: string | null | undefined;
 }
 
 /** A key as a person types a name: lowercase letters, digits and hyphens, from what they typed. */
@@ -272,13 +280,21 @@ export function ProjectForm(props: ProjectFormProps) {
         </label>
         <label className="sc-field">
           <span className="sc-field-label">{form.skillsAddress}</span>
-          <input
-            className="sc-input"
-            value={skillsAddress}
-            maxLength={MAX_SKILLS_ADDRESS_LENGTH}
-            placeholder={form.skillsAddressPlaceholder}
-            onChange={(event) => setSkillsAddress(event.target.value)}
-          />
+          <span className="sc-input-group">
+            {props.skillsSource !== undefined && (
+              <span className="sc-input-prefix">{props.skillsSource}</span>
+            )}
+            <input
+              className="sc-input"
+              value={skillsAddress}
+              maxLength={MAX_SKILLS_ADDRESS_LENGTH}
+              placeholder={form.skillsAddressPlaceholder}
+              onChange={(event) => setSkillsAddress(event.target.value)}
+            />
+          </span>
+          <span className="sc-muted">
+            {form.skillsAddressHint(props.organizationAddress ?? null)}
+          </span>
         </label>
       </div>
       <div className="sc-field-row sc-mark-row">
@@ -358,6 +374,8 @@ export interface MemberListProps {
   readonly onAdd?: ((input: RestMemberInput) => void) | 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. */
+  readonly workHref?: ((member: RestMember) => string) | undefined;
   readonly busy?: boolean | undefined;
   readonly empty?: ReactNode;
 }
@@ -411,6 +429,11 @@ export function MemberList(props: MemberListProps) {
                   </select>
                 </label>
               )}
+              {props.workHref !== undefined && (
+                <a className="sc-button sc-button-ghost sc-button-sm" href={props.workHref(member)}>
+                  {words.people.work}
+                </a>
+              )}
               {props.onRemove !== undefined && (
                 <Button
                   variant="danger"

package/src/components/rules.tsx

@@ -0,0 +1,167 @@
+import { type FormEvent, useState } from "react";
+import { fillRules, isReferenceRules, MAX_RULES_LENGTH, type RestRules } from "../api.js";
+import { useLanguage, useWords } from "../i18n/index.js";
+import { Writer } from "./documents.js";
+import { Markdown } from "./markdown.js";
+import { Button, Callout, Time } from "./ui.js";
+
+// The rules of the board (ADR-0023), as the settings pages show them: what holds, where it
+// comes from (the console's own, a page written, or none), who wrote the page and when, and
+// the ways to change them for whoever may. Each takes its data as props and nothing from the
+// network; the rules are Markdown rendered to elements, never HTML, with `{language}` filled
+// with the language the pages speak, as the command fills it with the person's.
+
+export interface RulesViewProps {
+  readonly rules: RestRules;
+  /** Whose rules: the workspace's, or a project's, which add to the workspace's. */
+  readonly scope: "workspace" | "project";
+  /** Where the rules are written; left out, they are read here and not changed. */
+  readonly editHref?: string | undefined;
+  /** Called to put the written rules away; left out, they stay. */
+  readonly onArchive?: (() => void) | undefined;
+  readonly busy?: boolean | undefined;
+  /** Where a page of the project is read, by its path, for the links a project's rules make. */
+  readonly docHref?: ((path: string) => string) | undefined;
+  /** Whether the text stays folded under where it comes from, on a page where it is not the point. */
+  readonly folded?: boolean | undefined;
+}
+
+export function RulesView(props: RulesViewProps) {
+  const words = useWords();
+  const language = useLanguage().tag;
+  const { rules, scope } = props;
+  const page = rules.page;
+  if (rules.source === "none" || rules.body === null) {
+    return (
+      <div className="sc-rules">
+        <p className="sc-muted">{words.rules.none}</p>
+        {props.editHref !== undefined && (
+          <div className="sc-rules-actions">
+            <a className="sc-button sc-button-secondary" href={props.editHref}>
+              {words.rules.write}
+            </a>
+          </div>
+        )}
+      </div>
+    );
+  }
+  const text = <Markdown source={fillRules(rules.body, language)} docHref={props.docHref} />;
+  return (
+    <div className="sc-rules">
+      {rules.source === "reference" ? (
+        <Callout tone="info">{words.rules.reference}</Callout>
+      ) : (
+        page !== null && (
+          <p className="sc-rules-facts">
+            {words.docs.version(page.version)} · {words.docs.writtenBy}{" "}
+            <Writer by={page.updatedBy} agent={page.agent} /> <Time iso={page.updatedAt} />
+          </p>
+        )
+      )}
+      {props.folded === true ? (
+        <details className="sc-rules-fold">
+          <summary>{words.rules.read}</summary>
+          {text}
+        </details>
+      ) : (
+        text
+      )}
+      {(props.editHref !== undefined || props.onArchive !== undefined) && (
+        <div className="sc-rules-actions">
+          {props.editHref !== undefined && (
+            <a className="sc-button sc-button-secondary" href={props.editHref}>
+              {rules.source === "reference" ? words.rules.writeOrganizations : words.common.edit}
+            </a>
+          )}
+          {rules.source === "written" && props.onArchive !== undefined && (
+            <Button variant="ghost" onClick={props.onArchive} disabled={props.busy === true}>
+              {scope === "workspace" ? words.rules.useReference : words.common.remove}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export interface RulesFormProps {
+  /** The rules as they hold now: what the form starts from when a page is written. */
+  readonly rules: RestRules;
+  readonly scope: "workspace" | "project";
+  /** What the form starts from when a project adds none yet: the headings, and nothing an agent could mistake for a rule. */
+  readonly template: string;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  readonly onSubmit: (input: {
+    readonly body: string;
+    readonly baseVersion?: number | undefined;
+  }) => void;
+  readonly onCancel?: (() => void) | undefined;
+  /** Called to put the organization's page away, so that the console's own rules hold again; offered while one is written. */
+  readonly onReset?: (() => void) | undefined;
+}
+
+/**
+ * The form the rules are written on: prefilled with what holds (the console's own, for a
+ * workspace that wrote none), and saving nothing that would change nothing: the text as it
+ * is, or the console's own rules where they hold already. Where the organization's are
+ * written, the console's own saved as they stand put the page away, as the reset does.
+ */
+export function RulesForm(props: RulesFormProps) {
+  const words = useWords();
+  const { rules, scope } = props;
+  /** What holds now: the page written, or the console's own; nothing for a project that adds none. */
+  const current = rules.source === "none" ? undefined : (rules.body ?? undefined);
+  const [body, setBody] = useState(current ?? props.template);
+  const unchanged =
+    body.trim() === (current ?? "").trim() ||
+    (scope === "workspace" && rules.source === "reference" && isReferenceRules(body));
+  const ready = !unchanged && body.trim().length > 0;
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (!ready) {
+      return;
+    }
+    props.onSubmit({
+      body,
+      ...(rules.page === null ? {} : { baseVersion: rules.page.version }),
+    });
+  };
+
+  return (
+    <form className="sc-form" onSubmit={submit}>
+      <label className="sc-field">
+        <span className="sc-field-label">{words.rules.form.body}</span>
+        <textarea
+          className="sc-input sc-textarea sc-doc-editor"
+          value={body}
+          maxLength={MAX_RULES_LENGTH}
+          rows={20}
+          onChange={(event) => setBody(event.target.value)}
+        />
+        <span className="sc-muted">{words.rules.form.hint(MAX_RULES_LENGTH)}</span>
+      </label>
+      {props.error !== undefined && (
+        <p className="sc-form-error" role="alert">
+          {props.error}
+        </p>
+      )}
+      <div className="sc-form-actions">
+        <Button type="submit" variant="primary" disabled={props.busy === true || !ready}>
+          {words.rules.form.save}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button variant="ghost" onClick={props.onCancel}>
+            {words.common.cancel}
+          </Button>
+        )}
+        {props.onReset !== undefined && rules.source === "written" && (
+          <Button variant="ghost" onClick={props.onReset} disabled={props.busy === true}>
+            {words.rules.useReference}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}

package/src/components/runs.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { RestArtifact, RestRun, RunStatus } from "../api.js";
+import { agentLabel, type RestArtifact, type RestRun, type RunStatus } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
 import { Badge, Button, formatBytes, PersonChip, personName, Time } from "./ui.js";
@@ -51,7 +51,9 @@ export function RunCard(props: RunCardProps) {
   return (
     <article className="sc-run" aria-label={words.label(run.agent, personName(run.person))}>
       <header className="sc-run-header">
-        <span className="sc-run-agent">{run.agent}</span>
+        <span className="sc-run-agent" title={run.agent}>
+          {agentLabel(run.agent)}
+        </span>
         <RunStatusBadge status={run.status} />
         <span className="sc-run-meta">
           {words.for} <PersonChip person={run.person} /> {words.since} <Time iso={run.startedAt} />

package/src/components/skills.tsx

@@ -17,20 +17,32 @@ export function SkillList(props: SkillListProps) {
   if (skills === undefined) {
     return <Spinner label={words.loading} />;
   }
+  // The console could not answer for the deployment at all: said as such, not as no address.
+  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) {
     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-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>
+    </>
   );
   if (skills.status !== "ready") {
     return (

package/src/components/tokens.tsx

@@ -6,7 +6,7 @@ import {
   type RestTokenInput,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button, Callout, Time } from "./ui.js";
+import { Button, Callout, CopyButton, Time } from "./ui.js";
 
 // The tokens a person holds for their agents, scripts and consoles of their own, shown as the
 // agents that hold them: the list, the way to make one by hand, and the one just made, whose
@@ -180,16 +180,6 @@ export interface NewTokenProps {
 export function NewToken(props: NewTokenProps) {
   const words = useWords();
   const fresh = words.agents.fresh;
-  const [copied, setCopied] = useState(false);
-  const copy = () => {
-    if (typeof navigator === "undefined" || navigator.clipboard === undefined) {
-      return;
-    }
-    void navigator.clipboard.writeText(props.secret).then(
-      () => setCopied(true),
-      () => setCopied(false),
-    );
-  };
   return (
     <Callout
       tone="warning"
@@ -203,9 +193,7 @@ export function NewToken(props: NewTokenProps) {
       <p>{fresh.copyNow}</p>
       <p className="sc-secret">
         <code className="sc-secret-value">{props.secret}</code>
-        <Button size="sm" onClick={copy}>
-          {copied ? fresh.copied : fresh.copy}
-        </Button>
+        <CopyButton text={props.secret} size="sm" />
       </p>
       <p>
         {fresh.useIt}{" "}