@skillcdn/console 0.4.4 → 0.4.5

package/src/components/projects.tsx

@@ -23,6 +23,8 @@ import {
   type RestProjectPatch,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { Picker } from "./picker.js";
+import { peopleSearch } from "./searches.js";
 import { Badge, Button, cx, PersonChip, personName, Time } from "./ui.js";
 
 /**
@@ -462,21 +464,19 @@ export function MemberList(props: MemberListProps) {
           }}
         >
           <div className="sc-field-row">
-            <label className="sc-field">
+            <div className="sc-field">
               <span className="sc-field-label">{members.person}</span>
-              <select
-                className="sc-input"
-                value={personId}
-                onChange={(event) => setPersonId(event.target.value)}
-              >
-                <option value="">{members.chooseSomeone}</option>
-                {candidates.map((person) => (
-                  <option key={person.id} value={person.id}>
-                    {personName(person)}
-                  </option>
-                ))}
-              </select>
-            </label>
+              <Picker
+                value={candidates.find((person) => person.id === personId)}
+                search={peopleSearch(candidates)}
+                keyOf={(person) => person.id}
+                render={(person) => <PersonChip person={person} size="sm" />}
+                label={members.person}
+                placeholder={members.chooseSomeone}
+                disabled={props.busy === true}
+                onChange={(person) => setPersonId(person?.id ?? "")}
+              />
+            </div>
             <label className="sc-field">
               <span className="sc-field-label">{members.as}</span>
               <select

package/src/components/searches.ts

@@ -0,0 +1,47 @@
+import type { RestGoal, RestPerson, RestProject } from "../api.js";
+import type { PickerSearch } from "./picker.js";
+import { personName } from "./ui.js";
+
+// What a picker asks for, answered from a listing the page already holds (ADR-0037): the people,
+// the projects or the goals the page was given, found by the words typed, a page at a time, so
+// that choosing one among many is the same wherever one is chosen, and the board's filters, a
+// setting, a manager or a worker never offer a list too long to read.
+
+/** A page of `items` found by the words typed, as a picker searches; everything while the words are empty. */
+export function listSearch<T>(
+  items: readonly T[],
+  matches: (item: T, words: string) => boolean,
+): PickerSearch<T> {
+  return async (query, page) => {
+    const words = query.trim().toLowerCase();
+    const found = words.length === 0 ? items : items.filter((item) => matches(item, words));
+    return {
+      items: found.slice(page.offset, page.offset + page.limit),
+      more: found.length > page.offset + page.limit,
+    };
+  };
+}
+
+/** The people given, found by name or login. */
+export function peopleSearch(people: readonly RestPerson[]): PickerSearch<RestPerson> {
+  return listSearch(
+    people,
+    (person, words) =>
+      personName(person).toLowerCase().includes(words) ||
+      person.login.toLowerCase().includes(words),
+  );
+}
+
+/** The projects given, found by name or key. */
+export function projectsSearch(projects: readonly RestProject[]): PickerSearch<RestProject> {
+  return listSearch(
+    projects,
+    (project, words) =>
+      project.name.toLowerCase().includes(words) || project.key.toLowerCase().includes(words),
+  );
+}
+
+/** The goals given, found by title. */
+export function goalsSearch(goals: readonly RestGoal[]): PickerSearch<RestGoal> {
+  return listSearch(goals, (goal, words) => goal.title.toLowerCase().includes(words));
+}

package/src/components/task-form.tsx

@@ -16,7 +16,8 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Picker, type PickerSearch } from "./picker.js";
-import { Button, GoalStateBadge, PersonChip, personName, StateBadge } from "./ui.js";
+import { peopleSearch } from "./searches.js";
+import { Button, Chip, GoalStateBadge, PersonChip, personName, StateBadge } from "./ui.js";
 
 // Writing a task, or changing one. The bounds are the package's, said before a request is made.
 // The plan is two days (ADR-0019); what happened to the task is the board's to keep, not a
