778 page to display each metadata definition

frontend/src/components/metadata/MetadataDefinitionEntry.tsx

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from "react";
+import { Box, Button, Grid, Link } from "@mui/material";
+import Layout from "../Layout";
+import { useDispatch, useSelector } from "react-redux";
+import Typography from "@mui/material/Typography";
+import { useParams } from "react-router-dom";
+import { MainBreadcrumbs } from "../navigation/BreadCrumb";
+import { ErrorModal } from "../errors/ErrorModal";
+import ReactJson from "react-json-view";
+import { fetchMetadataDefinition as fetchMetadataDefinitionAction } from "../../actions/metadata";
+import { RootState } from "../../types/data";
+import DeleteMetadataDefinitionModal from "./DeleteMetadataDefinitionModal";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+export function MetadataDefinitionEntry() {
+	// path parameter
+	const { metadataDefinitionId } = useParams<{
+		metadataDefinitionId?: string;
+	}>();
+
+	// Redux connect equivalent
+	const dispatch = useDispatch();
+	const fetchMetadataDefinition = (metadataDefinitionId: string | undefined) =>
+		dispatch(fetchMetadataDefinitionAction(metadataDefinitionId));
+	const metadataDefinition = useSelector(
+		(state: RootState) => state.metadata.metadataDefinition
+	);
+
+	const [
+		deleteMetadataDefinitionConfirmOpen,
+		setDeleteMetadataDefinitionConfirmOpen,
+	] = useState(false);
+
+	// component did mount
+	useEffect(() => {
+		fetchMetadataDefinition(metadataDefinitionId);
+	}, []);
+
+	// Error msg dialog
+	const [errorOpen, setErrorOpen] = useState(false);
+
+	// for breadcrumb
+	const paths = [
+		{
+			name: "Metadata Definitions",
+			url: "/metadata-definitions",
+		},
+		{
+			name: metadataDefinition.name,
+			url: `/metadata-definitions/${metadataDefinition.id}`,
+		},
+	];
+
+	return (
+		<Layout>
+			{/*Error Message dialogue*/}
+			<ErrorModal errorOpen={errorOpen} setErrorOpen={setErrorOpen} />
+			{/*breadcrumb*/}
+			<Grid container>
+				<Grid item xs={10} sx={{ display: "flex", alignItems: "center" }}>
+					<MainBreadcrumbs paths={paths} />
+				</Grid>
+			</Grid>
+			<DeleteMetadataDefinitionModal
+				deleteMetadataDefinitionConfirmOpen={
+					deleteMetadataDefinitionConfirmOpen
+				}
+				setDeleteMetadataDefinitionConfirmOpen={
+					setDeleteMetadataDefinitionConfirmOpen
+				}
+				metdataDefinitionId={metadataDefinition.id}
+			/>
+			{/*Header & menus*/}
+			<Grid container>
+				<Grid
+					item
+					xs={12}
+					sm={12}
+					md={8}
+					lg={9}
+					sx={{
+						display: "flex",
+						justifyContent: "flex-start",
+						alignItems: "baseline",
+					}}
+				>
+					<Box sx={{ display: "flex", flexDirection: "column" }}>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "flex-start",
+								alignItems: "baseline",
+							}}
+						>
+							<Typography variant="h3" paragraph>
+								{metadataDefinition.name !== undefined
+									? metadataDefinition.name
+									: "Not found"}
+							</Typography>
+						</Box>
+						<Typography variant="body1" paragraph>
+							{metadataDefinition.description !== undefined
+								? metadataDefinition.description
+								: ""}
+						</Typography>
+						<Typography variant="body1" paragraph>
+							<strong>Creator: </strong>
+							{metadataDefinition.creator !== undefined &&
+							metadataDefinition.creator.email !== undefined ? (
+								<Link href={`mailto:${metadataDefinition.creator.email}`}>
+									{metadataDefinition.creator.email}
+								</Link>
+							) : (
+								<></>
+							)}
+						</Typography>
+					</Box>
+				</Grid>
+
+				{/*Buttons*/}
+				<Grid
+					item
+					xs={12}
+					sm={12}
+					md={4}
+					lg={3}
+					sx={{
+						display: "flex",
+						justifyContent: "flex-end",
+						alignItems: "baseline",
+						flexDirection: "row",
+					}}
+				>
+					<Button
+						variant="contained"
+						aria-label="delete"
+						onClick={() => {
+							setDeleteMetadataDefinitionConfirmOpen(true);
+						}}
+						endIcon={<DeleteIcon />}
+						sx={{ float: "right" }}
+					>
+						Delete
+					</Button>
+				</Grid>
+			</Grid>
+			<ReactJson
+				src={metadataDefinition}
+				theme="summerfruit:inverted"
+				displayObjectSize={false}
+				displayDataTypes={false}
+				name={false}
+			/>
+		</Layout>
+	);
+}

frontend/src/components/metadata/MetadataDefinitions.tsx

@@ -32,6 +32,7 @@ import { ErrorModal } from "../errors/ErrorModal";
 import { CreateMetadataDefinition } from "./CreateMetadataDefinition";
 import DeleteIcon from "@mui/icons-material/Delete";
 import DeleteMetadataDefinitionModal from "./DeleteMetadataDefinitionModal";
+import { Link } from "react-router-dom";
 
 export function MetadataDefinitions() {
 	// Redux connect equivalent
@@ -240,14 +241,12 @@ export function MetadataDefinitions() {
 											sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
 										>
 											<TableCell scope="row" key={`${mdd.id}-name`}>
-												{/*TODO write individual metadata definition page*/}
-												{/*<Button*/}
-												{/*	component={Link}*/}
-												{/*	to={`/metadata-definitions/${mdd.id}`}*/}
-												{/*>*/}
-												{/*	{mdd.name}*/}
-												{/*</Button>*/}
-												{mdd.name}
+												<Button
+													component={Link}
+													to={`/metadata-definitions/${mdd.id}`}
+												>
+													{mdd.name}
+												</Button>
 											</TableCell>
 											<TableCell
 												scope="row"

frontend/src/routes.tsx

@@ -31,6 +31,7 @@ import { ApiKeys } from "./components/ApiKeys/ApiKey";
 import { Profile } from "./components/users/Profile";
 import config from "./app.config";
 import { MetadataDefinitions } from "./components/metadata/MetadataDefinitions";
+import { MetadataDefinitionEntry } from "./components/metadata/MetadataDefinitionEntry";
 
 // https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5
 const PrivateRoute = (props): JSX.Element => {
@@ -129,14 +130,14 @@ export const AppRoutes = (): JSX.Element => {
 						</PrivateRoute>
 					}
 				/>
-				{/*<Route*/}
-				{/*	path="/metadata-definitions/:metadataDefinitionId"*/}
-				{/*	element={*/}
-				{/*		<PrivateRoute>*/}
-				{/*			<MetadataDefinitionPage />*/}
-				{/*		</PrivateRoute>*/}
-				{/*	}*/}
-				{/*/>*/}
+				<Route
+					path="/metadata-definitions/:metadataDefinitionId"
+					element={
+						<PrivateRoute>
+							<MetadataDefinitionEntry />
+						</PrivateRoute>
+					}
+				/>
 				<Route
 					path="/create-dataset/"
 					element={