@vintasoftware/pr-review-canvas 0.3.0 → 0.5.0

package/static/js/interactions.js

@@ -17,32 +17,48 @@ import { replacePostButton } from './comment-link.js'
 import {
   applyCapabilityGating,
   closeComposers,
+  composerBody,
   composerHtml,
   composerInput,
+  composerPendingInput,
   composerRowHtml,
+  concealForComposer,
   focusComposer,
+  revealConcealed,
+  refreshComposerCommands,
 } from './composer.js'
 import { commentHtml, setThreadCollapsed, threadRowHtml } from './diff-decorations.js'
 import { flash, scrollIntoViewSafe } from './dom.js'
+import { isFoldLevel, nextFoldLevel } from './fold-levels.js'
 import { refreshProgress } from './header.js'
 import { keyAction, openHelpDialog } from './keyboard.js'
-import { pointAnchorId, sanitizeKey } from './keys.js'
+import { pointAnchorId, reviewedId } from './keys.js'
 import {
+  canvasHiddenLines,
+  cardOf,
+  getFoldLevel,
   getRenderContext,
   pathSet,
+  refreshCardDecorations,
+  refreshFolds,
+  setCardCollapsed,
   setCardRenderedHook,
+  setFoldLevel,
   setRenderContext,
   updateRenderState,
 } from './layers.js'
 import { buildNavOrder, layerOf, nextFile, nextLayer, prevFile, prevLayer } from './nav.js'
 import { issueCommentHtml } from './overview.js'
+import { pendingCount, refreshPendingBar } from './pending.js'
 import { applyDismissed, pointToMarkdown, postedUrls } from './points.js'
 import { layerProgress } from './progress.js'
+import { FOLD_LEVEL_SELECT_ID, hiddenLabel, refreshFoldLevel } from './reading-level.js'
 import { lineRefFromEvent, markSelection, selectionReducer } from './selection.js'
 import {
   fillSignoffDialog,
   openSignoffDialog,
   showSignoffError,
+  setSignoffFolds,
   showSignoffResult,
   signoffBody,
 } from './signoff.js'
