@startsimpli/ui 0.4.140 → 0.4.142

package/src/components/history/RecordActivityPanel.tsx

@@ -0,0 +1,344 @@
+'use client';
+
+/**
+ * RecordActivityPanel — everything one person (or one agent) changed, across
+ * records (bd startsim-ucg5u; route bd startsim-ivr3n).
+ *
+ * NOT A SECOND FEED. It composes the shared `ActivityFeedPanel` (startsim-
+ * 768w.19.5) — header, day grouping, infinite scroll, empty/filtered/error
+ * states — through the props that panel grew for exactly this: cursor paging,
+ * controlled filters, a param allowlist and a row mapper. The rows themselves
+ * are the history panel's: the same fold, the same headline, the same
+ * `RevisionFields` with its inline diff, and the same `ActorIdentity` kind
+ * marker, so a machine reads as a machine here exactly as on the record.
+ *
+ * FILTERS BELONG TO THE HOST, and the host keeps them in the URL — on a PAGE,
+ * never in a Next layout (a layout does not re-render on soft navigation, so a
+ * filter kept there goes stale on the first click). This panel only reports a
+ * change through `onFiltersChange`.
+ *
+ * Layout uses CONTAINER queries (bd startsim-jkkn7.12): the filter bar wraps on
+ * the width it is given, not the viewport's.
+ */
+import { useCallback, useMemo, useRef, type ReactNode } from 'react';
+import { Pencil, X } from 'lucide-react';
+
+import { ActivityFeedPanel } from '../activity/ActivityFeedPanel';
+import type { ActivityTimelineItem } from '../ActivityTimeline';
+import { RevisionFields } from './RevisionFields';
+import { REVISION_ENTRY_ICONS, revisionEntryType, versionNote } from './RecordHistoryPanel';
+import {
+  foldFeed,
+  localDateInput,
+  localDayEnd,
+  localDayStart,
+  revisionFeedParams,
+  startOfThisWeek,
+} from './revision-feed';
+import { COLLAPSE_WINDOW_MS, sittingHeadline, sittingSummary } from './revision-history';
+import type {
+  RevisionFeedClient,
+  RevisionFeedEntity,
+  RevisionFeedFilters,
+  RevisionFeedQuery,
+  RevisionFeedRow,
+} from './types';
+
+export interface RecordActivityOption {
+  value: string;
+  label: string;
+}
+
+export interface RecordActivityPanelProps {
+  client: RevisionFeedClient;
+  /** The host's filters — read from the URL. */
+  filters: RevisionFeedFilters;
+  /** Write them back to the URL. */
+  onFiltersChange: (next: RevisionFeedFilters) => void;
+  /** Record types to offer. Absent: derived from the rows received. */
+  typeOptions?: RecordActivityOption[];
+  /** People to offer, value = actor SUB. Merged with those seen in rows. */
+  actorOptions?: RecordActivityOption[];
+  /** Where a row's record lives. Omit to render the name as plain text. */
+  recordHref?: (entity: RevisionFeedEntity) => string | undefined;
+  /** Render a link (e.g. Next's `<Link>`); a plain `<a>` by default. */
+  renderLink?: (props: { href: string; className: string; children: ReactNode }) => ReactNode;
+  /** A record type's reader-facing name. */
+  typeLabel?: (type: string) => string;
+  fieldLabel?: (field: string) => string;
+  queryKey?: readonly unknown[];
+  pageSize?: number;
+  windowMs?: number;
+  title?: ReactNode;
+  description?: ReactNode;
+  headerAside?: ReactNode;
+}
+
+const SELECT =
+  'h-8 min-w-0 rounded-md border border-border bg-background px-2 text-sm text-foreground';
+const LABEL = 'flex min-w-0 flex-col gap-1 text-xs text-muted-foreground';
+const CHIP =
+  'inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-foreground';
+
+const KIND_OPTIONS: RecordActivityOption[] = [
+  { value: 'person', label: 'People' },
+  { value: 'machine', label: 'Machines' },
+  { value: 'unknown', label: 'Not recorded' },
+];
+
+/** Drop blanks so "unfiltered" is `{}` — the URL a host writes stays clean. */
+function prune(f: RevisionFeedFilters): RevisionFeedFilters {
+  return revisionFeedParams(f);
+}
+
+function sortOptions(map: Map<string, string>): RecordActivityOption[] {
+  return [...map].map(([value, label]) => ({ value, label })).sort((a, b) => a.label.localeCompare(b.label));
+}
+
+function FeedFilterBar({
+  value,
+  onChange,
+  actors,
+  types,
+  typeLabel,
+}: {
+  value: RevisionFeedFilters;
+  onChange: (next: RevisionFeedFilters) => void;
+  actors: RecordActivityOption[];
+  types: RecordActivityOption[];
+  typeLabel: (type: string) => string;
+}) {
+  const set = (key: keyof RevisionFeedFilters, next: string) => onChange(prune({ ...value, [key]: next }));
+  const actorName = (sub: string) => actors.find((a) => a.value === sub)?.label ?? sub;
+  const kindName = (k: string) => KIND_OPTIONS.find((o) => o.value === k)?.label ?? k;
+  const chips: Array<{ key: keyof RevisionFeedFilters; text: string }> = [];
+  if (value.actor) chips.push({ key: 'actor', text: `Person: ${actorName(value.actor)}` });
+  if (value.actor_kind) chips.push({ key: 'actor_kind', text: `Made by: ${kindName(value.actor_kind)}` });
+  if (value.type) chips.push({ key: 'type', text: `Type: ${typeLabel(value.type)}` });
+  if (value.scope) chips.push({ key: 'scope', text: `Scope: ${value.scope}` });
+  if (value.since) chips.push({ key: 'since', text: `From ${localDateInput(value.since)}` });
+  if (value.until) chips.push({ key: 'until', text: `To ${localDateInput(value.until)}` });
+
+  return (
+    <div className="@container space-y-2" data-testid="record-activity-filters">
+      <div className="grid grid-cols-1 gap-2 @md:grid-cols-2 @3xl:grid-cols-5">
+        <label className={LABEL}>
+          Person
+          <select className={SELECT} value={value.actor ?? ''} onChange={(e) => set('actor', e.target.value)}>
+            <option value="">Anyone</option>
+            {actors.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className={LABEL}>
+          Made by
+          <select
+            className={SELECT}
+            value={value.actor_kind ?? ''}
+            onChange={(e) => set('actor_kind', e.target.value)}
+          >
+            <option value="">People and machines</option>
+            {KIND_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className={LABEL}>
+          Record type
+          <select className={SELECT} value={value.type ?? ''} onChange={(e) => set('type', e.target.value)}>
+            <option value="">All types</option>
+            {types.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className={LABEL}>
+          From
+          <input
+            type="date"
+            className={SELECT}
+            value={localDateInput(value.since)}
+            onChange={(e) => set('since', e.target.value ? localDayStart(e.target.value) : '')}
+          />
+        </label>
+        <label className={LABEL}>
+          To
+          <input
+            type="date"
+            className={SELECT}
+            value={localDateInput(value.until)}
+            onChange={(e) => set('until', e.target.value ? localDayEnd(e.target.value) : '')}
+          />
+        </label>
+      </div>
+      <div className="flex flex-wrap items-center gap-1.5">
+        <button
+          type="button"
+          className="rounded-md border border-border bg-background px-2 py-0.5 text-xs text-foreground hover:bg-accent"
+          onClick={() => onChange(prune({ ...value, since: startOfThisWeek(), until: '' }))}
+        >
+          This week
+        </button>
+        {chips.map((chip) => (
+          <span key={chip.key} className={CHIP}>
+            {chip.text}
+            <button
+              type="button"
+              aria-label={`Remove ${chip.text}`}
+              onClick={() => set(chip.key, '')}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-3 w-3" aria-hidden="true" />
+            </button>
+          </span>
+        ))}
+        {chips.length > 0 && (
+          <button
+            type="button"
+            className="text-xs text-muted-foreground underline underline-offset-2"
+            onClick={() => onChange({})}
+          >
+            Clear all
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function RecordActivityPanel({
+  client,
+  filters,
+  onFiltersChange,
+  typeOptions,
+  actorOptions = [],
+  recordHref,
+  renderLink,
+  typeLabel = (t) => t,
+  fieldLabel = (f) => f,
+  queryKey = ['record-activity'],
+  pageSize = 50,
+  windowMs = COLLAPSE_WINDOW_MS,
+  title = 'Edits',
+  description = 'Who changed which record, newest first — people and machines. Filter to one person, to machine-only edits, to a type or a date range.',
+  headerAside,
+}: RecordActivityPanelProps) {
+  const applied = useMemo(() => prune(filters), [filters]);
+
+  // The route's page has no `count` and may omit `results` on an older build.
+  const feedClient = useMemo(
+    () => ({
+      list: async (params: Record<string, unknown>) => {
+        const page = await client.list(params as RevisionFeedQuery);
+        return { ...page, results: page?.results ?? [] };
+      },
+    }),
+    [client],
+  );
+
+  // Sticky options: a person once seen stays offerable, so narrowing to them
+  // does not empty the picker you narrowed with.
+  const seenActors = useRef(new Map<string, string>());
+  const seenTypes = useRef(new Map<string, string>());
+
+  const link = useCallback(
+    (href: string, children: ReactNode) => {
+      const className = 'font-medium text-foreground underline-offset-2 hover:underline';
+      return renderLink ? renderLink({ href, className, children }) : (
+        <a href={href} className={className}>
+          {children}
+        </a>
+      );
+    },
+    [renderLink],
+  );
+
+  const toItems = useCallback(
+    (rows: RevisionFeedRow[]): ActivityTimelineItem[] =>
+      foldFeed(rows, windowMs).map(({ id, entity, sitting }) => {
+        const name = (entity?.name ?? '').trim() || (entity?.type ? `Untitled ${typeLabel(entity.type)}` : 'A record');
+        const href = entity ? recordHref?.(entity) : undefined;
+        const actorText = sitting.actorLabel || sitting.actorSub;
+        return {
+          id,
+          type: revisionEntryType(sitting),
+          title: sittingHeadline(sitting, fieldLabel),
+          occurredAt: sitting.at,
+          actor: { email: sitting.actorLabel || undefined, id: sitting.actorSub || undefined },
+          actorKind: sitting.actorKind,
+          ...(sitting.actorKindSource ? { actorKindSource: sitting.actorKindSource } : {}),
+          tone: sitting.isAttempt ? 'warn' : undefined,
+          subtitle: (
+            <span data-testid="record-activity-target">
+              on {href ? link(href, name) : <span className="font-medium text-foreground">{name}</span>}
+              {entity?.type ? ` · ${typeLabel(entity.type)}` : ''} · {versionNote(sitting)}
+            </span>
+          ),
+          note: sitting.saves > 1 ? sittingSummary(sitting) : undefined,
+          detail: (
+            <div className="space-y-2">
+              <RevisionFields sitting={sitting} fieldLabel={fieldLabel} />
+              {sitting.actorSub && applied.actor !== sitting.actorSub && (
+                <button
+                  type="button"
+                  className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+                  onClick={() => onFiltersChange(prune({ ...applied, actor: sitting.actorSub }))}
+                >
+                  Only {actorText}&apos;s edits
+                </button>
+              )}
+            </div>
+          ),
+        };
+      }),
+    [windowMs, typeLabel, recordHref, link, fieldLabel, applied, onFiltersChange],
+  );
+
+  return (
+    <ActivityFeedPanel<RevisionFeedRow, RevisionFeedFilters>
+      client={feedClient}
+      paging="cursor"
+      filters={applied}
+      onFiltersChange={(next) => onFiltersChange(prune(next))}
+      toParams={(f) => ({ ...revisionFeedParams(f) })}
+      toItems={toItems}
+      renderFilters={({ value, onChange, events }) => {
+        for (const o of actorOptions) seenActors.current.set(o.value, o.label);
+        for (const row of events) {
+          const sub = row.actor_sub ?? row.actorSub;
+          if (sub) seenActors.current.set(sub, (row.actor_label ?? row.actorLabel) || sub);
+          if (row.entity?.type) seenTypes.current.set(row.entity.type, typeLabel(row.entity.type));
+        }
+        if (value.actor && !seenActors.current.has(value.actor)) seenActors.current.set(value.actor, value.actor);
+        return (
+          <FeedFilterBar
+            value={value}
+            onChange={onChange}
+            actors={sortOptions(seenActors.current)}
+            types={typeOptions ?? sortOptions(seenTypes.current)}
+            typeLabel={typeLabel}
+          />
+        );
+      }}
+      queryKey={queryKey}
+      pageSize={pageSize}
+      title={title}
+      description={description}
+      headerAside={headerAside}
+      emptyTitle="No edits recorded yet"
+      emptyDescription="Changes to records will appear here, newest first."
+      filteredEmptyTitle="No edits match these filters"
+      filteredEmptyDescription="Widen the date range or clear a filter to see more."
+      errorTitle="Could not load edits"
+      activityIcons={REVISION_ENTRY_ICONS}
+      defaultIcon={Pencil}
+    />
+  );
+}