diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx index 66b2fbb32..1ccf4b60c 100644 --- a/resources/scripts/components/server/files/FileDropdownMenu.tsx +++ b/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(null); const [ showSpinner, setShowSpinner ] = useState(false); const [ modal, setModal ] = useState(null); + const [ showConfirmation, setShowConfirmation ] = useState(false); const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const { mutate } = useFileManagerSwr(); @@ -123,47 +125,58 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => { }; return ( - ( -
- - {!!modal && - setModal(null)} - /> - } - -
- )} - > - - setModal('rename')} icon={faPencilAlt} title={'Rename'}/> - setModal('move')} icon={faLevelUpAlt} title={'Move'}/> - - {file.isFile && - - - - } - {file.isArchiveType() ? + <> + setShowConfirmation(false)} + > + Deleting files is a permanent operation, you cannot undo this action. + + ( +
+ + {!!modal && + setModal(null)} + /> + } + +
+ )} + > + + setModal('rename')} icon={faPencilAlt} title={'Rename'}/> + setModal('move')} icon={faLevelUpAlt} title={'Move'}/> + + {file.isFile && - + - : - - + } + {file.isArchiveType() ? + + + + : + + + + } + + + setShowConfirmation(true)} icon={faTrashAlt} title={'Delete'} $danger/> - } - - - - -
+
+ ); };