feat: for all backup import error add a try again flow (#15579)

* feat: add try again flow for backup import errors
fix restire button's whole area not clickable
create re-usable backup file upload component

* fix: remove exra button

* fix: typescript error

src/i18n/en-US.json

@@ -1115,6 +1115,7 @@
   "preferencesOptionsBackupExportSecondary": "Create a backup to preserve your conversation history. You can use this to restore history if you lose your computer or switch to a new one.\nThe backup file is not protected by {{brandName}} end-to-end encryption, so store it in a safe place.",
   "preferencesOptionsBackupHeader": "History",
   "preferencesOptionsBackupImportHeadline": "Restore",
+  "preferencesOptionsBackupTryAgain": "Try again",
   "preferencesOptionsBackupImportSecondary": "You can only restore history from a backup of the same platform. Your backup will overwrite the conversations that you may have on this device.",
   "preferencesOptionsCall": "Calls",
   "preferencesOptionsCallLogs": "Troubleshooting",

src/script/components/HistoryImport/BackupFileUpload.tsx

@@ -0,0 +1,77 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {FC, useRef} from 'react';
+
+import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
+
+import {Button, ButtonVariant} from '@wireapp/react-ui-kit';
+
+import {CONFIG as HistoryExportConfig} from 'Components/HistoryExport';
+import {handleKeyDown} from 'Util/KeyboardUtil';
+
+interface BackupFileUploadProps {
+  onFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  backupImportHeadLine: string;
+  variant: ButtonVariant;
+  cssClassName?: string;
+}
+
+const BackupFileUpload: FC<BackupFileUploadProps> = ({
+  onFileChange,
+  backupImportHeadLine,
+  variant,
+  cssClassName = 'button button-secondary',
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const fileInputClick = () => fileInputRef.current?.click();
+
+  return (
+    <>
+      <label className="preferences-history-backup-import-field" data-uie-name="do-backup-import" id="do-backup-import">
+        <input
+          id="file-import-input"
+          ref={fileInputRef}
+          tabIndex={TabIndex.UNFOCUSABLE}
+          type="file"
+          accept={`.${HistoryExportConfig.FILE_EXTENSION}`}
+          onChange={onFileChange}
+          onFocus={({target}) => target.blur()}
+          data-uie-name="input-import-file"
+          aria-describedby="preferences-history-describe-2"
+        />
+      </label>
+
+      <Button
+        variant={variant}
+        className={cssClassName}
+        role="button"
+        tabIndex={TabIndex.FOCUSABLE}
+        onKeyDown={event => handleKeyDown(event, fileInputClick)}
+        onClick={() => fileInputRef.current?.click()}
+        aria-labelledby="do-backup-import"
+      >
+        <span>{backupImportHeadLine}</span>
+      </Button>
+    </>
+  );
+};
+
+export {BackupFileUpload};

src/script/components/HistoryImport/index.tsx

@@ -19,6 +19,8 @@
 
 import {FC, useEffect, useState} from 'react';
 
+import {Button, ButtonVariant} from '@wireapp/react-ui-kit';
+
 import {Icon} from 'Components/Icon';
 import {LoadingBar} from 'Components/LoadingBar/LoadingBar';
 import {PrimaryModal} from 'Components/Modals/PrimaryModal';
@@ -29,6 +31,8 @@ import {t} from 'Util/LocalizerUtil';
 import {getLogger} from 'Util/Logger';
 import {loadFileBuffer} from 'Util/util';
 
+import {BackupFileUpload} from './BackupFileUpload';
+
 import {BackupRepository} from '../../backup/BackupRepository';
 import {
   CancelError,
@@ -168,14 +172,14 @@ const HistoryImport: FC<HistoryImportProps> = ({user, backupRepository, file, sw
       const password = await getBackUpPassword();
 
       if (password) {
-        await processHistoryImport(password);
+        await processHistoryImport(file, password);
       }
     } else {
-      await processHistoryImport();
+      await processHistoryImport(file);
     }
   };
 
-  const processHistoryImport = async (password?: string) => {
+  const processHistoryImport = async (file: File, password?: string) => {
     setHistoryImportState(HistoryImportState.PREPARING);
     setError(null);
 
@@ -193,6 +197,14 @@ const HistoryImport: FC<HistoryImportProps> = ({user, backupRepository, file, sw
     importHistory(file);
   }, []);
 
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setError(null);
+      await importHistory(file);
+    }
+  };
+
   return (
     <div style={{height: '100%'}}>
       <h2 className="visually-hidden">{t('accessibility.headings.historyImport')}</h2>
@@ -235,9 +247,19 @@ const HistoryImport: FC<HistoryImportProps> = ({user, backupRepository, file, sw
             </p>
 
             <div className="history-message__buttons">
-              <button className="button" onClick={dismissImport} data-uie-name="do-dismiss-history-import-error">
+              <Button
+                variant={ButtonVariant.SECONDARY}
+                className="button button-secondary"
+                onClick={dismissImport}
+                data-uie-name="do-dismiss-history-import-error"
+              >
                 {t('backupCancel')}
-              </button>
+              </Button>
+              <BackupFileUpload
+                onFileChange={handleFileChange}
+                backupImportHeadLine={t('preferencesOptionsBackupTryAgain')}
+                variant={ButtonVariant.PRIMARY}
+              />
             </div>
           </div>
         )}

src/script/page/MainContent/panels/preferences/accountPreferences/HistoryBackupSection.tsx

@@ -17,15 +17,12 @@
  *
  */
 
-import {FC, useRef} from 'react';
-
-import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
+import {FC} from 'react';
 
 import {Button, ButtonVariant} from '@wireapp/react-ui-kit';
 
-import {CONFIG as HistoryExportConfig} from 'Components/HistoryExport';
+import {BackupFileUpload} from 'Components/HistoryImport/BackupFileUpload';
 import {ContentState} from 'src/script/page/useAppState';
-import {handleKeyDown} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 
 import {PreferencesSection} from '../components/PreferencesSection';
@@ -37,10 +34,12 @@ interface HistoryBackupSectionProps {
 }
 
 const HistoryBackupSection: FC<HistoryBackupSectionProps> = ({brandName, importFile, switchContent}) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const fileInputClick = () => fileInputRef.current?.click();
-
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      importFile(file);
+    }
+  };
   return (
     <PreferencesSection
       hasSeparator
@@ -60,39 +59,12 @@ const HistoryBackupSection: FC<HistoryBackupSectionProps> = ({brandName, importF
       <p id="preferences-history-describe-1" className="preferences-detail">
         {t('preferencesOptionsBackupExportSecondary', brandName)}
       </p>
-      <Button
+      <BackupFileUpload
+        onFileChange={handleFileChange}
+        backupImportHeadLine={t('preferencesOptionsBackupImportHeadline')}
         variant={ButtonVariant.TERTIARY}
-        className="preferences-history-restore-button"
-        role="button"
-        tabIndex={TabIndex.FOCUSABLE}
-        onKeyDown={event => handleKeyDown(event, fileInputClick)}
-        aria-labelledby="do-backup-import"
-      >
-        <label
-          className="preferences-history-backup-import-field"
-          data-uie-name="do-backup-import"
-          id="do-backup-import"
-          htmlFor="file-import-input"
-        >
-          <span>{t('preferencesOptionsBackupImportHeadline')}</span>
-          <input
-            id="file-import-input"
-            ref={fileInputRef}
-            tabIndex={TabIndex.UNFOCUSABLE}
-            type="file"
-            accept={`.${HistoryExportConfig.FILE_EXTENSION}`}
-            onChange={event => {
-              const file = event.target.files?.[0];
-              if (file) {
-                importFile(file);
-              }
-            }}
-            onFocus={({target}) => target.blur()}
-            data-uie-name="input-import-file"
-            aria-describedby="preferences-history-describe-2"
-          />
-        </label>
-      </Button>
+        cssClassName="preferences-history-restore-button"
+      />
       <p id="preferences-history-describe-2" className="preferences-detail">
         {t('preferencesOptionsBackupImportSecondary')}
       </p>

src/style/content/history-export-import.less

@@ -63,7 +63,7 @@
       justify-content: center;
       margin-top: 32px;
 
-      button + button {
+      button ~ button {
         margin-left: 16px;
       }
     }