Show error state when QR code times out loading
This commit is contained in:
parent
48545d6a83
commit
b34ea60d34
7 changed files with 107 additions and 22 deletions
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue