diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json index 75a8a5ac807..11b18d7de44 100644 --- a/src/i18n/en-US.json +++ b/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", diff --git a/src/script/components/HistoryImport/BackupFileUpload.tsx b/src/script/components/HistoryImport/BackupFileUpload.tsx new file mode 100644 index 00000000000..4b50b3b117c --- /dev/null +++ b/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) => void; + backupImportHeadLine: string; + variant: ButtonVariant; + cssClassName?: string; +} + +const BackupFileUpload: FC = ({ + onFileChange, + backupImportHeadLine, + variant, + cssClassName = 'button button-secondary', +}) => { + const fileInputRef = useRef(null); + + const fileInputClick = () => fileInputRef.current?.click(); + + return ( + <> + + + + + ); +}; + +export {BackupFileUpload}; diff --git a/src/script/components/HistoryImport/index.tsx b/src/script/components/HistoryImport/index.tsx index 1f576f62c7c..6514ff03c6a 100644 --- a/src/script/components/HistoryImport/index.tsx +++ b/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 = ({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 = ({user, backupRepository, file, sw importHistory(file); }, []); + const handleFileChange = async (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + setError(null); + await importHistory(file); + } + }; + return (

{t('accessibility.headings.historyImport')}

@@ -235,9 +247,19 @@ const HistoryImport: FC = ({user, backupRepository, file, sw

- + +
)} diff --git a/src/script/page/MainContent/panels/preferences/accountPreferences/HistoryBackupSection.tsx b/src/script/page/MainContent/panels/preferences/accountPreferences/HistoryBackupSection.tsx index f2af68400e1..debff9721ae 100644 --- a/src/script/page/MainContent/panels/preferences/accountPreferences/HistoryBackupSection.tsx +++ b/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 = ({brandName, importFile, switchContent}) => { - const fileInputRef = useRef(null); - - const fileInputClick = () => fileInputRef.current?.click(); - + const handleFileChange = async (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + importFile(file); + } + }; return ( = ({brandName, importF

{t('preferencesOptionsBackupExportSecondary', brandName)}

- + cssClassName="preferences-history-restore-button" + />

{t('preferencesOptionsBackupImportSecondary')}

diff --git a/src/style/content/history-export-import.less b/src/style/content/history-export-import.less index 4590d6da9d8..1caa222eed2 100644 --- a/src/style/content/history-export-import.less +++ b/src/style/content/history-export-import.less @@ -63,7 +63,7 @@ justify-content: center; margin-top: 32px; - button + button { + button ~ button { margin-left: 16px; } }