diff --git a/frontend/src/components/files/File.tsx b/frontend/src/components/files/File.tsx index de3bb227e..5ebfe7870 100644 --- a/frontend/src/components/files/File.tsx +++ b/frontend/src/components/files/File.tsx @@ -28,7 +28,7 @@ import {FileDetails} from "./FileDetails"; import {fetchFolderPath} from "../../actions/folder"; import {Listeners} from "../listeners/Listeners"; import {ExtractionHistoryTab} from "../listeners/ExtractionHistoryTab"; - +import { FileActionsMenu } from "./FileActionsMenu"; export const File = (): JSX.Element => { @@ -210,16 +210,15 @@ export const File = (): JSX.Element => { handleActionCancel={handleErrorCancel}/> - + - - + + diff --git a/frontend/src/components/files/FileActionsMenu.tsx b/frontend/src/components/files/FileActionsMenu.tsx new file mode 100644 index 000000000..ac90b628b --- /dev/null +++ b/frontend/src/components/files/FileActionsMenu.tsx @@ -0,0 +1,113 @@ +import {Button, Dialog, DialogTitle, ListItemIcon, ListItemText, Menu, MenuItem, Stack} from "@mui/material"; +import React, { useState } from "react"; +import {fileDeleted, fileDownloaded} from "../../actions/file"; +import {useDispatch, useSelector} from "react-redux"; +import {Download, MoreHoriz, Upload} from "@mui/icons-material"; +import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; +import { ActionModal } from "../dialog/ActionModal"; +import { UpdateFile } from "./UpdateFile"; +import DeleteIcon from "@mui/icons-material/Delete"; +import {useNavigate} from "react-router-dom"; + +type FileActionsMenuProps = { + fileId: string | undefined, + filename: string | undefined, + datasetId: string | null +} + +export const FileActionsMenu = (props: FileActionsMenuProps): JSX.Element => { + const {fileId, filename, datasetId} = props; + + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + // redux + const dispatch = useDispatch(); + + const deleteFile = (fileId:string|undefined) => dispatch(fileDeleted(fileId)); + const downloadFile = (fileId: string | undefined, filename: string | undefined) => dispatch(fileDownloaded(fileId, filename)); + + const history = useNavigate(); + + const [confirmationOpen, setConfirmationOpen] = useState(false); + + const [updateFileOpen, setUpdateFileOpen] = useState(false); + const deleteSelectedFile = () => { + if (fileId) { + deleteFile(fileId); + } + setConfirmationOpen(false); + + // Redirect back to main dataset page + history(`/datasets/${datasetId}`); + }; + + return ( + + { setConfirmationOpen(false);}}/> + {setUpdateFileOpen(false);}} fullWidth={true} aria-labelledby="form-dialog"> + Update File + + + +
+ + + { + handleClose(); + setUpdateFileOpen(true); + }}> + + + Update File + { + handleClose(); + setConfirmationOpen(true); + }}> + + + + Delete + + +
+
); +}; + diff --git a/frontend/src/components/files/UpdateFile.tsx b/frontend/src/components/files/UpdateFile.tsx index 88e380fb7..b0e6b6af0 100644 --- a/frontend/src/components/files/UpdateFile.tsx +++ b/frontend/src/components/files/UpdateFile.tsx @@ -9,7 +9,7 @@ import Form from "@rjsf/material-ui"; import fileSchema from "../../schema/fileSchema.json"; import {FormProps} from "@rjsf/core"; import {useDispatch} from "react-redux"; -import {fileUpdated} from "../../actions/file"; +import {fetchFileVersions, fileUpdated} from "../../actions/file"; type UpdateFileProps ={ @@ -19,7 +19,8 @@ type UpdateFileProps ={ export const UpdateFile: React.FC = (props: UpdateFileProps) => { const dispatch = useDispatch(); - const updateFile = (formData: FormData, fileId: string|undefined) => dispatch(fileUpdated(formData, fileId)); + const updateFile = async (formData: FormData, fileId: string|undefined) => dispatch(fileUpdated(formData, fileId)); + const listFileVersions = (fileId: string | undefined) => dispatch(fetchFileVersions(fileId)); const {fileId, setOpen,} = props; @@ -27,9 +28,10 @@ export const UpdateFile: React.FC = (props: UpdateFileProps) => const onSave = async (formData:FormData) => { setLoading(true); - updateFile(formData, fileId); + await updateFile(formData, fileId); setLoading(false); setOpen(false); + listFileVersions(fileId); }; // TODO