Add toast when import errors

_locales/en/messages.json

@@ -800,6 +800,10 @@
     "messageformat": "Failed to send message with endorsements",
     "description": "An error popup when we attempted and failed to send a message using endorsements, only for internal users."
   },
+  "icu:Toast--FailedToImportBackup": {
+    "messageformat": "Failed to process some frames during backup import. Please share your logs.",
+    "description": "[Only shown to internal users] An error popup when we failed to process some parts of a backup import."
+  },
   "icu:cannotSelectPhotosAndVideosAlongWithFiles": {
     "messageformat": "You can't select photos and videos along with files.",
     "description": "An error popup when the user has attempted to add an attachment"

stylesheets/components/InstallScreenBackupImportStep.scss

@@ -17,7 +17,7 @@
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  margin-top: 72px;
+  margin-top: 84px;
   flex: 1;
 }
 

ts/components/ToastManager.stories.tsx

@@ -105,6 +105,8 @@ function getToast(toastType: ToastType): AnyToast {
       return { toastType: ToastType.FailedToFetchUsername };
     case ToastType.FailedToSendWithEndorsements:
       return { toastType: ToastType.FailedToSendWithEndorsements };
+    case ToastType.FailedToImportBackup:
+      return { toastType: ToastType.FailedToImportBackup };
     case ToastType.FileSaved:
       return {
         toastType: ToastType.FileSaved,

ts/components/ToastManager.tsx

@@ -309,6 +309,20 @@ export function renderToast({
     );
   }
 
+  if (toastType === ToastType.FailedToImportBackup) {
+    return (
+      <Toast
+        onClose={hideToast}
+        toastAction={{
+          label: i18n('icu:Toast__ActionLabel--SubmitLog'),
+          onClick: onShowDebugLog,
+        }}
+      >
+        {i18n('icu:Toast--FailedToImportBackup')}
+      </Toast>
+    );
+  }
+
   if (toastType === ToastType.FileSaved) {
     return (
       <Toast

ts/services/backups/import.ts

@@ -116,6 +116,8 @@ import {
 } from '../../util/backupMediaDownload';
 import { getEnvironment, isTestEnvironment } from '../../environment';
 import { hasAttachmentDownloads } from '../../util/hasAttachmentDownloads';
+import { isAlpha } from '../../util/version';
+import { ToastType } from '../../types/Toast';
 
 const MAX_CONCURRENCY = 10;
 
@@ -218,6 +220,7 @@ export class BackupImportStream extends Writable {
   private releaseNotesRecipientId: Long | undefined;
   private releaseNotesChatId: Long | undefined;
   private pendingGroupAvatars = new Map<string, string>();
+  private frameErrorCount: number = 0;
 
   private constructor(private readonly backupType: BackupType) {
     super({ objectMode: true });
@@ -359,6 +362,20 @@ export class BackupImportStream extends Writable {
         await startBackupMediaDownload();
       }
 
+      if (this.frameErrorCount > 0) {
+        log.error(
+          `${this.logId}: errored while processing ${this.frameErrorCount} frames.`
+        );
+        if (isAlpha(window.getVersion())) {
+          window.reduxActions.toast.showToast({
+            toastType: ToastType.FailedToImportBackup,
+          });
+        }
+        // TODO (DESKTOP-7934): throw in tests if we cannot process a frame
+      } else {
+        log.info(`${this.logId}: successfully processed all frames.`);
+      }
+
       done();
     } catch (error) {
       done(error);
@@ -440,6 +457,7 @@ export class BackupImportStream extends Writable {
         log.warn(`${this.logId}: unsupported frame item ${frame.item}`);
       }
     } catch (error) {
+      this.frameErrorCount += 1;
       log.error(
         `${this.logId}: failed to process a frame ${frame.item}, ` +
           `${Errors.toLogFormat(error)}`

ts/services/backups/index.ts

@@ -50,6 +50,8 @@ import { BackupAPI } from './api';
 import { validateBackup } from './validator';
 import { BackupType } from './types';
 import { UnsupportedBackupVersion } from './errors';
+import { ToastType } from '../../types/Toast';
+import { isAlpha } from '../../util/version';
 
 export { BackupType };
 
@@ -385,6 +387,13 @@ export class BackupsService {
       log.info('importBackup: finished...');
     } catch (error) {
       log.info(`importBackup: failed, error: ${Errors.toLogFormat(error)}`);
+
+      if (isAlpha(window.getVersion())) {
+        window.reduxActions.toast.showToast({
+          toastType: ToastType.FailedToImportBackup,
+        });
+      }
+
       throw error;
     } finally {
       this.isRunning = false;

ts/types/Toast.tsx

@@ -35,6 +35,7 @@ export enum ToastType {
   FailedToFetchPhoneNumber = 'FailedToFetchPhoneNumber',
   FailedToFetchUsername = 'FailedToFetchUsername',
   FailedToSendWithEndorsements = 'FailedToSendWithEndorsements',
+  FailedToImportBackup = 'FailedToImportBackup',
   FileSaved = 'FileSaved',
   FileSize = 'FileSize',
   GroupLinkCopied = 'GroupLinkCopied',
@@ -113,6 +114,7 @@ export type AnyToast =
   | { toastType: ToastType.FailedToFetchPhoneNumber }
   | { toastType: ToastType.FailedToFetchUsername }
   | { toastType: ToastType.FailedToSendWithEndorsements }
+  | { toastType: ToastType.FailedToImportBackup }
   | {
       toastType: ToastType.FileSaved;
       parameters: { fullPath: string; countOfFiles?: number };