From 10c27e2feff70a02572b3a99ed397464cbbf45ef Mon Sep 17 00:00:00 2001
From: Chris Maltby <chris.maltby@gmail.com>
Date: Wed, 18 Sep 2024 16:54:19 +0100
Subject: [PATCH] Add report issue button to global error view

---
 src/components/error/GlobalError.tsx | 119 +++++++++++++++++----------
 src/lang/en.json                     |   3 +
 2 files changed, 77 insertions(+), 45 deletions(-)

diff --git a/src/components/error/GlobalError.tsx b/src/components/error/GlobalError.tsx
index 037be7b3a..7240d9abc 100644
--- a/src/components/error/GlobalError.tsx
+++ b/src/components/error/GlobalError.tsx
@@ -1,13 +1,21 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import l10n from "shared/lib/lang/l10n";
 import { SadIcon } from "ui/icons/Icons";
 import electronActions from "store/features/electron/electronActions";
 import { Button } from "ui/buttons/Button";
 import styled from "styled-components";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import projectActions from "store/features/project/projectActions";
+import API from "renderer/lib/api";
+import { FlexGrow } from "ui/spacing/Spacing";
+
+declare const VERSION: string;
+declare const COMMITHASH: string;
 
 const Wrapper = styled.div`
   display: flex;
+  width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -22,10 +30,16 @@ const Wrapper = styled.div`
   p {
     user-select: text;
   }
+
+  h1 {
+    margin-bottom: 0;
+  }
 `;
 
 const Content = styled.div`
   display: flex;
+  width: 100%;
+  max-width: 860px;
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -33,8 +47,8 @@ const Content = styled.div`
 `;
 
 const Icon = styled.div`
-  width: 192px;
-  height: 192px;
+  width: 96px;
+  height: 96px;
   svg {
     width: 100%;
     height: 100%;
@@ -42,62 +56,63 @@ const Icon = styled.div`
 `;
 
 const Buttons = styled.div`
-  > * {
-    margin: 20px 10px;
+  display: flex;
+  width: 100%;
+
+  & > *:not(:last-child) {
+    margin-right: 5px;
   }
 `;
 
 const StackTrace = styled.div`
   background: #fff;
   color: #000;
-  padding: 30px;
+  padding: 10px;
   border-radius: 4px;
-  height: 270px;
+  min-height: 140px;
+  max-height: 300px;
   margin-top: 20px;
-  max-width: 860px;
   overflow: auto;
   user-select: text;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border: 1px solid ${(props) => props.theme.colors.sidebar.border};
+
+  h2 {
+    margin-top: 0;
+  }
 `;
 
 const GlobalError = () => {
   const dispatch = useAppDispatch();
   const error = useAppSelector((state) => state.error);
-  const [viewTrace, setViewTrace] = useState(false);
 
-  const toggleTrace = useCallback(() => {
-    setViewTrace(!viewTrace);
-  }, [viewTrace]);
+  const modified = useAppSelector((state) => state.document.modified);
 
   const openHelp = useCallback(() => {
     dispatch(electronActions.openHelp("error"));
   }, [dispatch]);
 
+  const saveProject = useCallback(() => {
+    dispatch(projectActions.saveProject());
+  }, [dispatch]);
+
   const { message, filename, line, col, stackTrace } = error;
 
-  if (viewTrace) {
-    return (
-      <Wrapper>
-        <Content>
-          <h2>{message}</h2>
-          {filename && (
-            <p>
-              {filename}
-              {line && `:L${line}`}
-              {col && `C:${col}`}
-            </p>
-          )}
-          <StackTrace>
-            {stackTrace.split("\n").map((line) => (
-              <div>{line}</div>
-            ))}
-          </StackTrace>
-          <Buttons>
-            <Button onClick={toggleTrace}>{l10n("ERROR_CLOSE")}</Button>
-          </Buttons>
-        </Content>
-      </Wrapper>
+  const stackTraceLines = error.stackTrace.split("\n");
+
+  const reportIssue = useCallback(() => {
+    const owner = "chrismaltby";
+    const repo = "gb-studio";
+    const issueTitle = encodeURIComponent("Bug report: " + message);
+    const issueBody = encodeURIComponent(
+      `**Error message**\n\`${message}\`\n\n**Stack trace**\n\`\`\`\n${stackTrace}\n\`\`\`\n\n**Platform**\n- OS: ${API.platform}\n- Version: GB Studio ${VERSION} (${COMMITHASH})\n\n**Additional context**\nAdd any other context about the problem here.\ne.g. What was the last thing you did before the error appeared.\n`
     );
-  }
+    const labels = encodeURIComponent("bug");
+    const issueUrl = `https://github.com/${owner}/${repo}/issues/new?title=${issueTitle}&body=${issueBody}&labels=${labels}`;
+    API.app.openExternal(issueUrl);
+  }, [message, stackTrace]);
 
   return (
     <Wrapper>
@@ -106,18 +121,32 @@ const GlobalError = () => {
           <SadIcon />
         </Icon>
         <h1>{l10n("ERROR_TITLE")}</h1>
-        <h2>{message}</h2>
-        {filename && (
-          <p>
-            {filename}
-            {line && `:L${line}`}
-            {col && `C:${col}`}
-          </p>
-        )}
+        <p>
+          {VERSION} ({COMMITHASH})
+        </p>
+        <StackTrace>
+          <strong>{message}</strong>
+          {filename && (
+            <p>
+              {filename}
+              {line && `:L${line}`}
+              {col && `C:${col}`}
+            </p>
+          )}
+          {stackTraceLines.map((line) => (
+            <div>{line}</div>
+          ))}
+        </StackTrace>
         <Buttons>
           <Button onClick={openHelp}>{l10n("ERROR_WHAT_CAN_I_DO")}</Button>
-          <Button onClick={toggleTrace}>
-            {l10n("ERROR_VIEW_STACK_TRACE")}
+          <Button onClick={saveProject} disabled={!modified}>
+            {l10n(
+              !modified ? "ERROR_NO_UNSAVED_CHANGES" : "ERROR_SAVE_PROJECT"
+            )}
+          </Button>
+          <FlexGrow />
+          <Button variant="primary" onClick={reportIssue}>
+            {l10n("ERROR_REPORT_ISSUE")}
           </Button>
         </Buttons>
       </Content>
diff --git a/src/lang/en.json b/src/lang/en.json
index 34a430058..4ee294e86 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1504,6 +1504,9 @@
   "ERROR_PROJECT_PATH_INVALID": "Invalid directory path",
   "ERROR_MISSING_FONTS": "No fonts found in assets/fonts folder. An example font has been copied there for you to use.",
   "ERROR_ASSET_DOESNT_BELONG_TO_CURRENT_PROJECT": "This asset does not belong to the currently opened project",
+  "ERROR_REPORT_ISSUE": "Report Issue",
+  "ERROR_SAVE_PROJECT": "Save Project",
+  "ERROR_NO_UNSAVED_CHANGES": "No unsaved changes",
 
   "// 13": "Splash -------------------------------------------------------",