Skip to content

Commit

Permalink
feat: Error message to clipboard button (#456)
Browse files Browse the repository at this point in the history 
* Added error message to clipboard

* Modified layout and icons

* Removed redundant error text
  • Loading branch information
@frankkopp
frankkopp authored Feb 7, 2024
1 parent 641a165 commit ad42c96
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 28 deletions.
86 changes: 72 additions & 14 deletions src/renderer/components/Modal/ErrorDialog.tsx
View file
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
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>
);
};

0 comments on commit ad42c96

Please sign in to comment.