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>

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;

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);
+}

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 = () => (
+    const ErrorDialog = () => {
+      const [open, setOpen] = useState(false);
+
+      return (
         <div className="ErrorFallback" role="alert">
-        <div>
+          <div className="ErrorBoundaryDialog">
-          <h3>
+            <h3 className="ErrorBoundaryDialogTitle">
               {context}: <span>{error.message}</span>
             </h3>
           </div>
-        <pre>{componentStack}</pre>
+          <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>
       );
+    };
 
     UIModalService.show({
       content: ErrorDialog,
-      title: `${context}: ${error.message}`,
+      title: `Something went wrong in ${context}`,
     });
   };