Show error state when QR code times out loading

ts/components/installScreen/InstallScreenErrorStep.tsx

@@ -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);
   }

ts/components/installScreen/InstallScreenQrCodeNotScannedStep.stories.tsx

@@ -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')}
     />
   );
 }

ts/components/installScreen/InstallScreenQrCodeNotScannedStep.tsx

@@ -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>
               ),
             }}
           />