@@ -51,6 +67,16 @@ import {
 
 const NO_CHAT_NOTE = 'the AI Chat pane is off; press ? for the key map'
 
+/**
+ * The event a sign-off dialog is set to. An attribute that names none reads as a comment-only
+ * review, the one of the three that claims nothing.
+ * @param {string | null} raw
+ * @returns {import('./contract-types.js').ReviewEvent}
+ */
+export function signoffEvent(raw) {
+  return raw === 'APPROVE' || raw === 'REQUEST_CHANGES' ? raw : 'COMMENT'
+}
+
 /** @type {WeakMap<Element, ReturnType<typeof setTimeout>>} */
 const toastTimers = new WeakMap()
 
@@ -103,37 +129,6 @@ export function toast(root, message) {
   return box
 }
 
-/**
- * The card a command belongs to, and the part of it that collapses.
- * @param {Element} el
- * @returns {{ card: HTMLElement, body: HTMLElement, chevron: Element | null } | null}
- */
-export function cardOf(el) {
-  const card = el.closest('article.file, section.layer')
-  const body = card?.querySelector(':scope > .file-body, :scope > .layer-body')
-  if (!(card instanceof HTMLElement && body instanceof HTMLElement)) {
-    return null
-  }
-  return { card, body, chevron: card.querySelector(':scope > .file-h > .chev, :scope > .layer-h > .chev') }
-}
-
-/**
- * Opens or collapses one card. Nothing else on the card changes, so clicking the chevron never
- * touches the reviewed box and the other way round.
- * @param {Element} el an element inside the card
- * @param {boolean} [collapsed] the state to set; the opposite of the current one when omitted
- */
-export function setCardCollapsed(el, collapsed) {
-  const parts = cardOf(el)
-  if (parts === null) {
-    return null
-  }
-  const next = collapsed ?? !parts.body.hidden
-  parts.body.toggleAttribute('hidden', next)
-  parts.chevron?.setAttribute('aria-expanded', next ? 'false' : 'true')
-  return next
-}
-
 /**
  * The layer or file card a reviewed id belongs to.
  * @param {ParentNode} root
@@ -160,8 +155,7 @@ export function nextUnreviewedTarget(root, session, fromId, kind) {
     if (item === undefined || item.kind !== kind || item.other) {
       continue
     }
-    const id =
-      item.kind === 'file' ? `layer:${item.layerId}/file:${sanitizeKey(item.path)}` : `layer:${item.layerId}`
+    const id = item.kind === 'file' ? reviewedId(item.layerKey, item.path) : reviewedId(item.layerKey)
     if (!session.isReviewed(id)) {
       return root.querySelector(`#${cssEscape(item.id)}`)
     }
@@ -236,6 +230,18 @@ export function wireReview(root, session, opts = {}) {
     getRenderContext()?.files.find(f => f.path === path)?.key ?? null
   /** The time the page was drawn, which the comments it adds are timed against. */
   const renderNow = () => getRenderContext()?.now ?? new Date()
+  /** @param {import('./contract-types.js').FoldLevel} level */
+  const hiddenAt = level =>
+    canvasHiddenLines(
+      getRenderContext() ?? {
+        artifact: session.artifact,
+        files: [],
+        comments: [],
+        state: session.state,
+        headSha: session.headSha,
+      },
+      level
+    )
 
   /**
    * Whether a card counts as reviewed, read the same way the page was first drawn: a layer is
@@ -247,13 +253,39 @@ export function wireReview(root, session, opts = {}) {
     if (id.includes('/file:')) {
       return state.reviewed[id] === true
     }
-    const layer = session.artifact.layers.find(l => `layer:${l.id}` === id)
+    const layer = session.artifact.layers.find(l => reviewedId(l.key) === id)
     return layer === undefined ? state.reviewed[id] === true : layerProgress(layer, state) === 'done'
   }
 
+  let drawnPending = session.pending
+  let drawnComments = session.submittedComments
   /** Draws everything the local state decides, after it changed. */
   const onState = (/** @type {PrState} */ state) => {
     updateRenderState(state)
+    const ctx = getRenderContext()
+    if (ctx !== null) {
+      const changedPaths = new Set()
+      const previous = new Map(drawnPending.map(p => [p.id, p]))
+      for (const draft of state.pending) {
+        const old = previous.get(draft.id)
+        if (old === undefined || old.body !== draft.body) changedPaths.add(draft.path)
+        previous.delete(draft.id)
+      }
+      for (const draft of previous.values()) changedPaths.add(draft.path)
+      const added = session.submittedComments.filter(c => !drawnComments.some(old => old.id === c.id))
+      for (const comment of added) changedPaths.add(comment.path)
+      const next = { ...ctx, comments: [...ctx.comments, ...added] }
+      setRenderContext(next)
+      refreshCardDecorations(root, next, changedPaths, added)
+      if (changedPaths.size > 0) {
+        // A thread a submitted review adds, or a draft saved or deleted, changes what keeps a
+        // card's code open, as a posted comment does.
+        refreshFolds(root)
+        refreshFoldLevel(root, getFoldLevel(), hiddenAt(getFoldLevel()))
+      }
+      drawnPending = state.pending
+      drawnComments = session.submittedComments
+    }
     refreshProgress(root, session.artifact, state)
     applyDismissed(root, session.artifact.points, state, {
       paths: paths(),
@@ -274,6 +306,8 @@ export function wireReview(root, session, opts = {}) {
         setCardCollapsed(parts.card, reviewed)
       }
     }
+    refreshPendingBar(root, state, session.headSha)
+    refreshComposerCommands(root, state.pending.length > 0)
     applyCapabilityGating(root, session.capabilities)
   }
   const unsubscribe = session.subscribe(onState)
@@ -287,6 +321,9 @@ export function wireReview(root, session, opts = {}) {
         ...ctx,
         comments: [...ctx.comments.filter(c => c.id !== answer.comment.id), answer.comment],
       })
+      // A new thread keeps its card's code open at every level, and the counters say so.
+      refreshFolds(root)
+      refreshFoldLevel(root, getFoldLevel(), hiddenAt(getFoldLevel()))
       onState(session.state)
     }
     return answer
