Backup import cancel UI

ts/components/installScreen/InstallScreenBackupImportStep.tsx

@@ -1,12 +1,13 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 
 import type { LocalizerType } from '../../types/Util';
 import { formatFileSize } from '../../util/formatFileSize';
 import { TitlebarDragArea } from '../TitlebarDragArea';
 import { ProgressBar } from '../ProgressBar';
+import { ConfirmationDialog } from '../ConfirmationDialog';
 import { InstallScreenSignalLogo } from './InstallScreenSignalLogo';
 
 // We can't always use destructuring assignment because of the complexity of this props
@@ -16,16 +17,36 @@ export type PropsType = Readonly<{
   i18n: LocalizerType;
   currentBytes?: number;
   totalBytes?: number;
+  onCancel: () => void;
 }>;
 
 export function InstallScreenBackupImportStep({
   i18n,
   currentBytes,
   totalBytes,
+  onCancel,
 }: PropsType): JSX.Element {
+  const [isConfirmingCancel, setIsConfirmingCancel] = useState(false);
+
+  const confirmCancel = useCallback(() => {
+    setIsConfirmingCancel(true);
+  }, []);
+
+  const abortCancel = useCallback(() => {
+    setIsConfirmingCancel(false);
+  }, []);
+
+  const onCancelWrap = useCallback(() => {
+    onCancel();
+    setIsConfirmingCancel(false);
+  }, [onCancel]);
+
   let percentage = 0;
   let progress: JSX.Element;
+  let isCancelPossible = true;
   if (currentBytes != null && totalBytes != null) {
+    isCancelPossible = currentBytes !== totalBytes;
+
     percentage = Math.max(0, Math.min(1, currentBytes / totalBytes));
     if (percentage > 0 && percentage <= 0.01) {
       percentage = 0.01;
@@ -38,7 +59,7 @@ export function InstallScreenBackupImportStep({
     progress = (
       <>
         <ProgressBar fractionComplete={percentage} />
-        <div className="BackupImportScreen__progressbar-hint">
+        <div className="InstallScreenBackupImportStep__progressbar-hint">
           {i18n('icu:BackupImportScreen__progressbar-hint', {
             currentSize: formatFileSize(currentBytes),
             totalSize: formatFileSize(totalBytes),
@@ -51,31 +72,60 @@ export function InstallScreenBackupImportStep({
     progress = (
       <>
         <ProgressBar fractionComplete={0} />
-        <div className="BackupImportScreen__progressbar-hint BackupImportScreen__progressbar-hint--hidden">
-          {i18n('icu:BackupImportScreen__progressbar-hint', {
-            currentSize: '',
-            totalSize: '',
-            fractionComplete: 0,
-          })}
+        <div className="InstallScreenBackupImportStep__progressbar-hint">
+          {i18n('icu:BackupImportScreen__progressbar-hint--preparing')}
         </div>
       </>
     );
   }
   return (
-    <div className="BackupImportScreen">
+    <div className="InstallScreenBackupImportStep">
       <TitlebarDragArea />
 
       <InstallScreenSignalLogo />
 
-      <div className="BackupImportScreen__content">
-        <h3 className="BackupImportScreen__title">
+      <div className="InstallScreenBackupImportStep__content">
+        <h3 className="InstallScreenBackupImportStep__title">
           {i18n('icu:BackupImportScreen__title')}
         </h3>
         {progress}
-        <div className="BackupImportScreen__description">
+        <div className="InstallScreenBackupImportStep__description">
           {i18n('icu:BackupImportScreen__description')}
         </div>
       </div>
+
+      {isCancelPossible && (
+        <button
+          className="InstallScreenBackupImportStep__cancel"
+          type="button"
+          onClick={confirmCancel}
+        >
+          {i18n('icu:BackupImportScreen__cancel')}
+        </button>
+      )}
+
+      {isConfirmingCancel && (
+        <ConfirmationDialog
+          dialogName="InstallScreenBackupImportStep.confirmCancel"
+          title={i18n('icu:BackupImportScreen__cancel-confirmation__title')}
+          cancelText={i18n(
+            'icu:BackupImportScreen__cancel-confirmation__cancel'
+          )}
+          actions={[
+            {
+              action: onCancelWrap,
+              style: 'negative',
+              text: i18n(
+                'icu:BackupImportScreen__cancel-confirmation__confirm'
+              ),
+            },
+          ]}
+          i18n={i18n}
+          onClose={abortCancel}
+        >
+          {i18n('icu:BackupImportScreen__cancel-confirmation__body')}
+        </ConfirmationDialog>
+      )}
     </div>
   );
 }