Adding download button on UI to download correct verison file (#334)

* Adding download button on UI to download correct verison file

* fix filename issue

* Update FileVersion.ts

---------

Co-authored-by: Chen Wang <[email protected]>

Author: ddey2

backend/app/routers/files.py

@@ -312,8 +312,8 @@ async def download_file(
 ):
     # If file exists in MongoDB, download from Minio
     if (file := await db["files"].find_one({"_id": ObjectId(file_id)})) is not None:
+        file_obj = FileOut.from_mongo(file)
         if version is not None:
-            file_obj = FileOut.from_mongo(file)
             # Version is specified, so get the minio ID from versions table if possible
             if (
                 file_vers := await db["file_versions"].find_one(

frontend/src/actions/file.js

@@ -182,12 +182,14 @@ export function fetchFileVersions(fileId){
 }
 
 export const DOWNLOAD_FILE = "DOWNLOAD_FILE";
-export function fileDownloaded(fileId, filename = "") {
+export function fileDownloaded(fileId, filename = "", fileVersionNum = 0) {
 	return async (dispatch) => {
 		if (filename === "") {
 			filename = `${fileId}.zip`;
 		}
-		const endpoint = `${config.hostname}/api/v2/files/${fileId}`;
+		let endpoint = `${config.hostname}/api/v2/files/${fileId}`;
+		if (fileVersionNum != 0)
+			endpoint = endpoint + '?version=' + fileVersionNum;
 		const response = await fetch(endpoint, {method: "GET", mode: "cors", headers: await getHeader()});
 
 		if (response.status === 200) {

frontend/src/components/files/File.tsx

@@ -240,7 +240,7 @@ export const File = (): JSX.Element => {
 					{/*Version History*/}
 					<TabPanel value={selectedTabIndex} index={0}>
 						{fileVersions !== undefined ?
-							<FileVersionHistory fileVersions={fileVersions}/> : <></>}
+							<FileVersionHistory fileVersions={fileVersions} filename={fileSummary.name}/> : <></>}
 					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={1}>
 						{

frontend/src/components/versions/FileVersionHistory.tsx

@@ -1,15 +1,20 @@
 import React from "react";
-import {Box, List, ListItem, ListItemAvatar, ListItemText} from "@mui/material";
+import {Box, Button, List, ListItem, ListItemAvatar, ListItemText} from "@mui/material";
 import {VersionChip} from "./VersionChip";
 import {parseDate} from "../../utils/common";
 import {FileVersion} from "../../openapi/v2";
+import {fileDownloaded} from "../../actions/file";
+import {useDispatch} from "react-redux";
 
 type FileVersionHistoryProps = {
-	fileVersions: FileVersion[]
+	fileVersions: FileVersion[],
+	filename: string,
 }
 
 export function FileVersionHistory(props: FileVersionHistoryProps) {
-	const {fileVersions} = props;
+	const {fileVersions, filename} = props;
+	const dispatch = useDispatch();
+	const downloadFile = (fileId:string|undefined, filename:string|undefined, fileVersion:number|undefined) => dispatch(fileDownloaded(fileId, filename, fileVersion))
 
 	return (
 		<Box className="infoCard">
@@ -28,8 +33,12 @@ export function FileVersionHistory(props: FileVersionHistoryProps) {
 										`${creator.first_name} ${creator.last_name}` : ""}`}
 									secondary={`Uploaded on ${parseDate(created)}`}
 								/>
+								<Button onClick={()=>{
+								   downloadFile(fileVersion.file_id, filename, version_num);
+								}}>
+									Download
+								</Button>
 								{/*TODO implement those actions*/}
-								{/*<Button disabled>Download</Button>*/}
 								{/*<Button disabled>Delete</Button>*/}
 								{/*<Button disabled>Make Current</Button>*/}
 							</ListItem>