Show error state when QR code times out loading

This commit is contained in:
Josh Perez 2023-05-10 17:36:45 -04:00 committed by GitHub
parent 48545d6a83
commit b34ea60d34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 107 additions and 22 deletions

View file

@ -9,12 +9,14 @@ import { openLinkInWebBrowser } from '../../util/openLinkInWebBrowser';
import { Button, ButtonVariant } from '../Button';
import { TitlebarDragArea } from '../TitlebarDragArea';
import { InstallScreenSignalLogo } from './InstallScreenSignalLogo';
import { LINK_SIGNAL_DESKTOP } from '../../types/support';
export enum InstallError {
TooManyDevices,
TooOld,
ConnectionFailed,
UnknownError,
QRCodeFailed,
}
export function InstallScreenErrorStep({
@ -51,6 +53,14 @@ export function InstallScreenErrorStep({
case InstallError.UnknownError:
errorMessage = i18n('icu:installUnknownError');
break;
case InstallError.QRCodeFailed:
buttonText = i18n('icu:Install__learn-more');
errorMessage = i18n('icu:installUnknownError');
onClickButton = () => {
openLinkInWebBrowser(LINK_SIGNAL_DESKTOP);
};
shouldShowQuitButton = true;
break;
default:
throw missingCaseError(error);
}

View file

@ -56,6 +56,7 @@ function Simulation({ finalResult }: { finalResult: Loadable<string> }) {
OS="macOS"
startUpdate={action('startUpdate')}
currentVersion="v6.0.0"
retryGetQrCode={action('retryGetQrCode')}
/>
);
}
@ -71,6 +72,7 @@ export function QrCodeLoading(): JSX.Element {
OS="macOS"
startUpdate={action('startUpdate')}
currentVersion="v6.0.0"
retryGetQrCode={action('retryGetQrCode')}
/>
);
}
@ -91,6 +93,7 @@ export function QrCodeFailedToLoad(): JSX.Element {
OS="macOS"
startUpdate={action('startUpdate')}
currentVersion="v6.0.0"
retryGetQrCode={action('retryGetQrCode')}
/>
);
}
@ -108,6 +111,7 @@ export function QrCodeLoaded(): JSX.Element {
OS="macOS"
startUpdate={action('startUpdate')}
currentVersion="v6.0.0"
retryGetQrCode={action('retryGetQrCode')}
/>
);
}
@ -158,6 +162,7 @@ export function WithUpdateKnobs({
OS="macOS"
startUpdate={action('startUpdate')}
currentVersion={currentVersion}
retryGetQrCode={action('retryGetQrCode')}
/>
);
}

View file

@ -29,24 +29,23 @@ type PropsType = Readonly<{
updates: UpdatesStateType;
currentVersion: string;
OS: string;
retryGetQrCode: () => void;
startUpdate: () => void;
}>;
const QR_CODE_FAILED_LINK =
'https://support.signal.org/hc/articles/360007320451#desktop_multiple_device';
const getQrCodeClassName = getClassNamesFor(
'module-InstallScreenQrCodeNotScannedStep__qr-code'
);
export function InstallScreenQrCodeNotScannedStep({
i18n,
provisioningUrl,
hasExpired,
updates,
startUpdate,
currentVersion,
hasExpired,
i18n,
OS,
provisioningUrl,
retryGetQrCode,
startUpdate,
updates,
}: Readonly<PropsType>): ReactElement {
return (
<div className="module-InstallScreenQrCodeNotScannedStep">
@ -65,7 +64,11 @@ export function InstallScreenQrCodeNotScannedStep({
)}
<div className="module-InstallScreenQrCodeNotScannedStep__contents">
<InstallScreenQrCode i18n={i18n} {...provisioningUrl} />
<InstallScreenQrCode
i18n={i18n}
{...provisioningUrl}
retryGetQrCode={retryGetQrCode}
/>
<div className="module-InstallScreenQrCodeNotScannedStep__instructions">
<h1>{i18n('icu:Install__scan-this-code')}</h1>
<ol>
@ -110,7 +113,7 @@ export function InstallScreenQrCodeNotScannedStep({
}
function InstallScreenQrCode(
props: Loadable<string> & { i18n: LocalizerType }
props: Loadable<string> & { i18n: LocalizerType; retryGetQrCode: () => void }
): ReactElement {
const { i18n } = props;
@ -124,11 +127,24 @@ function InstallScreenQrCode(
<span className={classNames(getQrCodeClassName('__error-message'))}>
<Intl
i18n={i18n}
id="icu:Install__qr-failed"
id="icu:Install__qr-failed-load"
components={{
// eslint-disable-next-line react/no-unstable-nested-components
learnMoreLink: children => (
<a href={QR_CODE_FAILED_LINK}>{children}</a>
retry: children => (
<button
className={getQrCodeClassName('__link')}
onClick={props.retryGetQrCode}
onKeyDown={ev => {
if (ev.key === 'Enter') {
props.retryGetQrCode();
ev.preventDefault();
ev.stopPropagation();
}
}}
type="button"
>
{children}
</button>
),
}}
/>