Add "report issue" button in error component #911

Author: joepio

browser/data-browser/src/components/CodeBlock.tsx

@@ -59,6 +59,8 @@ export const CodeBlockStyled = styled.pre<Props>`
   border-radius: ${p => p.theme.radius};
   border: solid 1px ${p => p.theme.colors.bg2};
   padding: 0.3rem;
+  min-height: 2.2rem;
+  font-size: 0.8rem;
   font-family: monospace;
   width: 100%;
   overflow-x: auto;

browser/data-browser/src/components/ErrorLook.tsx

@@ -4,6 +4,7 @@ import { styled, css } from 'styled-components';
 import { FaExclamationTriangle } from 'react-icons/fa';
 import { Column } from './Row';
 import { CodeBlock } from './CodeBlock';
+import { Button } from './Button';
 
 export const errorLookStyle = css`
   color: ${props => props.theme.colors.alert};
@@ -20,6 +21,43 @@ export interface ErrorBlockProps {
   showTrace?: boolean;
 }
 
+const githubIssueTemplate = (
+  message,
+  stack,
+) => `**Describe what you did to produce the bug**
+
+## Error message
+\`\`\`
+${message}
+\`\`\`
+
+## Stack trace
+\`\`\`
+${stack}
+\`\`\`
+`;
+
+/** Returns github URL for new bugs */
+export function createGithubIssueLink(error: Error): string {
+  const url = new URL(
+    'https://github.com/atomicdata-dev/atomic-server/issues/new',
+  );
+  url.searchParams.set('body', githubIssueTemplate(error.message, error.stack));
+  url.searchParams.set('labels', 'bug');
+
+  console.log('opening', url);
+
+  return url.href;
+}
+
+export function GitHubIssueButton({ error }) {
+  return (
+    <Button onClick={() => window.open(createGithubIssueLink(error), '_blank')}>
+      Report on Github
+    </Button>
+  );
+}
+
 export function ErrorBlock({ error, showTrace }: ErrorBlockProps): JSX.Element {
   return (
     <ErrorLookBig>
@@ -48,14 +86,6 @@ const ErrorLookBig = styled.div`
   background-color: ${p => p.theme.colors.bg};
 `;
 
-const Pre = styled.pre`
-  white-space: pre-wrap;
-  border-radius: ${p => p.theme.radius};
-  padding: ${p => p.theme.margin}rem;
-  background-color: ${p => p.theme.colors.bg};
-  font-size: 0.9rem;
-`;
-
 const BiggerText = styled.p`
   color: ${p => p.theme.colors.alert};
   font-size: 1.3rem;

browser/data-browser/src/routes/DataRoute.tsx

@@ -59,7 +59,7 @@ function Data(): JSX.Element {
     setTextResponseLoading(true);
 
     try {
-      const resp = await window.fetch(subject!, { headers: headers });
+      const resp = await fetch(subject!, { headers: headers });
       const body = await resp.text();
       setTextResponseLoading(false);
       setTextResponse(body);

browser/data-browser/src/views/CrashPage.tsx

@@ -2,7 +2,11 @@ import * as React from 'react';
 import { Resource } from '@tomic/react';
 
 import { ContainerWide } from '../components/Containers';
-import { ErrorBlock } from '../components/ErrorLook';
+import {
+  createGithubIssueLink,
+  ErrorBlock,
+  GitHubIssueButton,
+} from '../components/ErrorLook';
 import { Button } from '../components/Button';
 import { Column, Row } from '../components/Row';
 
@@ -14,32 +18,6 @@ type ErrorPageProps = {
   clearError: () => void;
 };
 
-const githubIssueTemplate = (
-  message,
-  stack,
-) => `**Describe what you did to produce the bug**
-
-## Error message
-\`\`\`
-${message}
-\`\`\`
-
-## Stack trace
-\`\`\`
-${stack}
-\`\`\`
-`;
-
-function createGithubIssueLink(error: Error): string {
-  const url = new URL(
-    'https://github.com/atomicdata-dev/atomic-data-browser/issues/new',
-  );
-  url.searchParams.set('body', githubIssueTemplate(error.message, error.stack));
-  url.searchParams.set('labels', 'bug');
-
-  return url.href;
-}
-
 /** If the entire app crashes, show this page */
 function CrashPage({
   resource,
@@ -53,6 +31,7 @@ function CrashPage({
         {children ? children : <ErrorBlock error={error} showTrace />}
         <Row>
           <a href={createGithubIssueLink(error)}>Create Github issue</a>
+          <GitHubIssueButton error={error} />
           {clearError && <Button onClick={clearError}>Clear error</Button>}
           <Button
             onClick={() =>

browser/data-browser/src/views/ErrorPage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { isUnauthorized, useStore } from '@tomic/react';
 import { ContainerWide } from '../components/Containers';
-import { ErrorBlock } from '../components/ErrorLook';
+import { ErrorBlock, GitHubIssueButton } from '../components/ErrorLook';
 import { Button } from '../components/Button';
 import { useSettings } from '../helpers/AppSettings';
 import { ResourcePageProps } from './ResourcePage';
@@ -63,6 +63,7 @@ function ErrorPage({ resource }: ResourcePageProps): JSX.Element {
         <h1>Could not open {resource.subject}</h1>
         <ErrorBlock error={resource.error!} showTrace />
         <Row>
+          <GitHubIssueButton error={resource.error} />
           <Button
             onClick={() =>
               store.fetchResourceFromServer(subject, { setLoading: true })