applications/drive/src/app/components/TransferManager/TransferControls.tsx

   1 import { c } from 'ttag';
   2
   3 import { useLoading } from '@proton/hooks';
   4
   5 import {
   6     isTransferFailed,
   7     isTransferFinalizing,
   8     isTransferFinished,
   9     isTransferOngoing,
  10     isTransferPaused,
  11     isTransferSkipped,
  12 } from '../../utils/transfer';
  13 import Buttons from './Buttons';
  14 import type { TransferManagerButtonProps, TransferProps } from './interfaces';
  15 import type { Upload } from './transfer';
  16 import { TransferType } from './transfer';
  17 import useTransferControls from './useTransferControls';
  18
  19 function TransferControls<T extends TransferType>({ transfer, type }: TransferProps<T>) {
  20     const transferControls = useTransferControls();
  21     const [pauseInProgress, withPauseInProgress] = useLoading();
  22     const isFinished = isTransferFinished(transfer);
  23     const isFailed = isTransferFailed(transfer);
  24     const isSkipped = isTransferSkipped(transfer);
  25     const isFinalizing = isTransferFinalizing(transfer);
  26
  27     const isPauseResumeAvailable = isTransferOngoing(transfer);
  28     const isRestartAvailable = isFailed;
  29     const isCancelAvailable = !isFinalizing && !isFinished && !isSkipped;
  30     const isTransferWithChildrenFinished = (upload: Upload) => {
  31         if (!isTransferFinished(upload)) {
  32             return false;
  33         }
  34         if (upload.files?.some((transfer) => !isTransferFinished(transfer))) {
  35             return false;
  36         }
  37         if (upload.folders?.some((transfer) => !isTransferWithChildrenFinished(transfer))) {
  38             return false;
  39         }
  40         return true;
  41     };
  42     // Do not show clear button for uploading folders which still have any
  43     // children in progress as that would lead to some edge cases that
  44     // parent with its children is removed from transfer manager but some
  45     // ongoing transfers are still finishing up.
  46     const isRemoveAvailable =
  47         (isFinished && (type === TransferType.Download || isTransferWithChildrenFinished(transfer as Upload))) ||
  48         isSkipped;
  49
  50     const pauseText = type === TransferType.Download ? c('Action').t`Pause download` : c('Action').t`Pause upload`;
  51     const resumeText = type === TransferType.Download ? c('Action').t`Resume download` : c('Action').t`Resume upload`;
  52     const cancelText = type === TransferType.Download ? c('Action').t`Cancel download` : c('Action').t`Cancel upload`;
  53     const restartText =
  54         type === TransferType.Download ? c('Action').t`Restart download` : c('Action').t`Restart upload`;
  55     const removeText = c('Action').t`Remove from this list`;
  56
  57     const testIdPrefix = 'drive-transfers-manager:item-controls-';
  58
  59     const getButtons = () => {
  60         const buttons: TransferManagerButtonProps[] = [];
  61         if (isPauseResumeAvailable) {
  62             buttons.push({
  63                 onClick: () => withPauseInProgress(transferControls.togglePause(transfer, type)),
  64                 disabled: pauseInProgress,
  65                 title: isTransferPaused(transfer) ? resumeText : pauseText,
  66                 iconName: isTransferPaused(transfer) ? 'play' : 'pause',
  67                 testId: testIdPrefix + (isTransferPaused(transfer) ? 'play' : 'pause'),
  68             });
  69         }
  70
  71         if (isRestartAvailable) {
  72             buttons.push({
  73                 onClick: () => transferControls.restart(transfer, type),
  74                 title: restartText,
  75                 iconName: 'arrow-rotate-right',
  76                 testId: testIdPrefix + 'restart',
  77             });
  78         }
  79
  80         if (isRemoveAvailable) {
  81             buttons.push({
  82                 onClick: () => transferControls.remove(transfer, type),
  83                 title: removeText,
  84                 disabled: isFinalizing,
  85                 iconName: 'broom',
  86                 testId: testIdPrefix + 'remove',
  87             });
  88         }
  89
  90         if (isCancelAvailable) {
  91             buttons.push({
  92                 onClick: () => transferControls.cancel(transfer, type),
  93                 title: cancelText,
  94                 disabled: isFinalizing,
  95                 iconName: 'cross',
  96                 testId: testIdPrefix + 'cancel',
  97             });
  98         }
  99
 100         return buttons;
 101     };
 102
 103     return <Buttons className="transfers-manager-list-item-controls" buttons={getButtons()} />;
 104 }
 105
 106 export default TransferControls;