Merge branch 'icshwi_9030_refine_error_page' into 'develop'

ICSHWI-9030: Refine error page

See merge request !168

src/components/navigation/ErrorBoundary/ErrorBoundary.js

-import { Box, Button, Container, Grid } from "@material-ui/core";
+import { Box, Button, Container, Grid, Typography } from "@material-ui/core";
 import { BugReport } from "@material-ui/icons";
 import React, { useCallback, useState } from "react";
 import { ErrorBoundary, useErrorHandler } from "react-error-boundary";
@@ -6,6 +6,10 @@ import { useEffectOnMount } from "../../../hooks/MountEffects";
 import { theme } from "../../../style/Theme";
 
 function AwSnap({ error, resetErrorBoundary }) {
+  const [showStack, setShowStack] = useState(false);
+
+  const toggleStack = () => { setShowStack(!showStack) }
+
   console.log("AwSnap", error);
   return (
     <>
@@ -16,19 +20,28 @@ function AwSnap({ error, resetErrorBoundary }) {
         <h1 style={{ textAlign: "center" }}>💥 Whoops! Something went wrong 💥</h1>
       </Grid>
       <Grid container justifyContent="center">
-        <Button
-          variant="contained"
-          color="secondary"
-          style={{ backgroundColor: theme.palette.primary.main }}
-          onClick={resetErrorBoundary}>
-          Start Over
-        </Button>
+        <Typography variant="body1">If this error persists, please contact the <a href="https://ess-eric.slack.com/archives/C01V3R31EP2">CCCE team</a></Typography>
       </Grid>
-      <Grid container justifyContent="center">
-        <Box p={10} overflow="auto">
-          <pre>{error.stack}</pre>
-        </Box>
-      </Grid >
+      <Grid container justifyContent="center" spacing={2}>
+        <Grid item>
+          <Button
+            variant="contained"
+            color="secondary"
+            style={{ backgroundColor: theme.palette.primary.main }}
+            onClick={resetErrorBoundary}>
+            Reload
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button variant="contained"
+            color="secondary"
+            style={{ backgroundColor: theme.palette.primary.main }} onClick={toggleStack}>{showStack ? "Hide Details" : "Show details"}</Button>
+        </Grid>
+      </Grid>
+      {showStack ?
+        <Grid container justifyContent="center">
+          <Box p={10} overflow="auto"><pre>{error.stack}</pre></Box>
+        </Grid > : null}
     </>
   );
 }
@@ -56,7 +69,7 @@ export function AppErrorBoundary({ children }) {
     <ErrorBoundary
       FallbackComponent={AwSnap}
       onReset={() => {
-          window.location.href = "/";
+        window.location.href = "/";
       }}
     >
       <WindowErrorRedirect>