Implemented Metadata Definition UI (#150)

* Implemented Metadata Definition UI

* Addressing PR comments
Implement UI for Metadata definition 2/?

* Bug fixes

* Fixing popup resize issue

* Minor UI improvements

Author: arunapa

frontend/src/actions/metadata.js

@@ -19,6 +19,23 @@ export function fetchMetadataDefinitions(name=null, skip=0, limit=10){
 	};
 }
 
+export const SAVE_METADATA_DEFINITIONS = "SAVE_METADATA_DEFINITIONS";
+export function postMetadataDefinitions(metadataDefinition){
+	return (dispatch) => {
+		return V2.MetadataService.saveMetadataDefinitionApiV2MetadataDefinitionPost(metadataDefinition)
+			.then(json => {
+				dispatch({
+					type: SAVE_METADATA_DEFINITIONS,
+					metadataDefinitionList: json,
+					receivedAt: Date.now(),
+				});
+			})
+			.catch(reason => {
+				dispatch(handleErrors(reason, postMetadataDefinitions(metadataDefinition)));
+			});
+	};
+}
+
 
 export const RECEIVE_DATASET_METADATA = "RECEIVE_DATASET_METADATA";
 export function fetchDatasetMetadata(datasetId){

frontend/src/components/Layout.tsx

@@ -21,7 +21,7 @@ import {Link} from "@mui/material";
 import {Link as RouterLink, useLocation} from 'react-router-dom';
 import {useSelector} from "react-redux";
 import {RootState} from "../types/data";
-import {AddBox, Explore} from "@material-ui/icons";
+import {AddBox, Create, Explore} from "@material-ui/icons";
 import {EmbeddedSearch} from "./search/EmbeddedSearch";
 import {SearchErrorBoundary} from "./search/SearchErrorBoundary";
 import {searchTheme} from "../theme";
@@ -224,6 +224,18 @@ export default function PersistentDrawerLeft(props) {
 								</ListItemButton>
 							</ListItem>
 						</List>
+                        <Divider/>
+                        <List>
+                            <ListItem key={"newmetadata"} disablePadding>
+                                <ListItemButton component={RouterLink} to="/new-metadata-definition">
+                                    <ListItemIcon>
+                                        <Create/>
+                                    </ListItemIcon>
+                                    <ListItemText primary={"Create Metadata Definition"}/>
+                                </ListItemButton>
+                            </ListItem>
+                        </List>
+                        <Divider/>
 					</Drawer>
 					<Main open={open}>
 						<DrawerHeader/>

frontend/src/components/datasets/Dataset.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import {Box, Button, Dialog, Divider, Grid, IconButton, Menu, MenuItem, Tab, Tabs, Typography} from "@mui/material";
+import {Box, Button, Dialog, Divider, Grid, IconButton, Menu, MenuItem, Tab, Tabs, Typography, DialogActions, DialogContent, DialogContentText, DialogTitle,} from "@mui/material";
 import {ClowderInput} from "../styledComponents/ClowderInput";
 import {ClowderButton} from "../styledComponents/ClowderButton";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
@@ -26,6 +26,7 @@ import {parseDate} from "../../utils/common";
 import config from "../../app.config";
 import {DatasetIn, MetadataIn} from "../../openapi/v2";
 import {DisplayMetadata} from "../metadata/DisplayMetadata";
+import {CreateMetadataDefinition} from "../metadata/CreateMetadataDefinition";
 import {EditMetadata} from "../metadata/EditMetadata";
 import {
 	deleteDatasetMetadata as deleteDatasetMetadataAction,
@@ -92,6 +93,7 @@ export const Dataset = (): JSX.Element => {
 	const [datasetDescription, setDatasetDescription] = React.useState<string>("");
 	const [enableAddMetadata, setEnableAddMetadata] = React.useState<boolean>(false);
 	const [metadataRequestForms, setMetadataRequestForms] = useState({});
+	const [openPopup, setOpenPopup] = React.useState<boolean>(false)
 
 	// component did mount list all files in dataset
 	useEffect(() => {
@@ -276,6 +278,9 @@ export const Dataset = (): JSX.Element => {
 											>
 												<CloseIcon />
 											</IconButton>
+											<Button variant="contained" onClick={() => {setOpenPopup(true);}} sx={{ mt: 1, mr: 1, "alignItems": "right" }}>
+                                                Add new metadata definition
+											</Button>
 											<EditMetadata resourceType="dataset" resourceId={datasetId}
 														  setMetadata={setMetadata}
 											/>
@@ -286,6 +291,22 @@ export const Dataset = (): JSX.Element => {
 													sx={{ mt: 1, mr: 1 }}>
 												Cancel
 											</Button>
+											{
+												openPopup ?
+												<>
+                                                    <Dialog open={openPopup} onClose={() => {setOpenPopup(false);}} fullWidth={true} maxWidth={"md"}>
+														<DialogTitle>Add new metadata definition</DialogTitle>
+														<DialogContent>
+															<DialogContentText>Please fill out the metadata information here.</DialogContentText>
+															<CreateMetadataDefinition/>
+														</DialogContent>
+														<DialogActions>
+															<Button onClick={() => {setOpenPopup(false);}}>Cancel</Button>
+														</DialogActions>
+													</Dialog>
+												</>
+												: <></>
+											}
 										</>
 										:
 										<>