@skillcdn/console 0.3.0 → 0.3.1

package/src/components/projects.tsx

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

package/src/components/work.tsx

@@ -1,4 +1,4 @@
-import type { RestTask, RestWork } from "../api.js";
+import type { RestTask, RestWork, WeekStart } from "../api.js";
 import { addDays, today as todayOf } from "../dates.js";
 import { useWords } from "../i18n/index.js";
 import { Week } from "./calendar.js";
@@ -28,6 +28,8 @@ export interface WorkListProps {
   readonly decisionHref: (projectKey: string, decisionId: string) => string;
   /** Where the page is with the week of a day at the top. */
   readonly weekHref: (day: string) => string;
+  /** The day the week begins on, as the workspace says (ADR-0035); the language's when left out. */
+  readonly weekStart?: WeekStart | undefined;
 }
 
 export function WorkList(props: WorkListProps) {
@@ -70,6 +72,7 @@ export function WorkList(props: WorkListProps) {
         taskHref={hrefOf}
         weekHref={props.weekHref}
         markOf={markOf}
+        weekStart={props.weekStart}
       />
       <div className="sc-work-lists">
         {groups

package/src/components/workspace.tsx

@@ -0,0 +1,298 @@
+import { type FormEvent, useId, useMemo, useState } from "react";
+import {
+  PEOPLE_VISIBILITIES,
+  type PeopleVisibility,
+  type RestWorkspace,
+  type RestWorkspacePatch,
+  WEEK_STARTS,
+  type WeekStart,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Button } from "./ui.js";
+
+// The workspace's own settings (ADR-0035), as an administrator keeps them on the Settings page:
+// read by everyone, so that a member knows what the board shows them; changed on a form of
+// their own, each setting a row with its words beside its control. Takes its data as props and
+// nothing from the network.
+
+/** What a workspace is set to until an administrator says otherwise, for a console that answers no setting. */
+export const DEFAULT_PEOPLE_VISIBILITY: PeopleVisibility = "everyone";
+
+/** Who sees whom, as the workspace says, or as a console older than the setting would have it. */
+export function peopleVisibilityOf(workspace: RestWorkspace | undefined): PeopleVisibility {
+  return workspace?.peopleVisibility ?? DEFAULT_PEOPLE_VISIBILITY;
+}
+
+/** The day the calendars begin a week on, as the workspace says, or the system default. */
+export function weekStartOf(workspace: RestWorkspace | undefined): WeekStart {
+  return workspace?.weekStart ?? "auto";
+}
+
+/** The workspace's time zone, or none. */
+export function timeZoneOf(workspace: RestWorkspace | undefined): string | undefined {
+  return workspace?.timeZone ?? undefined;
+}
+
+/** The zones this browser knows, for the picker to offer; none where it cannot say. */
+export function knownTimeZones(): readonly string[] {
+  try {
+    const intl = Intl as typeof Intl & {
+      readonly supportedValuesOf?: (key: "timeZone") => string[];
+    };
+    return intl.supportedValuesOf?.("timeZone") ?? [];
+  } catch {
+    return [];
+  }
+}
+
+/** The zone this device keeps time in, as the browser says; none where it cannot say. */
+export function deviceTimeZone(): string | undefined {
+  try {
+    const zone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return zone === undefined || zone === "" ? undefined : zone;
+  } catch {
+    return undefined;
+  }
+}
+
+/** A zone's offset from UTC at a moment, as `UTC+09:00`; none where the browser cannot say. */
+export function offsetOf(zone: string, at: Date): string | undefined {
+  try {
+    const name = new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: "longOffset" })
+      .formatToParts(at)
+      .find((part) => part.type === "timeZoneName")?.value;
+    if (name === undefined) {
+      return undefined;
+    }
+    return name === "GMT" ? "UTC+00:00" : name.replace(/^GMT/, "UTC");
+  } catch {
+    return undefined;
+  }
+}
+
+export interface TimeZoneOption {
+  readonly name: string;
+  /** The offset now, for the person to tell zones apart by; none where the browser cannot say. */
+  readonly offset: string | undefined;
+}
+
+export interface TimeZoneGroup {
+  /** The area before the slash, `Asia` of `Asia/Seoul`; empty for a zone with none, such as `UTC`. */
+  readonly area: string;
+  readonly zones: readonly TimeZoneOption[];
+}
+
+/**
+ * Zones for a picker: by their area, the areas in order, each zone with its offset at `at`; the
+ * zones with no area first, since `UTC` is one. `extra` zones the browser does not list, the one
+ * set and the device's, are offered too, so that the picker always shows what is chosen.
+ */
+export function timeZoneGroups(
+  zones: readonly string[],
+  at: Date,
+  extra: readonly (string | undefined)[] = [],
+): TimeZoneGroup[] {
+  const names = new Set(zones);
+  for (const name of extra) {
+    if (name !== undefined && name !== "") {
+      names.add(name);
+    }
+  }
+  const groups = new Map<string, TimeZoneOption[]>();
+  for (const name of [...names].sort((a, b) => a.localeCompare(b, "en"))) {
+    const slash = name.indexOf("/");
+    const area = slash < 0 ? "" : name.slice(0, slash);
+    const list = groups.get(area) ?? [];
+    list.push({ name, offset: offsetOf(name, at) });
+    groups.set(area, list);
+  }
+  return [...groups.entries()]
+    .sort(([a], [b]) => (a === "" ? -1 : b === "" ? 1 : a.localeCompare(b, "en")))
+    .map(([area, options]) => ({ area, zones: options }));
+}
+
+/** A zone as the picker shows it: its name, and its offset where known. */
+const labelOf = (zone: TimeZoneOption): string =>
+  zone.offset === undefined ? zone.name : `${zone.name} (${zone.offset})`;
+
+export interface WorkspaceSettingsViewProps {
+  readonly workspace: RestWorkspace;
+}
+
+/** The settings as they stand, one row each; where they are changed is the page's business. */
+export function WorkspaceSettingsView(props: WorkspaceSettingsViewProps) {
+  const words = useWords();
+  const settings = words.settings.workspace;
+  const zone = timeZoneOf(props.workspace);
+  const device = deviceTimeZone();
+  const offset = zone === undefined ? undefined : offsetOf(zone, new Date());
+  return (
+    <dl className="sc-settings-list">
+      <div className="sc-settings-item">
+        <dt>{settings.peopleVisibility}</dt>
+        <dd>{words.vocabulary.peopleVisibility[peopleVisibilityOf(props.workspace)]}</dd>
+      </div>
+      <div className="sc-settings-item">
+        <dt>{settings.weekStart}</dt>
+        <dd>{words.vocabulary.weekStart[weekStartOf(props.workspace)]}</dd>
+      </div>
+      <div className="sc-settings-item">
+        <dt>{settings.timeZone}</dt>
+        <dd>
+          {zone === undefined ? (
+            settings.timeZoneNone
+          ) : (
+            <>
+              {zone}
+              {offset !== undefined && <span className="sc-muted"> ({offset})</span>}
+            </>
+          )}
+          {device !== undefined && device !== zone && (
+            <span className="sc-settings-note">{settings.timeZoneDevice(device)}</span>
+          )}
+        </dd>
+      </div>
+    </dl>
+  );
+}
+
+export interface WorkspaceSettingsFormProps {
+  readonly workspace: RestWorkspace;
+  readonly busy?: boolean | undefined;
+  /** Called with what changed; nothing is sent when nothing did. */
+  readonly onSubmit: (patch: RestWorkspacePatch) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+/** Where an administrator changes the workspace's settings (ADR-0035). */
+export function WorkspaceSettingsForm(props: WorkspaceSettingsFormProps) {
+  const words = useWords();
+  const settings = words.settings.workspace;
+  const ids = { people: useId(), week: useId(), zone: useId() };
+  const current = {
+    peopleVisibility: peopleVisibilityOf(props.workspace),
+    weekStart: weekStartOf(props.workspace),
+    timeZone: timeZoneOf(props.workspace) ?? "",
+  };
+  const [peopleVisibility, setPeopleVisibility] = useState<PeopleVisibility>(
+    current.peopleVisibility,
+  );
+  const [weekStart, setWeekStart] = useState<WeekStart>(current.weekStart);
+  const [timeZone, setTimeZone] = useState(current.timeZone);
+  const device = useMemo(deviceTimeZone, []);
+  // UTC is offered whatever the browser lists, beside the zone set and the device's.
+  const groups = useMemo(
+    () => timeZoneGroups(knownTimeZones(), new Date(), ["UTC", current.timeZone, device]),
+    [current.timeZone, device],
+  );
+  const patch: RestWorkspacePatch = {
+    ...(peopleVisibility === current.peopleVisibility ? {} : { peopleVisibility }),
+    ...(weekStart === current.weekStart ? {} : { weekStart }),
+    ...(timeZone === current.timeZone ? {} : { timeZone: timeZone === "" ? null : timeZone }),
+  };
+  const changed = Object.keys(patch).length > 0;
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (changed) {
+      props.onSubmit(patch);
+    }
+  };
+  return (
+    <form className="sc-form sc-settings-form" aria-label={settings.aria} onSubmit={submit}>
+      <div className="sc-settings-row">
+        <div className="sc-settings-words">
+          <label className="sc-settings-label" htmlFor={ids.people}>
+            {settings.peopleVisibility}
+          </label>
+          <p className="sc-settings-hint">{settings.peopleVisibilityHint}</p>
+        </div>
+        <div className="sc-settings-control">
+          <select
+            id={ids.people}
+            className="sc-input"
+            value={peopleVisibility}
+            onChange={(event) => setPeopleVisibility(event.target.value as PeopleVisibility)}
+          >
+            {PEOPLE_VISIBILITIES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.peopleVisibility[candidate]}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="sc-settings-row">
+        <div className="sc-settings-words">
+          <label className="sc-settings-label" htmlFor={ids.week}>
+            {settings.weekStart}
+          </label>
+          <p className="sc-settings-hint">{settings.weekStartHint}</p>
+        </div>
+        <div className="sc-settings-control">
+          <select
+            id={ids.week}
+            className="sc-input"
+            value={weekStart}
+            onChange={(event) => setWeekStart(event.target.value as WeekStart)}
+          >
+            {WEEK_STARTS.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.weekStart[candidate]}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="sc-settings-row">
+        <div className="sc-settings-words">
+          <label className="sc-settings-label" htmlFor={ids.zone}>
+            {settings.timeZone}
+          </label>
+          <p className="sc-settings-hint">{settings.timeZoneHint}</p>
+        </div>
+        <div className="sc-settings-control">
+          <select
+            id={ids.zone}
+            className="sc-input"
+            value={timeZone}
+            onChange={(event) => setTimeZone(event.target.value)}
+          >
+            <option value="">{settings.timeZoneNone}</option>
+            {groups.map((group) =>
+              group.area === "" ? (
+                group.zones.map((zone) => (
+                  <option key={zone.name} value={zone.name}>
+                    {labelOf(zone)}
+                  </option>
+                ))
+              ) : (
+                <optgroup key={group.area} label={group.area}>
+                  {group.zones.map((zone) => (
+                    <option key={zone.name} value={zone.name}>
+                      {labelOf(zone)}
+                    </option>
+                  ))}
+                </optgroup>
+              ),
+            )}
+          </select>
+          {device !== undefined && device !== timeZone && (
+            <Button variant="ghost" size="sm" onClick={() => setTimeZone(device)}>
+              {settings.timeZoneUseDevice(device)}
+            </Button>
+          )}
+        </div>
+      </div>
+      <div className="sc-form-actions">
+        <Button type="submit" variant="primary" disabled={props.busy === true || !changed}>
+          {settings.save}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button type="button" variant="ghost" onClick={props.onCancel}>
+            {words.common.cancel}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}