@picked/svelte 0.0.1-dev.1793923852884 → 0.0.1-dev.1793933802654

package/dist/plugins/devtools/review/issues/ReportIssuePanel.svelte

@@ -0,0 +1,805 @@
+<script lang="ts">
+  /**
+   * @file The Report an issue tab: a title, a description, a kind and a priority, a screenshot or
+   * files, and the context the report carries, which the reviewer can trim before sending. Without
+   * a sink it says how to set reports up.
+   */
+  import type { Picked } from '@picked/client'
+  import { Banner, Button, Card, CopyButton, EmptyState, Select, Stack, TextField } from '../../ui'
+  import {
+    ATTACHMENT_TYPES,
+    ISSUE_KINDS,
+    ISSUE_PRIORITIES,
+    attachmentProblem,
+    buildIssueContext,
+    buildIssueReport,
+    contextRows,
+    draftProblem,
+    toggled,
+    withoutRows,
+    type ContextRowId,
+    type IssueAttachment,
+    type IssueContext,
+    type IssueKind,
+    type IssuePriority,
+    type IssueReceipt,
+    type RouteEntry,
+  } from '../../derive'
+  import type { ResolvedIssueOptions } from '../../options'
+  import type { JourneyView } from '../../session'
+  import { readStored, writeStored } from '../../sidebar/nav'
+  import { captureScreenshot } from './capture-screenshot'
+  import { previewUrl, readAttachment } from './read-attachment'
+
+  interface Props {
+    client: Picked
+    /** `null` while the site has not set reports up. */
+    issues: ResolvedIssueOptions | null
+    journey: JourneyView | null
+    route: readonly RouteEntry[]
+    /** Keys that code commits, which a report leaves out. */
+    codeOwned: ReadonlySet<string>
+    /** The persona the reviewer walks through as. */
+    persona: { id: string; name: string } | null
+    /** Re-reads the journey before the context is taken. */
+    refreshJourney: () => void
+    /** Hides the panel while a screenshot is taken, and shows it again. */
+    onCapturing: (capturing: boolean) => void
+  }
+
+  const { client, issues, journey, route, codeOwned, persona, refreshJourney, onCapturing }: Props =
+    $props()
+
+  const docsUrl = $derived(
+    `${client.documentationSiteUrl}/how-to/send-issue-reports-to-your-tracker`,
+  )
+  const workspace = $derived(client.searchParams['preview-token']?.[0] ? 'draft' : 'published')
+
+  /** `sessionStorage` key holding the unsent title, description, kind and priority. */
+  const DRAFT_KEY = 'picked-devtools-issue-draft'
+  const sessionStorageOf = (): Storage => window.sessionStorage
+
+  /** What the form keeps for this tab while it is unsent. */
+  interface StoredDraft {
+    title: string
+    description: string
+    kind: IssueKind
+    priority: IssuePriority
+  }
+
+  const EMPTY_DRAFT: StoredDraft = { title: '', description: '', kind: 'bug', priority: 'none' }
+
+  /**
+   * The draft this tab left unsent, read back from `sessionStorage`.
+   *
+   * @returns {StoredDraft} The draft, or an empty one.
+   * @example readDraft().title
+   */
+  function readDraft(): StoredDraft {
+    const stored = readStored(sessionStorageOf, DRAFT_KEY)
+    if (stored === null) return EMPTY_DRAFT
+    try {
+      const parsed: unknown = JSON.parse(stored)
+      if (typeof parsed !== 'object' || parsed === null) return EMPTY_DRAFT
+      const entries = Object.fromEntries(Object.entries(parsed))
+      return {
+        title: typeof entries.title === 'string' ? entries.title : '',
+        description: typeof entries.description === 'string' ? entries.description : '',
+        kind: ISSUE_KINDS.find((option) => option.value === entries.kind)?.value ?? 'bug',
+        priority:
+          ISSUE_PRIORITIES.find((option) => option.value === entries.priority)?.value ?? 'none',
+      }
+    } catch {
+      return EMPTY_DRAFT
+    }
+  }
+
+  const draft = readDraft()
+  let title = $state(draft.title)
+  let description = $state(draft.description)
+  let kind = $state<IssueKind>(draft.kind)
+  let priority = $state<IssuePriority>(draft.priority)
+  let attachments = $state.raw<IssueAttachment[]>([])
+  let removed = $state.raw<ReadonlySet<ContextRowId>>(new Set())
+  let droppedLabels = $state.raw<ReadonlySet<string>>(new Set())
+  let titleError = $state<string | undefined>(undefined)
+  let fileError = $state<string | null>(null)
+  let capturing = $state(false)
+  let status = $state<
+    | { kind: 'editing' }
+    | { kind: 'sending' }
+    | { kind: 'sent'; receipt: IssueReceipt }
+    | { kind: 'failed'; message: string }
+  >({ kind: 'editing' })
+  let fileInput = $state<HTMLInputElement | undefined>(undefined)
+
+  $effect(() => {
+    writeStored(sessionStorageOf, DRAFT_KEY, JSON.stringify({ title, description, kind, priority }))
+  })
+
+  /**
+   * Takes the context now: where the visitor is, how they got there, and their responses.
+   *
+   * @returns {IssueContext} The context.
+   * @example takeContext().step
+   */
+  function takeContext(): IssueContext {
+    refreshJourney()
+    return buildIssueContext({
+      capturedAt: new Date(),
+      pagePath: window.location.pathname,
+      workspace,
+      journey,
+      route,
+      responses: client.responses.getAllStore.getState(),
+      codeOwned,
+      persona,
+      site: issues?.context(client) ?? {},
+      redact: issues?.redact ?? null,
+    })
+  }
+
+  let context = $state.raw<IssueContext>(takeContext())
+  const rows = $derived(contextRows(context))
+  const suggestedLabels = $derived(issues?.labels(context) ?? [])
+  const labels = $derived(suggestedLabels.filter((label) => !droppedLabels.has(label)))
+  const sending = $derived(status.kind === 'sending')
+
+  /**
+   * Takes the context again, keeping the parts the reviewer removed out.
+   *
+   * @example refresh()
+   */
+  function refresh(): void {
+    context = takeContext()
+  }
+
+  /**
+   * Removes a part of the context from the report, or puts it back.
+   *
+   * @param {ContextRowId} id - The part.
+   * @example toggleRow('responses')
+   */
+  function toggleRow(id: ContextRowId): void {
+    removed = toggled(removed, id)
+  }
+
+  /**
+   * Drops a suggested label from the report, or puts it back.
+   *
+   * @param {string} label - The label.
+   * @example toggleLabel('exp/funnel')
+   */
+  function toggleLabel(label: string): void {
+    droppedLabels = toggled(droppedLabels, label)
+  }
+
+  /**
+   * Attaches files, refusing any a report cannot carry.
+   *
+   * @param {Iterable<File>} files - The files picked or dropped.
+   * @example await attachFiles(input.files)
+   */
+  async function attachFiles(files: Iterable<File>): Promise<void> {
+    fileError = null
+    for (const file of files) {
+      const problem = attachmentProblem(file, attachments)
+      if (problem !== null) {
+        fileError = problem
+        continue
+      }
+
+      try {
+        attachments = [...attachments, await readAttachment(file, file.name)]
+      } catch {
+        fileError = `"${file.name}" could not be read.`
+      }
+    }
+  }
+
+  /**
+   * Takes a screenshot of the page, with the panel hidden for it.
+   *
+   * @example await takeScreenshot()
+   */
+  async function takeScreenshot(): Promise<void> {
+    fileError = null
+    capturing = true
+    try {
+      const shot = await captureScreenshot({
+        hide: () => onCapturing(true),
+        show: () => onCapturing(false),
+      })
+      const problem = attachmentProblem(
+        { name: shot.filename, type: shot.contentType, size: shot.size },
+        attachments,
+      )
+      if (problem === null) attachments = [...attachments, shot]
+      else fileError = problem
+    } catch (error) {
+      fileError = error instanceof Error ? error.message : 'No screenshot was taken.'
+    } finally {
+      capturing = false
+    }
+  }
+
+  /**
+   * Removes an attachment.
+   *
+   * @param {IssueAttachment} attachment - The attachment.
+   * @example detach(attachments[0])
+   */
+  function detach(attachment: IssueAttachment): void {
+    attachments = attachments.filter((entry) => entry !== attachment)
+  }
+
+  /**
+   * Sends the report through the site's sink.
+   *
+   * @example await send()
+   */
+  async function send(): Promise<void> {
+    if (issues === null || sending) return
+    const problem = draftProblem({ title, description })
+    titleError = problem ?? undefined
+    if (problem !== null) return
+    status = { kind: 'sending' }
+    try {
+      const report = buildIssueReport(
+        { title, description, kind, priority, labels, attachments },
+        withoutRows(context, removed),
+      )
+      status = { kind: 'sent', receipt: await issues.sink(report) }
+      title = ''
+      description = ''
+      attachments = []
+    } catch (error) {
+      status = {
+        kind: 'failed',
+        message: error instanceof Error ? error.message : 'The report was not sent.',
+      }
+    }
+  }
+
+  /**
+   * Starts a new report: an empty form, and the context taken again.
+   *
+   * @example startOver()
+   */
+  function startOver(): void {
+    title = ''
+    description = ''
+    kind = 'bug'
+    priority = 'none'
+    attachments = []
+    removed = new Set()
+    droppedLabels = new Set()
+    titleError = undefined
+    fileError = null
+    status = { kind: 'editing' }
+    refresh()
+  }
+
+  /**
+   * Sends on Ctrl or Cmd with Enter in the description, where Enter alone starts a new line.
+   *
+   * @param {KeyboardEvent} event - The key press.
+   * @example onKeydown(event)
+   */
+  function onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      void send()
+    }
+  }
+
+  /**
+   * Attaches the files dropped on the attachments area.
+   *
+   * @param {DragEvent} event - The drop.
+   * @example onDrop(event)
+   */
+  function onDrop(event: DragEvent): void {
+    event.preventDefault()
+    const files = event.dataTransfer?.files
+    if (files) void attachFiles(files)
+  }
+
+  /**
+   * A file size, in kB or MB.
+   *
+   * @param {number} bytes - The size.
+   * @returns {string} The size as the reviewer reads it.
+   * @example sizeText(1_572_864) // '1.5 MB'
+   */
+  function sizeText(bytes: number): string {
+    if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} kB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  }
+</script>
+
+{#if issues === null}
+  <Stack direction="vertical" gap="medium" padding="medium" justify="center">
+    <EmptyState
+      message="Reports are not set up on this site yet"
+      hint="A developer connects the devtools to the team's issue tracker. Each report then goes straight to it, with where you are in the experience."
+    />
+    <Button variant="secondary" size="small" href={docsUrl} target="_blank">
+      How to set up reports
+    </Button>
+  </Stack>
+{:else if status.kind === 'sent'}
+  <div class="sent" data-testid="devtools-issue-sent">
+    <Banner status="success" title="Report sent">
+      {#if status.receipt.reference}
+        Its reference is <strong>{status.receipt.reference}</strong>.
+      {:else}
+        The team has it.
+      {/if}
+      {#if status.receipt.url}
+        <a class="issue-link" href={status.receipt.url} target="_blank" rel="noopener noreferrer"
+          >Open the issue</a
+        >
+      {/if}
+    </Banner>
+    <div>
+      <Button variant="secondary" size="small" onclick={startOver}>Report another issue</Button>
+    </div>
+  </div>
+{:else}
+  <form
+    class="report"
+    novalidate
+    data-testid="devtools-issue-form"
+    onsubmit={(event) => {
+      event.preventDefault()
+      void send()
+    }}
+  >
+    {#if status.kind === 'failed'}
+      <Banner status="error" title="The report was not sent" testId="devtools-issue-failed">
+        {status.message} Your report is still here; try again.
+      </Banner>
+    {/if}
+
+    <TextField
+      label="Title"
+      name="issue-title"
+      required
+      placeholder="What is wrong, in a few words"
+      value={title}
+      error={titleError}
+      oninput={(value) => {
+        title = value
+        titleError = undefined
+      }}
+    />
+
+    <div class="field">
+      <label class="label" for="field-issue-description">Description</label>
+      <textarea
+        id="field-issue-description"
+        class="textarea"
+        name="issue-description"
+        rows="5"
+        placeholder="What you did, what you saw, and what you expected to see"
+        value={description}
+        onkeydown={onKeydown}
+        oninput={(event) => {
+          if (event.target instanceof HTMLTextAreaElement) description = event.target.value
+        }}
+      ></textarea>
+    </div>
+
+    <div class="pair">
+      <Select
+        label="Kind"
+        name="issue-kind"
+        options={ISSUE_KINDS.map((option) => ({ value: option.value, label: option.label }))}
+        value={kind}
+        onchange={(value) => {
+          kind = ISSUE_KINDS.find((option) => option.value === value)?.value ?? 'bug'
+        }}
+      />
+      <Select
+        label="Priority"
+        name="issue-priority"
+        options={ISSUE_PRIORITIES.map((option) => ({ value: option.value, label: option.label }))}
+        value={priority}
+        onchange={(value) => {
+          priority = ISSUE_PRIORITIES.find((option) => option.value === value)?.value ?? 'none'
+        }}
+      />
+    </div>
+
+    {#if suggestedLabels.length > 0}
+      <div class="field">
+        <span class="label">Labels</span>
+        <div class="chips" role="group" aria-label="Labels">
+          {#each suggestedLabels as label (label)}
+            <button
+              type="button"
+              class="chip"
+              class:dropped={droppedLabels.has(label)}
+              aria-pressed={!droppedLabels.has(label)}
+              data-testid="devtools-issue-label"
+              onclick={() => toggleLabel(label)}
+            >
+              {label}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <section
+      class="attachments"
+      aria-label="Screenshots and files"
+      ondragover={(event) => event.preventDefault()}
+      ondrop={onDrop}
+    >
+      <div class="attachment-actions">
+        <Button
+          variant="secondary"
+          size="small"
+          loading={capturing}
+          testId="devtools-issue-screenshot"
+          onclick={() => void takeScreenshot()}
+        >
+          Take screenshot
+        </Button>
+        <Button variant="secondary" size="small" onclick={() => fileInput?.click()}>
+          Attach file
+        </Button>
+        <span class="hint">or drop files here</span>
+        <input
+          bind:this={fileInput}
+          class="file-input"
+          type="file"
+          multiple
+          accept={ATTACHMENT_TYPES.join(',')}
+          tabindex="-1"
+          aria-hidden="true"
+          onchange={(event) => {
+            const input = event.currentTarget
+            if (!input.files) return
+            void attachFiles([...input.files]).then(() => {
+              input.value = ''
+            })
+          }}
+        />
+      </div>
+      {#if fileError}
+        <p class="file-error" role="alert">{fileError}</p>
+      {/if}
+      {#if attachments.length > 0}
+        <ul class="files" data-testid="devtools-issue-files">
+          {#each attachments as attachment (attachment)}
+            {@const preview = previewUrl(attachment)}
+            <li class="file">
+              {#if preview}
+                <img class="thumb" src={preview} alt="" />
+              {:else}
+                <span class="thumb doc" aria-hidden="true"
+                  >{attachment.filename.split('.').pop()}</span
+                >
+              {/if}
+              <span class="file-name">{attachment.filename}</span>
+              <span class="file-size">{sizeText(attachment.size)}</span>
+              <button
+                type="button"
+                class="text-button"
+                aria-label="Remove {attachment.filename}"
+                onclick={() => detach(attachment)}>Remove</button
+              >
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </section>
+
+    <Card>
+      {#snippet header()}
+        <div class="context-head">
+          <span class="context-title">Sent with the report</span>
+          <span class="context-actions">
+            <button type="button" class="text-button" onclick={refresh}>Refresh</button>
+            <CopyButton
+              text={JSON.stringify(withoutRows(context, removed), null, 2)}
+              label="Copy context"
+            />
+          </span>
+        </div>
+      {/snippet}
+      {#if rows.length === 0}
+        <p class="empty">Nothing about the session goes with this report.</p>
+      {:else}
+        <dl class="context" data-testid="devtools-issue-context">
+          {#each rows as row (row.id)}
+            <div class="context-row" class:removed={removed.has(row.id)}>
+              <dt>{row.label}</dt>
+              <dd>{removed.has(row.id) ? 'Left out' : row.value}</dd>
+              <button
+                type="button"
+                class="text-button"
+                aria-label="{removed.has(row.id) ? 'Put back' : 'Leave out'} {row.label}"
+                onclick={() => toggleRow(row.id)}
+                >{removed.has(row.id) ? 'Put back' : 'Leave out'}</button
+              >
+            </div>
+          {/each}
+        </dl>
+      {/if}
+      {#if context.hidden.length > 0 && !removed.has('responses')}
+        <p class="privacy">
+          Email addresses, phone numbers, dates and personal details in your responses are hidden.
+        </p>
+      {/if}
+    </Card>
+
+    <div class="send">
+      <Button variant="ghost" size="small" onclick={startOver} disabled={sending}>Clear</Button>
+      <Button
+        variant="primary"
+        size="small"
+        type="submit"
+        loading={sending}
+        testId="devtools-issue-send"
+      >
+        Send report
+      </Button>
+    </div>
+  </form>
+{/if}
+
+<style>
+  .report,
+  .sent {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .label {
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-900);
+  }
+
+  /* Specific enough to win over the panel's monospace rule for its JSON editors. */
+  .field .textarea {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 6rem;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-gray-300);
+    border-radius: var(--radius-md);
+    background-color: var(--color-white);
+    color: var(--color-gray-900);
+    font-family: inherit;
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    resize: vertical;
+  }
+
+  .field .textarea:focus {
+    outline: none;
+    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+  }
+
+  .pair {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    gap: var(--space-3);
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+  }
+
+  .chip {
+    padding: var(--space-1) var(--space-2-5);
+    border: 1px solid var(--color-blue-600);
+    border-radius: var(--radius-full);
+    background: var(--color-blue-600);
+    color: var(--color-white);
+    font-family: inherit;
+    font-size: var(--text-xs);
+    cursor: pointer;
+  }
+
+  .chip.dropped {
+    border-color: var(--color-gray-300);
+    background: var(--color-white);
+    color: var(--color-gray-500);
+    text-decoration: line-through;
+  }
+
+  .chip:focus-visible,
+  .text-button:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
+  }
+
+  .attachments {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border: 1px dashed var(--color-gray-300);
+    border-radius: var(--radius-md);
+  }
+
+  .attachment-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .hint {
+    color: var(--color-gray-500);
+    font-size: var(--text-xs);
+  }
+
+  .file-input {
+    display: none;
+  }
+
+  .file-error {
+    margin: 0;
+    color: var(--color-red-600);
+    font-size: var(--text-sm);
+  }
+
+  .files {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .file {
+    display: grid;
+    grid-template-columns: 3rem minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+  }
+
+  .thumb {
+    width: 3rem;
+    height: 2.25rem;
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-sm);
+    object-fit: cover;
+  }
+
+  .thumb.doc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-gray-50);
+    color: var(--color-gray-500);
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+  }
+
+  .file-name {
+    overflow: hidden;
+    color: var(--color-gray-900);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-size {
+    color: var(--color-gray-500);
+    font-size: var(--text-xs);
+  }
+
+  .text-button {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--color-blue-600);
+    font: inherit;
+    font-size: var(--text-xs);
+    cursor: pointer;
+  }
+
+  .text-button:hover {
+    text-decoration: underline;
+  }
+
+  .context-head {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .context-title {
+    color: var(--color-gray-900);
+    font-size: var(--text-sm);
+    font-weight: var(--font-semibold);
+  }
+
+  .context-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .context {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: var(--space-2) var(--space-4);
+  }
+
+  .context-row {
+    display: grid;
+    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
+    align-items: baseline;
+    gap: var(--space-3);
+    padding: var(--space-1-5) 0;
+    border-bottom: 1px solid var(--color-gray-100);
+    font-size: var(--text-sm);
+  }
+
+  .context-row:last-child {
+    border-bottom: 0;
+  }
+
+  .context-row dt {
+    color: var(--color-gray-500);
+  }
+
+  .context-row dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--color-gray-900);
+  }
+
+  .context-row.removed dd {
+    color: var(--color-gray-400);
+    font-style: italic;
+  }
+
+  .empty {
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .empty,
+  .privacy {
+    margin: 0;
+    color: var(--color-gray-500);
+    font-size: var(--text-xs);
+  }
+
+  .privacy {
+    padding: 0 var(--space-4) var(--space-3);
+  }
+
+  .issue-link {
+    color: inherit;
+    font-weight: var(--font-medium);
+  }
+
+  .send {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+  }
+</style>