Add information to the recovery page

Adds error & environment information to the recovery page when
available. The info will be displayed when the error boundary catches an error only.

Otherwise, does a few minor tweaks to the UI of the page.

- Add DevPage button to throw an uncaught error to go into recovery
- Add "Delete Save" button in recovery from Game Options (refactored into its own
component)
- Use "Soft Reset" button from Game Options (refactored into its own
component)
- The "Soft Reset" & "Delete Save" buttons now have confirmations
- Add tooltip on "Disable Recovery Mode" button
- Add timestamp to the RECOVERY.json filename
- Add textarea containing markdown with the current error details, if
available
  - Error
  - Page
  - Version
  - Environment
  - Platform
  - UserAgent
  - Features
  - Source
  - Stack Trace
- Change GitHub new issue link to contain default body & title, if possible
- Change links to not take the full width (they were clickable by mistake)
- Fix "Disable Recovery Mode" not resetting the ErrorBoundary's state,
making going back to terminal impossible

src/ui/React/RecoveryRoot.tsx

@@ -1,11 +1,16 @@
-import React from "react";
-import Typography from "@mui/material/Typography";
-import Link from "@mui/material/Link";
-import Button from "@mui/material/Button";
+import React, { useEffect } from "react";
+
+import { Typography, Link, Button, ButtonGroup, Tooltip, Box, Paper, TextField } from "@mui/material";
 import { Settings } from "../../Settings/Settings";
 import { load } from "../../db";
 import { IRouter } from "../Router";
 import { download } from "../../SaveObject";
+import { IErrorData, newIssueUrl } from "../../utils/ErrorHelper";
+import { DeleteGameButton } from "./DeleteGameButton";
+import { SoftResetButton } from "./SoftResetButton";
+
+import DirectionsRunIcon from '@mui/icons-material/DirectionsRun';
+import GitHubIcon from "@mui/icons-material/GitHub";
 
 export let RecoveryMode = false;
 
@@ -16,40 +21,79 @@ export function ActivateRecoveryMode(): void {
 interface IProps {
   router: IRouter;
   softReset: () => void;
+  errorData?: IErrorData;
+  resetError?: () => void;
 }
 
-export function RecoveryRoot({ router, softReset }: IProps): React.ReactElement {
+export function RecoveryRoot({ router, softReset, errorData, resetError }: IProps): React.ReactElement {
   function recover(): void {
+    if (resetError) resetError();
     RecoveryMode = false;
     router.toTerminal();
   }
   Settings.AutosaveInterval = 0;
-  load().then((content) => {
-    download("RECOVERY.json", content);
-  });
+
+  useEffect(() => {
+    load().then((content) => {
+      const epochTime = Math.round(Date.now() / 1000);
+      const filename = `RECOVERY_BITBURNER_${epochTime}.json`;
+      download(filename, content);
+    });
+  }, []);
+
   return (
-    <>
+    <Box sx={{ padding: "8px 16px", minHeight: "100vh", maxWidth: '1200px', boxSizing: "border-box",}}>
       <Typography variant="h3">RECOVERY MODE ACTIVATED</Typography>
       <Typography>
-        There was an error loading your save file and the game went into recovery mode. In this mode saving is disabled
+        There was an error with your save file and the game went into recovery mode. In this mode saving is disabled
         and the game will automatically export your save file (to prevent corruption).
       </Typography>
       <Typography>At this point it is recommended to alert a developer.</Typography>
-      <Link href="https://github.com/danielyxie/bitburner/issues/new" target="_blank">
-        <Typography>File an issue on github</Typography>
-      </Link>
-      <Link href="https://www.reddit.com/r/Bitburner/" target="_blank">
-        <Typography>Make a reddit post</Typography>
-      </Link>
-      <Link href="https://discord.gg/TFc3hKD" target="_blank">
-        <Typography>Post in the #bug-report channel on Discord.</Typography>
-      </Link>
+      <Typography>
+        <Link href={errorData?.issueUrl ?? newIssueUrl} target="_blank">File an issue on github</Link>
+      </Typography>
+      <Typography>
+        <Link href="https://www.reddit.com/r/Bitburner/" target="_blank">Make a reddit post</Link>
+      </Typography>
+      <Typography>
+        <Link href="https://discord.gg/TFc3hKD" target="_blank">Post in the #bug-report channel on Discord.</Link>
+      </Typography>
       <Typography>Please include your save file.</Typography>
       <br />
       <br />
       <Typography>You can disable recovery mode now. But chances are the game will not work correctly.</Typography>
-      <Button onClick={recover}>DISABLE RECOVERY MODE</Button>
-      <Button onClick={softReset}>PERFORM SOFT RESET</Button>
-    </>
+      <ButtonGroup sx={{ my: 2 }}>
+        <Tooltip title="Disables the recovery mode & attempt to head back to the terminal page. This may or may not work. Ensure you have saved the recovery file.">
+          <Button onClick={recover} startIcon={<DirectionsRunIcon />}>Disable Recovery Mode</Button>
+        </Tooltip>
+        <SoftResetButton color="warning" onTriggered={softReset} />
+        <DeleteGameButton color="error" />
+      </ButtonGroup>
+
+      {errorData && (
+        <Paper sx={{ px: 2, pt: 1, pb: 2, mt: 2}}>
+          <Typography variant="h5">
+            {errorData.title}
+          </Typography>
+          <Box sx={{ my: 2 }}>
+            <TextField
+              label="Bug Report Text"
+              value={errorData.body}
+              variant="outlined"
+              color="secondary"
+              multiline
+              fullWidth
+              rows={12}
+              sx={{ "& .MuiOutlinedInput-root": { color: Settings.theme.secondary }}} />
+          </Box>
+          <Tooltip title="Submitting an issue to GitHub really help us improve the game!">
+            <Button component={Link} startIcon={<GitHubIcon />} color="info" sx={{ px: 2 }}
+              href={errorData.issueUrl ?? newIssueUrl} target={"_blank"} >
+              Submit Issue to GitHub
+            </Button>
+          </Tooltip>
+        </Paper>
+      )}
+    </Box>
   );
 }