Confirmation when deleting files via dropdown menu; closes #2293

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -29,6 +29,7 @@ import useEventListener from '@/plugins/useEventListener';
 import compressFiles from '@/api/server/files/compressFiles';
 import decompressFiles from '@/api/server/files/decompressFiles';
 import isEqual from 'react-fast-compare';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
 
 type ModalType = 'rename' | 'move';
 
@@ -54,6 +55,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
     const onClickRef = useRef<DropdownMenu>(null);
     const [ showSpinner, setShowSpinner ] = useState(false);
     const [ modal, setModal ] = useState<ModalType | null>(null);
+    const [ showConfirmation, setShowConfirmation ] = useState(false);
 
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { mutate } = useFileManagerSwr();
@@ -123,6 +125,16 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
     };
 
     return (
+        <>
+            <ConfirmationModal
+                visible={showConfirmation}
+                title={`Delete this ${file.isFile ? 'File' : 'Directory'}?`}
+                buttonText={`Yes, Delete ${file.isFile ? 'File' : 'Directory'}`}
+                onConfirmed={doDeletion}
+                onModalDismissed={() => setShowConfirmation(false)}
+            >
+                Deleting files is a permanent operation, you cannot undo this action.
+            </ConfirmationModal>
             <DropdownMenu
                 ref={onClickRef}
                 renderToggle={onClick => (
@@ -161,9 +173,10 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
                 }
                 <Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
                 <Can action={'file.delete'}>
-                <Row onClick={doDeletion} icon={faTrashAlt} title={'Delete'} $danger/>
+                    <Row onClick={() => setShowConfirmation(true)} icon={faTrashAlt} title={'Delete'} $danger/>
                 </Can>
             </DropdownMenu>
+        </>
     );
 };