From 3480d7da3f2e47cfcf151c68701f5629aeb0c9be Mon Sep 17 00:00:00 2001
From: Rushikesh Tote <rushi.tote@gmail.com>
Date: Wed, 13 Apr 2022 10:00:54 +0530
Subject: [PATCH] added cancel uploads button

---
 .../pages/gallery/UploadProgress.tsx          | 297 ++++++++++--------
 src/utils/strings/englishConstants.tsx        |   4 +
 2 files changed, 165 insertions(+), 136 deletions(-)

diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx
index 60796ca6b..0c4b8aacd 100644
--- a/src/components/pages/gallery/UploadProgress.tsx
+++ b/src/components/pages/gallery/UploadProgress.tsx
@@ -10,6 +10,7 @@ import constants from 'utils/strings/constants';
 import { ButtonVariant, getVariantColor } from './LinkButton';
 import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
 import FileList from 'components/FileList';
+import MessageDialog from 'components/MessageDialog';
 interface Props {
     fileCounter;
     uploadStage;
@@ -168,6 +169,8 @@ const InProgressSection = (props: InProgressProps) => {
 };
 
 export default function UploadProgress(props: Props) {
+    const [showCancelDialog, setShowCancelDialog] = useState(false);
+
     const fileProgressStatuses = [] as FileProgresses[];
     const fileUploadResultMap = new Map<FileUploadResults, number[]>();
     let filesNotUploaded = false;
@@ -198,146 +201,168 @@ export default function UploadProgress(props: Props) {
     }
 
     return (
-        <Modal
-            show={props.show}
-            onHide={
-                props.uploadStage !== UPLOAD_STAGES.FINISH
-                    ? () => null
-                    : props.closeModal
-            }
-            aria-labelledby="contained-modal-title-vcenter"
-            centered
-            backdrop={fileProgressStatuses?.length !== 0 ? 'static' : true}>
-            <Modal.Header
-                style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    textAlign: 'center',
-                    borderBottom: 'none',
-                    paddingTop: '30px',
-                    paddingBottom: '0px',
-                }}
-                closeButton={props.uploadStage === UPLOAD_STAGES.FINISH}>
-                <h4 style={{ width: '100%' }}>
-                    {props.uploadStage === UPLOAD_STAGES.UPLOADING
-                        ? constants.UPLOAD[props.uploadStage](props.fileCounter)
-                        : constants.UPLOAD[props.uploadStage]}
-                </h4>
-            </Modal.Header>
-            <Modal.Body>
-                {(props.uploadStage ===
-                    UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES ||
-                    props.uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA ||
-                    props.uploadStage === UPLOAD_STAGES.UPLOADING) && (
-                    <ProgressBar
-                        now={props.now}
-                        animated
-                        variant="upload-progress-bar"
-                    />
-                )}
-                {props.uploadStage === UPLOAD_STAGES.UPLOADING && (
-                    <InProgressSection
+        <>
+            <Modal
+                show={props.show}
+                onHide={
+                    props.uploadStage !== UPLOAD_STAGES.FINISH
+                        ? () => {
+                              setShowCancelDialog(true);
+                          }
+                        : props.closeModal
+                }
+                aria-labelledby="contained-modal-title-vcenter"
+                centered
+                backdrop={fileProgressStatuses?.length !== 0 ? 'static' : true}>
+                <Modal.Header
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        textAlign: 'center',
+                        borderBottom: 'none',
+                        paddingTop: '30px',
+                        paddingBottom: '0px',
+                    }}
+                    closeButton={true}>
+                    <h4 style={{ width: '100%' }}>
+                        {props.uploadStage === UPLOAD_STAGES.UPLOADING
+                            ? constants.UPLOAD[props.uploadStage](
+                                  props.fileCounter
+                              )
+                            : constants.UPLOAD[props.uploadStage]}
+                    </h4>
+                </Modal.Header>
+                <Modal.Body>
+                    {(props.uploadStage ===
+                        UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES ||
+                        props.uploadStage ===
+                            UPLOAD_STAGES.EXTRACTING_METADATA ||
+                        props.uploadStage === UPLOAD_STAGES.UPLOADING) && (
+                        <ProgressBar
+                            now={props.now}
+                            animated
+                            variant="upload-progress-bar"
+                        />
+                    )}
+                    {props.uploadStage === UPLOAD_STAGES.UPLOADING && (
+                        <InProgressSection
+                            filenames={props.filenames}
+                            fileProgressStatuses={fileProgressStatuses}
+                            sectionTitle={constants.INPROGRESS_UPLOADS}
+                            sectionInfo={sectionInfo}
+                        />
+                    )}
+
+                    <ResultSection
                         filenames={props.filenames}
-                        fileProgressStatuses={fileProgressStatuses}
-                        sectionTitle={constants.INPROGRESS_UPLOADS}
-                        sectionInfo={sectionInfo}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.UPLOADED}
+                        sectionTitle={constants.SUCCESSFUL_UPLOADS}
                     />
