Added new component for file actions

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}/>
 
 			<Grid container>
-				<Grid item xs={10} sx={{display: 'flex', alignItems: 'center'}}>
+				<Grid item xs={8} sx={{display: "flex", alignItems: "center"}}>
 					<MainBreadcrumbs paths={paths}/>
 				</Grid>
-				<Grid item xs={2}>
-					<Button variant="contained"
-							onClick={() => {
-								downloadFile(fileId, fileSummary.name);
-							}} endIcon={<Download/>}>
-						Download
-					</Button>
+				<Grid item xs={4}>
+					<FileActionsMenu
+						filename={fileSummary.name}
+						fileId={fileId}
+						datasetId={datasetId}
+					/>
 				</Grid>
 			</Grid>
 			<Grid container>

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 | HTMLElement>(null);
+	const open = Boolean(anchorEl);
+
+	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		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 (
+		<Stack direction="row"
+			justifyContent="flex-end"
+			alignItems="center"
+			spacing={0.5}>
+			<ActionModal actionOpen={confirmationOpen} actionTitle="Are you sure?"
+						 actionText="Do you really want to delete? This process cannot be undone."
+						 actionBtnName="Delete" handleActionBtnClick={deleteSelectedFile}
+						 handleActionCancel={() => { setConfirmationOpen(false);}}/>
+			<Dialog open={updateFileOpen} onClose={()=>{setUpdateFileOpen(false);}} fullWidth={true} aria-labelledby="form-dialog">
+				<DialogTitle id="form-dialog-title">Update File</DialogTitle>
+				<UpdateFile fileId={fileId} setOpen={setUpdateFileOpen}/>
+			</Dialog>
+			<Button variant="contained"
+				onClick={() => {
+					downloadFile(fileId, filename);
+					handleClose();
+				}} endIcon={<Download/>}>
+        Download
+			</Button>
+			<div>
+				<Button
+					variant="outlined"
+					id="basic-button"
+					aria-controls={open ? "basic-menu" : undefined}
+					aria-haspopup="true"
+					aria-expanded={open ? "true" : undefined}
+					onClick={handleClick}
+					endIcon={<ArrowDropDownIcon/>}>
+					<MoreHoriz />
+				</Button>
+				<Menu
+					id="basic-menu"
+					anchorEl={anchorEl}
+					open={open}
+					onClose={handleClose}
+					MenuListProps={{
+						"aria-labelledby": "basic-button",
+					}}
+				>
+					<MenuItem onClick={()=>{
+						handleClose();
+						setUpdateFileOpen(true);
+					}}> <ListItemIcon>
+							<Upload fontSize="small"/>
+						</ListItemIcon>
+						<ListItemText>Update File</ListItemText></MenuItem>
+					<MenuItem onClick={()=>{
+						handleClose();
+						setConfirmationOpen(true);
+					}}>
+						<ListItemIcon>
+							<DeleteIcon fontSize="small" />
+						</ListItemIcon>
+						<ListItemText>Delete</ListItemText>
+					</MenuItem>
+				</Menu>
+			</div>
+		</Stack>);
+};
+

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,17 +19,19 @@ type UpdateFileProps ={
 
 export const UpdateFile: React.FC<UpdateFileProps> = (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;
 
 	const [loading, setLoading] = useState<boolean>(false);
 
 	const onSave = async (formData:FormData) => {
 		setLoading(true);
-		updateFile(formData, fileId);
+		await updateFile(formData, fileId);
 		setLoading(false);
 		setOpen(false);
+		listFileVersions(fileId);
 	};
 
 	// TODO