@skillcdn/console 0.4.4 → 0.4.5

package/src/components/people.tsx

@@ -1,4 +1,4 @@
-import { type FormEvent, useState } from "react";
+import { type FormEvent, useEffect, useState } from "react";
 import {
   hostOfLogin,
   isLoginAt,
@@ -10,16 +10,33 @@ import {
   type RestOrganization,
   type RestPerson,
   type RestProvider,
+  type RestTeam,
+  type RestTeamInput,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { MAX_LOGIN_LENGTH } from "../limits.js";
+import { MAX_LOGIN_LENGTH, MAX_TEAM_KEY_LENGTH, MAX_TEAM_NAME_LENGTH } from "../limits.js";
 import { PERSON_ROLES } from "../vocabulary.js";
-import { Avatar, Badge, Button, PersonChip, personName, RoleBadge, Time, Workers } from "./ui.js";
+import { Picker } from "./picker.js";
+import { keyOf } from "./projects.js";
+import { listSearch, peopleSearch } from "./searches.js";
+import {
+  Avatar,
+  Badge,
+  Button,
+  Chip,
+  cx,
+  EmptyState,
+  PersonChip,
+  personName,
+  RoleBadge,
+  Time,
+} from "./ui.js";
 
 // 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.
+// the logins let in that nobody has signed in with yet, and those deactivated; and the teams
+// (ADR-0073), a view of their own. An administrator changes a person's facts in place, takes
+// people out and back in, takes a listing away, and keeps the teams; a member reads. Takes its
+// data as props and nothing from the network.
 
 export interface PeopleListProps {
   readonly people: readonly RestPerson[];
@@ -39,8 +56,16 @@ export interface PeopleListProps {
   readonly onChangeStatus?: ((person: RestPerson, status: PersonStatus) => void) | undefined;
   /** Called with the manager an administrator chose for the person, or null for none. Left out, managers are read here, not changed. */
   readonly onChangeManager?: ((person: RestPerson, managerId: string | null) => void) | undefined;
+  /** Called with the work email an administrator wrote for the person, or null for none. Left out, an address is read here where the console answers one. */
+  readonly onChangeEmail?: ((person: RestPerson, email: string | null) => void) | undefined;
   /** Called when an administrator takes a listing away. Left out, listings are read here. */
   readonly onUnlist?: ((listing: RestListing) => void) | undefined;
+  /** The teams of the workspace (ADR-0073), so that each person's card names theirs; left out, none are named. */
+  readonly teams?: readonly RestTeam[] | undefined;
+  /** Called with a team an administrator puts the person in, from the person's card. Left out, a person's teams are read here. */
+  readonly onJoinTeam?: ((person: RestPerson, team: RestTeam) => void) | undefined;
+  /** Called with a team an administrator takes the person out of, from the person's card. */
+  readonly onLeaveTeam?: ((person: RestPerson, team: RestTeam) => 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. */
@@ -48,18 +73,80 @@ export interface PeopleListProps {
   readonly busy?: boolean | undefined;
 }
 
+/** How many of a manager's reports are shown as pictures before the rest are a count. */
+const REPORTS_SHOWN = 5;
+
+/**
+ * A line an administrator writes in place, quiet until the pointer or the focus is on it: kept
+ * while typed, written when the field is left or Enter is pressed, and only where it changed.
+ * `normalize` says what is written; what it makes empty is `onEmpty`'s to answer: written as
+ * nothing, or the line put back as it was.
+ */
+function QuietField(props: {
+  readonly value: string;
+  /** What the field is, for a screen reader. */
+  readonly label: string;
+  readonly placeholder?: string | undefined;
+  readonly title?: string | undefined;
+  readonly type?: "text" | "email";
+  readonly maxLength?: number | undefined;
+  readonly className?: string | undefined;
+  readonly busy: boolean;
+  readonly normalize: (typed: string) => string;
+  /** Empty, the field writes `null` where this is `clear`, and goes back to the value where it is `keep`. */
+  readonly onEmpty: "clear" | "keep";
+  readonly onChange: (value: string | null) => void;
+}) {
+  const current = props.value;
+  const [value, setValue] = useState(current);
+  // The field follows what the console answers.
+  useEffect(() => setValue(current), [current]);
+  const commit = () => {
+    const next = props.normalize(value);
+    if (next === "" && props.onEmpty === "keep") {
+      setValue(current);
+    } else if (next !== current) {
+      props.onChange(next === "" ? null : next);
+    }
+  };
+  return (
+    <input
+      type={props.type ?? "text"}
+      className={cx("sc-input", "sc-input-quiet", props.className)}
+      aria-label={props.label}
+      title={props.title}
+      placeholder={props.placeholder}
+      value={value}
+      maxLength={props.maxLength}
+      disabled={props.busy}
+      onChange={(event) => setValue(event.target.value)}
+      onBlur={commit}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          commit();
+        } else if (event.key === "Escape") {
+          setValue(current);
+        }
+      }}
+    />
+  );
+}
+
 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 busy = props.busy === true;
   const mayChange = (person: RestPerson): boolean =>
     props.onChangeStatus !== undefined &&
     person.source !== "organization" &&
     props.me?.id !== person.id;
   const organization = props.organization ?? undefined;
   const byId = new Map(props.people.map((person) => [person.id, person]));
+  const teamList = props.teams ?? [];
   /** The person's manager, where they have one that can be named here. */
   const managerOf = (person: RestPerson): RestPerson | undefined =>
     person.managerId === null || person.managerId === undefined
@@ -95,7 +182,10 @@ export function PeopleList(props: PeopleListProps) {
       <ul className="sc-people" aria-label={people.list}>
         {active.map((person) => {
           const manager = managerOf(person);
-          const team = active.filter((other) => other.managerId === person.id);
+          const reports = active.filter((other) => other.managerId === person.id);
+          const joined = teamList.filter((team) => team.memberIds.includes(person.id));
+          const toJoin = teamList.filter((team) => !team.memberIds.includes(person.id));
+          const name = personName(person);
           const hasWays =
             props.workHref !== undefined || props.agentsHref !== undefined || mayChange(person);
           return (
@@ -104,7 +194,7 @@ export function PeopleList(props: PeopleListProps) {
                 <Avatar person={person} size="lg" />
                 <div className="sc-person-card-who">
                   <span className="sc-person-card-name">
-                    {personName(person)}
+                    {name}
                     {props.me?.id === person.id && (
                       <span className="sc-person-you">{words.common.you}</span>
                     )}
@@ -124,9 +214,9 @@ export function PeopleList(props: PeopleListProps) {
                     ) : (
                       <select
                         className="sc-input sc-input-quiet"
-                        aria-label={people.roleOf(personName(person))}
+                        aria-label={people.roleOf(name)}
                         value={person.role}
-                        disabled={props.busy === true}
+                        disabled={busy}
                         onChange={(event) =>
                           props.onChangeRole?.(person, event.target.value as PersonRole)
                         }
@@ -150,39 +240,107 @@ export function PeopleList(props: PeopleListProps) {
                         <PersonChip person={manager} />
                       )
                     ) : (
-                      <select
-                        className="sc-input sc-input-quiet"
-                        aria-label={people.managerOf(personName(person))}
-                        value={person.managerId ?? ""}
-                        disabled={props.busy === true}
-                        onChange={(event) =>
-                          props.onChangeManager?.(
-                            person,
-                            event.target.value === "" ? null : event.target.value,
-                          )
-                        }
-                      >
-                        <option value="">{people.nobody}</option>
-                        {props.people
-                          .filter(
+                      <Picker
+                        className="sc-picker-quiet"
+                        value={manager}
+                        search={peopleSearch(
+                          props.people.filter(
                             (candidate) =>
                               candidate.id !== person.id &&
                               (candidate.status === "active" || candidate.id === person.managerId),
-                          )
-                          .map((candidate) => (
-                            <option key={candidate.id} value={candidate.id}>
-                              {personName(candidate)}
-                            </option>
-                          ))}
-                      </select>
+                          ),
+                        )}
+                        keyOf={(candidate) => candidate.id}
+                        render={(candidate) => <PersonChip person={candidate} />}
+                        label={people.managerOf(name)}
+                        placeholder={people.nobody}
+                        disabled={busy}
+                        onChange={(candidate) =>
+                          props.onChangeManager?.(person, candidate?.id ?? null)
+                        }
+                      />
                     )}
                   </dd>
                 </div>
-                {team.length > 0 && (
+                {(props.onChangeEmail !== undefined || typeof person.email === "string") && (
+                  <div className="sc-person-fact">
+                    <dt>{people.email}</dt>
+                    <dd>
+                      {props.onChangeEmail === undefined ? (
+                        <span className="sc-person-email">{person.email}</span>
+                      ) : (
+                        <QuietField
+                          type="email"
+                          value={person.email ?? ""}
+                          label={people.emailOf(name)}
+                          title={people.emailHint}
+                          placeholder={people.nobody}
+                          busy={busy}
+                          normalize={(typed) => typed.trim().toLowerCase()}
+                          onEmpty="clear"
+                          onChange={(email) => props.onChangeEmail?.(person, email)}
+                        />
+                      )}
+                    </dd>
+                  </div>
+                )}
+                {reports.length > 0 && (
                   <div className="sc-person-fact">
                     <dt>{people.team}</dt>
                     <dd>
-                      <Workers workers={team} />
+                      <span
+                        className="sc-person-reports"
+                        title={reports.map(personName).join(", ")}
+                      >
+                        <span className="sc-workers">
+                          {reports.slice(0, REPORTS_SHOWN).map((report) => (
+                            <Avatar key={report.id} person={report} size="sm" />
+                          ))}
+                        </span>
+                        <span className="sc-muted">{people.howMany(reports.length)}</span>
+                      </span>
+                    </dd>
+                  </div>
+                )}
+                {(joined.length > 0 || (props.onJoinTeam !== undefined && toJoin.length > 0)) && (
+                  <div className="sc-person-fact">
+                    <dt>{people.teams}</dt>
+                    <dd>
+                      <div className="sc-chips">
+                        {joined.map((team) => (
+                          <Chip
+                            key={team.id}
+                            onRemove={
+                              props.onLeaveTeam === undefined
+                                ? undefined
+                                : () => props.onLeaveTeam?.(person, team)
+                            }
+                            removeLabel={people.leaveTeam(name, team.name)}
+                            disabled={busy}
+                          >
+                            {team.name}
+                          </Chip>
+                        ))}
+                        {props.onJoinTeam !== undefined && toJoin.length > 0 && (
+                          <Picker<RestTeam>
+                            className="sc-picker-add"
+                            value={undefined}
+                            search={listSearch(toJoin, (candidate, typed) =>
+                              candidate.name.toLowerCase().includes(typed),
+                            )}
+                            keyOf={(candidate) => candidate.id}
+                            render={(candidate) => candidate.name}
+                            label={people.joinTeamOf(name)}
+                            placeholder={people.joinTeam}
+                            disabled={busy}
+                            onChange={(candidate) => {
+                              if (candidate !== undefined) {
+                                props.onJoinTeam?.(person, candidate);
+                              }
+                            }}
+                          />
+                        )}
+                      </div>
                     </dd>
                   </div>
                 )}
@@ -209,7 +367,7 @@ export function PeopleList(props: PeopleListProps) {
                     <Button
                       variant="ghost"
                       size="sm"
-                      disabled={props.busy === true}
+                      disabled={busy}
                       onClick={() => props.onChangeStatus?.(person, "deactivated")}
                     >
                       {people.deactivate}
@@ -239,7 +397,7 @@ export function PeopleList(props: PeopleListProps) {
                   <Button
                     variant="ghost"
                     size="sm"
-                    disabled={props.busy === true}
+                    disabled={busy}
                     onClick={() => props.onUnlist?.(listing)}
                   >
                     {words.common.remove}
@@ -274,7 +432,7 @@ export function PeopleList(props: PeopleListProps) {
                   <Button
                     variant="ghost"
                     size="sm"
-                    disabled={props.busy === true}
+                    disabled={busy}
                     onClick={() => props.onChangeStatus?.(person, "active")}
                   >
                     {people.reactivate}
@@ -289,6 +447,205 @@ export function PeopleList(props: PeopleListProps) {
   );
 }
 
+export interface TeamListProps {
+  /** The teams of the workspace (ADR-0073), by name, each with the members the person may see. */
+  readonly teams: readonly RestTeam[];
+  /** The people the page holds: whom a team's members are named from, and whom an administrator adds from, the active among them. */
+  readonly people: readonly RestPerson[];
+  /** Called with the name an administrator wrote for a team. Left out, names are read here. */
+  readonly onRename?: ((team: RestTeam, name: string) => void) | undefined;
+  /** Called when an administrator deletes a team, after asking where it is the page's to ask. Left out, teams are read here. */
+  readonly onRemove?: ((team: RestTeam) => void) | undefined;
+  /** Called with a person an administrator puts in a team. Left out, the members are read here. */
+  readonly onAddMember?: ((team: RestTeam, person: RestPerson) => void) | undefined;
+  /** Called with a member an administrator takes out of a team. */
+  readonly onRemoveMember?: ((team: RestTeam, person: RestPerson) => void) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+/**
+ * The teams of the workspace (ADR-0073), a card each: the name, how many are in it, and who, a
+ * chip each. For an administrator the name is written anew in its place, a member is taken out
+ * from their chip and a person is added from the end of the row, searched among those in; a team
+ * is deleted from its card. Its people stay; the roles granted to it go with it.
+ */
+export function TeamList(props: TeamListProps) {
+  const words = useWords();
+  const teams = words.teams;
+  const busy = props.busy === true;
+  const byId = new Map(props.people.map((person) => [person.id, person]));
+  const active = props.people.filter((person) => person.status === "active");
+  if (props.teams.length === 0) {
+    return <EmptyState title={teams.none.title} body={teams.none.body} />;
+  }
+  return (
+    <ul className="sc-teams" aria-label={teams.list}>
+      {props.teams.map((team) => {
+        const members = team.memberIds.flatMap((id) => {
+          const member = byId.get(id);
+          return member === undefined ? [] : [member];
+        });
+        const candidates = active.filter((person) => !team.memberIds.includes(person.id));
+        return (
+          <li key={team.id} className="sc-team-card">
+            <div className="sc-team-head">
+              <div className="sc-team-title">
+                {props.onRename === undefined ? (
+                  <h2 className="sc-team-name">{team.name}</h2>
+                ) : (
+                  <QuietField
+                    className="sc-team-name"
+                    value={team.name}
+                    label={teams.nameOf(team.name)}
+                    maxLength={MAX_TEAM_NAME_LENGTH}
+                    busy={busy}
+                    normalize={(typed) => typed.trim()}
+                    onEmpty="keep"
+                    onChange={(name) => {
+                      if (name !== null) {
+                        props.onRename?.(team, name);
+                      }
+                    }}
+                  />
+                )}
+                <span className="sc-team-key" title={teams.keyTitle}>
+                  {team.key}
+                </span>
+              </div>
+              <Badge kind="count">{teams.members(team.memberIds.length)}</Badge>
+            </div>
+            <div className="sc-chips sc-team-members">
+              {members.map((member) => (
+                <Chip
+                  key={member.id}
+                  onRemove={
+                    props.onRemoveMember === undefined
+                      ? undefined
+                      : () => props.onRemoveMember?.(team, member)
+                  }
+                  removeLabel={teams.removeMember(personName(member), team.name)}
+                  disabled={busy}
+                >
+                  <PersonChip person={member} />
+                </Chip>
+              ))}
+              {members.length === 0 && props.onAddMember === undefined && (
+                <span className="sc-muted">{teams.nobody}</span>
+              )}
+              {props.onAddMember !== undefined && candidates.length > 0 && (
+                <Picker
+                  className="sc-picker-add"
+                  value={undefined}
+                  search={peopleSearch(candidates)}
+                  keyOf={(candidate) => candidate.id}
+                  render={(candidate) => <PersonChip person={candidate} />}
+                  label={teams.addMemberTo(team.name)}
+                  placeholder={teams.addMember}
+                  disabled={busy}
+                  onChange={(candidate) => {
+                    if (candidate !== undefined) {
+                      props.onAddMember?.(team, candidate);
+                    }
+                  }}
+                />
+              )}
+            </div>
+            {props.onRemove !== undefined && (
+              <div className="sc-team-ways">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  disabled={busy}
+                  onClick={() => props.onRemove?.(team)}
+                >
+                  {teams.remove}
+                </Button>
+              </div>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export interface TeamFormProps {
+  readonly busy?: boolean | undefined;
+  /** Called with the key and the name written, trimmed. */
+  readonly onSubmit: (input: RestTeamInput) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+/** A key as the pages accept one: a project key's shape (ADR-0074). */
+const TEAM_KEY = /^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
+
+/**
+ * Where an administrator makes a team: its name, one in the workspace, and its key, taken from
+ * the name as it is typed until the key is typed itself, and never changed after; its people are
+ * added on its card.
+ */
+export function TeamForm(props: TeamFormProps) {
+  const words = useWords();
+  const form = words.teams.form;
+  const [name, setName] = useState("");
+  const [key, setKey] = useState("");
+  const [keyTouched, setKeyTouched] = useState(false);
+  const valid = name.trim().length > 0 && TEAM_KEY.test(key.trim()) && key.trim() !== "new";
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (valid) {
+      props.onSubmit({ key: key.trim(), name: name.trim() });
+    }
+  };
+  return (
+    <form className="sc-form sc-team-form" aria-label={words.teams.newAria} onSubmit={submit}>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.name}</span>
+          <input
+            className="sc-input"
+            value={name}
+            maxLength={MAX_TEAM_NAME_LENGTH}
+            autoComplete="off"
+            onChange={(event) => {
+              setName(event.target.value);
+              if (!keyTouched) {
+                setKey(keyOf(event.target.value).slice(0, MAX_TEAM_KEY_LENGTH));
+              }
+            }}
+          />
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.key}</span>
+          <input
+            className="sc-input"
+            value={key}
+            maxLength={MAX_TEAM_KEY_LENGTH}
+            pattern="[a-z0-9]([a-z0-9-]*[a-z0-9])?"
+            autoComplete="off"
+            title={form.keyHint}
+            onChange={(event) => {
+              setKeyTouched(true);
+              setKey(event.target.value);
+            }}
+          />
+        </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>
+          )}
+        </div>
+      </div>
+      <p className="sc-field-hint">{form.hint}</p>
+    </form>
+  );
+}
+
 export interface ListingFormProps {
   /** The providers people sign in through here: what a listing may name. */
   readonly providers: readonly RestProvider[];

package/src/components/picker.tsx

@@ -62,10 +62,18 @@ export interface PickerProps<T> {
   readonly onChange: (item: T | undefined) => void;
   /** The field's name, for the input and the list. */
   readonly label: string;
+  /** The input's id, where a label points at it. */
+  readonly id?: string | undefined;
   readonly placeholder: string;
   readonly disabled?: boolean | undefined;
   /** What the search may answer with but cannot be chosen: a task, as its own parent. */
   readonly exclude?: ((item: T) => boolean) | undefined;
+  /**
+   * A class of the picker's own beside `sc-picker`: `sc-picker-quiet`, a picker that reads as
+   * what it holds until the pointer or the focus is on it, a fact changed in place; or
+   * `sc-picker-add`, the way to add one more at the end of a row of chips, as low as a chip.
+   */
+  readonly className?: string | undefined;
 }
 
 export function Picker<T>(props: PickerProps<T>) {
@@ -204,7 +212,7 @@ export function Picker<T>(props: PickerProps<T>) {
 
   if (props.value !== undefined || props.held !== undefined) {
     return (
-      <div className="sc-picker sc-picker-chosen">
+      <div className={cx("sc-picker", "sc-picker-chosen", props.className)}>
         <span className="sc-picker-value">
           {props.value === undefined ? props.held : props.render(props.value)}
         </span>
@@ -222,9 +230,10 @@ export function Picker<T>(props: PickerProps<T>) {
   }
 
   return (
-    <div className="sc-picker">
+    <div className={cx("sc-picker", props.className)}>
       <input
         ref={field}
+        id={props.id}
         className="sc-input"
         type="text"
         role="combobox"

package/src/components/plugin-frame.tsx

@@ -10,6 +10,7 @@ import {
   type BridgeToFrame,
   isBridgePath,
   isBridgeToPage,
+  isOpenableFrom,
   PLUGIN_BRIDGE_VERSION,
 } from "../plugin/bridge.js";
 import type { Navigation } from "../router.js";
@@ -160,6 +161,20 @@ export async function performBridgeCall(
 }
 
 /** The console's computed design tokens, as the page's root has them: what a frame is told to look like. */
+/**
+ * Whether a person pressed something a moment ago, as the browser keeps it: a link in a frame
+ * gives the page this too, which is what lets the page open a tab for it; a browser without the
+ * API is left to decide for itself, as it does for any page.
+ */
+function recentlyPressed(): boolean {
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  const activation = (navigator as Navigator & { userActivation?: { isActive: boolean } })
+    .userActivation;
+  return activation === undefined || activation.isActive;
+}
+
 export function readTheme(): Record<string, string> {
   if (typeof document === "undefined" || typeof getComputedStyle === "undefined") {
     return {};
@@ -321,6 +336,14 @@ export function PluginFrame(props: PluginFrameProps) {
           anchor.click();
           return;
         }
+        case "open":
+          // A link a person pressed in the frame (ADR-0067): a web or a mail address, opened in a
+          // new tab with no opener and no referrer, and only while the press is recent, which a
+          // press in the frame gives this page too.
+          if (isOpenableFrom(message.url, window.location.origin) && recentlyPressed()) {
+            window.open(message.url, "_blank", "noopener,noreferrer");
+          }
+          return;
         case "subscribe":
           subscribed.current = new Set(message.kinds);
           return;