-                )}
 
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.UPLOADED}
-                    sectionTitle={constants.SUCCESSFUL_UPLOADS}
-                />
-
-                {props.uploadStage === UPLOAD_STAGES.FINISH &&
-                    filesNotUploaded && (
-                        <NotUploadSectionHeader>
-                            {constants.FILE_NOT_UPLOADED_LIST}
-                        </NotUploadSectionHeader>
-                    )}
-
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.BLOCKED}
-                    sectionTitle={constants.BLOCKED_UPLOADS}
-                    sectionInfo={constants.ETAGS_BLOCKED(
-                        DESKTOP_APP_DOWNLOAD_URL
-                    )}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.FAILED}
-                    sectionTitle={constants.FAILED_UPLOADS}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.ALREADY_UPLOADED}
-                    sectionTitle={constants.SKIPPED_FILES}
-                    sectionInfo={constants.SKIPPED_INFO}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={
-                        FileUploadResults.LARGER_THAN_AVAILABLE_STORAGE
-                    }
-                    sectionTitle={
-                        constants.LARGER_THAN_AVAILABLE_STORAGE_UPLOADS
-                    }
-                    sectionInfo={constants.LARGER_THAN_AVAILABLE_STORAGE_INFO}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.UNSUPPORTED}
-                    sectionTitle={constants.UNSUPPORTED_FILES}
-                    sectionInfo={constants.UNSUPPORTED_INFO}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.TOO_LARGE}
-                    sectionTitle={constants.TOO_LARGE_UPLOADS}
-                    sectionInfo={constants.TOO_LARGE_INFO}
-                />
-            </Modal.Body>
-            {props.uploadStage === UPLOAD_STAGES.FINISH ? (
-                <Modal.Footer style={{ border: 'none' }}>
                     {props.uploadStage === UPLOAD_STAGES.FINISH &&
-                        (fileUploadResultMap?.get(FileUploadResults.FAILED)
-                            ?.length > 0 ||
-                        fileUploadResultMap?.get(FileUploadResults.BLOCKED)
-                            ?.length > 0 ? (
-                            <Button
-                                variant="outline-success"
-                                style={{ width: '100%' }}
-                                onClick={props.retryFailed}>
-                                {constants.RETRY_FAILED}
-                            </Button>
-                        ) : (
-                            <Button
-                                variant="outline-secondary"
-                                style={{ width: '100%' }}
-                                onClick={props.closeModal}>
-                                {constants.CLOSE}
-                            </Button>
-                        ))}
-                </Modal.Footer>
-            ) : (
-                <Modal.Footer style={{ border: 'none' }}>
-                    <Button
-                        variant="outline-danger"
-                        style={{ width: '100%' }}
-                        onClick={props.cancelUploads}>
-                        {constants.CANCEL_UPLOADS}
-                    </Button>
-                </Modal.Footer>
+                        filesNotUploaded && (
+                            <NotUploadSectionHeader>
+                                {constants.FILE_NOT_UPLOADED_LIST}
+                            </NotUploadSectionHeader>
+                        )}
+
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.BLOCKED}
+                        sectionTitle={constants.BLOCKED_UPLOADS}
+                        sectionInfo={constants.ETAGS_BLOCKED(
+                            DESKTOP_APP_DOWNLOAD_URL
+                        )}
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.FAILED}
+                        sectionTitle={constants.FAILED_UPLOADS}
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.ALREADY_UPLOADED}
+                        sectionTitle={constants.SKIPPED_FILES}
+                        sectionInfo={constants.SKIPPED_INFO}
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={
+                            FileUploadResults.LARGER_THAN_AVAILABLE_STORAGE
+                        }
+                        sectionTitle={
+                            constants.LARGER_THAN_AVAILABLE_STORAGE_UPLOADS
+                        }
+                        sectionInfo={
+                            constants.LARGER_THAN_AVAILABLE_STORAGE_INFO
+                        }
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.UNSUPPORTED}
+                        sectionTitle={constants.UNSUPPORTED_FILES}
+                        sectionInfo={constants.UNSUPPORTED_INFO}
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.TOO_LARGE}
+                        sectionTitle={constants.TOO_LARGE_UPLOADS}
+                        sectionInfo={constants.TOO_LARGE_INFO}
+                    />
+                </Modal.Body>
+                {props.uploadStage === UPLOAD_STAGES.FINISH && (
+                    <Modal.Footer style={{ border: 'none' }}>
+                        {props.uploadStage === UPLOAD_STAGES.FINISH &&
+                            (fileUploadResultMap?.get(FileUploadResults.FAILED)
+                                ?.length > 0 ||
+                            fileUploadResultMap?.get(FileUploadResults.BLOCKED)
+                                ?.length > 0 ? (
+                                <Button
+                                    variant="outline-success"
+                                    style={{ width: '100%' }}
+                                    onClick={props.retryFailed}>
+                                    {constants.RETRY_FAILED}
+                                </Button>
+                            ) : (
+                                <Button
+                                    variant="outline-secondary"
+                                    style={{ width: '100%' }}
+                                    onClick={props.closeModal}>
+                                    {constants.CLOSE}
+                                </Button>
+                            ))}
+                    </Modal.Footer>
+                )}
+            </Modal>
+            {showCancelDialog && (
+                <MessageDialog
+                    show={showCancelDialog}
+                    onHide={() => {
+                        setShowCancelDialog(false);
+                    }}
+                    attributes={{
+                        title: constants.STOP_UPLOADS_HEADER,
+                        content: constants.STOP_ALL_UPLOADS_MESSAGE,
+                        proceed: {
+                            text: constants.YES_STOP_UPLOADS,
+                            variant: 'danger',
+                            action: props.cancelUploads,
+                        },
+                        close: {
+                            text: constants.NO,
+                            variant: 'secondary',
+                            action: () => {},
+                        },
+                    }}
+                />
             )}
-        </Modal>
+        </>
     );
 }
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index 32f200b73..6d8e081fe 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@@ -708,6 +708,10 @@ const englishConstants = {
             you believe are duplicates{' '}
         </>
     ),
+    STOP_ALL_UPLOADS_MESSAGE:
+        'are you sure that you want to stop all the uploads in progress?',
+    STOP_UPLOADS_HEADER: 'stop uploads?',
+    YES_STOP_UPLOADS: 'yes, stop uploads',
 };
 
 export default englishConstants;