@skillcdn/console 0.4.3 → 0.4.5

package/src/console.tsx

@@ -22,12 +22,14 @@ import {
   type RestDecisionInput,
   type RestDecisionPatch,
   type RestEvent,
+  type RestMe,
   type RestMyDecisions,
   type RestPluginDetail,
   type RestProject,
   type RestProjectInput,
   type RestProjectPatch,
   type RestProjectRules,
+  type RestReachedDecision,
   type RestRules,
   type RestTask,
   type RestTaskInput,
@@ -47,18 +49,24 @@ import { DecisionForm } from "./components/decision-form.js";
 import { DecisionCard, DecisionList, type DecisionListProps } from "./components/decision-list.js";
 import { EventFeed, type EventFeedProps } from "./components/event-feed.js";
 import { GoalForm, GoalList, type GoalListProps, GoalView, goalMonth } from "./components/goals.js";
-import { MyDecisions } from "./components/my-decisions.js";
+import { HomeGrid, type HomeGridProps } from "./components/home.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 { PluginFrame, PluginWidgets } from "./components/plugin-frame.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 {
   MemberList,
   type MemberListProps,
   ProjectForm,
-  ProjectList,
-  type ProjectListProps,
   ProjectMark,
 } from "./components/projects.js";
 import { type RemotePictureSrc, RemotePicturesContext } from "./components/remote-pictures.js";
@@ -81,6 +89,7 @@ import {
   Button,
   Callout,
   CategoryBadge,
+  cx,
   EmptyState,
   LinkButton,
   personName,
@@ -100,6 +109,7 @@ import { type ConsoleData, useConsoleData } from "./data.js";
 import { monthOf, today } from "./dates.js";
 import { DocsPage } from "./docs-page.js";
 import {
+  browserPack,
   chooseLanguage,
   DEFAULT_LANGUAGES,
   LanguageContext,
@@ -118,6 +128,7 @@ import {
   type GoalTaskView,
   goalHref,
   matchRoute,
+  myDecisionHref,
   type Navigation,
   newDecisionHref,
   newGoalHref,
@@ -156,8 +167,9 @@ export interface ConsoleComponents {
   readonly SignIn: ComponentType<SignInProps>;
   readonly TokenList: ComponentType<TokenListProps>;
   readonly PeopleList: ComponentType<PeopleListProps>;
+  readonly TeamList: ComponentType<TeamListProps>;
   readonly SkillList: ComponentType<SkillListProps>;
-  readonly ProjectList: ComponentType<ProjectListProps>;
+  readonly HomeGrid: ComponentType<HomeGridProps>;
   readonly MemberList: ComponentType<MemberListProps>;
   readonly Calendar: ComponentType<CalendarProps>;
   readonly GoalList: ComponentType<GoalListProps>;
@@ -174,8 +186,9 @@ export const DEFAULT_COMPONENTS: ConsoleComponents = {
   SignIn,
   TokenList,
   PeopleList,
+  TeamList,
   SkillList,
-  ProjectList,
+  HomeGrid,
   MemberList,
   Calendar,
   GoalList,
@@ -384,6 +397,21 @@ function holdsToken(data: ConsoleData): boolean {
   return data.me !== undefined && data.me.agent !== null;
 }
 
+/**
+ * The language to keep for a person the pages see for the first time (ADR-0065): the one their
+ * browser asks for, so that a plugin or an agent can write for them while they are away. Nothing
+ * for a person who has a language, for nobody, and where the pages only fall back on a language.
+ */
+export function languageToKeep(
+  me: RestMe | undefined,
+  browser: readonly string[],
+  packs: readonly LanguagePack[],
+): string | undefined {
+  return me?.person !== null && me?.person !== undefined && me.language === null
+    ? browserPack(browser, packs)?.tag
+    : undefined;
+}
+
 /**
  * The pages a console that holds a token does not offer: the tokens themselves, and the
  * approval of an agent's connection, which makes one; a person's own doing on the console's
@@ -413,21 +441,11 @@ function ProjectsPage(props: {
   readonly making: boolean;
 }) {
   const words = useWords().projects;
+  const homeWords = useWords().home;
   const { data, components, navigation, client, language } = props;
   const me = data.me;
-  /** The plugins' widgets at a place of this page (ADR-0054), for the person's roles. */
-  const widgets = (place: "home:top" | "home:bottom") =>
-    me === undefined ? null : (
-      <PluginWidgets
-        plugins={data.plugins}
-        place={place}
-        me={me}
-        language={language}
-        client={client}
-        navigation={navigation}
-        nameOf={(name) => pluginWordOf(name, language)}
-      />
-    );
+  // The person arranges the page (ADR-0061): the projects and the widgets, tiles on one grid.
+  const [arranging, setArranging] = useState(false);
   const { busy, error, act } = useAction();
   const href = (project: RestProject) => projectHref(project.key);
   // A project is made by an administrator (ADR-0045): a member sees the list alone, the form's
@@ -438,14 +456,22 @@ function ProjectsPage(props: {
     <>
       <div className="sc-page-head">
         <h1 className="sc-page-title">{words.title}</h1>
-        {administrator && !making && (
-          <LinkButton href={PATHS.newProject} variant="primary">
-            {words.newProject}
-          </LinkButton>
+        {!arranging && (
+          <div className="sc-page-actions">
+            {me !== undefined && me.person !== null && (
+              <Button size="sm" variant="ghost" onClick={() => setArranging(true)}>
+                {homeWords.edit}
+              </Button>
+            )}
+            {administrator && !making && (
+              <LinkButton href={PATHS.newProject} variant="primary">
+                {words.newProject}
+              </LinkButton>
+            )}
+          </div>
         )}
       </div>
       {error !== undefined && <Callout tone="danger">{error}</Callout>}
-      {widgets("home:top")}
       {making && (
         <section className="sc-panel sc-panel-form" aria-label={words.form.aria}>
           <ProjectForm
@@ -465,10 +491,30 @@ function ProjectsPage(props: {
           />
         </section>
       )}
-      <components.ProjectList
+      <components.HomeGrid
         projects={data.projects}
+        plugins={data.plugins}
+        home={me?.home}
+        editing={arranging}
+        onSave={(home) => data.actions.updateMe({ home })}
+        onDone={() => setArranging(false)}
         projectHref={href}
         onOpen={(project) => navigation.go(href(project))}
+        nameOf={(name) => pluginWordOf(name, language)}
+        renderWidget={(tile, size) =>
+          me === undefined ? null : (
+            <PluginFrame
+              plugin={tile.plugin}
+              widget={tile.widget.key}
+              size={size}
+              me={me}
+              language={language}
+              client={client}
+              navigation={navigation}
+              title={pluginWordOf(tile.widget.name, language)}
+            />
+          )
+        }
         empty={
           <EmptyState
             title={words.empty.title}
@@ -481,7 +527,6 @@ function ProjectsPage(props: {
           />
         }
       />
-      {widgets("home:bottom")}
     </>
   );
 }
@@ -516,7 +561,7 @@ function PluginPage(props: {
   return (
     <>
       {pages.length > 1 && (
-        <nav className="sc-subtabs" aria-label={pluginWordOf(plugin.name, language)}>
+        <nav className="sc-page-tabs" aria-label={pluginWordOf(plugin.name, language)}>
           {pages.map((candidate) => (
             <a
               key={candidate.key}
@@ -572,9 +617,9 @@ function PluginSettingsPage(props: {
       setDetail(await client.plugin(key).get());
       setFailure(undefined);
     } catch (error) {
-      setFailure(error instanceof ApiError ? error.message : words.common.somethingWentWrong);
+      setFailure(errorWords(error, words.common.somethingWentWrong, words));
     }
-  }, [client, key, words.common.somethingWentWrong]);
+  }, [client, key, words]);
   useEffect(() => {
     setDetail(undefined);
     void read();
@@ -611,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 () => {
@@ -2209,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;
@@ -2274,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();
     });
@@ -2303,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}
         />
@@ -2407,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} />;
   }
@@ -2455,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
@@ -2490,30 +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
-          }
-          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}
+          />
+        )}
       </>
     );
   }
@@ -2592,7 +2818,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
     const failure = signInFailureOf(location.search);
     const title = data.me?.workspace.name ?? fallbackTitle;
     const viaToken = holdsToken(data);
-    // The language: the person's choice, else the browser's, else the first the console speaks.
+    // The language: the person's own, else the browser's, else the first the console speaks.
     const chosen = data.me?.language;
     const pack = useMemo(
       () =>
@@ -2605,6 +2831,17 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
     );
     const words = pack.messages;
 
+    const toKeep = languageToKeep(
+      data.me,
+      typeof navigator === "undefined" ? [] : navigator.languages,
+      languages,
+    );
+    useEffect(() => {
+      if (toKeep !== undefined) {
+        void data.actions.updateMe({ language: toKeep }).catch(() => undefined);
+      }
+    }, [toKeep, data.actions]);
+
     // An address that moved is shown at its new one, in its place.
     useEffect(() => {
       if (route.name === "moved") {
@@ -2632,7 +2869,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 title={words.common.couldNotReach}
                 action={<Button onClick={data.reload}>{words.common.tryAgain}</Button>}
               >
-                {data.error}
+                {errorWords(data.failure, data.error, words)}
               </Callout>
             )}
           </div>
@@ -2663,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,
         },
         {
@@ -2672,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