@sphoro/bugcatch-web-sdk 0.17.0 → 0.19.0

package/src/updates.js

@@ -11,6 +11,9 @@
 // let anyone read anyone's reports. Holding this token is proof of having
 // filed them.
 
+import { tooManyMessage } from './busy.js';
+import { readableOn, INK, PAPER } from './accent.js';
+
 const TOKEN_KEY = 'bugcatch.watch';
 const BACKOFF_MS = [2000, 5000, 15000, 30000, 60000];
 
@@ -308,6 +311,7 @@ export async function sendMessage({ apiBase, bugId, body, attachments }) {
       const problem = await res.json();
       detail = Array.isArray(problem.message) ? problem.message.join(', ') : problem.message || '';
     } catch { /* non-JSON error */ }
+    if (res.status === 429) throw new Error(tooManyMessage(detail));
     throw new Error(detail || `[BugCatch] could not send that (HTTP ${res.status}).`);
   }
   return res.json();
@@ -384,7 +388,7 @@ export async function callKindsForProject({ apiBase, apiKey, projectId }) {
  * call could be placed — which is a success for the report and a failure only
  * for the call, and the caller is expected to tell them apart.
  */
-export async function reportByCall({ apiBase, apiKey, token, payload }) {
+export async function reportByCall({ apiBase, apiKey, token, payload, watchToken }) {
   const res = await fetch(`${apiBase}/ingest/calls`, {
     method: 'POST',
     headers: {
@@ -396,7 +400,9 @@ export async function reportByCall({ apiBase, apiKey, token, payload }) {
       // is saying, an inch below the message, who they are signed in as.
       ...(token ? { 'X-BugCatch-Session': token } : {}),
     },
-    body: JSON.stringify(payload),
+    // The watch token this browser holds, so the one filing hands back covers
+    // the reports it already could — see withHeldToken in index.js.
+    body: JSON.stringify(watchToken ? { ...payload, watchToken } : payload),
   });
 
   if (!res.ok) {
@@ -406,7 +412,8 @@ export async function reportByCall({ apiBase, apiKey, token, payload }) {
       detail = Array.isArray(problem.message) ? problem.message.join(', ') : problem.message || '';
     } catch { /* non-JSON error */ }
     const err = new Error(
-      detail || `[BugCatch] the call could not be started (HTTP ${res.status}).`,
+      res.status === 429 ? tooManyMessage(detail)
+        : detail || `[BugCatch] the call could not be started (HTTP ${res.status}).`,
     );
     // Carried so a session the server has stopped recognising can be told from
     // every other refusal and forgotten, rather than pressing Call into the
@@ -652,9 +659,21 @@ const STATUS_COPY = {
  */
 const KIND_ACCENT = {
   status: null,        // falls back to the host's configured accent
-  severity: '#e8912a',
-  assignment: '#4da3ff',
-  reply: '#35b87f',
+  severity: '#f2a54a',
+  assignment: '#79a8ff',
+  reply: '#4fd19a',
+};
+
+// The cards are always dark — they float over pages of every colour, and a
+// near-black card with a hairline reads on all of them. The colours are the
+// product's dark palette.
+const CARD = {
+  bg: '#111113',
+  fg: '#f3f2ef',
+  muted: '#b3b0aa',
+  faint: '#8f8c86',
+  ring: 'rgba(255,255,255,.09)',
+  brand: '#a59cff',
 };
 
 /**
@@ -730,7 +749,7 @@ function dockOffset() {
  * instead of a notification floating over the report it is about.
  */
 export function createUpdateNotifier({
-  accent = '#4F46E5',
+  accent = null,
   position = 'bottom-right',
   onRead = null,
   onReadAll = null,
@@ -778,17 +797,23 @@ export function createUpdateNotifier({
     setTimeout(() => el.remove(), 250);
   }
 
+  // On a dark card the ink default is a white pill with ink words; a host's
+  // own colour keeps whichever words read on it.
+  const primaryBg = accent || PAPER;
+  const primaryFg = accent ? readableOn(accent) : INK;
+
   function button(label, primary) {
     const el = document.createElement('button');
     el.type = 'button';
     el.textContent = label;
     el.style.cssText = [
-      'padding:5px 11px',
-      `border:${primary ? '0' : '1px solid rgba(236,238,242,.24)'}`,
-      'border-radius:6px',
-      `background:${primary ? accent : 'transparent'}`,
-      `color:${primary ? '#fff' : '#eceef2'}`,
-      'font:600 12px/1.4 inherit',
+      'padding:6px 12px',
+      'border:0',
+      `box-shadow:${primary ? 'none' : `inset 0 0 0 1px ${CARD.ring}`}`,
+      'border-radius:999px',
+      `background:${primary ? primaryBg : 'rgba(255,255,255,.06)'}`,
+      `color:${primary ? primaryFg : CARD.fg}`,
+      'font:560 12px/1.4 inherit',
       'cursor:pointer',
       'white-space:nowrap',
     ].join(';');
@@ -801,13 +826,12 @@ export function createUpdateNotifier({
     el.style.cssText = [
       'box-sizing:border-box',
       'width:100%',
-      'padding:12px 14px',
-      'border-radius:10px',
-      'background:#1b1e26',
-      'color:#eceef2',
+      'padding:13px 14px',
+      'border-radius:14px',
+      `background:${CARD.bg}`,
+      `color:${CARD.fg}`,
       'font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
-      'box-shadow:0 12px 30px rgba(0,0,0,0.45)',
-      `border-left:3px solid ${KIND_ACCENT[record?.kind] || accent}`,
+      `box-shadow:0 0 0 1px ${CARD.ring},0 20px 44px -12px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.25)`,
       'opacity:0',
       `transform:translateY(${atTop ? -8 : 8}px)`,
       'transition:opacity .2s ease,transform .2s ease',
@@ -815,25 +839,33 @@ export function createUpdateNotifier({
     ].join(';');
 
     const title = document.createElement('div');
-    title.style.cssText = 'font-weight:600;margin-bottom:2px';
-    title.textContent = updateHeadline(record);
+    title.style.cssText = 'display:flex;align-items:baseline;gap:8px;font-weight:600;margin-bottom:2px';
+    // The kind's colour, as a dot before the headline rather than a stripe
+    // down the card: a fix and a severity change are still told apart.
+    const dot = document.createElement('span');
+    dot.setAttribute('aria-hidden', 'true');
+    dot.style.cssText = `flex:none;width:7px;height:7px;border-radius:50%;transform:translateY(-1px);background:${
+      KIND_ACCENT[record?.kind] || accent || CARD.brand}`;
+    const headline = document.createElement('span');
+    headline.textContent = updateHeadline(record);
+    title.append(dot, headline);
 
     const body = document.createElement('div');
     // A reply is the one kind whose detail is worth more room than a title, and
     // it is the only text here the team wrote rather than the reporter.
     body.style.cssText = record?.kind === 'reply'
-      ? 'color:#a4abba;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden'
-      : 'color:#a4abba';
+      ? `color:${CARD.muted};padding-left:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden`
+      : `color:${CARD.muted};padding-left:15px`;
     // textContent, not innerHTML: this is text a person typed, being written
     // back into somebody else's page.
     body.textContent = updateDetail(record);
 
     const actions = document.createElement('div');
     actions.style.cssText =
-      'display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap';
+      'display:flex;align-items:center;gap:8px;margin-top:10px;padding-left:15px;flex-wrap:wrap';
 
     const when = document.createElement('span');
-    when.style.cssText = 'color:#7b8394;font-size:11px;margin-right:auto';
+    when.style.cssText = `color:${CARD.faint};font-size:11px;margin-right:auto`;
     when.textContent = agoLabel(record?.at);
 
     const read = button('Mark as read', false);
@@ -865,12 +897,12 @@ export function createUpdateNotifier({
       'display:flex',
       'align-items:center',
       'gap:8px',
-      'padding:8px 12px',
-      'border-radius:10px',
-      'background:#1b1e26',
-      'color:#a4abba',
+      'padding:8px 10px 8px 14px',
+      'border-radius:999px',
+      `background:${CARD.bg}`,
+      `color:${CARD.muted}`,
       'font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
-      'box-shadow:0 12px 30px rgba(0,0,0,0.45)',
+      `box-shadow:0 0 0 1px ${CARD.ring},0 12px 30px -10px rgba(0,0,0,.5)`,
       'pointer-events:auto',
     ].join(';');
 
@@ -1020,12 +1052,18 @@ export async function matchKnownIssues({ apiBase, apiKey, projectId, q, sessionT
 export async function joinKnownIssue({
   apiBase, apiKey, projectId, bugId, reporterEmail, reporterName, metadata, logs, sessionToken,
 }) {
+  // The token this browser already holds goes back with the join, so the one
+  // that comes back still covers the reports it filed as well as this issue.
+  const held = readToken();
   const res = await fetch(
     `${apiBase}/ingest/known-issues/${encodeURIComponent(bugId)}/join`,
     {
       method: 'POST',
       headers: knownIssueHeaders(apiKey, sessionToken),
-      body: JSON.stringify({ projectId, reporterEmail, reporterName, metadata, logs }),
+      body: JSON.stringify({
+        projectId, reporterEmail, reporterName, metadata, logs,
+        ...(held ? { watchToken: held } : {}),
+      }),
     },
   );
   if (!res.ok) throw new Error(await readJoinError(res));
@@ -1043,12 +1081,37 @@ function knownIssueHeaders(apiKey, sessionToken) {
 }
 
 async function readJoinError(res) {
+  let message = '';
   try {
     const body = await res.json();
-    const message = Array.isArray(body.message) ? body.message.join(', ') : body.message;
-    if (message) return message;
+    message = Array.isArray(body.message) ? body.message.join(', ') : body.message || '';
   } catch { /* non-JSON error */ }
-  return `Could not add you to this issue (HTTP ${res.status})`;
+  if (res.status === 429) return tooManyMessage(message);
+  return message || `Could not add you to this issue (HTTP ${res.status})`;
+}
+
+/**
+ * Rate how a settled report was handled, out of five, with a sentence if they
+ * want one. Rating again replaces the earlier score.
+ *
+ * Same credential as everything else here: the watch token, which is proof of
+ * having filed the report. `?projectId=` goes with it so a token that reaches
+ * more than one project is narrowed to the one this widget is on.
+ */
+export async function rateReport({ apiBase, bugId, score, comment }) {
+  const token = readToken();
+  if (!token) throw new Error('This browser cannot access that report.');
+  const res = await fetch(`${apiBase}/ingest/watch/reports/${encodeURIComponent(bugId)}/rating${projectQuery()}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ score, ...(comment ? { comment } : {}) }),
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const message = Array.isArray(data.message) ? data.message.join(', ') : data.message;
+    throw new Error(message || 'Could not send your rating. Please try again.');
+  }
+  return data;
 }
 
 export async function verifyFix({ apiBase, bugId, ...feedback }) {