Feature/copyable error messages

src/components/mui/SnackbarNotification/index.js

@@ -19,11 +19,17 @@ import {
   Alert,
   Box,
   Collapse,
+  IconButton,
   Link,
   Snackbar,
+  Tooltip,
   Typography
 } from "@mui/material";
+import { visuallyHidden } from "@mui/utils";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import ErrorIcon from "@mui/icons-material/Error";
 import SnackbarNotificationContext from "./Context";
 export { useSnackbarMessage } from "./Context";
@@ -44,6 +50,13 @@ import { clearConsumedSnackbarMessage } from "../../../utils/actions";
 const formatSentAt = (msg) =>
   formatEpoch(msg.receivedAt / MILLISECONDS_IN_SECOND, "h:mm:ss a");
 
+const toCopyText = (msg) => {
+  const html = String(msg.html).replace(/<br\s*\/?>/gi, "\n");
+  const text = new DOMParser().parseFromString(html, "text/html").body
+    .textContent;
+  return [text.trim(), msg.details].filter(Boolean).join("\n\n");
+};
+
 // a queue shows its first message, a group shows all of them at once
 const useMessages = ({ grouped = false } = {}) => {
   const [messages, setMessages] = useState([]);
@@ -64,17 +77,24 @@ const useMessages = ({ grouped = false } = {}) => {
       // a blank message never opens, since it would block the queue
       if (empty(msg.html)) return prev;
       const now = Date.now();
-      // skip a repeat unless the first is fading out; errors only within the dedupe window
-      const isRepeat = prev.some(
+      // a repeat adds its details to the first, unless the first is fading out; errors only within the dedupe window
+      const repeat = prev.find(
         (m) =>
           !closingRef.current.includes(m) &&
           m.html === msg.html &&
           m.type === msg.type &&
           (!grouped || now - m.receivedAt < NOTIFICATION_DEDUPE_WINDOW)
       );
-      if (isRepeat) return prev;
-      const next = { ...msg, receivedAt: now };
-      return [...prev, next];
+      if (!repeat) return [...prev, { ...msg, receivedAt: now }];
+      if (!msg.details) return prev;
+      return prev.map((m) =>
+        m === repeat
+          ? {
+              ...m,
+              details: [m.details, msg.details].filter(Boolean).join("\n\n")
+            }
+          : m
+      );
     });
 
   // closes what is on screen; anything newer shows once it has faded out
@@ -120,6 +140,45 @@ const NotificationSnackbar = ({ queue, vertical }) => {
     queue.onExited();
   };
 
+  // clipboard results for an earlier message are ignored
+  const [copyResult, setCopyResult] = useState(null);
+  const copyStatus = copyResult?.message === msgData ? copyResult.status : null;
+  // clipboard callbacks only see their own render, so they read a ref
+  const msgRef = useRef(msgData);
+  useEffect(() => {
+    msgRef.current = msgData;
+  });
+  const copyStatusKey = {
+    copied: "general.copied",
+    failed: "general.copy_failed"
+  }[copyStatus];
+  const copyLabel =
+    count > 1 ? "general.copy_all_errors" : "general.copy_error";
+  const handleCopy = () => {
+    // a late result for a message no longer on screen is dropped
+    const finish = (status) =>
+      msgRef.current === msgData && setCopyResult({ message: msgData, status });
+    // a group copies oldest first, each error under its position and sent time
+    const copyText =
+      count > 1
+        ? queue.shown
+            .map(
+              (m, i) =>
+                `[${i + 1}/${count}] ${formatSentAt(m)}\n${toCopyText(m)}`
+            )
+            .join("\n\n")
+        : toCopyText(msgData);
+    // the clipboard can be missing (non-https page) or blocked by the browser
+    try {
+      navigator.clipboard.writeText(copyText).then(
+        () => finish("copied"),
+        () => finish("failed")
+      );
+    } catch (e) {
+      finish("failed");
+    }
+  };
+
   return (
     <Snackbar
       open={queue.open}
@@ -130,6 +189,39 @@ const NotificationSnackbar = ({ queue, vertical }) => {
     >
       <Alert
         onClose={onClose}
+        // a custom action replaces Alert's close button, so errors re-add it
+        action={
+          isSuccess ? undefined : (
+            <>
+              <Tooltip title={T.translate(copyStatusKey || copyLabel)}>
+                <IconButton
+                  size="small"
+                  color="inherit"
+                  aria-label={T.translate(copyLabel)}
+                  onClick={handleCopy}
+                >
+                  {copyStatus === "copied" ? (
+                    <CheckIcon fontSize="small" />
+                  ) : (
+                    <ContentCopyIcon fontSize="small" />
+                  )}
+                </IconButton>
+              </Tooltip>
+              {/* a live region, since screen readers skip the tooltip change */}
+              <Box component="span" role="status" sx={visuallyHidden}>
+                {copyStatusKey && T.translate(copyStatusKey)}
+              </Box>
+              <IconButton
+                size="small"
+                color="inherit"
+                aria-label={T.translate("general.close")}
+                onClick={onClose}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </>
+          )
+        }
         severity={msgData.type}
         variant="filled"
         sx={{ width: "100%", backgroundColor: `${msgData.type}.light` }}

src/components/mui/__tests__/snackbar-notification.test.js

@@ -32,6 +32,28 @@ import {
 } from "../../../utils/constants";
 
 describe("SnackbarNotification", () => {
+  let clearConsumedSnackbarMessage;
+
+  const ui = (snackbarMessage) => (
+    <SnackbarNotification
+      snackbarMessage={snackbarMessage}
+      clearConsumedSnackbarMessage={clearConsumedSnackbarMessage}
+    >
+      <div>App</div>
+    </SnackbarNotification>
+  );
+
+  const mockClipboard = (writeText) =>
+    Object.assign(navigator, { clipboard: { writeText } });
+
+  beforeEach(() => {
+    clearConsumedSnackbarMessage = jest.fn();
+  });
+
+  afterEach(() => {
+    delete navigator.clipboard;
+  });
+
   test("renders children", () => {
     render(
       <SnackbarNotification clearConsumedSnackbarMessage={jest.fn()}>
@@ -78,19 +100,117 @@ describe("SnackbarNotification", () => {
     expect(screen.queryByRole("alert")).not.toBeInTheDocument();
   });
 
+  test("copies an error as plain text with its details", async () => {
+    const writeText = jest.fn().mockResolvedValue();
+    mockClipboard(writeText);
+    render(
+      ui({
+        html: "Start date is required.<br>End date is invalid.<br>",
+        type: "warning",
+        details: "Request: PUT /api/v1/summits/1 (412)"
+      })
+    );
+
+    fireEvent.click(screen.getByLabelText("general.copy_error"));
+
+    expect(writeText).toHaveBeenCalledWith(
+      "Start date is required.\nEnd date is invalid.\n\nRequest: PUT /api/v1/summits/1 (412)"
+    );
+    // let the copied state settle inside the test
+    await screen.findByTestId("CheckIcon");
+  });
+
+  test("shows the check mark and announces Copied only after the clipboard accepts the text", async () => {
+    let accept;
+    mockClipboard(
+      jest.fn(
+        () =>
+          new Promise((resolve) => {
+            accept = resolve;
+          })
+      )
+    );
+    render(ui({ html: "Not found", type: "warning" }));
+
+    fireEvent.click(screen.getByLabelText("general.copy_error"));
+    expect(screen.queryByTestId("CheckIcon")).not.toBeInTheDocument();
+    expect(screen.getByRole("status")).toBeEmptyDOMElement();
+
+    accept();
+    expect(await screen.findByTestId("CheckIcon")).toBeInTheDocument();
+    expect(screen.getByRole("status")).toHaveTextContent("general.copied");
+  });
+
+  test("says the copy failed when the clipboard rejects it", async () => {
+    mockClipboard(jest.fn().mockRejectedValue(new Error("blocked")));
+    render(ui({ html: "Not found", type: "warning" }));
+
+    fireEvent.click(screen.getByLabelText("general.copy_error"));
+
+    expect(await screen.findByText("general.copy_failed")).toHaveAttribute(
+      "role",
+      "status"
+    );
+    expect(screen.queryByTestId("CheckIcon")).not.toBeInTheDocument();
+  });
+
+  test("says the copy failed when there is no clipboard", () => {
+    render(ui({ html: "Not found", type: "warning" }));
+
+    fireEvent.click(screen.getByLabelText("general.copy_error"));
+
+    expect(screen.getByRole("status")).toHaveTextContent("general.copy_failed");
+    expect(screen.queryByTestId("CheckIcon")).not.toBeInTheDocument();
+  });
+
+  test("keeps a newer copy's check mark when an earlier copy finishes late", async () => {
+    let acceptFirst;
+    mockClipboard(
+      jest
+        .fn()
+        .mockReturnValueOnce(
+          new Promise((resolve) => {
+            acceptFirst = resolve;
+          })
+        )
+        .mockResolvedValueOnce()
+    );
+    const { rerender } = render(ui({ html: "First error", type: "warning" }));
+    fireEvent.click(screen.getByLabelText("general.copy_error"));
+    rerender(ui({ html: "Second error", type: "error" }));
+    fireEvent.click(screen.getByLabelText("general.copy_all_errors"));
+    await screen.findByTestId("CheckIcon");
+
+    await act(async () => {
+      acceptFirst();
+    });
+    expect(screen.getByTestId("CheckIcon")).toBeInTheDocument();
+  });
+
+  test("clears the copied state when a new message with the same text shows", async () => {
+    mockClipboard(jest.fn().mockResolvedValue());
+    const { rerender } = render(ui({ html: "Not found", type: "warning" }));
+    fireEvent.click(screen.getByLabelText("general.copy_error"));
+    await screen.findByTestId("CheckIcon");
+
+    // a repeat only shows once the copied one is closed
+    fireEvent.click(screen.getByRole("button", { name: /close/i }));
+    rerender(ui({ html: "Not found", type: "warning" }));
+
+    expect(await screen.findByTestId("ContentCopyIcon")).toBeInTheDocument();
+    expect(screen.queryByTestId("CheckIcon")).not.toBeInTheDocument();
+  });
+
+  test("keeps only the close button on a success message", () => {
+    render(ui({ html: "Saved", type: "success" }));
+
+    expect(screen.queryByLabelText("general.copy_error")).not.toBeInTheDocument();
+    expect(screen.getByLabelText("Close")).toBeInTheDocument();
+  });
+
   describe("pinned and grouped errors", () => {
     const errorA = { html: "First error", type: "warning" };
     const errorB = { html: "Second error", type: "error" };
-    let clearConsumedSnackbarMessage;
-
-    const ui = (snackbarMessage) => (
-      <SnackbarNotification
-        snackbarMessage={snackbarMessage}
-        clearConsumedSnackbarMessage={clearConsumedSnackbarMessage}
-      >
-        <div>App</div>
-      </SnackbarNotification>
-    );
 
     const advance = (ms) =>
       act(() => {
@@ -109,7 +229,6 @@ describe("SnackbarNotification", () => {
 
     beforeEach(() => {
       jest.useFakeTimers();
-      clearConsumedSnackbarMessage = jest.fn();
     });
     afterEach(() => jest.useRealTimers());
 
@@ -250,6 +369,42 @@ describe("SnackbarNotification", () => {
       expect(items[1]).toHaveTextContent("First error");
     });
 
+    test("copies every error in the group, oldest first", async () => {
+      const writeText = jest.fn().mockResolvedValue();
+      mockClipboard(writeText);
+      jest.setSystemTime(new Date(2026, 10, 10, 17, 18, 52));
+      const { rerender } = render(
+        ui({ ...errorA, details: "Request: PUT /api/v1/summits/1 (412)" })
+      );
+      jest.setSystemTime(new Date(2026, 10, 10, 17, 18, 55));
+      rerender(ui(errorB));
+
+      fireEvent.click(screen.getByLabelText("general.copy_all_errors"));
+
+      expect(writeText).toHaveBeenCalledWith(
+        "[1/2] 5:18:52 pm\nFirst error\n\nRequest: PUT /api/v1/summits/1 (412)\n\n[2/2] 5:18:55 pm\nSecond error"
+      );
+      await screen.findByTestId("CheckIcon");
+    });
+
+    test("adds a repeat's details to the error it repeats", async () => {
+      const writeText = jest.fn().mockResolvedValue();
+      mockClipboard(writeText);
+      const { rerender } = render(
+        ui({ ...errorA, details: "Request: GET /api/v1/summits (500)" })
+      );
+      rerender(
+        ui({ ...errorA, details: "Request: GET /api/v1/attendees (500)" })
+      );
+
+      fireEvent.click(screen.getByLabelText("general.copy_error"));
+
+      expect(writeText).toHaveBeenCalledWith(
+        "First error\n\nRequest: GET /api/v1/summits (500)\n\nRequest: GET /api/v1/attendees (500)"
+      );
+      await screen.findByTestId("CheckIcon");
+    });
+
     test("ignores a repeat within the dedupe window", () => {
       const { rerender } = render(ui(errorA));
       rerender(ui({ ...errorA }));

src/i18n/en.json

@@ -10,6 +10,11 @@
     "active": "Active",
     "archived": "Archived",
     "select_summit": "Select a Summit...",
+    "copy_error": "Copy error details",
+    "copy_all_errors": "Copy all errors",
+    "copied": "Copied",
+    "copy_failed": "Couldn't copy",
+    "close": "Close",
     "add": "Add",
     "add_new": "Add New",
     "clear": "Clear",