Show update UI on backup version mismatch

ts/components/installScreen/InstallScreenBackupImportStep.tsx

@@ -4,7 +4,12 @@
 import React, { useState, useCallback } from 'react';
 
 import type { LocalizerType } from '../../types/Util';
-import { InstallScreenBackupStep } from '../../types/InstallScreen';
+import type { UpdatesStateType } from '../../state/ducks/updates';
+import {
+  InstallScreenStep,
+  InstallScreenBackupStep,
+  InstallScreenBackupError,
+} from '../../types/InstallScreen';
 import { formatFileSize } from '../../util/formatFileSize';
 import { TitlebarDragArea } from '../TitlebarDragArea';
 import { ProgressBar } from '../ProgressBar';
@@ -14,6 +19,7 @@ import { roundFractionForProgressBar } from '../../util/numbers';
 import { missingCaseError } from '../../util/missingCaseError';
 import { SYNCING_MESSAGES_SECURITY_URL } from '../../types/support';
 import { I18n } from '../I18n';
+import { InstallScreenUpdateDialog } from './InstallScreenUpdateDialog';
 
 // We can't always use destructuring assignment because of the complexity of this props
 //   type.
@@ -23,9 +29,16 @@ export type PropsType = Readonly<{
   backupStep: InstallScreenBackupStep;
   currentBytes?: number;
   totalBytes?: number;
-  hasError?: boolean;
+  error?: InstallScreenBackupError;
   onCancel: () => void;
   onRetry: () => void;
+
+  // Updater UI
+  updates: UpdatesStateType;
+  currentVersion: string;
+  OS: string;
+  startUpdate: () => void;
+  forceUpdate: () => void;
 }>;
 
 export function InstallScreenBackupImportStep({
@@ -33,9 +46,15 @@ export function InstallScreenBackupImportStep({
   backupStep,
   currentBytes,
   totalBytes,
-  hasError,
+  error,
   onCancel,
   onRetry,
+
+  updates,
+  currentVersion,
+  OS,
+  startUpdate,
+  forceUpdate,
 }: PropsType): JSX.Element {
   const [isConfirmingCancel, setIsConfirmingCancel] = useState(false);
   const [isConfirmingSkip, setIsConfirmingSkip] = useState(false);
@@ -123,6 +142,47 @@ export function InstallScreenBackupImportStep({
     </a>
   );
 
+  let errorElem: JSX.Element | undefined;
+  if (error == null) {
+    // no-op
+  } else if (error === InstallScreenBackupError.UnsupportedVersion) {
+    errorElem = (
+      <InstallScreenUpdateDialog
+        i18n={i18n}
+        {...updates}
+        step={InstallScreenStep.BackupImport}
+        startUpdate={startUpdate}
+        forceUpdate={forceUpdate}
+        currentVersion={currentVersion}
+        onClose={confirmSkip}
+        OS={OS}
+      />
+    );
+  } else if (error === InstallScreenBackupError.Unknown) {
+    if (!isConfirmingSkip) {
+      errorElem = (
+        <ConfirmationDialog
+          dialogName="InstallScreenBackupImportStep.error"
+          title={i18n('icu:BackupImportScreen__error__title')}
+          cancelText={i18n('icu:BackupImportScreen__skip')}
+          actions={[
+            {
+              action: onRetryWrap,
+              style: 'affirmative',
+              text: i18n('icu:BackupImportScreen__error__confirm'),
+            },
+          ]}
+          i18n={i18n}
+          onClose={confirmSkip}
+        >
+          {i18n('icu:BackupImportScreen__error__body')}
+        </ConfirmationDialog>
+      );
+    }
+  } else {
+    throw missingCaseError(error);
+  }
+
   return (
     <div className="InstallScreenBackupImportStep">
       <TitlebarDragArea />
@@ -202,24 +262,7 @@ export function InstallScreenBackupImportStep({
         </ConfirmationDialog>
       )}
 
-      {hasError && !isConfirmingSkip && (
-        <ConfirmationDialog
-          dialogName="InstallScreenBackupImportStep.error"
-          title={i18n('icu:BackupImportScreen__error__title')}
-          cancelText={i18n('icu:BackupImportScreen__skip')}
-          actions={[
-            {
-              action: onRetryWrap,
-              style: 'affirmative',
-              text: i18n('icu:BackupImportScreen__error__confirm'),
-            },
-          ]}
-          i18n={i18n}
-          onClose={confirmSkip}
-        >
-          {i18n('icu:BackupImportScreen__error__body')}
-        </ConfirmationDialog>
-      )}
+      {errorElem}
     </div>
   );
 }