From 56858390cab58401d313cc62a73f681fd79f0e76 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 7 Apr 2022 11:24:07 -0500
Subject: [PATCH] notifications: allow viewing stack trace of unexpected error

Previously, it was only possible to view the stack trace by clicking
the copy button and pasting it somewhere.
---
 .../UnexpectedErrorNotification.scss          | 10 +++++++++
 .../UnexpectedErrorNotification.tsx           | 21 +++++++++++++++++--
 src/notifications/i18n.ts                     |  1 +
 src/notifications/translations/en.json        |  1 +
 src/utils/react.ts                            | 17 ++++++++++++++-
 5 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/notifications/UnexpectedErrorNotification.scss

diff --git a/src/notifications/UnexpectedErrorNotification.scss b/src/notifications/UnexpectedErrorNotification.scss
new file mode 100644
index 00000000..c0ac8343
--- /dev/null
+++ b/src/notifications/UnexpectedErrorNotification.scss
@@ -0,0 +1,10 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+@import '../variables.scss';
+
+pre.pb-notification-stack-trace {
+    max-width: $pt-grid-size * 50;
+    max-height: $pt-grid-size * 50;
+    overflow: auto;
+}
diff --git a/src/notifications/UnexpectedErrorNotification.tsx b/src/notifications/UnexpectedErrorNotification.tsx
index 62b90207..66705e38 100644
--- a/src/notifications/UnexpectedErrorNotification.tsx
+++ b/src/notifications/UnexpectedErrorNotification.tsx
@@ -3,9 +3,11 @@
 
 // Provides special notification contents for unexpected errors.
 
-import { AnchorButton, Button, ButtonGroup, Intent } from '@blueprintjs/core';
+import './UnexpectedErrorNotification.scss';
+import { AnchorButton, Button, ButtonGroup, Collapse, Intent } from '@blueprintjs/core';
 import { useI18n } from '@shopify/react-i18n';
-import React from 'react';
+import React, { useState } from 'react';
+import { useUniqueId } from '../utils/react';
 import { I18nId } from './i18n';
 
 type UnexpectedErrorNotificationProps = {
@@ -18,10 +20,25 @@ const UnexpectedErrorNotification: React.VoidFunctionComponent<
 > = ({ messageId, err }) => {
     // istanbul ignore next: babel-loader rewrites this line
     const [i18n] = useI18n();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const labelId = useUniqueId('pb-notification');
 
     return (
         <>
             <p>{i18n.translate(messageId, { errorMessage: err.message })}</p>
+            <span>
+                <Button
+                    aria-labelledby={labelId}
+                    minimal={true}
+                    small={true}
+                    icon={isExpanded ? 'chevron-down' : 'chevron-right'}
+                    onClick={() => setIsExpanded((v) => !v)}
+                />
+                <span id={labelId}>{i18n.translate(I18nId.TechnicalInfo)}</span>
+            </span>
+            <Collapse isOpen={isExpanded}>
+                <pre className="pb-notification-stack-trace">{err.stack}</pre>
+            </Collapse>
             <div>
                 <ButtonGroup minimal={true} fill={true}>
                     <Button
diff --git a/src/notifications/i18n.ts b/src/notifications/i18n.ts
index 234a3004..779f846e 100644
--- a/src/notifications/i18n.ts
+++ b/src/notifications/i18n.ts
@@ -6,6 +6,7 @@
 export enum I18nId {
     AppNoUpdateFound = 'app.noUpdateFound',
     CopyErrorMessage = 'copyErrorMessage',
+    TechnicalInfo = 'technicalInfo',
     ReportBug = 'reportBug',
     BleUnexpectedError = 'ble.unexpectedError',
     BleGattPermission = 'ble.gattPermission',
diff --git a/src/notifications/translations/en.json b/src/notifications/translations/en.json
index 8b889e98..6095537a 100644
--- a/src/notifications/translations/en.json
+++ b/src/notifications/translations/en.json
@@ -1,5 +1,6 @@
 {
     "copyErrorMessage": "Copy Error Message",
+    "technicalInfo": "Expand for detailed technical information",
     "reportBug": "Report Bug",
     "app": {
         "noUpdateFound": "{appName} is already up to date."
diff --git a/src/utils/react.ts b/src/utils/react.ts
index ca3ff15b..ce50b285 100644
--- a/src/utils/react.ts
+++ b/src/utils/react.ts
@@ -1,6 +1,7 @@
 // helper functions for React components
 
-import React from 'react';
+import React, { useState } from 'react';
+import { createCountFunc } from './iter';
 
 /**
  * Callback that can be passed to onContextMenu event handlers to prevent
@@ -11,3 +12,17 @@ export const preventBrowserNativeContextMenu: React.MouseEventHandler = (e) =>
 
 /** Style to disable pointer events. */
 export const pointerEventsNone: React.CSSProperties = { pointerEvents: 'none' };
+
+const nextId = createCountFunc();
+
+/**
+ * React hook to get a unique identifier, e.g. for linking components via
+ * aria-labelledby.
+ *
+ * @param prefix A namespace prefix for the identifier.
+ * @returns A unique identifier in the form "prefix-N"
+ */
+export const useUniqueId = (prefix: string): string => {
+    const [uniqueId] = useState(`${prefix}-${nextId()}`);
+    return uniqueId;
+};