202 file breadcrumb folders not in breadcrumb for files fixed (#214)

* folder.folderPath not dataset.folderPath

* fix one bug

* fix the other bug

* This fixes the breadcrumb navigation after file is uploaded. Previously folder was not passed in.

* Fixed a bug when passing in folder=null to the file page.

* Fixed bad merge.

* add back missing folder id

* add another missing import

* Fixed bad merge.

* add breadcrumb back for dataset

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

Author: 3 people

frontend/src/components/datasets/Dataset.tsx

@@ -24,6 +24,7 @@ import Layout from "../Layout";
 import {ActionsMenu} from "./ActionsMenu";
 import {DatasetDetails} from "./DatasetDetails";
 import {FormatListBulleted, InsertDriveFile} from "@material-ui/icons";
+import {MainBreadcrumbs} from "../navigation/BreadCrumb";
 
 const tab = {
 	fontStyle: "normal",
@@ -57,7 +58,6 @@ export const Dataset = (): JSX.Element => {
 	// mapStateToProps
 	const reason = useSelector((state: RootState) => state.error.reason);
 	const stack = useSelector((state: RootState) => state.error.stack);
-	const folderPath = useSelector((state: RootState) => state.folder.folderPath);
 	const about = useSelector((state: RootState) => state.dataset.about);
 
 	// state
@@ -134,12 +134,41 @@ export const Dataset = (): JSX.Element => {
 		setEnableAddMetadata(false);
 	};
 
+	// for breadcrumb
+	const paths = [
+		{
+			"name": "Explore",
+			"url": "/",
+		},
+		{
+			"name": about["name"],
+			"url": `/datasets/${datasetId}`
+		}
+	];
+	// add folder path to breadcrumbs
+	const folderPath = useSelector((state: RootState) => state.folder.folderPath);
+	if (folderPath != null) {
+		for (const folderBread of folderPath) {
+			paths.push({
+				"name": folderBread["folder_name"],
+				"url": `/datasets/${datasetId}?folder=${folderBread["folder_id"]}`
+			})
+		}
+	} else {
+		paths.slice(0, 1)
+	}
+
 	return (
 		<Layout>
 			{/*Error Message dialogue*/}
 			<ActionModal actionOpen={errorOpen} actionTitle="Something went wrong..." actionText={reason}
 						 actionBtnName="Report" handleActionBtnClick={handleErrorReport}
 						 handleActionCancel={handleErrorCancel}/>
+		 	<Grid container>
+				<Grid item xs={10} sx={{display: 'flex', alignItems: 'center'}}>
+					<MainBreadcrumbs paths={paths}/>
+				</Grid>
+			</Grid>
 			<Grid container>
 				<Grid item xs={8} sx={{display: 'flex', alignItems: 'center'}}>
 					<Typography variant="h3" paragraph>{about["name"]}</Typography>
@@ -157,7 +186,7 @@ export const Dataset = (): JSX.Element => {
 							 label="Metadata" {...a11yProps(1)} disabled={false}/>
 					</Tabs>
 					<TabPanel value={selectedTabIndex} index={0}>
-						<FilesTable datasetId={datasetId}/>
+						<FilesTable datasetId={datasetId} folderId={folderId}/>
 					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={1}>
 						{

frontend/src/components/files/File.tsx

@@ -3,7 +3,7 @@ import config from "../../app.config";
 import {Button, Grid, Tab, Tabs, Typography} from "@mui/material";
 import {downloadResource, parseDate} from "../../utils/common";
 import {PreviewConfiguration, RootState} from "../../types/data";
-import {useLocation, useParams} from "react-router-dom";
+import {useParams, useSearchParams} from "react-router-dom";
 import {useDispatch, useSelector} from "react-redux";
 import {resetFailedReason} from "../../actions/common"
 
@@ -24,15 +24,19 @@ import Layout from "../Layout";
 import {fetchDatasetAbout} from "../../actions/dataset";
 import {Download} from "@mui/icons-material";
 import {FileDetails} from "./FileDetails";
+import {fetchFolderPath} from "../../actions/folder";
+
 
 export const File = (): JSX.Element => {
 
 	// path parameter
 	const {fileId} = useParams<{ fileId?: string }>();
 
-	// query parameter get dataset id
-	const search = useLocation().search;
-	const datasetId = new URLSearchParams(search).get("dataset");
+	// search parameters
+	let [searchParams] = useSearchParams();
+	const folderId = searchParams.get("folder");
+	const datasetId = searchParams.get("dataset");
+
 	const listDatasetAbout = (datasetId: string | undefined) => dispatch(fetchDatasetAbout(datasetId));
 	const about = useSelector((state: RootState) => state.dataset.about);
 
@@ -45,6 +49,7 @@ export const File = (): JSX.Element => {
 	const updateFileMetadata = (fileId: string | undefined, metadata: object) => dispatch(patchFileMetadataAction(fileId, metadata));
 	const deleteFileMetadata = (fileId: string | undefined, metadata: object) => dispatch(deleteFileMetadataAction(fileId, metadata));
 	const downloadFile = (fileId: string | undefined, filename: string | undefined) => dispatch(fileDownloaded(fileId, filename))
+	const getFolderPath = (folderId: string | null) => dispatch(fetchFolderPath(folderId));
 
 	const fileSummary = useSelector((state: RootState) => state.file.fileSummary);
 	const filePreviews = useSelector((state: RootState) => state.file.previews);
@@ -62,7 +67,13 @@ export const File = (): JSX.Element => {
 		// load file information
 		listFileSummary(fileId);
 		listFileVersions(fileId);
-		listDatasetAbout(datasetId); // get dataset name
+		// FIXME replace checks for null with logic to load this info from redux instead of the page parameters
+		if (datasetId != "null" && datasetId != "undefined") {
+			listDatasetAbout(datasetId); // get dataset name
+		}
+		if (folderId != "null" && folderId != "undefined") {
+			getFolderPath(folderId); // get folder path
+		}
 	}, []);
 
 
@@ -165,7 +176,7 @@ export const File = (): JSX.Element => {
 	];
 
 	// add folder path to breadcrumbs
-	const folderPath = useSelector((state: RootState) => state.dataset.folderPath);
+	const folderPath = useSelector((state: RootState) => state.folder.folderPath);
 	if (folderPath != null) {
 		for (const folderBread of folderPath) {
 			paths.push({

frontend/src/components/files/FilesTable.tsx

@@ -17,6 +17,7 @@ import FolderMenu from "./FolderMenu";
 
 type FilesTableProps = {
 	datasetId: string | undefined,
+	folderId: string | null
 }
 
 const iconStyle = {
@@ -30,9 +31,11 @@ export default function FilesTable(props: FilesTableProps) {
 	const foldersInDataset = useSelector((state: RootState) => state.folder.folders);
 	// use history hook to redirect/navigate between routes
 	const history = useNavigate();
+	// get existing folder
+	const parentFolderId = props.folderId;
 	const selectFile = (selectedFileId: string | undefined) => {
-		// Redirect to file route with file Id and dataset id
-		history(`/files/${selectedFileId}?dataset=${props.datasetId}`);
+		// Redirect to file route with file Id and dataset id and folderId
+		history(`/files/${selectedFileId}?dataset=${props.datasetId}&folder=${parentFolderId}`);
 	};
 	const selectFolder = (selectedFolderId: string | undefined) => {
 		// Redirect to file route with file Id and dataset id

frontend/src/components/files/UploadFile.tsx

@@ -26,6 +26,7 @@ export const UploadFile:React.FC<UploadFileProps> = (props: UploadFileProps) =>
 	const createFileMetadata = (fileId: string|undefined, metadata:MetadataIn) => dispatch(postFileMetadata(fileId, metadata));
 	const uploadFile = (selectedDatasetId: string|undefined, selectedFolderId: string|undefined, formData: FormData) => dispatch(fileCreated(selectedDatasetId, selectedFolderId, formData));
 	const newFile = useSelector((state:RootState) => state.dataset.newFile);
+	const folderPath = useSelector((state: RootState) => state.folder.folderPath);
 
 	useEffect(() => {
 		getMetadatDefinitions(null, 0, 100);
@@ -83,7 +84,7 @@ export const UploadFile:React.FC<UploadFileProps> = (props: UploadFileProps) =>
 			setFileRequestForm({});
 
 			// Redirect to file route with file Id and dataset id
-			history(`/files/${file.id}?dataset=${selectedDatasetId}&name=${selectedDatasetName}`);
+			history(`/files/${file.id}?dataset=${selectedDatasetId}&folder=${folderId}`);
 		}
 
 	},[newFile]);