@igstack/app-catalog-frontend-core 6.9.0 → 6.10.1

package/src/modules/appCatalog/ui/detail/CommentsFeed.tsx

@@ -0,0 +1,254 @@
+import type {
+  Claim,
+  FeedbackView as Note,
+} from '@igstack/app-catalog-backend-core'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import React from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { cn } from '~/lib/utils'
+import { Button } from '~/ui/button'
+import { formatRelativeTime } from '../../utils/formatRelativeTime'
+import { attachmentUrl } from './communityDraft'
+import { formatCommunityError } from './communityError'
+import { composeComments } from './composeComments'
+import type { CommentEntry } from './composeComments'
+
+/** Same shape the input primitive uses, minus the fixed height. */
+const FIELD_CLASSES =
+  'placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50'
+
+const BADGES = {
+  pending: { text: 'Pending', className: 'is-pending' },
+  used: { text: 'Used as source', className: 'is-used' },
+} as const
+
+/**
+ * Screenshots sent with a note: a thumbnail strip under the words. The words
+ * are the substance and a screenshot is the evidence, so it should be
+ * glanceable and openable, not dominate the row.
+ */
+function AttachmentStrip({ ids }: { ids: string[] }) {
+  if (ids.length === 0) return null
+  return (
+    <ul className="community-shots">
+      {ids.map((id) => (
+        <li key={id}>
+          <a href={attachmentUrl(id)} target="_blank" rel="noreferrer">
+            <img
+              src={attachmentUrl(id)}
+              alt="Attached screenshot"
+              loading="lazy"
+            />
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/** Who, when and where it stands, on one small line above the words. */
+function Meta({ entry, edited }: { entry: CommentEntry; edited: boolean }) {
+  const badge = entry.badge && BADGES[entry.badge]
+  return (
+    <p className="comment__meta">
+      {entry.who && (
+        <>
+          <span className="comment__who">{entry.who}</span>
+          {' · '}
+        </>
+      )}
+      <time dateTime={entry.at} title={entry.at}>
+        {formatRelativeTime(entry.at)}
+      </time>
+      {edited && ' (edited)'}
+      {badge && (
+        <span
+          className={cn('comment__badge', badge.className)}
+          data-badge={entry.badge}
+        >
+          {badge.text}
+        </span>
+      )}
+    </p>
+  )
+}
+
+/**
+ * Everything already said about the entry, under the input: one feed, newest
+ * first, one entry per visitor note. See `composeComments` for how claims fold
+ * into the notes they came from.
+ *
+ * Nobody logs in, so the server attributes each note to a pseudonym from an
+ * httpOnly cookie, and that cookie is what authorises editing (for an hour) or
+ * withdrawing (until someone reviews it). `canEditUntil` arrives as an absolute
+ * instant so a skewed client clock cannot show a control the server would refuse.
+ */
+export function CommentsFeed({
+  appSlug,
+  claims,
+  labelledBy,
+}: {
+  appSlug: string
+  claims: Claim[]
+  /** Id of the heading that names the list. */
+  labelledBy: string
+}) {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+  const listOptions = trpc.feedback.list.queryOptions({ resourceSlug: appSlug })
+  const { data, error, isPending } = useQuery(listOptions)
+  const [editingId, setEditingId] = React.useState<string | null>(null)
+  const [editDraft, setEditDraft] = React.useState('')
+
+  const refresh = () =>
+    queryClient.invalidateQueries({ queryKey: listOptions.queryKey })
+  const edit = useMutation(
+    trpc.feedback.edit.mutationOptions({
+      onSuccess: () => {
+        setEditingId(null)
+        void refresh()
+      },
+    }),
+  )
+  const dismiss = useMutation(
+    trpc.feedback.dismiss.mutationOptions({ onSuccess: () => void refresh() }),
+  )
+  const saveEdit = (id: string) => {
+    const body = editDraft.trim()
+    if (body) edit.mutate({ id, body })
+  }
+
+  const entries =
+    data || error ? composeComments(data?.items ?? [], claims) : []
+  const failure = error ?? edit.error ?? dismiss.error
+
+  const noteBody = (note: Note) => {
+    const canEdit =
+      note.isMine &&
+      !!note.canEditUntil &&
+      Date.parse(note.canEditUntil) > Date.now()
+    // Withdrawing stays available for as long as nobody has reviewed it.
+    const canDismiss = note.isMine && note.status === null
+    const editing = editingId === note.id
+    return (
+      <>
+        {editing ? (
+          <div className="mt-1 space-y-2">
+            <textarea
+              autoFocus
+              rows={3}
+              className={FIELD_CLASSES}
+              aria-label="Edit your note"
+              value={editDraft}
+              onChange={(e) => {
+                setEditDraft(e.target.value)
+                if (edit.isError) edit.reset()
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault()
+                  saveEdit(note.id)
+                }
+              }}
+            />
+            <div className="flex gap-2">
+              <Button
+                type="button"
+                size="sm"
+                disabled={!editDraft.trim() || edit.isPending}
+                onClick={() => saveEdit(note.id)}
+              >
+                Save
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                onClick={() => setEditingId(null)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <p
+            data-feedback-body=""
+            className={cn('comment__text', !note.body && 'is-empty')}
+          >
+            {note.body ??
+              (note.attachmentIds.length > 0
+                ? 'Screenshot only — no words added.'
+                : 'Flagged as out of date — no detail given.')}
+          </p>
+        )}
+        <AttachmentStrip ids={note.attachmentIds} />
+        {note.reviewerReply && (
+          <p className="comment__reply">↳ {note.reviewerReply}</p>
+        )}
+        {!editing && (canEdit || canDismiss) && (
+          <p className="comment__actions">
+            {canEdit && (
+              <button
+                type="button"
+                onClick={() => {
+                  setEditingId(note.id)
+                  setEditDraft(note.body ?? '')
+                }}
+              >
+                Edit
+              </button>
+            )}
+            {canDismiss && (
+              <button
+                type="button"
+                className="is-destructive"
+                onClick={() => dismiss.mutate({ id: note.id })}
+              >
+                Dismiss
+              </button>
+            )}
+          </p>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      {isPending ? (
+        <div
+          className="comments-skeleton"
+          aria-busy="true"
+          aria-labelledby={labelledBy}
+        >
+          <span className="sr-only" role="status">
+            Loading comments…
+          </span>
+          <div className="comments-skeleton__item" />
+          <div className="comments-skeleton__item" />
+          <div className="comments-skeleton__item" />
+        </div>
+      ) : entries.length > 0 ? (
+        <ul className="comments" aria-labelledby={labelledBy}>
+          {entries.map((entry) => (
+            <li key={entry.key} className="comment">
+              <Meta entry={entry} edited={!!entry.note?.editedAt} />
+              {entry.note ? (
+                noteBody(entry.note)
+              ) : (
+                <p className="comment__text">{entry.text}</p>
+              )}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="comments-empty">
+          No comments yet. Be the first to share what you know.
+        </p>
+      )}
+      {failure && (
+        <p className="know-more-error">{formatCommunityError(failure)}</p>
+      )}
+    </>
+  )
+}

package/src/modules/appCatalog/ui/detail/CommentsHelp.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { useDismissable } from '~/modules/dismiss/DismissStack'
+import { ResourceDetailFeedbackNote, useSlotFilled } from '~/modules/extensions'
+
+/**
+ * The `?` beside "Comments": what the input takes, and what becomes of a note.
+ * Folded away so the input stays one line; Esc and a click outside close it.
+ * While closed it is not a dismiss layer, so Esc still reaches the card.
+ */
+export function CommentsHelp({
+  appSlug,
+  appName,
+}: {
+  appSlug: string
+  appName: string
+}) {
+  const [open, setOpen] = React.useState(false)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const popoverRef = React.useRef<HTMLDivElement>(null)
+  const id = React.useId()
+  const hasPluginNote = useSlotFilled('resourceDetailFeedbackNote')
+
+  useDismissable(
+    popoverRef,
+    () => {
+      setOpen(false)
+      buttonRef.current?.focus()
+    },
+    { enabled: open },
+  )
+
+  React.useEffect(() => {
+    if (!open) return
+    const onPointerDown = (e: PointerEvent) => {
+      const target = e.target as Node
+      if (
+        popoverRef.current?.contains(target) ||
+        buttonRef.current?.contains(target)
+      )
+        return
+      setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open])
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        className="comments-help-button"
+        aria-label="How comments work"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+          <circle
+            cx="8"
+            cy="8"
+            r="6.75"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.25"
+          />
+          <path
+            d="M6.25 6.3a1.8 1.8 0 0 1 3.5.55c0 1.2-1.75 1.45-1.75 2.6"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.25"
+            strokeLinecap="round"
+          />
+          <circle cx="8" cy="11.4" r="0.8" fill="currentColor" />
+        </svg>
+      </button>
+      <div ref={popoverRef} id={id} className="comments-help" hidden={!open}>
+        <p className="comments-help__title">How comments work</p>
+        <ul>
+          <li>
+            Paste a link — a wiki page, a doc or a ticket that explains
+            something about this app.
+          </li>
+          <li>
+            Fix something — "Access is approved by your team lead, not IT."
+          </li>
+          <li>Ask a question — "Can contractors get access?"</li>
+          <li>Attach a screenshot — paste it, drop it or use the paperclip.</li>
+        </ul>
+        <p className="comments-help__note">
+          <ResourceDetailFeedbackNote appSlug={appSlug} appName={appName} />
+          {!hasPluginNote && (
+            <>
+              Every note is reviewed. Facts that check out update the card and
+              are marked Used as source.
+            </>
+          )}
+        </p>
+      </div>
+    </>
+  )
+}