@skillcdn/console 0.4.3 → 0.4.4

package/src/components/plugin-settings.tsx

@@ -20,6 +20,7 @@ import {
   Badge,
   Button,
   Callout,
+  cx,
   EmptyState,
   formatInstant,
   LinkButton,
@@ -110,6 +111,9 @@ export function PluginSettingsList(props: PluginSettingsListProps) {
             {pluginWord(plugin.name, props.language)}{" "}
             <span className="sc-muted">
               {plugin.key} {plugin.version}
+              {plugin.console !== null && plugin.console !== undefined && (
+                <> · {settings.consoleRange(plugin.console)}</>
+              )}
             </span>
           </a>
           <span className="sc-task-row-meta">
@@ -150,20 +154,28 @@ function toggled(set: ReadonlySet<string>, value: string, on: boolean): Readonly
 /** A row of a list to tick: the box, a name, a word under it. */
 function TickRow(props: {
   readonly checked: boolean;
-  readonly onChange: (checked: boolean) => void;
+  readonly onChange?: ((checked: boolean) => void) | undefined;
   readonly name: string;
   readonly under?: string | undefined;
+  /** A word beside the name: that this one is new, say. */
+  readonly tag?: string | undefined;
+  /** Whether it stays as it is: on, and not the person's to turn off. */
+  readonly locked?: boolean | undefined;
 }) {
   return (
     <li>
-      <label className="sc-plugin-tick">
+      <label className={cx("sc-plugin-tick", props.locked === true && "sc-plugin-tick-locked")}>
         <input
           type="checkbox"
           checked={props.checked}
-          onChange={(event) => props.onChange(event.target.checked)}
+          disabled={props.locked === true}
+          onChange={(event) => props.onChange?.(event.target.checked)}
         />
         <span className="sc-plugin-tick-words">
-          <span className="sc-plugin-tick-name">{props.name}</span>
+          <span className="sc-plugin-tick-name">
+            {props.name}
+            {props.tag !== undefined && <Badge tone="warning">{props.tag}</Badge>}
+          </span>
           {props.under !== undefined && props.under !== "" && (
             <span className="sc-plugin-tick-under">{props.under}</span>
           )}
@@ -178,12 +190,18 @@ function Overview(props: {
   readonly detail: RestPluginDetail;
   readonly projects: readonly RestProject[];
   readonly language: string;
+  readonly busy: boolean;
+  /** Called with what the plugin holds from now on, an optional capability turned on or off. */
+  readonly onConsent: (consent: readonly string[]) => void;
 }) {
   const words = useWords();
   const settings = words.plugins.settings;
   const { detail, language } = props;
   const enabled = detail.state === "enabled";
   const rows: { readonly key: string; readonly name: string; readonly value: ReactNode }[] = [];
+  if (detail.console !== null && detail.console !== undefined) {
+    rows.push({ key: "console", name: settings.console, value: <code>{detail.console}</code> });
+  }
   if (detail.board !== null) {
     rows.push({
       key: "board",
@@ -214,24 +232,66 @@ function Overview(props: {
   }
   if (enabled && detail.consent !== null) {
     const consent = detail.consent;
+    const optional = detail.optionalCapabilities ?? [];
+    const required = consent.filter((capability) => !optional.includes(capability));
     rows.push({
       key: "capabilities",
       name: settings.capabilities,
       value:
-        consent.length === 0 ? (
+        consent.length === 0 && optional.length === 0 ? (
           settings.nothing
         ) : (
-          <ul className="sc-plugin-held">
-            {consent.map((capability) => {
-              const text = capabilityText(words, capability);
-              return (
-                <li key={capability}>
-                  <span className="sc-plugin-tick-name">{text.name}</span>
-                  {text.opens !== "" && <span className="sc-plugin-tick-under"> {text.opens}</span>}
-                </li>
-              );
-            })}
-          </ul>
+          <>
+            {required.length > 0 && (
+              <ul className="sc-plugin-held">
+                {required.map((capability) => {
+                  const text = capabilityText(words, capability);
+                  return (
+                    <li key={capability}>
+                      <span className="sc-plugin-tick-name">{text.name}</span>
+                      {text.opens !== "" && (
+                        <span className="sc-plugin-tick-under"> {text.opens}</span>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+            {optional.length > 0 && (
+              <div className="sc-plugin-optional">
+                <span className="sc-field-label">{settings.optional}</span>
+                <ul className="sc-plugin-held">
+                  {optional.map((capability) => {
+                    const text = capabilityText(words, capability);
+                    return (
+                      <li key={capability}>
+                        <label className="sc-check">
+                          <input
+                            type="checkbox"
+                            checked={consent.includes(capability)}
+                            disabled={props.busy}
+                            onChange={(event) =>
+                              props.onConsent(
+                                event.target.checked
+                                  ? [...consent, capability]
+                                  : consent.filter((held) => held !== capability),
+                              )
+                            }
+                          />
+                          <span>
+                            <span className="sc-plugin-tick-name">{text.name}</span>
+                            {text.opens !== "" && (
+                              <span className="sc-plugin-tick-under"> {text.opens}</span>
+                            )}
+                          </span>
+                        </label>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            )}
+          </>
         ),
     });
   }
@@ -272,9 +332,214 @@ function Overview(props: {
   );
 }
 
+/** How many choices a list of an enum shows as pills before it becomes a column of boxes. */
+const PILLS_AT_MOST = 8;
+
+/** The control of one item of a list, as a text field: a number, a day, a time or words. */
+function itemInputType(of: string | null): "number" | "date" | "time" | "text" {
+  switch (of) {
+    case "number":
+      return "number";
+    case "day":
+      return "date";
+    case "time":
+      return "time";
+    default:
+      return "text";
+  }
+}
+
+/** The items of a list setting as the form holds them. */
+function itemsOf(value: unknown): readonly (string | number)[] {
+  return Array.isArray(value)
+    ? value.filter(
+        (item): item is string | number => typeof item === "string" || typeof item === "number",
+      )
+    : [];
+}
+
+/**
+ * A list of an enum: a pill per choice while they are few, lit while chosen, else a column of
+ * boxes; either way the value is the chosen values, in the options' order.
+ */
+function EnumListControl(props: {
+  readonly setting: RestPluginSetting;
+  readonly value: unknown;
+  readonly onChange: (value: unknown) => void;
+  readonly language: string;
+}) {
+  const options = props.setting.options ?? [];
+  const chosen = new Set(itemsOf(props.value).map(String));
+  const toggle = (option: string, on: boolean) => {
+    const next = options
+      .map((candidate) => candidate.value)
+      .filter((candidate) => (candidate === option ? on : chosen.has(candidate)));
+    props.onChange(next.length === 0 ? null : next);
+  };
+  const pills = options.length <= PILLS_AT_MOST;
+  const name = pluginWord(props.setting.name, props.language);
+  const choices = options.map((option) => (
+    <label key={option.value} className={pills ? "sc-toggle-chip" : "sc-check"}>
+      <input
+        type="checkbox"
+        checked={chosen.has(option.value)}
+        onChange={(event) => toggle(option.value, event.target.checked)}
+      />
+      {pluginWord(option.name, props.language)}
+    </label>
+  ));
+  return pills ? (
+    <fieldset className="sc-toggle-chips" aria-label={name}>
+      {choices}
+    </fieldset>
+  ) : (
+    <ul className="sc-check-list" aria-label={name}>
+      {choices.map((choice) => (
+        <li key={choice.key}>{choice}</li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * A list of people or of projects: each chosen one a chip with the way to take it out, and one
+ * choice to add another among those not chosen yet; the value is their ids.
+ */
+function RefListControl(props: {
+  readonly setting: RestPluginSetting;
+  readonly value: unknown;
+  readonly onChange: (value: unknown) => void;
+  readonly id: string;
+  readonly people: readonly RestPerson[];
+  readonly projects: readonly RestProject[];
+}) {
+  const words = useWords();
+  const chosen = itemsOf(props.value).map(String);
+  const candidates: readonly { readonly id: string; readonly label: string }[] =
+    props.setting.of === "person"
+      ? props.people
+          .filter((person) => person.status === "active" || chosen.includes(person.id))
+          .map((person) => ({ id: person.id, label: personChoice(person) }))
+      : props.projects.map((project) => ({
+          id: project.id,
+          label: `${project.name} (${project.key})`,
+        }));
+  const labelOf = (id: string) => candidates.find((candidate) => candidate.id === id)?.label ?? id;
+  const set = (next: readonly string[]) => props.onChange(next.length === 0 ? null : next);
+  const full = props.setting.max !== null && chosen.length >= props.setting.max;
+  return (
+    <div className="sc-chips">
+      {chosen.map((id) => (
+        <span key={id} className="sc-chip">
+          {labelOf(id)}
+          <button
+            type="button"
+            className="sc-chip-remove"
+            aria-label={`${words.common.remove}: ${labelOf(id)}`}
+            onClick={() => set(chosen.filter((kept) => kept !== id))}
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </span>
+      ))}
+      {!full && (
+        <select
+          id={props.id}
+          className="sc-input sc-chip-add"
+          value=""
+          onChange={(event) => {
+            if (event.target.value !== "") {
+              set([...chosen, event.target.value]);
+            }
+          }}
+        >
+          <option value="">{words.plugins.settings.choose}</option>
+          {candidates
+            .filter((candidate) => !chosen.includes(candidate.id))
+            .map((candidate) => (
+              <option key={candidate.id} value={candidate.id}>
+                {candidate.label}
+              </option>
+            ))}
+        </select>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A list of texts, numbers, days or times: each item a chip with the way to take it out, and a
+ * field that adds one on Enter or with the button; `min` and `max` bound how many.
+ */
+function ItemListControl(props: {
+  readonly setting: RestPluginSetting;
+  readonly value: unknown;
+  readonly onChange: (value: unknown) => void;
+  readonly id: string;
+}) {
+  const words = useWords();
+  const [draft, setDraft] = useState("");
+  const items = itemsOf(props.value);
+  const set = (next: readonly (string | number)[]) =>
+    props.onChange(next.length === 0 ? null : next);
+  const full = props.setting.max !== null && items.length >= props.setting.max;
+  const add = () => {
+    const word = draft.trim();
+    if (word.length === 0 || full) {
+      return;
+    }
+    const item = props.setting.of === "number" ? Number(word) : word;
+    if (typeof item === "number" && !Number.isFinite(item)) {
+      return;
+    }
+    set([...items, item]);
+    setDraft("");
+  };
+  return (
+    <div className="sc-chips">
+      {items.map((item, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: an item may be typed twice
+        <span key={`${index}-${String(item)}`} className="sc-chip">
+          {String(item)}
+          <button
+            type="button"
+            className="sc-chip-remove"
+            aria-label={`${words.common.remove}: ${String(item)}`}
+            onClick={() => set(items.filter((_, at) => at !== index))}
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </span>
+      ))}
+      {!full && (
+        <div className="sc-chip-input">
+          <input
+            id={props.id}
+            className="sc-input"
+            type={itemInputType(props.setting.of)}
+            value={draft}
+            placeholder={words.plugins.settings.itemPlaceholder}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                add();
+              }
+            }}
+          />
+          <Button type="button" size="sm" disabled={draft.trim().length === 0} onClick={add}>
+            {words.plugins.settings.addItem}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 /**
  * A setting's control, by its type: a person or a project is chosen among the workspace's, by
- * name, and held as its id; a secret has a row of its own below.
+ * name, and held as its id; a time of day is read in the workspace's time zone; a list has a
+ * control per kind of item; a secret has a row of its own below.
  */
 function SettingControl(props: {
   readonly setting: RestPluginSetting;
@@ -285,6 +550,7 @@ function SettingControl(props: {
   readonly people: readonly RestPerson[];
   readonly projects: readonly RestProject[];
 }) {
+  const words = useWords();
   const { setting, value, onChange, id } = props;
   const chosen = typeof value === "string" ? value : "";
   const choose = (event: { readonly target: { readonly value: string } }) =>
@@ -372,25 +638,43 @@ function SettingControl(props: {
           onChange={(event) => onChange(event.target.value === "" ? null : event.target.value)}
         />
       );
-    case "list":
+    case "time":
       return (
-        <input
-          id={id}
-          className="sc-input"
-          value={Array.isArray(value) ? value.join(", ") : ""}
-          onChange={(event) =>
-            onChange(
-              event.target.value.trim() === ""
-                ? null
-                : event.target.value
-                    .split(",")
-                    .map((item) => item.trim())
-                    .filter((item) => item.length > 0)
-                    .map((item) => (setting.of === "number" ? Number(item) : item)),
-            )
-          }
-        />
+        <>
+          <input
+            id={id}
+            className="sc-input"
+            type="time"
+            value={typeof value === "string" ? value : ""}
+            onChange={(event) => onChange(event.target.value === "" ? null : event.target.value)}
+          />
+          <p className="sc-settings-hint">{words.plugins.settings.timeZoneHint}</p>
+        </>
       );
+    case "list":
+      if (setting.of === "enum") {
+        return (
+          <EnumListControl
+            setting={setting}
+            value={value}
+            onChange={onChange}
+            language={props.language}
+          />
+        );
+      }
+      if (setting.of === "person" || setting.of === "project") {
+        return (
+          <RefListControl
+            setting={setting}
+            value={value}
+            onChange={onChange}
+            id={id}
+            people={props.people}
+            projects={props.projects}
+          />
+        );
+      }
+      return <ItemListControl setting={setting} value={value} onChange={onChange} id={id} />;
     default:
       return (
         <input
@@ -427,36 +711,57 @@ function SettingsForm(props: {
     event.preventDefault();
     props.onSave(values);
   };
+  /** A row per setting: the name and the hint on the left, the control on the right. */
+  const rows = (shown: readonly RestPluginSetting[]) =>
+    shown.map((setting) => (
+      <div key={setting.key} className="sc-settings-row">
+        <div className="sc-settings-words">
+          <label className="sc-settings-label" htmlFor={`${prefix}-${setting.key}`}>
+            {pluginWord(setting.name, props.language)}
+            {setting.required && " *"}
+          </label>
+          {setting.description !== null && (
+            <p className="sc-settings-hint">{pluginWord(setting.description, props.language)}</p>
+          )}
+        </div>
+        <div className="sc-settings-control">
+          <SettingControl
+            setting={setting}
+            value={values[setting.key]}
+            id={`${prefix}-${setting.key}`}
+            language={props.language}
+            people={props.people}
+            projects={props.projects}
+            onChange={(value) => setValues((current) => ({ ...current, [setting.key]: value }))}
+          />
+        </div>
+      </div>
+    ));
   return (
     <form
       className="sc-form sc-settings-form"
       onSubmit={submit}
       aria-label={words.plugins.settings.settingsForm}
     >
-      {settings.map((setting) => (
-        <div key={setting.key} className="sc-settings-row">
-          <div className="sc-settings-words">
-            <label className="sc-settings-label" htmlFor={`${prefix}-${setting.key}`}>
-              {pluginWord(setting.name, props.language)}
-              {setting.required && " *"}
-            </label>
-            {setting.description !== null && (
-              <p className="sc-settings-hint">{pluginWord(setting.description, props.language)}</p>
-            )}
-          </div>
-          <div className="sc-settings-control">
-            <SettingControl
-              setting={setting}
-              value={values[setting.key]}
-              id={`${prefix}-${setting.key}`}
-              language={props.language}
-              people={props.people}
-              projects={props.projects}
-              onChange={(value) => setValues((current) => ({ ...current, [setting.key]: value }))}
-            />
-          </div>
-        </div>
-      ))}
+      {rows(settings.filter((setting) => setting.group === null || setting.group === undefined))}
+      {(props.detail.settingGroups ?? []).map((group) => {
+        const grouped = settings.filter((setting) => setting.group === group.key);
+        if (grouped.length === 0) {
+          return null;
+        }
+        const description = pluginWord(group.description, props.language);
+        return (
+          <section
+            key={group.key}
+            className="sc-settings-group"
+            aria-label={pluginWord(group.name, props.language)}
+          >
+            <h3 className="sc-settings-group-title">{pluginWord(group.name, props.language)}</h3>
+            {description !== "" && <p className="sc-settings-hint">{description}</p>}
+            {rows(grouped)}
+          </section>
+        );
+      })}
       <div className="sc-form-actions">
         <Button type="submit" variant="primary" disabled={props.busy}>
           {words.common.save}
@@ -527,8 +832,9 @@ function SecretRow(props: {
 }
 
 /**
- * Enabling: the capabilities to consent to, one by one, those consented to before ticked
- * already; the board project, the one it had chosen already; the projects, as they were.
+ * Enabling: the capabilities the plugin requires, on and not the administrator's to turn off, and
+ * those it can go without, off until chosen, those consented to before on already (ADR-0060); the
+ * board project, the one it had chosen already; the projects, as they were.
  */
 function EnableForm(props: {
   readonly detail: RestPluginDetail;
@@ -540,12 +846,15 @@ function EnableForm(props: {
   const words = useWords();
   const settings = words.plugins.settings;
   const { detail, language } = props;
+  const optional = detail.optionalCapabilities ?? [];
   const [consented, setConsented] = useState<ReadonlySet<string>>(
-    () =>
-      new Set(
-        (detail.consent ?? []).filter((capability) => detail.capabilities.includes(capability)),
-      ),
+    () => new Set((detail.consent ?? []).filter((capability) => optional.includes(capability))),
   );
+  /** A capability a new version asks and nobody has consented to yet is said to be new. */
+  const tagOf = (capability: string): string | undefined =>
+    detail.state === "needs_consent" && !(detail.consent ?? []).includes(capability)
+      ? settings.newCapability
+      : undefined;
   const needsBoard = detail.boardNeeds !== "none";
   const [boardMode, setBoardMode] = useState<"none" | "create" | "choose">(
     detail.boardNeeds === "none"
@@ -566,7 +875,6 @@ function EnableForm(props: {
     () => new Set(Array.isArray(before) ? before : []),
   );
   const ids = { key: useId(), name: useId(), description: useId(), choose: useId() };
-  const everyCapability = detail.capabilities.every((capability) => consented.has(capability));
   const boardReady =
     boardMode === "none"
       ? detail.boardNeeds !== "required"
@@ -576,7 +884,7 @@ function EnableForm(props: {
   const submit = (event: FormEvent) => {
     event.preventDefault();
     props.onEnable({
-      consent: [...consented],
+      consent: [...detail.capabilities, ...consented],
       board:
         boardMode === "none"
           ? null
@@ -588,23 +896,54 @@ function EnableForm(props: {
   };
   return (
     <form className="sc-form sc-plugin-enable" onSubmit={submit} aria-label={settings.enable}>
-      {detail.capabilities.length > 0 && (
+      {detail.capabilities.length + optional.length > 0 && (
         <div className="sc-plugin-group">
           <h3 className="sc-plugin-group-title">{settings.capabilities}</h3>
-          <ul className="sc-plugin-ticks">
-            {detail.capabilities.map((capability) => {
-              const text = capabilityText(words, capability);
-              return (
-                <TickRow
-                  key={capability}
-                  checked={consented.has(capability)}
-                  onChange={(on) => setConsented((current) => toggled(current, capability, on))}
-                  name={text.name}
-                  under={text.opens}
-                />
-              );
-            })}
-          </ul>
+          {detail.capabilities.length > 0 && (
+            <div className="sc-plugin-capabilities">
+              <p className="sc-plugin-capabilities-head">
+                <span className="sc-plugin-capabilities-name">{settings.required}</span>
+                <span className="sc-settings-hint">{settings.requiredHint}</span>
+              </p>
+              <ul className="sc-plugin-ticks">
+                {detail.capabilities.map((capability) => {
+                  const text = capabilityText(words, capability);
+                  return (
+                    <TickRow
+                      key={capability}
+                      checked
+                      locked
+                      name={text.name}
+                      under={text.opens}
+                      tag={tagOf(capability)}
+                    />
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+          {optional.length > 0 && (
+            <div className="sc-plugin-capabilities">
+              <p className="sc-plugin-capabilities-head">
+                <span className="sc-plugin-capabilities-name">{settings.optional}</span>
+                <span className="sc-settings-hint">{settings.optionalHint}</span>
+              </p>
+              <ul className="sc-plugin-ticks">
+                {optional.map((capability) => {
+                  const text = capabilityText(words, capability);
+                  return (
+                    <TickRow
+                      key={capability}
+                      checked={consented.has(capability)}
+                      onChange={(on) => setConsented((current) => toggled(current, capability, on))}
+                      name={text.name}
+                      under={text.opens}
+                    />
+                  );
+                })}
+              </ul>
+            </div>
+          )}
         </div>
       )}
       {needsBoard && (
@@ -740,11 +1079,7 @@ function EnableForm(props: {
       </div>
       <div className="sc-plugin-group">
         <div className="sc-form-actions">
-          <Button
-            type="submit"
-            variant="primary"
-            disabled={props.busy || !everyCapability || !boardReady}
-          >
+          <Button type="submit" variant="primary" disabled={props.busy || !boardReady}>
             {settings.enable}
           </Button>
         </div>
@@ -995,7 +1330,13 @@ export function PluginSettingsView(props: PluginSettingsViewProps) {
           </ul>
         </Callout>
       )}
-      <Overview detail={detail} projects={props.projects} language={language} />
+      <Overview
+        detail={detail}
+        projects={props.projects}
+        language={language}
+        busy={busy}
+        onConsent={(consent) => change(() => plugin.updateConsent(consent))}
+      />
       {canEnable && (
         <section className="sc-panel sc-panel-form" aria-label={settings.enable}>
           <h2 className="sc-section-title">{settings.enable}</h2>