Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Error message to clipboard button #456

Merged
merged 3 commits into from
Feb 7, 2024
Merged

feat: Error message to clipboard button #456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75801bf
Added error message to clipboard
frankkopp Feb 2, 2024
46506ac
Modified layout and icons
frankkopp Feb 3, 2024
28332b4
Removed redundant error text
frankkopp Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 72 additions & 14 deletions src/renderer/components/Modal/ErrorDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import React, { FC, useState } from 'react';
import { AlertModal } from "renderer/components/Modal/index";
import { ExclamationTriangle, Hdd, Shield } from "react-bootstrap-icons";
import { shell } from "electron";
import { Clipboard, ClipboardCheck, Ethernet, ExclamationTriangle, Hdd, ShieldExclamation, ShieldLock } from "react-bootstrap-icons";
import { clipboard, shell } from "electron";
import { FragmenterError, FragmenterErrorCode } from "@flybywiresim/fragmenter";
import { SentrySessionCard } from "renderer/components/SentrySessionCard";

Expand Down Expand Up @@ -29,9 +29,8 @@ export const ErrorDialog: FC<ErrorDialogProps> = ({ error, onAcknowledge }) => {
switch (fragmenterError.code) {
case FragmenterErrorCode.PermissionsError:
errorVisualisation = (
<ErrorVisualisationBox icon={<Shield className="text-utility-red" size={36} />}>
<ErrorVisualisationBox icon={<ShieldLock className="text-utility-red" size={36} />}>
<span className="text-4xl font-bold font-manrope">Windows permissions error</span>

<span className="text-2xl">Make sure the install folder has appropriate permissions.</span>
</ErrorVisualisationBox>
);
Expand All @@ -40,17 +39,51 @@ export const ErrorDialog: FC<ErrorDialogProps> = ({ error, onAcknowledge }) => {
errorVisualisation = (
<ErrorVisualisationBox icon={<Hdd className="text-utility-red" size={36} />}>
<span className="text-4xl font-bold font-manrope">No space left on device</span>

<span className="text-2xl">Try to free up space in order to install this addon.</span>
</ErrorVisualisationBox>
);
break;
case FragmenterErrorCode.NetworkError:
errorVisualisation = (
<ErrorVisualisationBox icon={<Ethernet className="text-utility-red" size={36} />}>
<span className="text-4xl font-bold font-manrope">Network error</span>
<span className="text-2xl">Try again or use a VPN when connection problems persist.</span>
</ErrorVisualisationBox>
);
break;
case FragmenterErrorCode.ResourcesBusy: // fallthrough
case FragmenterErrorCode.MaxModuleRetries: // fallthrough
case FragmenterErrorCode.FileNotFound: // fallthrough
case FragmenterErrorCode.DirectoryNotEmpty: // fallthrough
case FragmenterErrorCode.NotADirectory: // fallthrough
case FragmenterErrorCode.ModuleJsonInvalid: // fallthrough
case FragmenterErrorCode.ModuleCrcMismatch: // fallthrough
case FragmenterErrorCode.UserAborted: // fallthrough
case FragmenterErrorCode.CorruptedZipFile:
case FragmenterErrorCode.Null: // fallthrough
case FragmenterErrorCode.Unknown: // Fallthrough
default:
errorVisualisation = null;
errorVisualisation = (
<ErrorVisualisationBox icon={<ShieldExclamation className="text-utility-red" size={36} />}>
<span className="text-4xl font-bold font-manrope">An error has occurred!</span>
<span
className="text-2xl">Please contact FlyByWire support on Discord. See below. </span>
</ErrorVisualisationBox>
);
break;
}
}

// Error stack to clipboard handling
const [showCopied, setShowCopied] = useState(false);
const handleCopy = () => {
clipboard.writeText(error.stack, 'clipboard');
setShowCopied(true);
setTimeout(() => {
setShowCopied(false);
}, 1_500);
};

return (
<AlertModal
title={(
Expand All @@ -62,24 +95,49 @@ export const ErrorDialog: FC<ErrorDialogProps> = ({ error, onAcknowledge }) => {
bodyText={(
<div className="flex flex-col gap-y-5">
<div className="flex flex-col">
<p>An error occurred while installing this addon.</p>

{errorVisualisation}

<pre className="h-96 bg-gray-800 p-2.5 rounded-md">{error.stack}</pre>
</div>

<div className="flex flex-col">
<p>Obtain support with a screenshot of this dialog on <a onClick={handleOpenDiscordSupport}>Discord</a>:</p>

<p>Obtain support on <a onClick={handleOpenDiscordSupport}>Discord</a> and provide the error message and on request
the sentry code:</p>
<div
className="relative w-full flex justify-center items-center border-2 border-gray-800 text-3xl text-center p-3.5 rounded-md">
{showCopied ? (
<>
<span className="font-mono text-utility-green">Copied!</span>
<div className="absolute right-3">
<span className="flex items-center gap-x-2.5">
<ClipboardCheck className="transition-colors duration-200 cursor-pointer" size={24}
onClick={handleCopy} />
</span>
</div>
</>
) : (
<>
<span className="font-mono">Copy error message to clipboard</span>
<div className="absolute right-3">
<span className="flex items-center gap-x-2.5">
<Clipboard
className="text-gray-500 hover:text-gray-300 transition-colors duration-200 cursor-pointer"
size={24} onClick={handleCopy} />
</span>
</div>
</>
)}
</div>
<SentrySessionCard />
</div>
</div>
)}
acknowledgeText="Dismiss"
onAcknowledge={onAcknowledge}
onAcknowledge={
onAcknowledge
}
/>
);
)
;
};

interface ErrorVisualisationBoxProps {
Expand Down
37 changes: 23 additions & 14 deletions src/renderer/components/SentrySessionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,29 @@ export const SentrySessionCard: FC = () => {
};

return (
<div className="relative w-full flex justify-center items-center border-2 border-gray-800 text-5xl text-center p-3.5 rounded-md">
<span className="font-mono">{sessionID}</span>

<div className="absolute right-3">
{showCopied ? (
<span className="flex items-center gap-x-2.5 text-utility-green">
<span className="text-3xl font-medium">Copied</span>

<ClipboardCheck className="transition-colors duration-200 cursor-pointer" size={24} onClick={handleCopy} />
</span>
) : (
<Clipboard className="text-gray-500 hover:text-gray-300 transition-colors duration-200 cursor-pointer" size={24} onClick={handleCopy} />
)}
</div>
<div className="relative w-full flex justify-center items-center border-2 border-gray-800 text-2xl text-center p-3.5 rounded-md">
{showCopied ? (
<>
<span className="font-mono text-utility-green">Copied!</span>
<div className="absolute right-3">
<span className="flex items-center gap-x-2.5">
<ClipboardCheck className="transition-colors duration-200 cursor-pointer" size={24}
onClick={handleCopy} />
</span>
</div>
</>
) : (
<>
<span className="font-mono">Copy Sentry Code to clipboard: {sessionID}</span>
<div className="absolute right-3">
<span className="flex items-center gap-x-2.5">
<Clipboard
className="text-gray-500 hover:text-gray-300 transition-colors duration-200 cursor-pointer"
size={24} onClick={handleCopy} />
</span>
</div>
</>
)}
</div>
);
};
Loading