@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/details.tsx

@@ -0,0 +1,395 @@
+import { useState, type KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { Details, FieldDef, FieldValue, Settings, Thread } from "./client.js";
+import * as Icon from "./icons.js";
+
+import { detailsEnabled } from "./details-model.js";
+import { REPORT_KINDS, type ReportKind } from "./kind-model.js";
+
+export { detailsEnabled, detailsPayload, hasFieldValues, noDetails } from "./details-model.js";
+
+function fieldId(label: string, taken: FieldDef[]) {
+  const base =
+    label
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 32) || "field";
+  let id = base;
+  for (let n = 2; taken.some((field) => field.id === id); n += 1) id = `${base}-${n}`;
+  return id;
+}
+
+export function DetailsInput({
+  settings,
+  value,
+  onChange,
+  onKeyDown,
+}: {
+  settings: Settings | null;
+  value: Details;
+  onChange: (next: Details) => void;
+  onKeyDown?: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
+}) {
+  if (!settings || !detailsEnabled(settings)) return null;
+  const roles = settings.roles.enabled ? settings.roles.options : [];
+  const fields = settings.fields.enabled ? settings.fields.items : [];
+  return (
+    <div className="cs-details-input" data-cs-ui="details-input">
+      {fields.map((field) => (
+        <label key={field.id} className="cs-detail-field">
+          <span>{field.label}</span>
+          <textarea
+            data-cs-ui={`field-${field.id}`}
+            rows={1}
+            maxLength={4000}
+            value={value.fields[field.id] ?? ""}
+            onChange={(event) =>
+              onChange({ ...value, fields: { ...value.fields, [field.id]: event.target.value } })
+            }
+            onKeyDown={onKeyDown}
+          />
+        </label>
+      ))}
+      {roles.length ? (
+        <div className="cs-roles" role="radiogroup" aria-label="Role">
+          <span className="cs-roles-label">Role</span>
+          {roles.map((role) => (
+            <button
+              key={role}
+              type="button"
+              role="radio"
+              data-cs-ui="role-option"
+              aria-checked={value.role === role}
+              className={value.role === role ? "cs-chip is-on" : "cs-chip"}
+              onClick={() => onChange({ ...value, role: value.role === role ? null : role })}
+            >
+              {role}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/** A new comment's kind, if the person wants to say; pressing the chosen one again leaves it to the service. */
+export function KindInput({
+  value,
+  onChange,
+}: {
+  value: ReportKind | null;
+  onChange: (next: ReportKind | null) => void;
+}) {
+  return (
+    <div
+      className="cs-roles cs-kind-input"
+      role="radiogroup"
+      aria-label="Kind"
+      data-cs-ui="kind-input"
+    >
+      <span className="cs-roles-label">Kind</span>
+      {REPORT_KINDS.map(({ kind, label }) => (
+        <button
+          key={kind}
+          type="button"
+          role="radio"
+          data-cs-ui={`kind-${kind}`}
+          aria-checked={value === kind}
+          className={value === kind ? "cs-chip is-on" : "cs-chip"}
+          onClick={() => onChange(value === kind ? null : kind)}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function RoleBadge({ role }: { role: string | null }) {
+  return role ? (
+    <span className="cs-role" data-cs-ui="role">
+      {role}
+    </span>
+  ) : null;
+}
+
+/** "Ticket I00012 · In progress": the team turned this comment into a support ticket. */
+export function TicketBadge({
+  ticket,
+}: {
+  ticket?: { number: string; status: string; label: string };
+}) {
+  return ticket ? (
+    <span
+      className={ticket.status === "closed" ? "cs-ticket is-closed" : "cs-ticket"}
+      data-cs-ui="ticket"
+      title={`Support ticket ${ticket.number}: ${ticket.label}`}
+    >
+      Ticket {ticket.number} · {ticket.label}
+    </span>
+  ) : null;
+}
+
+export function FieldValues({ fields, clamp = false }: { fields: FieldValue[]; clamp?: boolean }) {
+  if (!fields.length) return null;
+  return (
+    <dl className={clamp ? "cs-detail-list is-clamped" : "cs-detail-list"} data-cs-ui="fields">
+      {fields.map((field) => (
+        <div key={field.id}>
+          <dt>{field.label}</dt>
+          <dd>{field.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/** Inline editor for a posted comment's role and fields. Values for fields that were since removed are kept by the server. */
+export function DetailsEditor({
+  settings,
+  thread,
+  onSave,
+  onClose,
+}: {
+  settings: Settings;
+  thread: Thread;
+  onSave: (patch: Partial<Details>) => Promise<void>;
+  onClose: () => void;
+}) {
+  const [value, setValue] = useState<Details>(() => ({
+    role: thread.role,
+    fields: Object.fromEntries(thread.fields.map((field) => [field.id, field.value])),
+  }));
+  const [busy, setBusy] = useState(false);
+  return (
+    <form
+      className="cs-details-edit"
+      data-cs-ui="details-editor"
+      onSubmit={(event) => {
+        event.preventDefault();
+        const patch: Partial<Details> = {};
+        if (settings.roles.enabled && value.role !== thread.role) patch.role = value.role;
+        if (settings.fields.enabled) {
+          patch.fields = Object.fromEntries(
+            settings.fields.items.map((field) => [field.id, value.fields[field.id] ?? ""]),
+          );
+        }
+        setBusy(true);
+        onSave(patch)
+          .then(onClose)
+          .finally(() => setBusy(false));
+      }}
+    >
+      <DetailsInput settings={settings} value={value} onChange={setValue} />
+      <div className="cs-row-end">
+        <button className="cs-button" type="button" onClick={onClose}>
+          Cancel
+        </button>
+        <button
+          className="cs-button is-primary"
+          data-cs-ui="details-save"
+          type="submit"
+          disabled={busy}
+        >
+          Save
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function AddRow({
+  label,
+  hook,
+  onAdd,
+}: {
+  label: string;
+  hook: string;
+  onAdd: (text: string) => void;
+}) {
+  const [text, setText] = useState("");
+  return (
+    <form
+      className="cs-add-row"
+      onSubmit={(event) => {
+        event.preventDefault();
+        const next = text.trim().replace(/\s+/g, " ");
+        if (!next) return;
+        onAdd(next);
+        setText("");
+      }}
+    >
+      <input
+        data-cs-ui={hook}
+        aria-label={label}
+        placeholder={label}
+        value={text}
+        maxLength={60}
+        onChange={(event) => setText(event.target.value)}
+      />
+      <button className="cs-icon-button" type="submit" aria-label={label} disabled={!text.trim()}>
+        <Icon.Check />
+      </button>
+    </form>
+  );
+}
+
+/** Shared per environment: anyone signed in can change it, and existing comments keep their values. */
+export function SettingsPanel({
+  settings,
+  onChange,
+  onBack,
+  error,
+}: {
+  settings: Settings | null;
+  onChange: (next: Settings) => void;
+  /** Without a back button the panel renders inline, e.g. inside the dashboard. */
+  onBack?: () => void;
+  error: string;
+}) {
+  return (
+    <section
+      className={onBack ? "cs-card cs-menu cs-settings cs-hit" : "cs-settings is-inline"}
+      data-cs-ui="settings"
+      aria-label="Comment fields"
+    >
+      <header className="cs-settings-head">
+        {onBack ? (
+          <button className="cs-icon-button" type="button" aria-label="Back" onClick={onBack}>
+            <Icon.Back />
+          </button>
+        ) : null}
+        <h2>Comment fields</h2>
+      </header>
+      {!settings ? (
+        <p className="cs-hint">Loading…</p>
+      ) : (
+        <>
+          <button
+            className="cs-item"
+            data-cs-ui="roles-toggle"
+            type="button"
+            role="switch"
+            aria-checked={settings.roles.enabled}
+            onClick={() =>
+              onChange({
+                ...settings,
+                roles: { ...settings.roles, enabled: !settings.roles.enabled },
+              })
+            }
+          >
+            <span>Role</span>
+            <span className={settings.roles.enabled ? "cs-switch is-on" : "cs-switch"} />
+          </button>
+          {settings.roles.enabled ? (
+            <div className="cs-settings-body">
+              {settings.roles.options.length ? (
+                <div className="cs-chips">
+                  {settings.roles.options.map((role) => (
+                    <span key={role} className="cs-chip is-static" data-cs-ui="role-chip">
+                      {role}
+                      <button
+                        type="button"
+                        aria-label={`Remove ${role}`}
+                        onClick={() =>
+                          onChange({
+                            ...settings,
+                            roles: {
+                              ...settings.roles,
+                              options: settings.roles.options.filter((item) => item !== role),
+                            },
+                          })
+                        }
+                      >
+                        <Icon.Close />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+              <AddRow
+                label="Add a role"
+                hook="role-add"
+                onAdd={(role) => {
+                  if (
+                    settings.roles.options.some((item) => item.toLowerCase() === role.toLowerCase())
+                  )
+                    return;
+                  onChange({
+                    ...settings,
+                    roles: {
+                      ...settings.roles,
+                      options: [...settings.roles.options, role.slice(0, 40)],
+                    },
+                  });
+                }}
+              />
+            </div>
+          ) : null}
+          <div className="cs-sep" />
+          <button
+            className="cs-item"
+            data-cs-ui="fields-toggle"
+            type="button"
+            role="switch"
+            aria-checked={settings.fields.enabled}
+            onClick={() =>
+              onChange({
+                ...settings,
+                fields: { ...settings.fields, enabled: !settings.fields.enabled },
+              })
+            }
+          >
+            <span>Custom fields</span>
+            <span className={settings.fields.enabled ? "cs-switch is-on" : "cs-switch"} />
+          </button>
+          {settings.fields.enabled ? (
+            <div className="cs-settings-body">
+              {settings.fields.items.map((field) => (
+                <div key={field.id} className="cs-field-row" data-cs-ui="field-def">
+                  <span>{field.label}</span>
+                  <button
+                    className="cs-icon-button"
+                    type="button"
+                    aria-label={`Remove ${field.label}`}
+                    onClick={() =>
+                      onChange({
+                        ...settings,
+                        fields: {
+                          ...settings.fields,
+                          items: settings.fields.items.filter((item) => item.id !== field.id),
+                        },
+                      })
+                    }
+                  >
+                    <Icon.Close />
+                  </button>
+                </div>
+              ))}
+              <AddRow
+                label="Add a field"
+                hook="field-add"
+                onAdd={(label) =>
+                  onChange({
+                    ...settings,
+                    fields: {
+                      ...settings.fields,
+                      items: [
+                        ...settings.fields.items,
+                        { id: fieldId(label, settings.fields.items), label },
+                      ],
+                    },
+                  })
+                }
+              />
+            </div>
+          ) : null}
+          {error ? <p className="cs-error cs-pad">{error}</p> : null}
+          <p className="cs-hint">
+            Shared with everyone here. Turning off or removing only affects new comments.
+          </p>
+        </>
+      )}
+    </section>
+  );
+}