23 dashboard and breadcrumb need unique key prop (#202)

* fix p tag nested issue

* fix key

* fix more

* key error

* fix more list key issue

* fix nested typograph issue

Author: longshuicy

frontend/package-lock.json

@@ -41,7 +41,6 @@ import {
 import CloseIcon from '@mui/icons-material/Close';
 import Layout from "../Layout";
 import {ActionsMenu} from "./ActionsMenu";
-import DatasetName from "./DatasetName";
 
 const tab = {
 	fontStyle: "normal",

frontend/src/components/datasets/Dataset.tsx

@@ -9,7 +9,7 @@ import {datasetDownloaded} from "../../actions/dataset";
 import {useDispatch} from "react-redux";
 import {CardActionArea, IconButton, Tooltip} from "@mui/material";
 import {Download} from "@mui/icons-material";
-import {Favorite, Share} from "@material-ui/icons";
+// import {Favorite, Share} from "@material-ui/icons";
 
 type DatasetCardProps = {
 	id: string,
@@ -57,16 +57,16 @@ export default function DatasetCard(props: DatasetCardProps) {
 						<Download/>
 					</IconButton>
 				</Tooltip>
-				<Tooltip title="Favorite">
-					<IconButton color="primary" aria-label="favorite"  sx={{mr: 3}} disabled>
-						<Favorite/>
-					</IconButton>
-				</Tooltip>
-				<Tooltip title="Share">
-					<IconButton color="primary" aria-label="share"  sx={{mr: 3}} disabled>
-						<Share/>
-					</IconButton>
-				</Tooltip>
+				{/*<Tooltip title="Favorite">*/}
+				{/*	<IconButton color="primary" aria-label="favorite"  sx={{mr: 3}} disabled>*/}
+				{/*		<Favorite/>*/}
+				{/*	</IconButton>*/}
+				{/*</Tooltip>*/}
+				{/*<Tooltip title="Share">*/}
+				{/*	<IconButton color="primary" aria-label="share"  sx={{mr: 3}} disabled>*/}
+				{/*		<Share/>*/}
+				{/*	</IconButton>*/}
+				{/*</Tooltip>*/}
 			</CardActions>
 		</Card>
 	);

frontend/src/components/datasets/DatasetCard.tsx

@@ -10,11 +10,7 @@ import {useSelector} from "react-redux";
 import {RootState} from "../../types/data";
 import {useNavigate} from "react-router-dom";
 import {Button} from "@mui/material";
-import FileMenu from "./FileMenu";
 import FolderIcon from '@mui/icons-material/Folder';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import {parseDate} from "../../utils/common";
-import {VersionChip} from "../versions/VersionChip";
 import {theme} from "../../theme";
 import {FilesTableFileEntry} from "./FilesTableFileEntry";
 import FolderMenu from "./FolderMenu";
@@ -24,27 +20,27 @@ type FilesTableProps = {
 }
 
 const iconStyle = {
-	"vertical-align": "middle",
+	verticalAlign: "middle",
 	color: theme.palette.primary.main
 }
 
 export default function FilesTable(props: FilesTableProps) {
 	// mapStateToProps
-	const filesInDataset = useSelector((state:RootState) => state.dataset.files);
-	const foldersInDataset = useSelector((state:RootState) => state.folder.folders);
+	const filesInDataset = useSelector((state: RootState) => state.dataset.files);
+	const foldersInDataset = useSelector((state: RootState) => state.folder.folders);
 	// use history hook to redirect/navigate between routes
 	const history = useNavigate();
-	const selectFile = (selectedFileId: string|undefined) => {
+	const selectFile = (selectedFileId: string | undefined) => {
 		// Redirect to file route with file Id and dataset id
 		history(`/files/${selectedFileId}?dataset=${props.datasetId}`);
 	};
-	const selectFolder = (selectedFolderId: string|undefined) => {
+	const selectFolder = (selectedFolderId: string | undefined) => {
 		// Redirect to file route with file Id and dataset id
 		history(`/datasets/${props.datasetId}?folder=${selectedFolderId}`);
 	};
 	return (
 		<TableContainer component={Paper}>
-			<Table sx={{ minWidth: 650 }} aria-label="simple table">
+			<Table sx={{minWidth: 650}} aria-label="simple table">
 				<TableHead>
 					<TableRow>
 						<TableCell>Name</TableCell>
@@ -65,7 +61,8 @@ export default function FilesTable(props: FilesTableProps) {
 									<FolderIcon sx={iconStyle}/>
 									<Button onClick={() => selectFolder(folder.id)}>{folder.name}</Button>
 								</TableCell>
-								<TableCell align="right">by {folder.author.first_name} {folder.author.last_name}</TableCell>
+								<TableCell
+									align="right">by {folder.author.first_name} {folder.author.last_name}</TableCell>
 								<TableCell align="right">&nbsp;</TableCell>
 								<TableCell align="right">&nbsp;</TableCell>
 								<TableCell align="right"><FolderMenu folder={folder}/></TableCell>
@@ -76,7 +73,9 @@ export default function FilesTable(props: FilesTableProps) {
 							<FilesTableFileEntry
 								iconStyle={iconStyle}
 								selectFile={selectFile}
-								file={file} />
+								file={file}
+								key={file.id}
+							/>
 						))
 					}
 				</TableBody>

frontend/src/components/files/FilesTable.tsx

@@ -11,20 +11,20 @@ import {theme} from "../../theme";
 import prettyBytes from 'pretty-bytes';
 
 const iconStyle = {
-	"vertical-align": "middle",
+	verticalAlign: "middle",
 	color: theme.palette.primary.main
 }
 
 export function FilesTableFileEntry(props) {
 
-	const {selectFile, file,} = props;
+	const {selectFile, file} = props;
 
 	return (
 		<TableRow
 			key={file.id}
 			sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
 		>
-			<TableCell component="th" scope="row">
+			<TableCell component="th" scope="row" key={`${file.id}-icon`}>
 				<InsertDriveFileIcon sx={iconStyle}/>
 				<Button onClick={() => selectFile(file.id)}>{file.name}</Button>
 				{/*TODO this should be version number; for now put version ID instead*/}

frontend/src/components/files/FilesTableFileEntry.tsx

@@ -29,13 +29,13 @@ export const CreateMetadata = (props: MetadataType) => {
 	return (
 		<>
 			{
-				metadataDefinitionList.map((metadata) => {
+				metadataDefinitionList.map((metadata,idx) => {
 					return (
-						<Box className="inputGroup">
+						<Box className="inputGroup" key={idx}>
 							<Typography variant="h6">{metadata.name}</Typography>
 							<Typography variant="subtitle2">{metadata.description}</Typography>
 							{
-								metadata.fields.map(field => {
+								metadata.fields.map((field, idxx) => {
 									return React.cloneElement(
 										// if nothing match fall back to default widget
 										metadataConfig[field.widgetType ?? "NA"] ?? metadataConfig["NA"],
@@ -45,6 +45,7 @@ export const CreateMetadata = (props: MetadataType) => {
 											options: field.config.options ?? [],
 											setMetadata: setMetadata,
 											initialReadOnly: false,
+											key:idxx
 										}
 									)
 								})