applications/drive/src/app/components/modals/ConflictModal.tsx

   1 import type { ReactNode } from 'react';
   2 import React, { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import type { ModalStateProps } from '@proton/components';
   8 import {
   9     Checkbox,
  10     ModalTwo,
  11     ModalTwoContent,
  12     ModalTwoFooter,
  13     ModalTwoHeader,
  14     PrimaryButton,
  15     Radio,
  16     Row,
  17     useModalTwoStatic,
  18 } from '@proton/components';
  19
  20 import { TransferConflictStrategy } from '../../store/_uploads/interface';
  21
  22 interface ConflictModalProps {
  23     name: string;
  24     isFolder?: boolean;
  25     originalIsDraft?: boolean;
  26     originalIsFolder?: boolean;
  27     isForPhotos?: boolean;
  28     apply: (strategy: TransferConflictStrategy, all: boolean) => void;
  29     cancelAll: () => void;
  30     onConfirm?: () => void;
  31     title?: string;
  32     children?: ReactNode;
  33     cancel?: ReactNode;
  34     confirm?: ReactNode;
  35     loading?: boolean;
  36     className?: string;
  37     small?: boolean;
  38     tiny?: boolean;
  39     noTitleEllipsis?: boolean;
  40     mode?: 'alert';
  41     submitProps?: any;
  42     closeProps?: any;
  43 }
  44
  45 export default function ConflictModal({
  46     name,
  47     isFolder = false,
  48     originalIsDraft = false,
  49     originalIsFolder = false,
  50     isForPhotos = false,
  51     apply,
  52     cancelAll,
  53     onClose,
  54     ...modalProps
  55 }: ConflictModalProps & ModalStateProps) {
  56     const [strategy, setStrategy] = useState(TransferConflictStrategy.Replace);
  57     const [applyAll, setApplyAll] = useState(false);
  58
  59     const isSameType = originalIsFolder === isFolder;
  60
  61     const uploadName = (
  62         <strong className="text-break" key="filename">
  63             {name}
  64         </strong>
  65     );
  66
  67     const replaceFile = <strong key="replaceFile">{c('Action').t`Replace file`}</strong>;
  68
  69     const handleSubmit = (e: React.FormEvent) => {
  70         e.preventDefault();
  71         apply(strategy, applyAll);
  72         onClose();
  73     };
  74
  75     const closeAndCancel = () => {
  76         onClose();
  77         cancelAll();
  78     };
  79
  80     return (
  81         <ModalTwo as="form" onClose={closeAndCancel} onSubmit={handleSubmit} size="small" {...modalProps}>
  82             <ModalTwoHeader
  83                 title={
  84                     isSameType ? (
  85                         <>{isFolder ? c('Title').t`Duplicate folder found` : c('Title').t`Duplicate file found`}</>
  86                     ) : (
  87                         <>{c('Label').t`Duplicate found`}</>
  88                     )
  89                 }
  90             />
  91
  92             <ModalTwoContent>
  93                 <p>
  94                     {originalIsDraft
  95                         ? c('Info')
  96                               .jt`It looks like you recently tried to upload ${uploadName}. If the upload failed, please ${replaceFile}. If the upload is still in progress, replacing it will cancel the ongoing upload.`
  97                         : c('Info').jt`${uploadName} already exists in this location.`}
  98                     <br />
  99                     {c('Info').t`What do you want to do?`}
 100                 </p>
 101                 <Row>
 102                     <Radio
 103                         id={TransferConflictStrategy.Replace}
 104                         checked={strategy === TransferConflictStrategy.Replace}
 105                         onChange={() => setStrategy(TransferConflictStrategy.Replace)}
 106                         name="strategy"
 107                         className="inline-flex flex-nowrap"
 108                     >
 109                         <div data-testid="replace-existing">
 110                             <strong>
 111                                 {originalIsFolder
 112                                     ? c('Label').t`Replace existing folder`
 113                                     : c('Label').t`Replace existing file`}
 114                             </strong>
 115                             <br />
 116                             <span className="color-weak">
 117                                 {isSameType && !isForPhotos ? (
 118                                     <>
 119                                         {originalIsFolder
 120                                             ? c('Info').t`This will upload a new version of the folder`
 121                                             : c('Info').t`This will upload a new version of the file`}
 122                                     </>
 123                                 ) : (
 124                                     <>
 125                                         {originalIsFolder
 126                                             ? c('Info').t`This will replace the existing folder with the file`
 127                                             : c('Info').t`This will replace the existing file with the folder`}
 128                                     </>
 129                                 )}
 130                             </span>
 131                         </div>
 132                     </Radio>
 133                 </Row>
 134                 <Row>
 135                     <Radio
 136                         id={TransferConflictStrategy.Rename}
 137                         checked={strategy === TransferConflictStrategy.Rename}
 138                         onChange={() => setStrategy(TransferConflictStrategy.Rename)}
 139                         name="strategy"
 140                         className="inline-flex flex-nowrap"
 141                     >
 142                         <div data-testid="keep-both">
 143                             <strong>
 144                                 {isSameType ? (
 145                                     <>
 146                                         {originalIsFolder
 147                                             ? c('Label').t`Keep both folders`
 148                                             : c('Label').t`Keep both files`}
 149                                     </>
 150                                 ) : (
 151                                     <>{c('Label').t`Keep both`}</>
 152                                 )}
 153                             </strong>
 154                             <br />
 155                             <span className="color-weak">
 156                                 {isFolder
 157                                     ? c('Info').t`A number will be added to the folder name`
 158                                     : c('Info').t`A number will be added to the filename`}
 159                             </span>
 160                         </div>
 161                     </Radio>
 162                 </Row>
 163                 <Row>
 164                     <Radio
 165                         id={TransferConflictStrategy.Skip}
 166                         checked={strategy === TransferConflictStrategy.Skip}
 167                         onChange={() => setStrategy(TransferConflictStrategy.Skip)}
 168                         name="strategy"
 169                         className="inline-flex flex-nowrap"
 170                     >
 171                         <div data-testid="skip-upload">
 172                             <strong>{isFolder ? c('Label').t`Skip folder` : c('Label').t`Skip file`}</strong>
 173                             <br />
 174                             <span className="color-weak">
 175                                 {isFolder
 176                                     ? c('Info').t`Folder will not be uploaded`
 177                                     : c('Info').t`File will not be updated`}
 178                             </span>
 179                         </div>
 180                     </Radio>
 181                 </Row>
 182                 <hr />
 183                 <Row>
 184                     <Checkbox data-testid="apply-to-all" onChange={() => setApplyAll((value) => !value)}>
 185                         {isFolder
 186                             ? c('Label').t`Apply to all duplicated folders`
 187                             : c('Label').t`Apply to all duplicated files`}
 188                     </Checkbox>
 189                 </Row>
 190             </ModalTwoContent>
 191             <ModalTwoFooter>
 192                 <Button type="button" onClick={closeAndCancel}>
 193                     {c('Action').t`Cancel all uploads`}
 194                 </Button>
 195                 <PrimaryButton type="submit">{c('Action').t`Continue`}</PrimaryButton>
 196             </ModalTwoFooter>
 197         </ModalTwo>
 198     );
 199 }
 200
 201 export const useConflictModal = () => {
 202     return useModalTwoStatic(ConflictModal);
 203 };