Dataset page cleanup (#194)

* Removed Explore breadcrumb on Explore pages since it wasn't clickable and just took up space.

* Moved action menu on dataset page to standalone file. Change position to left of breadcrumb.

* Fixed file icon color in dataset table.

* Split up action menu in dataset page into multiple buttons.

* Moved dataset name and description to top left and made it bigger to make it more prominent.
Replaced edit dataset name and description inline with modal.

* Changed datasets menu icon to horizontal ellipses.

* Moved delete folder action from dataset to folders/files table.

* Added icons to menu items in dataset view.

* Pretty print bytes using pretty-bytes library.

* Fixed extra bytes in files table.

* Updated package-lock.json.

Author: lmarini

frontend/package-lock.json

@@ -49,6 +49,7 @@
 		"html-react-parser": "^3.0.4",
 		"jquery": "^3.6.0",
 		"jwt-decode": "^3.0.0",
+		"pretty-bytes": "^6.0.0",
 		"prop-types": "^15.7.2",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",

frontend/package.json

@@ -3,12 +3,11 @@ import {Box, Button, ButtonGroup, Grid, Tab, Tabs} from "@mui/material";
 
 import {Dataset, RootState} from "../types/data";
 import {useDispatch, useSelector} from "react-redux";
-import {datasetDeleted, fetchDatasets,} from "../actions/dataset";
+import {fetchDatasets} from "../actions/dataset";
 import {resetFailedReason} from "../actions/common";
 import {downloadThumbnail} from "../utils/thumbnail";
 
 import {a11yProps, TabPanel} from "./tabs/TabComponent";
-import {MainBreadcrumbs} from "./navigation/BreadCrumb";
 import {ActionModal} from "./dialog/ActionModal";
 import DatasetCard from "./datasets/DatasetCard";
 import config from "../app.config";
@@ -27,7 +26,6 @@ export const Explore = (): JSX.Element => {
 
 	// Redux connect equivalent
 	const dispatch = useDispatch();
-	const deleteDataset = (datasetId: string) => dispatch(datasetDeleted(datasetId));
 	const listDatasets = (skip: number | undefined, limit: number | undefined, mine: boolean | undefined) => dispatch(fetchDatasets(skip, limit, mine));
 	const dismissError = () => dispatch(resetFailedReason());
 	const datasets = useSelector((state: RootState) => state.dataset.datasets);
@@ -117,26 +115,13 @@ export const Explore = (): JSX.Element => {
 		}
 	}, [skip]);
 
-	// for breadcrumb
-	const paths = [
-		{
-			"name": "Explore",
-			"url": "/",
-		}
-	];
-
 	return (
 		<Layout>
 			<div className="outer-container">
 				{/*Error Message dialogue*/}
 				<ActionModal actionOpen={errorOpen} actionTitle="Something went wrong..." actionText={reason}
 							 actionBtnName="Report" handleActionBtnClick={handleErrorReport}
 							 handleActionCancel={handleErrorCancel}/>
-				<Box m={1} display="flex" justifyContent="space-between" alignItems="flex-end">
-					<MainBreadcrumbs paths={paths}/>
-					{/*<Button href="/create-dataset" variant="contained" sx={{display: "flex", alignItems: "center"}}>New*/}
-					{/*	Dataset</Button>*/}
-				</Box>
 				<div className="inner-container">
 					<Grid container spacing={4}>
 						<Grid item xs>

frontend/src/components/Explore.tsx

@@ -0,0 +1,40 @@
+import {Button, Stack} from "@mui/material";
+import React from "react";
+import {datasetDownloaded} from "../../actions/dataset";
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "../../types/data";
+import {Download} from "@mui/icons-material";
+import {NewMenu} from "./NewMenu";
+import {OtherMenu} from "./OtherMenu";
+
+type ActionsMenuProps = {
+	datasetId: string,
+	folderId: string
+}
+
+export const ActionsMenu = (props: ActionsMenuProps): JSX.Element => {
+	const {datasetId, folderId} = props;
+
+	// redux
+	const dispatch = useDispatch();
+
+	const downloadDataset = (datasetId: string | undefined, filename: string | undefined) => dispatch(datasetDownloaded(datasetId, filename))
+
+	// state
+	const about = useSelector((state: RootState) => state.dataset.about);
+
+	return (
+		<Stack direction="row"
+			   justifyContent="flex-end"
+			   alignItems="center"
+			   spacing={0.5}>
+			<Button variant="contained"
+					onClick={() => {
+						downloadDataset(datasetId, about["name"]);
+					}} endIcon={<Download/>}>
+				Download
+			</Button>
+			<NewMenu datasetId={datasetId} folderId={folderId}/>
+			<OtherMenu datasetId={datasetId} folderId={folderId}/>
+		</Stack>)
+}