diff --git a/CHANGELOG.md b/CHANGELOG.md index ba22e799a6..4e4db61705 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Added ### Changed +- Improve backup transfer dialog (different message for connection step, timed message to tell user to check out troubleshooting, button to link to trouble shooting) #4476 ### Fixed - fix log format for logging core events diff --git a/_locales/_untranslated_en.json b/_locales/_untranslated_en.json index 840e38828b..f4732085e8 100644 --- a/_locales/_untranslated_en.json +++ b/_locales/_untranslated_en.json @@ -42,4 +42,7 @@ "contact_is_blocked": { "message": "This contact is blocked" } + "multidevice_connection_takes_too_long": { + "message": "This takes longer than expected 🐌 make sure both devices are on the same Wi-Fi or network and check troubleshooting" + } } diff --git a/packages/frontend/src/components/dialogs/SetupMultiDevice/ReceiveBackupProgressDialog.tsx b/packages/frontend/src/components/dialogs/SetupMultiDevice/ReceiveBackupProgressDialog.tsx index f5b9d223b4..838e9cb584 100644 --- a/packages/frontend/src/components/dialogs/SetupMultiDevice/ReceiveBackupProgressDialog.tsx +++ b/packages/frontend/src/components/dialogs/SetupMultiDevice/ReceiveBackupProgressDialog.tsx @@ -16,6 +16,7 @@ import { import useTranslationFunction from '../../../hooks/useTranslationFunction' import type { DialogProps } from '../../../contexts/DialogContext' +import { runtime } from '@deltachat-desktop/runtime-interface' const log = getLogger('renderer/receive_backup') @@ -23,12 +24,16 @@ type Props = { QrWithToken: string } +// time it takes on progress === 0 to show the trouble shooting button in ms +const TROUBLESHOOTING_TIMEOUT = 4000 + export function ReceiveBackupProgressDialog({ onClose, QrWithToken, }: Props & DialogProps) { const [importProgress, setImportProgress] = useState(0.0) const [error, setError] = useState(null) + const [troubleTimerFired, setTroubleTimerFired] = useState(false) const tx = useTranslationFunction() const onImexProgress = ({ progress }: DcEventType<'ImexProgress'>) => { @@ -56,6 +61,8 @@ export function ReceiveBackupProgressDialog({ window.__selectAccount(accountId) })() + setTimeout(() => setTroubleTimerFired(true), TROUBLESHOOTING_TIMEOUT) + const emitter = BackendRemote.getContextEvents(accountId) emitter.on('ImexProgress', onImexProgress) return () => { @@ -76,13 +83,26 @@ export function ReceiveBackupProgressDialog({ {tx('error')}: {error}

)} +

+ {importProgress === 0 + ? tx('connectivity_connecting') + : tx('transferring')} +

+ {troubleTimerFired && importProgress === 0 && ( +

{tx('multidevice_connection_takes_too_long')}

+ )} - + + runtime.openHelpWindow('multiclient')} + > + {tx('troubleshooting')} + {tx('cancel')}