@@ -222,37 +223,31 @@ export function TaskForm(props: TaskFormProps) {
         <legend className="sc-field-label">{form.workers}</legend>
         <div className="sc-chips">
           {chosenWorkers.map((person) => (
-            <span key={person.id} className="sc-chip">
+            <Chip
+              key={person.id}
+              onRemove={() => setWorkerIds(workerIds.filter((id) => id !== person.id))}
+              removeLabel={`${words.common.remove}: ${personName(person)}`}
+            >
               <PersonChip person={person} />
-              <button
-                type="button"
-                className="sc-chip-remove"
-                aria-label={`${words.common.remove}: ${personName(person)}`}
-                onClick={() => setWorkerIds(workerIds.filter((id) => id !== person.id))}
-              >
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </span>
+            </Chip>
           ))}
-          {chosenWorkers.length === 0 && <span className="sc-muted">{words.common.nobody}</span>}
-          {otherPeople.length > 0 && workerIds.length < MAX_WORKERS && (
-            <select
-              className="sc-input sc-chip-add"
-              aria-label={form.addWorker}
-              value=""
-              onChange={(event) => {
-                if (event.target.value !== "") {
-                  setWorkerIds([...workerIds, event.target.value]);
+          {otherPeople.length > 0 && workerIds.length < MAX_WORKERS ? (
+            <Picker
+              className="sc-picker-add"
+              value={undefined}
+              search={peopleSearch(otherPeople)}
+              keyOf={(person) => person.id}
+              render={(person) => <PersonChip person={person} size="sm" />}
+              label={form.addWorker}
+              placeholder={form.addWorker}
+              onChange={(person) => {
+                if (person !== undefined) {
+                  setWorkerIds([...workerIds, person.id]);
                 }
               }}
-            >
-              <option value="">{form.addWorker}</option>
-              {otherPeople.map((person) => (
-                <option key={person.id} value={person.id}>
-                  {personName(person)}
-                </option>
-              ))}
-            </select>
+            />
+          ) : (
+            chosenWorkers.length === 0 && <span className="sc-muted">{words.common.nobody}</span>
           )}
         </div>
       </fieldset>

package/src/components/ui.tsx

@@ -164,6 +164,42 @@ export function PersonChip(props: { readonly person: RestPerson; readonly size?:
   );
 }
 
+/**
+ * A thing named among others in a row (`sc-chips`): a person (a `PersonChip` inside), a team, an
+ * item of a list, a holder of a role. Given `onRemove`, it carries the way to take it out, named
+ * for a screen reader by `removeLabel`; left out, the chip is read, not changed. Every row of
+ * things a person adds to and takes from is made of these, so that they read alike everywhere.
+ */
+export function Chip(props: {
+  readonly children: ReactNode;
+  readonly onRemove?: (() => void) | undefined;
+  /** What the way out says to a screen reader: the word for removing, and what the chip names. */
+  readonly removeLabel?: string | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly title?: string | undefined;
+  /** A class of the chip's own beside `sc-chip`. */
+  readonly className?: string | undefined;
+}) {
+  const words = useWords().common;
+  return (
+    <span className={cx("sc-chip", props.className)} title={props.title}>
+      <span className="sc-chip-label">{props.children}</span>
+      {props.onRemove !== undefined && (
+        <button
+          type="button"
+          className="sc-chip-remove"
+          aria-label={props.removeLabel ?? words.remove}
+          title={props.removeLabel ?? words.remove}
+          disabled={props.disabled}
+          onClick={props.onRemove}
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      )}
+    </span>
+  );
+}
+
 /** How many of a task's workers are shown as pictures before the rest are a count. */
 const WORKERS_SHOWN = 3;
 

package/src/console.tsx

@@ -29,6 +29,7 @@ import {
   type RestProjectInput,
   type RestProjectPatch,
   type RestProjectRules,
+  type RestReachedDecision,
   type RestRules,
   type RestTask,
   type RestTaskInput,
@@ -49,10 +50,17 @@ import { DecisionCard, DecisionList, type DecisionListProps } from "./components
 import { EventFeed, type EventFeedProps } from "./components/event-feed.js";
 import { GoalForm, GoalList, type GoalListProps, GoalView, goalMonth } from "./components/goals.js";
 import { HomeGrid, type HomeGridProps } from "./components/home.js";
-import { MyDecisions } from "./components/my-decisions.js";
+import { MyDecisions, ReachedDecision } from "./components/my-decisions.js";
 import { PackTokenWays } from "./components/pack-token.js";
 import { PAGE_SIZE } from "./components/paged.js";
-import { ListingForm, PeopleList, type PeopleListProps } from "./components/people.js";
+import {
+  ListingForm,
+  PeopleList,
+  type PeopleListProps,
+  TeamForm,
+  TeamList,
+  type TeamListProps,
+} from "./components/people.js";
 import { PluginFrame } from "./components/plugin-frame.js";
 import { PluginSettingsList, PluginSettingsView } from "./components/plugin-settings.js";
 import {
@@ -81,6 +89,7 @@ import {
   Button,
   Callout,
   CategoryBadge,
+  cx,
   EmptyState,
   LinkButton,
   personName,
@@ -119,6 +128,7 @@ import {
   type GoalTaskView,
   goalHref,
   matchRoute,
+  myDecisionHref,
   type Navigation,
   newDecisionHref,
   newGoalHref,
@@ -157,6 +167,7 @@ export interface ConsoleComponents {
   readonly SignIn: ComponentType<SignInProps>;
   readonly TokenList: ComponentType<TokenListProps>;
   readonly PeopleList: ComponentType<PeopleListProps>;
+  readonly TeamList: ComponentType<TeamListProps>;
   readonly SkillList: ComponentType<SkillListProps>;
   readonly HomeGrid: ComponentType<HomeGridProps>;
   readonly MemberList: ComponentType<MemberListProps>;
@@ -175,6 +186,7 @@ export const DEFAULT_COMPONENTS: ConsoleComponents = {
   SignIn,
   TokenList,
   PeopleList,
+  TeamList,
   SkillList,
   HomeGrid,
   MemberList,
@@ -644,6 +656,8 @@ function PluginSettingsPage(props: {
       detail={detail}
       projects={data.projects}
       people={data.people}
+      plugins={data.plugins}
+      teams={data.teams}
       language={language}
       client={client}
       onChanged={async () => {
@@ -2242,6 +2256,70 @@ function PlatePage(props: {
   );
 }
 
+/**
+ * One decision wherever it is (ADR-0068): in a project the person may see, or one that reaches
+ * them from elsewhere, addressed to them, raised by them, or a plugin's addressed to someone
+ * they manage; answered here where they may. The address a plugin's page sends a person to,
+ * who may not be in the project the decision waits in.
+ */
+function MyDecisionPage(props: { readonly id: string; readonly data: ConsoleData }) {
+  const words = useWords();
+  const { id, data } = props;
+  const { reachDecision, answerReachedDecision } = data.actions;
+  const [reached, setReached] = useState<RestReachedDecision | undefined>(undefined);
+  const [problem, setProblem] = useState<string | undefined>(undefined);
+  const { busy, error, act } = useAction();
+  const couldNotLoad = words.myDecisions.couldNotLoad;
+  useEffect(() => {
+    const controller = new AbortController();
+    setReached(undefined);
+    setProblem(undefined);
+    reachDecision(id, controller.signal).then(
+      (found) => {
+        if (!controller.signal.aborted) {
+          setReached(found);
+        }
+      },
+      (failure: unknown) => {
+        if (!controller.signal.aborted) {
+          setProblem(errorWords(failure, couldNotLoad, words));
+        }
+      },
+    );
+    return () => controller.abort();
+  }, [reachDecision, id, couldNotLoad, words]);
+  const shown = problem ?? error;
+  return (
+    <>
+      <div className="sc-page-head">
+        <h1 className="sc-page-title">{words.decisions.one}</h1>
+        <LinkButton href={PATHS.decisions}>{words.myDecisions.title}</LinkButton>
+      </div>
+      {shown !== undefined && <Callout tone="danger">{shown}</Callout>}
+      {reached === undefined ? (
+        shown === undefined && (
+          <div className="sc-loading">
+            <Spinner label={words.myDecisions.loading} />
+          </div>
+        )
+      ) : (
+        <ReachedDecision
+          reached={reached}
+          onAnswer={(_decision, input) =>
+            void act(async () => {
+              const answered = await answerReachedDecision(id, input);
+              setReached((current) =>
+                current === undefined ? current : { ...current, decision: answered },
+              );
+            })
+          }
+          busy={busy}
+        />
+      )}
+    </>
+  );
+}
+
 /** What is on the person's own plate, across their projects. */
 /** How many of a person's decisions are read at a time. */
 const MY_DECISIONS_PAGE = 50;
@@ -2307,14 +2385,17 @@ function useMyDecisions(
  */
 function MyDecisionsPage(props: { readonly data: ConsoleData }) {
   const words = useWords();
-  const { myDecisions, answerDecisionIn } = props.data.actions;
+  const { myDecisions, answerReachedDecision } = props.data.actions;
   const addressed = useMyDecisions(myDecisions, false, words.myDecisions.couldNotLoad);
   const raised = useMyDecisions(myDecisions, true, words.myDecisions.couldNotLoad);
   const { busy, error, act } = useAction();
   const problem = addressed.problem ?? raised.problem ?? error;
-  const onAnswer = (projectKey: string, decision: RestDecision, input: RestAnswerInput) =>
+  // Answered at the decision's own address (ADR-0068), so that one that reaches the person from a
+  // project they are not in, a plugin's up the reporting line or one they were named in before
+  // they left it, is answered here as it is read here.
+  const onAnswer = (_projectKey: string, decision: RestDecision, input: RestAnswerInput) =>
     void act(async () => {
-      await answerDecisionIn(projectKey, decision.id, input);
+      await answerReachedDecision(decision.id, input);
       addressed.reload();
       raised.reload();
     });
@@ -2336,8 +2417,11 @@ function MyDecisionsPage(props: { readonly data: ConsoleData }) {
         <MyDecisions
           addressed={{ items: addressed.items, more: addressed.more, onMore: addressed.readMore }}
           raised={{ items: raised.items, more: raised.more, onMore: raised.readMore }}
-          decisionHref={decisionHref}
-          fileHref={(projectKey, fileId) => projectPath(projectKey, "files", fileId)}
+          decisionHref={(projectKey, decisionId) =>
+            props.data.projects.some((project) => project.key === projectKey)
+              ? decisionHref(projectKey, decisionId)
+              : myDecisionHref(decisionId)
+          }
           onAnswer={onAnswer}
           busy={busy || addressed.busy || raised.busy}
         />
@@ -2440,6 +2524,9 @@ function WorkspacePage(props: {
   if (route.name === "my-decisions") {
     return <MyDecisionsPage data={data} />;
   }
+  if (route.name === "my-decision") {
+    return <MyDecisionPage id={route.id} data={data} />;
+  }
   if (route.name === "person-work") {
     return <PersonWorkPage id={route.id} data={data} components={components} week={route.week} />;
   }
@@ -2488,26 +2575,106 @@ function WorkspacePage(props: {
     );
   }
 
-  if (route.name === "people" || route.name === "new-listing") {
+  if (
+    route.name === "people" ||
+    route.name === "new-listing" ||
+    route.name === "teams" ||
+    route.name === "new-team"
+  ) {
     const me = data.me?.person ?? undefined;
     const administrator = me?.role === "admin";
+    // The people and the teams (ADR-0073) are two views of one page, each with its form.
+    const onTeams = route.name === "teams" || route.name === "new-team";
     const making = route.name === "new-listing" && administrator;
+    const makingTeam = route.name === "new-team" && administrator;
     // An owner sees the work of the people in their projects; the console refuses the rest.
     const oversees = administrator || data.projects.some((project) => project.role === "owner");
     // The list is what the policy shows (ADR-0035): everyone, or the people one shares a project with.
     const narrowed = peopleVisibilityOf(data.me?.workspace) === "shared_projects" && !administrator;
+    const views = words.people.views;
+    const inCount = data.people.filter((person) => person.status === "active").length;
     return (
       <>
         <div className="sc-page-head">
           <h1 className="sc-page-title">{words.people.title}</h1>
-          {administrator && !making && (
+          {administrator && !onTeams && !making && (
             <LinkButton href={PATHS.newListing} variant="primary">
               {words.people.letIn}
             </LinkButton>
           )}
+          {administrator && onTeams && !makingTeam && (
+            <LinkButton href={PATHS.newTeam} variant="primary">
+              {words.teams.newTeam}
+            </LinkButton>
+          )}
         </div>
+        <nav className="sc-subtabs sc-people-views" aria-label={views.aria}>
+          <a
+            className={cx("sc-tab", !onTeams && "sc-tab-current")}
+            href={PATHS.people}
+            aria-current={onTeams ? undefined : "page"}
+          >
+            {views.people}
+            <span className="sc-tab-count">{inCount}</span>
+          </a>
+          <a
+            className={cx("sc-tab", onTeams && "sc-tab-current")}
+            href={PATHS.teams}
+            aria-current={onTeams ? "page" : undefined}
+          >
+            {views.teams}
+            <span className="sc-tab-count">{data.teams.length}</span>
+          </a>
+        </nav>
         {narrowed && <p className="sc-lead">{words.people.narrowed}</p>}
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
+        {makingTeam && (
+          <section className="sc-panel sc-panel-form" aria-label={words.teams.newAria}>
+            <TeamForm
+              busy={busy}
+              onSubmit={(input) =>
+                void act(async () => {
+                  await data.actions.createTeam(input);
+                  navigation.replace(PATHS.teams);
+                })
+              }
+              onCancel={() => navigation.back(PATHS.teams)}
+            />
+          </section>
+        )}
+        {onTeams && (
+          <components.TeamList
+            teams={data.teams}
+            people={data.people}
+            busy={busy}
+            onRename={
+              administrator
+                ? (team, name) => void act(() => data.actions.renameTeam(team.key, { name }))
+                : undefined
+            }
+            onRemove={
+              administrator
+                ? (team) => {
+                    // The roles granted to the team go with it: asked first, as nothing brings them back.
+                    if (window.confirm(words.teams.removeAsk(team.name))) {
+                      void act(() => data.actions.removeTeam(team.key));
+                    }
+                  }
+                : undefined
+            }
+            onAddMember={
+              administrator
+                ? (team, person) => void act(() => data.actions.addTeamMember(team.key, person.id))
+                : undefined
+            }
+            onRemoveMember={
+              administrator
+                ? (team, person) =>
+                    void act(() => data.actions.removeTeamMember(team.key, person.id))
+                : undefined
+            }
+          />
+        )}
         {making && (
           <section className="sc-panel sc-panel-form" aria-label={words.people.letInAria}>
             <ListingForm
@@ -2523,36 +2690,56 @@ function WorkspacePage(props: {
             />
           </section>
         )}
-        <components.PeopleList
-          people={data.people}
-          listed={data.listed}
-          organization={data.organization}
-          me={me}
-          busy={busy}
-          onChangeRole={
-            administrator
-              ? (person, role) => void act(() => data.actions.updatePerson(person.id, { role }))
-              : undefined
-          }
-          onChangeStatus={
-            administrator
-              ? (person, status) => void act(() => data.actions.updatePerson(person.id, { status }))
-              : undefined
-          }
-          onChangeManager={
-            administrator
-              ? (person, managerId) =>
-                  void act(() => data.actions.updatePerson(person.id, { managerId }))
-              : undefined
-          }
-          onUnlist={
-            administrator
-              ? (listing) => void act(() => data.actions.removeListing(listing.id))
-              : undefined
-          }
-          workHref={oversees ? (person) => personWorkHref(person.id) : undefined}
-          agentsHref={administrator ? (person) => personAgentsHref(person.id) : undefined}
-        />
+        {!onTeams && (
+          <components.PeopleList
+            people={data.people}
+            listed={data.listed}
+            organization={data.organization}
+            me={me}
+            busy={busy}
+            onChangeRole={
+              administrator
+                ? (person, role) => void act(() => data.actions.updatePerson(person.id, { role }))
+                : undefined
+            }
+            onChangeStatus={
+              administrator
+                ? (person, status) =>
+                    void act(() => data.actions.updatePerson(person.id, { status }))
+                : undefined
+            }
+            onChangeManager={
+              administrator
+                ? (person, managerId) =>
+                    void act(() => data.actions.updatePerson(person.id, { managerId }))
+                : undefined
+            }
+            onChangeEmail={
+              administrator
+                ? (person, email) => void act(() => data.actions.updatePerson(person.id, { email }))
+                : undefined
+            }
+            onUnlist={
+              administrator
+                ? (listing) => void act(() => data.actions.removeListing(listing.id))
+                : undefined
+            }
+            teams={data.teams}
+            onJoinTeam={
+              administrator
+                ? (person, team) => void act(() => data.actions.addTeamMember(team.key, person.id))
+                : undefined
+            }
+            onLeaveTeam={
+              administrator
+                ? (person, team) =>
+                    void act(() => data.actions.removeTeamMember(team.key, person.id))
+                : undefined
+            }
+            workHref={oversees ? (person) => personWorkHref(person.id) : undefined}
+            agentsHref={administrator ? (person) => personAgentsHref(person.id) : undefined}
+          />
+        )}
       </>
     );
   }
@@ -2713,7 +2900,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
         {
           href: PATHS.decisions,
           label: words.nav.myDecisions,
-          current: route.name === "my-decisions",
+          current: route.name === "my-decisions" || route.name === "my-decision",
           count: data.me?.decisions?.waiting,
         },
         {
@@ -2722,6 +2909,8 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
           current:
             route.name === "people" ||
             route.name === "new-listing" ||
+            route.name === "teams" ||
+            route.name === "new-team" ||
             route.name === "person-agents",
         },
         ...(viaToken