@@ -348,6 +385,7 @@ export function wireReview(root, session, opts = {}) {
    */
   const openComposer = (anchor, options, shape) => {
     closeComposers(root)
+    options = { ...options, pendingActive: pendingCount(session.state) > 0 }
     const node =
       shape === 'row' ? rowFrom(doc, composerRowHtml(options)) : nodeFrom(doc, composerHtml(options))
     if (node === null) {
@@ -523,9 +561,12 @@ export function wireReview(root, session, opts = {}) {
     )
   }
 
-  /** @param {HTMLElement} button @param {'APPROVE' | 'REQUEST_CHANGES'} event */
+  /** @param {HTMLElement} button @param {import('./contract-types.js').ReviewEvent} event */
   const openSignoff = (button, event) => {
     const dialog = openSignoffDialog(root, { event })
+    const level = getFoldLevel()
+    const counts = hiddenAt(level)
+    setSignoffFolds(dialog, counts.hidden === 0 ? '' : `Read at the ${level} level · ${hiddenLabel(counts)}`)
     applyCapabilityGating(root, session.capabilities)
     signoffOpening += 1
     const opening = signoffOpening
@@ -556,19 +597,138 @@ export function wireReview(root, session, opts = {}) {
     if (!(dialog instanceof HTMLDialogElement)) {
       return
     }
-    const event = dialog.getAttribute('data-event') === 'APPROVE' ? 'APPROVE' : 'REQUEST_CHANGES'
+    const event = signoffEvent(dialog.getAttribute('data-event'))
     const body = signoffBody(dialog)
     void runCommand(
       button,
       async () => {
-        const review = await session.postReview(event, body === '' ? undefined : body)
+        const { review, submitted, warnings } = await session.postReview(
+          event,
+          body === '' ? undefined : body
+        )
         showSignoffResult(dialog, review)
-        toast(root, event === 'APPROVE' ? 'approved on github' : 'changes requested on github')
+        for (const warning of warnings) {
+          dialog.querySelector('.signoff-result')?.append(document.createTextNode(` ${warning}`))
+        }
+        const verdict =
+          review.state === 'APPROVED'
+            ? 'approved'
+            : review.state === 'CHANGES_REQUESTED'
+              ? 'changes requested'
+              : 'review posted'
+        toast(
+          root,
+          `${verdict}${submitted > 0 ? ` with ${submitted} comment${submitted === 1 ? '' : 's'}` : ''}`
+        )
       },
       { pendingLabel: 'posting…' }
     )
   }
 
+  /**
+   * Switches how much code the page hides, from the control or from the `f` key. The hint under
+   * the control says what the new level hides and how much of the diff that is.
+   * @param {string} value
+   */
+  const applyFoldLevel = value => {
+    if (!isFoldLevel(value) || value === getFoldLevel()) {
+      return
+    }
+    setFoldLevel(root, value)
+    refreshFoldLevel(root, value, hiddenAt(value))
+    toast(root, `hiding code: ${value}`)
+  }
+
+  /**
+   * Adds what a composer holds to the pending review instead of posting it.
+   * @param {HTMLElement} button
+   * @param {Element} box
+   */
+  const queueFromComposer = (button, box) => {
+    const input = composerPendingInput(box)
+    if (input === null) {
+      showCommandError(button, 'write something first')
+      return
+    }
+    box.setAttribute('data-posting', '1')
+    void runCommand(
+      button,
+      async () => {
+        await session.addPending(input)
+        box.closest('tr.composer')?.remove()
+        box.remove()
+        toast(root, 'comment added to your review')
+      },
+      { pendingLabel: 'adding…' }
+    ).finally(() => box.removeAttribute('data-posting'))
+  }
+
+  /**
+   * Saves an edit to a draft that is already in the review.
+   * @param {HTMLElement} button
+   * @param {Element} box
+   */
+  const savePending = (button, box) => {
+    const id = box.getAttribute('data-pending-id')
+    const body = composerBody(box)
+    if (id === null) {
+      return
+    }
+    if (body === '') {
+      showCommandError(button, 'write something first')
+      return
+    }
+    void runCommand(
+      button,
+      async () => {
+        await session.editPending(id, body)
+        const host = box.parentElement
+        box.remove()
+        if (host !== null) revealConcealed(host.parentNode ?? root)
+        toast(root, 'draft updated')
+      },
+      { pendingLabel: 'saving…' }
+    )
+  }
+
+  /**
+   * Puts an attention point's text in the pending review instead of posting it. The point is
+   * tagged with its fingerprint, so once the review lands the point shows the comment it became.
+   * @param {HTMLElement} button
+   * @param {Point} point
+   */
+  const queuePoint = (button, point) => {
+    void runCommand(
+      button,
+      async () => {
+        await session.addPending({
+          path: point.path,
+          line: point.line,
+          side: point.side ?? 'new',
+          body: pointToMarkdown(point),
+          pointFingerprint: point.fingerprint,
+        })
+        toast(root, 'attention point added to your review')
+      },
+      { pendingLabel: 'adding…' }
+    )
+  }
+
+  /**
+   * @param {HTMLElement} button
+   * @param {string} id
+   */
+  const deletePending = (button, id) => {
+    void runCommand(
+      button,
+      async () => {
+        await session.deletePending(id)
+        toast(root, 'draft deleted')
+      },
+      { pendingLabel: 'deleting…' }
+    )
+  }
+
   /** @type {Record<string, (el: HTMLElement, event: MouseEvent) => void>} */
   const actions = {
     'toggle-card': el => {
@@ -596,6 +756,12 @@ export function wireReview(root, session, opts = {}) {
         postPoint(el, point)
       }
     },
+    'point-queue': el => {
+      const point = pointById(el.getAttribute('data-point') ?? '')
+      if (point !== undefined) {
+        queuePoint(el, point)
+      }
+    },
     'comment-line': el => {
       const key = el.getAttribute('data-key') ?? ''
       const path = session.pathForKey(key)
@@ -616,8 +782,65 @@ export function wireReview(root, session, opts = {}) {
         postFromComposer(el, box)
       }
     },
-    'markdown-preview': el => toggleMarkdownPreview(el, true),
-    'markdown-write': el => toggleMarkdownPreview(el, false),
+    'composer-queue': el => {
+      const box = el.closest('.composer-box')
+      if (box !== null) {
+        queueFromComposer(el, box)
+      }
+    },
+    'pending-edit': el => {
+      const id = el.getAttribute('data-pending-id')
+      const draft = session.pending.find(p => p.id === id)
+      const host = el.closest('.pending-cmt')
+      if (draft === undefined || host === null) {
+        return
+      }
+      composerSeq += 1
+      // The box replaces the draft it edits, so the reader sees one of the two at a time.
+      const node = openComposer(
+        host,
+        {
+          id: `composer-${composerSeq}`,
+          label: `Edit your comment on ${draft.path}:${draft.line}`,
+          kind: 'inline',
+          body: draft.body,
+          pendingId: draft.id,
+        },
+        'block'
+      )
+      if (node !== null) {
+        concealForComposer(host)
+      }
+    },
+    'pending-save': el => {
+      const box = el.closest('.composer-box')
+      if (box !== null) {
+        savePending(el, box)
+      }
+    },
+    'pending-delete': el => {
+      const id = el.getAttribute('data-pending-id')
+      if (id !== null) {
+        deletePending(el, id)
+      }
+    },
+    'pending-finish': el => {
+      // Finishing a review is the same dialog the sign-off commands open; a review being written
+      // usually has something to say, so it opens on the verdict that claims nothing.
+      openSignoff(el, 'COMMENT')
+    },
+    'pending-discard': el => {
+      void runCommand(
+        el,
+        async () => {
+          const count = pendingCount(session.state)
+          await session.discardPending()
+          toast(root, `${count} pending comment${count === 1 ? '' : 's'} discarded`)
+        },
+        { pendingLabel: 'discarding…' }
+      )
+    },
+    'markdown-toggle': el => toggleMarkdownPreview(el),
     'composer-cancel': () => {
       closeComposers(root)
     },
@@ -686,7 +909,7 @@ export function wireReview(root, session, opts = {}) {
       }
     },
     signoff: el => {
-      openSignoff(el, el.getAttribute('data-event') === 'APPROVE' ? 'APPROVE' : 'REQUEST_CHANGES')
+      openSignoff(el, signoffEvent(el.getAttribute('data-event')))
     },
     'signoff-post': el => postSignoff(el),
     'signoff-close': el => {
@@ -744,6 +967,10 @@ export function wireReview(root, session, opts = {}) {
   /** @param {Event} event */
   const onChange = event => {
     const input = event.target
+    if (input instanceof HTMLSelectElement && input.id === FOLD_LEVEL_SELECT_ID) {
+      applyFoldLevel(input.value)
+      return
+    }
     if (!(input instanceof HTMLInputElement)) {
       return
     }
@@ -849,10 +1076,7 @@ export function wireReview(root, session, opts = {}) {
         if (found === null || found === undefined || found.kind === 'overview') {
           break
         }
-        const id =
-          found.kind === 'file'
-            ? `layer:${found.layerId}/file:${sanitizeKey(found.path)}`
-            : `layer:${found.layerId}`
+        const id = found.kind === 'file' ? reviewedId(found.layerKey, found.path) : reviewedId(found.layerKey)
         const parts = cardForReviewedId(root, id)
         const box = parts?.card.querySelector('input[data-reviewed-id]')
         if (box instanceof HTMLElement) {
@@ -878,6 +1102,10 @@ export function wireReview(root, session, opts = {}) {
         }
         break
       }
+      case 'fold-level':
+        // The key steps through the levels, so the reader can open the code up without the mouse.
+        applyFoldLevel(nextFoldLevel(getFoldLevel()))
+        break
       case 'overview':
         focusPointId = null
         focusItem('overview')

package/static/js/keyboard.js

@@ -6,7 +6,7 @@ import { esc } from './dom.js'
 /**
  * @typedef {'next-layer' | 'prev-layer' | 'next-file' | 'prev-file' | 'next-point' | 'prev-point'
  *   | 'toggle' | 'reviewed-file' | 'reviewed-layer' | 'comment' | 'dismiss' | 'overview'
- *   | 'help' | 'escape' | 'ask' | 'focus-chat'} KeyAction
+ *   | 'help' | 'escape' | 'ask' | 'focus-chat' | 'fold-level'} KeyAction
  */
 
 export const KEY_HELP = [
@@ -18,6 +18,7 @@ export const KEY_HELP = [
   { keys: 'R', what: 'mark the layer in focus reviewed and move on' },
   { keys: 'c', what: 'comment on the line in focus or on the selection' },
   { keys: 'd', what: 'dismiss the attention point in focus' },
+  { keys: 'f', what: 'step through how much code is hidden: light, moderate, aggressive' },
   { keys: 'g o', what: 'go to the overview' },
   { keys: '?', what: 'this help' },
   { keys: 'Esc', what: 'clear the selection, close a composer or a dialog' },
@@ -84,6 +85,8 @@ export function keyAction(event, opts = {}) {
       return { action: 'comment', pendingG: false }
     case 'd':
       return { action: 'dismiss', pendingG: false }
+    case 'f':
+      return { action: 'fold-level', pendingG: false }
     case 'g':
       return { action: null, pendingG: true }
     case '?':

package/static/js/keys.js

@@ -95,3 +95,15 @@ export function layerAnchorId(layerKey) {
 export function pointAnchorId(pointId) {
   return `point-${pointId}`
 }
+
+/**
+ * The id of a reviewed mark: one layer, or one file of it. The layer's key names it, so a
+ * regenerated canvas that reorders its layers still points a reviewer's progress at the same
+ * concern. The server (`src/contract/keys.ts`) and the page both call this, so the two sides
+ * cannot drift; `REVIEWED_ID_RE` in the state store validates this grammar at the route.
+ * @param {string} layerKey
+ * @param {string} [path]
+ */
+export function reviewedId(layerKey, path) {
+  return path === undefined ? `layer:${layerKey}` : `layer:${layerKey}/file:${sanitizeKey(path)}`
+}