add missing cancel buttons to import-/export- and reveive-backup prog…

…ress dialogs (#4272) fixes #4267
deltachat · Oct 29, 2024 · 3115333 · 3115333
1 parent 1c989ce
commit 3115333
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@
 - revert debian packagename from `deltachat` back to `deltachat-desktop` #4266
 - style: fix VCard color being too bright in dark theme #4255
 - remove unnecessary horizontal scrollbar in "View Group" dialog #4254
+- add missing cancel buttons to import-/export- and reveive-backup progress dialogs #4272
 - change title and button label of EditAccountAndPasswordDialog to make it clearer that it is about email account #4271, #4279
 - fix styling of progressbars in light theme #4274
 - fix Delta Chat not launching on Debian sometimes due to missing package dependencies (`libasound2`) #4275

diff --git a/packages/frontend/src/components/Settings/Backup.tsx b/packages/frontend/src/components/Settings/Backup.tsx
@@ -6,14 +6,22 @@ import { getLogger } from '../../../../shared/logger'
 import { BackendRemote } from '../../backend-com'
 import { selectedAccountId } from '../../ScreenController'
 import SettingsButton from './SettingsButton'
-import Dialog, { DialogBody, DialogContent, DialogHeader } from '../Dialog'
+import Dialog, {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  FooterActionButton,
+  FooterActions,
+} from '../Dialog'
 import useTranslationFunction from '../../hooks/useTranslationFunction'
 import useDialog from '../../hooks/dialog/useDialog'
 import useConfirmationDialog from '../../hooks/dialog/useConfirmationDialog'
 
 import type { DcEventType } from '@deltachat/jsonrpc-client'
 import { LastUsedSlot, rememberLastUsedPath } from '../../utils/lastUsedPaths'
 import { RuntimeOpenDialogOptions } from '@deltachat-desktop/shared/shared-types'
+import { DialogProps } from '../../contexts/DialogContext'
 
 const log = getLogger('renderer/Settings/Backup')
 
@@ -79,14 +87,19 @@ export default function Backup() {
   )
 }
 
-function ExportProgressDialog() {
+function ExportProgressDialog({ onClose }: DialogProps) {
   const tx = useTranslationFunction()
   const [progress, setProgress] = useState(0.0)
 
   const onImexProgress = ({ progress }: DcEventType<'ImexProgress'>) => {
     setProgress(progress)
   }
   const accountId = selectedAccountId()
+
+  const cancel = () => {
+    BackendRemote.rpc.stopOngoingProcess(accountId).then(onClose)
+  }
+
   useEffect(() => {
     const emitter = BackendRemote.getContextEvents(accountId)
     emitter.on('ImexProgress', onImexProgress)
@@ -96,12 +109,19 @@ function ExportProgressDialog() {
   }, [accountId])
 
   return (
-    <Dialog onClose={() => {}}>
+    <Dialog onClose={() => {}} canOutsideClickClose={false}>
       <DialogHeader title={tx('export_backup_desktop')} />
       <DialogBody>
         <DialogContent>
           <DeltaProgressBar progress={progress} />
         </DialogContent>
+        <DialogFooter>
+          <FooterActions align='end'>
+            <FooterActionButton onClick={cancel}>
+              {tx('cancel')}
+            </FooterActionButton>
+          </FooterActions>
+        </DialogFooter>
       </DialogBody>
     </Dialog>
   )

diff --git a/packages/frontend/src/components/dialogs/SetupMultiDevice/ReceiveBackupProgressDialog.tsx b/packages/frontend/src/components/dialogs/SetupMultiDevice/ReceiveBackupProgressDialog.tsx
@@ -5,7 +5,14 @@ import { getLogger } from '../../../../../shared/logger'
 import { BackendRemote } from '../../../backend-com'
 import { selectedAccountId } from '../../../ScreenController'
 import { DeltaProgressBar } from '../../Login-Styles'
-import { DialogBody, DialogContent, DialogWithHeader } from '../../Dialog'
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogWithHeader,
+  FooterActionButton,
+  FooterActions,
+} from '../../Dialog'
 import useTranslationFunction from '../../../hooks/useTranslationFunction'
 
 import type { DialogProps } from '../../../contexts/DialogContext'
@@ -30,6 +37,10 @@ export function ReceiveBackupProgressDialog({
 
   const accountId = selectedAccountId()
 
+  const cancel = () => {
+    BackendRemote.rpc.stopOngoingProcess(accountId).then(onClose)
+  }
+
   useEffect(() => {
     ;(async () => {
       try {
@@ -71,6 +82,13 @@ export function ReceiveBackupProgressDialog({
             intent={error ? 'danger' : 'success'}
           />
         </DialogContent>
+        <DialogFooter>
+          <FooterActions align='end'>
+            <FooterActionButton onClick={cancel}>
+              {tx('cancel')}
+            </FooterActionButton>
+          </FooterActions>
+        </DialogFooter>
       </DialogBody>
     </DialogWithHeader>
   )

diff --git a/packages/frontend/src/components/screens/WelcomeScreen/ImportBackupProgressDialog.tsx b/packages/frontend/src/components/screens/WelcomeScreen/ImportBackupProgressDialog.tsx
@@ -3,7 +3,14 @@ import React, { useEffect, useState } from 'react'
 import useTranslationFunction from '../../../hooks/useTranslationFunction'
 import { BackendRemote } from '../../../backend-com'
 import { DeltaProgressBar } from '../../Login-Styles'
-import { DialogBody, DialogContent, DialogWithHeader } from '../../Dialog'
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogWithHeader,
+  FooterActionButton,
+  FooterActions,
+} from '../../Dialog'
 import { getLogger } from '../../../../../shared/logger'
 import { selectedAccountId } from '../../../ScreenController'
 
@@ -29,6 +36,10 @@ export default function ImportBackupProgressDialog({
 
   const accountId = selectedAccountId()
 
+  const cancel = () => {
+    BackendRemote.rpc.stopOngoingProcess(accountId).then(onClose)
+  }
+
   useEffect(() => {
     ;(async () => {
       try {
@@ -71,6 +82,13 @@ export default function ImportBackupProgressDialog({
             intent={error ? 'danger' : 'primary'}
           />
         </DialogContent>
+        <DialogFooter>
+          <FooterActions align='end'>
+            <FooterActionButton onClick={cancel}>
+              {tx('cancel')}
+            </FooterActionButton>
+          </FooterActions>
+        </DialogFooter>
       </DialogBody>
     </DialogWithHeader>
   )