From 950a54c704d44608e94ce099117b9ba7fde22472 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Fri, 5 Jun 2020 13:00:36 -0300
Subject: [PATCH] Feat/1767 error boundary stack trace (#1772)

* feat: ErrorBoundary collapsed stack trace

* button styles

* Change "Toggle stack trace" to "Stack Trace"

Co-authored-by: James Petts <jamesapetts@gmail.com>
---
 .../ui/src/design/styles/common/button.styl   |  6 +++
 .../ErrorBoundaryDialog.css                   | 18 ++++++++
 .../ErrorBoundaryDialog.js                    | 44 ++++++++++++++-----
 3 files changed, 56 insertions(+), 12 deletions(-)
 create mode 100644 platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.css

diff --git a/platform/ui/src/design/styles/common/button.styl b/platform/ui/src/design/styles/common/button.styl
index ea3f0b1eb..fc9086038 100644
--- a/platform/ui/src/design/styles/common/button.styl
+++ b/platform/ui/src/design/styles/common/button.styl
@@ -51,3 +51,9 @@ button.close
   position: relative;
   display: inline-block;
   vertical-align: middle;
+
+.btn-sm
+  padding: .25rem .5rem;
+  font-size: .875rem;
+  line-height: 1.5;
+  border-radius: .2rem;
diff --git a/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.css b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.css
new file mode 100644
index 000000000..c357a188e
--- /dev/null
+++ b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.css
@@ -0,0 +1,18 @@
+.ErrorBoundaryDialogTitle {
+  margin-top: 0;
+}
+
+.ErrorBoundaryDialogButton {
+  outline: none;
+}
+
+.ErrorBoundaryDialogIcon {
+  margin-right: 5px;
+  width: 10px;
+  transform: rotate(-90deg);
+  vertical-align: middle;
+}
+
+.ErrorBoundaryDialogIcon.opened {
+  transform: rotate(0deg);
+}
diff --git a/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js
index 24a5807c0..6137e59a8 100644
--- a/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js
+++ b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js
@@ -1,26 +1,46 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { ErrorBoundary } from '@ohif/ui';
+import { ErrorBoundary, Icon } from '@ohif/ui';
 import { servicesManager } from './../../App';
 
+import './ErrorBoundaryDialog.css';
+
 const { UIModalService } = servicesManager.services;
 
 const ErrorBoundaryDialog = ({ context, children }) => {
   const handleOnError = (error, componentStack) => {
-    const ErrorDialog = () => (
-      <div className="ErrorFallback" role="alert">
-        <div>
-          <h3>
-            {context}: <span>{error.message}</span>
-          </h3>
+    const ErrorDialog = () => {
+      const [open, setOpen] = useState(false);
+
+      return (
+        <div className="ErrorFallback" role="alert">
+          <div className="ErrorBoundaryDialog">
+            <h3 className="ErrorBoundaryDialogTitle">
+              {context}: <span>{error.message}</span>
+            </h3>
+          </div>
+          <button
+            className="btn btn-primary btn-sm ErrorBoundaryDialogButton"
+            onClick={() => setOpen(s => !s)}
+          >
+            <Icon
+              name="chevron-down"
+              className={classnames('ErrorBoundaryDialogIcon', {
+                opened: open,
+              })}
+            />
+            Stack Trace
+          </button>
+
+          {open && <pre>{componentStack}</pre>}
         </div>
-        <pre>{componentStack}</pre>
-      </div>
-    );
+      );
+    };
 
     UIModalService.show({
       content: ErrorDialog,
-      title: `${context}: ${error.message}`,
+      title: `Something went wrong in ${context}`,
     });
   };