@skillcdn/console 0.4.1 → 0.4.3

package/src/components/decision-form.tsx

@@ -1,6 +1,7 @@
-import { type FormEvent, useMemo, useState } from "react";
+import { type ClipboardEvent, type FormEvent, useMemo, useState } from "react";
 import {
   MAX_BODY_LENGTH,
+  MAX_FILES_PER_DECISION,
   MAX_OPTION_LABEL_LENGTH,
   MAX_OPTIONS,
   MAX_QUESTION_LENGTH,
@@ -10,14 +11,17 @@ import {
   type RestTask,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { isPicture, placing, unusedName } from "./files.js";
 import { Picker, type PickerSearch } from "./picker.js";
 import { type TaskSearch, taskLabel } from "./task-form.js";
-import { Button, PersonChip, personName } from "./ui.js";
+import { Button, formatBytes, PersonChip, personName } from "./ui.js";
 
 // Raising a decision: the question, what a person needs to know, the options to choose from,
 // and who is to answer (ADR-0042): the person raising it, unless they name another of the
 // project. The task it is about is the page's, when raised from a task; otherwise it is found
-// by searching the board a page at a time (ADR-0037), never picked from the board whole.
+// by searching the board a page at a time (ADR-0037), never picked from the board whole. The
+// files put on the decision (ADR-0055) are chosen or pasted here, a pasted picture placed in
+// the context where pictures are read, as a comment's are.
 
 export interface DecisionFormProps {
   /** The task it is about from the start, when raised from a task's page; the field is not shown then. */
@@ -30,7 +34,8 @@ export interface DecisionFormProps {
   readonly me?: RestPerson | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
-  readonly onSubmit: (input: RestDecisionInput) => void;
+  /** Called with the decision as the API takes it, and the files put on it (ADR-0055), none when none were chosen. */
+  readonly onSubmit: (input: RestDecisionInput, files: readonly File[]) => void;
   readonly onCancel?: (() => void) | undefined;
 }
 
@@ -59,20 +64,61 @@ export function DecisionForm(props: DecisionFormProps) {
   const [about, setAbout] = useState<RestTask | undefined>(undefined);
   const [options, setOptions] = useState<readonly string[]>(["", ""]);
   const [decider, setDecider] = useState<RestPerson | undefined>(props.me);
+  const [files, setFiles] = useState<readonly File[]>([]);
   const findDeciders = useMemo(() => peopleSearch(props.deciders ?? []), [props.deciders]);
 
   const labels = options.map((option) => option.trim()).filter((option) => option.length > 0);
   const ready = question.trim().length > 0 && labels.length >= MIN_OPTIONS;
 
+  const add = (chosen: readonly File[]): File[] => {
+    const added: File[] = [];
+    let held = files;
+    for (const file of chosen) {
+      if (held.length >= MAX_FILES_PER_DECISION) {
+        break;
+      }
+      const name = unusedName(
+        file.name,
+        held.map((kept) => kept.name),
+      );
+      const kept = name === file.name ? file : new File([file], name, { type: file.type });
+      held = [...held, kept];
+      added.push(kept);
+    }
+    setFiles(held);
+    return added;
+  };
+
+  // A picture pasted into the context goes with the decision, placed where pictures are read.
+  const paste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const pasted = [...event.clipboardData.files].filter((file) => isPicture(file.type));
+    if (pasted.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    const added = add(pasted);
+    if (added.length > 0) {
+      setBody((current) =>
+        placing(
+          current,
+          added.map((file) => file.name),
+        ),
+      );
+    }
+  };
+
   const submit = (event: FormEvent) => {
     event.preventDefault();
-    props.onSubmit({
-      question: question.trim(),
-      body,
-      options: labels.map((label) => ({ label })),
-      taskId: props.taskId ?? about?.id ?? null,
-      ...(decider === undefined || decider.id === props.me?.id ? {} : { deciderId: decider.id }),
-    });
+    props.onSubmit(
+      {
+        question: question.trim(),
+        body,
+        options: labels.map((label) => ({ label })),
+        taskId: props.taskId ?? about?.id ?? null,
+        ...(decider === undefined || decider.id === props.me?.id ? {} : { deciderId: decider.id }),
+      },
+      files,
+    );
   };
 
   return (
@@ -96,8 +142,43 @@ export function DecisionForm(props: DecisionFormProps) {
           rows={4}
           placeholder={form.contextPlaceholder}
           onChange={(event) => setBody(event.target.value)}
+          onPaste={paste}
         />
       </label>
+      <div className="sc-field">
+        <span className="sc-field-label">{form.files}</span>
+        {files.length > 0 && (
+          <ul className="sc-chosen-files" aria-label={form.files}>
+            {files.map((file) => (
+              <li key={file.name} className="sc-chosen-file">
+                <span>{file.name}</span> <span className="sc-muted">{formatBytes(file.size)}</span>{" "}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  aria-label={form.removeFile(file.name)}
+                  onClick={() => setFiles((current) => current.filter((held) => held !== file))}
+                >
+                  ×
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+        <label className="sc-button sc-button-ghost sc-button-sm sc-file-choice">
+          {form.chooseFiles}
+          <input
+            className="sc-file-input"
+            type="file"
+            multiple
+            disabled={props.busy === true || files.length >= MAX_FILES_PER_DECISION}
+            onChange={(event) => {
+              add([...(event.target.files ?? [])]);
+              event.target.value = "";
+            }}
+          />
+        </label>
+        <p className="sc-field-hint">{form.filesHint}</p>
+      </div>
       {props.taskId === undefined && props.findTasks !== undefined && (
         <div className="sc-field">
           <span className="sc-field-label">{form.about}</span>

package/src/components/decision-list.tsx

@@ -6,13 +6,16 @@ import {
   MAX_OPTION_LABEL_LENGTH,
   type RestAnswerInput,
   type RestDecision,
+  type RestDecisionFile,
   type RestDecisionPatch,
   type RestTask,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { isPicture, namedFile, placed } from "./files.js";
 import { Markdown } from "./markdown.js";
 import { Pager, pageOf, RECORD_PAGE_SIZE } from "./paged.js";
-import { Badge, Button, cx, PersonChip, personName, Time } from "./ui.js";
+import { Lightbox, PictureThumb, usePicture } from "./pictures.js";
+import { Badge, Button, cx, formatBytes, PersonChip, personName, Time } from "./ui.js";
 
 // The decisions: the ones that wait, each a card with the way to answer it, since they are what
 // a person came for; and the ones answered, the record, a row each, since they are read back
@@ -31,6 +34,8 @@ export interface DecisionCardProps {
   readonly href?: string | undefined;
   /** The project the decision is in, named where a page shows the decisions of several. */
   readonly project?: React.ReactNode;
+  /** Where a file put on the decision is read, by its id (ADR-0055); left out, the files are named and not linked. */
+  readonly fileHref?: ((fileId: string) => string) | undefined;
   /** Called with the person's answer. Left out, a waiting decision cannot be answered here. */
   readonly onAnswer?: ((decision: RestDecision, input: RestAnswerInput) => void) | undefined;
   /** Called to grow the record, with what followed. Left out, it cannot be written here. */
@@ -255,6 +260,20 @@ export function DecisionCard(props: DecisionCardProps) {
   const words = useWords();
   const { decision, task } = props;
   const answered = decision.answer !== null;
+  // The files put on the decision (ADR-0055): a picture the context names by its file name is
+  // shown where the text puts it; the rest follow the context, pictures in place and
+  // everything else as a link.
+  const files = decision.files ?? [];
+  const pictures = usePicture();
+  const hrefOf = (file: RestDecisionFile) => props.fileHref?.(file.id);
+  const named = (source: string): string | undefined => {
+    const name = namedFile(source);
+    const file = files.find(
+      (candidate) => candidate.file.name === name && isPicture(candidate.file.contentType),
+    );
+    return file === undefined ? undefined : hrefOf(file);
+  };
+  const following = files.filter((file) => !placed(decision.body, file.file.name));
 
   return (
     <article id={decision.id} className={cx("sc-decision", answered && "sc-decision-answered")}>
@@ -289,7 +308,53 @@ export function DecisionCard(props: DecisionCardProps) {
       {decision.body.length > 0 && (
         <section className="sc-decision-section" aria-label={words.decisions.context}>
           <h4 className="sc-decision-label">{words.decisions.context}</h4>
-          <Markdown source={decision.body} docHref={props.docHref} />
+          <Markdown
+            source={decision.body}
+            docHref={props.docHref}
+            fileSrc={named}
+            onOpenPicture={pictures.open}
+          />
+        </section>
+      )}
+      {following.length > 0 && (
+        <section className="sc-decision-section" aria-label={words.decisions.files}>
+          <h4 className="sc-decision-label">{words.decisions.files}</h4>
+          <ul className="sc-decision-files">
+            {following.map((attached) => {
+              const href = hrefOf(attached);
+              const { file } = attached;
+              if (href !== undefined && isPicture(file.contentType)) {
+                return (
+                  <li key={attached.id} className="sc-decision-picture">
+                    <PictureThumb
+                      picture={{
+                        src: href,
+                        alt: words.decisions.picture(file.name),
+                        name: file.name,
+                        size: file.size,
+                      }}
+                      onOpen={pictures.open}
+                    />
+                    <span className="sc-muted">
+                      {file.name}, {formatBytes(file.size)}
+                    </span>
+                  </li>
+                );
+              }
+              return (
+                <li key={attached.id}>
+                  {href === undefined ? (
+                    <span>{file.name}</span>
+                  ) : (
+                    <a href={href} rel="nofollow ugc">
+                      {file.name}
+                    </a>
+                  )}{" "}
+                  <span className="sc-muted">{formatBytes(file.size)}</span>
+                </li>
+              );
+            })}
+          </ul>
         </section>
       )}
       {decision.answer !== null ? (
@@ -322,6 +387,7 @@ export function DecisionCard(props: DecisionCardProps) {
           busy={props.busy}
         />
       )}
+      <Lightbox picture={pictures.shown} onClose={pictures.close} />
     </article>
   );
 }
@@ -332,6 +398,8 @@ export interface DecisionListProps {
   readonly tasks: ReadonlyMap<string, RestTask>;
   readonly taskHref?: ((task: RestTask) => string) | undefined;
   readonly docHref?: ((path: string) => string) | undefined;
+  /** Where a file put on a decision is read, by its id (ADR-0055). */
+  readonly fileHref?: ((fileId: string) => string) | undefined;
   /** Where each decision's own page is. */
   readonly decisionHref?: ((decision: RestDecision) => string) | undefined;
   /** The page of the record shown, from 1, and where each page is (ADR-0010); left out, the record turns its pages in place. */
@@ -465,6 +533,7 @@ export function DecisionList(props: DecisionListProps) {
       task={decision.taskId === null ? undefined : props.tasks.get(decision.taskId)}
       taskHref={props.taskHref}
       docHref={props.docHref}
+      fileHref={props.fileHref}
       href={props.decisionHref?.(decision)}
       onAnswer={props.onAnswer}
       onUpdate={props.onUpdate}

package/src/components/event-feed.tsx

@@ -10,8 +10,15 @@ import { formatInstant, PersonChip } from "./ui.js";
 // as which agent when through one, and what. It takes its data as props and nothing from the
 // network; the sentence is the language's (ADR-0012).
 
-/** What an event says, without its actor: the words after the name, in the words given. */
+/** What an event says, without its actor: the words after the name, in the words given; a board's event a plugin caused says so (ADR-0052). */
 export function describeEvent(event: RestEvent, words: Messages = en): string {
+  const sentence = sentenceOf(event, words);
+  return event.plugin !== null && !event.kind.startsWith("plugin.")
+    ? `${sentence} ${words.feed.throughPlugin(event.plugin)}`
+    : sentence;
+}
+
+function sentenceOf(event: RestEvent, words: Messages): string {
   const { data } = event;
   const { feed, vocabulary } = words;
   const task =
@@ -34,6 +41,15 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
   const question = data.question ?? feed.aQuestion;
   const goal = data.title ?? feed.aGoal;
   const category = data.name ?? data.key ?? feed.aCategory;
+  const plugin = event.plugin ?? feed.aPlugin;
+  const grantee =
+    data.everyone === true
+      ? feed.everyone
+      : data.login !== undefined
+        ? data.login
+        : data.key !== undefined
+          ? feed.membersOf(data.name ?? data.key)
+          : feed.someone;
   switch (event.kind) {
     case "person.joined":
       return feed.event.personJoined();
@@ -115,6 +131,31 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.documentRestored(page);
     case "document.file_attached":
       return feed.event.fileAttached(data.label ?? feed.aFile, page);
+    case "plugin.enabled":
+      return feed.event.pluginEnabled(plugin);
+    case "plugin.disabled":
+      return feed.event.pluginDisabled(plugin);
+    case "plugin.configured":
+      return feed.event.pluginConfigured(fields, plugin);
+    case "plugin.granted":
+      return feed.event.pluginGranted(data.role ?? feed.role.other, grantee, plugin);
+    case "plugin.revoked":
+      return feed.event.pluginRevoked(data.role ?? feed.role.other, grantee, plugin);
+    case "plugin.upgraded":
+      return feed.event.pluginUpgraded(
+        plugin,
+        data.version === undefined ? feed.something : String(data.version),
+      );
+    case "plugin.command":
+      return feed.event.pluginCommand(
+        data.command ?? feed.something,
+        plugin,
+        feed.outcome[data.outcome ?? ""] ?? data.outcome ?? feed.something,
+      );
+    case "plugin.purged":
+      return feed.event.pluginPurged(plugin);
+    case "plugin.failed":
+      return feed.event.pluginFailed(plugin, data.problem ?? feed.something);
   }
 }
 

package/src/components/my-decisions.tsx

@@ -27,6 +27,8 @@ export interface MyDecisionsProps {
   /** The decisions the person asked of someone else: waiting and answered. */
   readonly raised: DecisionsPage;
   readonly decisionHref: (projectKey: string, decisionId: string) => string;
+  /** Where a file put on a decision is read, by its project's key and its id (ADR-0055). */
+  readonly fileHref?: ((projectKey: string, fileId: string) => string) | undefined;
   /** Called with the person's answer on a decision of theirs, in its project. Left out, a waiting decision is answered on its own page. */
   readonly onAnswer?:
     | ((projectKey: string, decision: RestDecision, input: RestAnswerInput) => void)
@@ -67,7 +69,7 @@ function More(props: {
 export function MyDecisions(props: MyDecisionsProps) {
   const words = useWords();
   const own = words.myDecisions;
-  const { onAnswer } = props;
+  const { onAnswer, fileHref } = props;
   const waiting = props.addressed.items.filter(({ decision }) => decision.answer === null);
   const asked = props.raised.items.filter(({ decision }) => decision.answer === null);
   const record = [...props.addressed.items, ...props.raised.items]
@@ -80,6 +82,7 @@ export function MyDecisions(props: MyDecisionsProps) {
       decision={item.decision}
       href={props.decisionHref(item.project.key, item.decision.id)}
       project={<InProject project={item.project} />}
+      fileHref={fileHref === undefined ? undefined : (fileId) => fileHref(item.project.key, fileId)}
       onAnswer={
         answerable && onAnswer !== undefined
           ? (decision, input) => onAnswer(item.project.key, decision, input)