From e2932908623c1b7aca65b938fedbf6cfecdcce24 Mon Sep 17 00:00:00 2001
From: Oscar Beaumont <oscar@otbeaumont.me>
Date: Tue, 13 Sep 2022 00:14:47 +0800
Subject: [PATCH] send report button working on error boundary

---
 apps/desktop/src/index.tsx                    |  1 +
 apps/web/src/App.tsx                          |  1 +
 packages/client/src/context/Platform.tsx      |  1 +
 packages/interface/src/ErrorFallback.tsx      | 22 ++++++++++++++++++-
 .../interface/src/hooks/useOperatingSystem.ts |  2 +-
 5 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/index.tsx b/apps/desktop/src/index.tsx
index 30ca6cde5..0a2bda288 100644
--- a/apps/desktop/src/index.tsx
+++ b/apps/desktop/src/index.tsx
@@ -29,6 +29,7 @@ async function getOs(): Promise<OperatingSystem> {
 const platform: Platform = {
 	platform: 'tauri',
 	getThumbnailUrlById: (casId) => `spacedrive://thumbnail/${encodeURIComponent(casId)}`,
+	openLink: open,
 	getOs,
 	openFilePickerDialog: () => dialog.open({ directory: true })
 };
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 9c2835457..52090595a 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -12,6 +12,7 @@ const client = createClient<Operations>({
 const platform: Platform = {
 	platform: 'web',
 	getThumbnailUrlById: (casId) => `spacedrive://thumbnail/${encodeURIComponent(casId)}`,
+	openLink: (url) => window.open(url, '_blank')?.focus(),
 	demoMode: true
 };
 
diff --git a/packages/client/src/context/Platform.tsx b/packages/client/src/context/Platform.tsx
index 60ec8c56c..6fcc94452 100644
--- a/packages/client/src/context/Platform.tsx
+++ b/packages/client/src/context/Platform.tsx
@@ -7,6 +7,7 @@ export type OperatingSystem = 'browser' | 'linux' | 'macOS' | 'windows' | 'unkno
 export type Platform = {
 	platform: 'web' | 'tauri'; // This represents the specific platform implementation
 	getThumbnailUrlById: (casId: string) => string;
+	openLink: (url: string) => void;
 	demoMode?: boolean; // TODO: Remove this in favour of demo mode being handled at the React Query level
 	getOs?(): Promise<OperatingSystem>;
 	openFilePickerDialog?(): Promise<null | string | string[]>;
diff --git a/packages/interface/src/ErrorFallback.tsx b/packages/interface/src/ErrorFallback.tsx
index 327896522..f8fd96765 100644
--- a/packages/interface/src/ErrorFallback.tsx
+++ b/packages/interface/src/ErrorFallback.tsx
@@ -1,7 +1,13 @@
+import { rspc, usePlatform } from '@sd/client';
 import { Button } from '@sd/ui';
 import { FallbackProps } from 'react-error-boundary';
 
+import { guessOperatingSystem } from './hooks/useOperatingSystem';
+
 export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+	const platform = usePlatform();
+	const version = 'unknown'; // TODO: Embed the version into the frontend via ENV var when compiled so we can use it here.
+
 	return (
 		<div
 			data-tauri-drag-region
@@ -15,7 +21,21 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
 				<Button variant="primary" className="mt-2" onClick={resetErrorBoundary}>
 					Reload
 				</Button>
-				<Button variant="gray" className="mt-2" onClick={resetErrorBoundary}>
+				<Button
+					variant="gray"
+					className="mt-2"
+					onClick={() => {
+						platform.openLink(
+							`https://github.com/spacedriveapp/spacedrive/issues/new?assignees=&labels=kind%2Fbug%2Cstatus%2Fneeds-triage&template=bug_report.yml&logs=${encodeURIComponent(
+								error.toString()
+							)}&info=${encodeURIComponent(
+								`App version ${version} running on ${guessOperatingSystem() || 'unknown'}`
+							)}`
+						);
+
+						resetErrorBoundary();
+					}}
+				>
 					Send report
 				</Button>
 			</div>
diff --git a/packages/interface/src/hooks/useOperatingSystem.ts b/packages/interface/src/hooks/useOperatingSystem.ts
index e633b76bd..827ab8ed1 100644
--- a/packages/interface/src/hooks/useOperatingSystem.ts
+++ b/packages/interface/src/hooks/useOperatingSystem.ts
@@ -1,7 +1,7 @@
 import { OperatingSystem, usePlatform } from '@sd/client';
 import { useQuery } from '@tanstack/react-query';
 
-function guessOperatingSystem(): OperatingSystem {
+export function guessOperatingSystem(): OperatingSystem {
 	let os: OperatingSystem = 'unknown';
 	if (navigator.userAgent.indexOf('Win') != -1) os = 'windows';
 	if (navigator.userAgent.indexOf('Mac') != -1) os = 'macOS';