Adds Warning Dialog to Menu Selection of Metadata Upload

src/src/App.css

@@ -921,4 +921,7 @@ svg.invalid {
   font-weight: 300;
   gap: 4px;
   line-height: 1.5;
+}
+.fullDialog .MuiPaper-root{
+  max-width:1200px!important;
 }

src/src/App.js

@@ -230,30 +230,6 @@ export function App (props){
     }
  }, [ ]);
 
-
-  // useEffect(() => {
-  //   console.debug("useEffect ubkg")
-  //   ubkg_api_get_dataset_type_set()
-  //     .then((response) => {
-  //       console.debug('%c⊙', 'color:#00ff7b', "DATSETTYPES", response );
-  //       let dtypes = response;
-  //       setDataTypeList(dtypes);
-  //       setDataTypeListAll(dtypes);
-  //       ubkg_api_get_organ_type_set()
-  //         .then((res) => {
-  //           setOrganList(res);
-  //           setDTLoading(false)
-  //         })
-  //         .catch((err) => {
-  //           reportError(err)
-  //       })
-  //     })
-  //     .catch(error => {
-  //         console.debug('%c⭗', 'color:#ff005d', "APP ubkg_api_get_assay_type_set ERROR", error);
-  //         reportError(error)
-  //     });
-  // }, [ ]);
-
   useEffect(() => {
     if(localStorage.getItem("info")){
       try {

src/src/Nav.js

@@ -18,11 +18,12 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import LoadingButton from '@mui/lab/LoadingButton';
-
+import MUIDialog from "./components/ui/dialog";
 import UploadsForm from "./components/uploads/createUploads";
 
 export const Navigation = (props) => {
   const [userInfo, setUserInfo] = React.useState();
+  const [metaModalOpen, setMetaModalOpen] = React.useState(false);
   // const [userGroups, setUserGroups] = React.useState();
   const [userDataGroups, setUserDataGroups] = React.useState([]);
   const [uploadsDialog, setUploadsDialog] = React.useState(false);
@@ -32,6 +33,9 @@ export const Navigation = (props) => {
   const open_I = Boolean(anchorEl_I);
   const open_B = Boolean(anchorEl_B);
   const open_S = Boolean(anchorEl_S);
+  var dialogMetadataTitle = 'Metadata Bulk Uploading Temporarily Unavailable';
+  var dialogMetadataMessage = '<strong>Please prepare any new data submissions using the new next-generation metadata and directory schemas</strong>, which are linked from <a href="">this page</a>. The schemas you should use are marked <strong>"use this one"</strong> on the schema pages. You can validate <strong>next-gen metadata schemas</strong> using the <ahref="">process outlined here</a>. <strong>Please also <a>update this data pulse check spreadsheet</a></strong> so we know what data is coming from your team. We\'re looking forward to your submissions!<br/> \
+  Please contact <a href="">help@hubmapconsortium.org</a> if you have questions.';
   const location = useLocation();
   let navigate = useNavigate();
   useEffect(() => {
@@ -45,6 +49,12 @@ export const Navigation = (props) => {
     }
   }, [props, props.app_info, location]);
 
+  const handleCancel = () => {
+    setMetaModalOpen(false);
+  }  
+  const handleOpenModal = () => {
+    setMetaModalOpen(true);
+  }
 
   // @TODO: Dry this up
   const handleClick_S = (event) => {
@@ -79,6 +89,12 @@ export const Navigation = (props) => {
 
   return (
       <AppBar position="static" id="header">
+         <MUIDialog 
+          open={metaModalOpen} 
+          handleClose={handleCancel} 
+          title={dialogMetadataTitle}
+          message={dialogMetadataMessage}
+          bgcol = "Red" />
         <Dialog open={uploadsDialog}>
           <DialogContent> 
           <UploadsForm
@@ -227,23 +243,23 @@ export const Navigation = (props) => {
                   <MenuItem 
                     className="nav-link" 
                     sx={{ width: "200px" }}
-                    component={Link}
-                    onClick={handleClose}
-                    to="/metadata/block" >
+                    // component={Link}
+                    to="/metadata/block" 
+                    onClick={() => handleOpenModal(true)}>
                     Block
                   </MenuItem>
                   <MenuItem 
                     className="nav-link" 
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/section" >
+                    to="/metadata/section" 
+                    onClick={() => handleOpenModal(true)}>
                     Section
                   </MenuItem>
                   <MenuItem 
                     className="nav-link" 
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/suspension" >
+                    to="/metadata/suspension" 
+                    onClick={() => handleOpenModal(true)}>
                     Suspension
                   </MenuItem>
                 </Menu>
@@ -396,22 +412,22 @@ export const Navigation = (props) => {
                     className="nav-link" 
                     sx={{ width: "200px" }}
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/block" >
+                    // to="/metadata/block" 
+                    onClick={() => handleOpenModal(true)}>
                     Block
                   </MenuItem>
                   <MenuItem 
                     className="nav-link" 
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/section" >
+                    // to="/metadata/section" 
+                    onClick={() => handleOpenModal(true)}>
                     Section
                   </MenuItem>
                   <MenuItem 
                     className="nav-link" 
                     component={Link}
-                    onClick={handleClose}
-                    to="/metadata/suspension" >
+                    // to="/metadata/suspension"
+                    onClick={() => handleOpenModal(true)} >
                     Suspension
                   </MenuItem>
                 </Menu>

src/src/assets/App.css

@@ -855,4 +855,8 @@ svg.invalid{
   font-weight: 300;
   gap: 4px;
   line-height: 1.5;
+}
+
+.fullDialog .MuiPaper-root{
+  max-width:1200px!important;
 }

src/src/components/metadata.jsx

@@ -57,7 +57,7 @@ export const RenderMetadata = (props) => {
     whiteSpace: 'nowrap',
     width: 1,
   });
-
+  
 
   var [errorHandler, setErrorHandler] = useState({
     status: '',
@@ -558,6 +558,8 @@ const exampleFile ="https://hubmapconsortium.github.io/ingest-validation-tools/s
 
   return (
         <div className="row">
+
+
           <h4>{toTitleCase(props.type)} Metadata Upload</h4>
           <div className=' col-sm-2' id='stepContainer'>
             <Stepper activeStep={activeStep} orientation="vertical">

src/src/components/ui/dialog.jsx

@@ -0,0 +1,53 @@
+
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
+
+export default function MUIDialog(props) {  
+
+  return (
+    <React.Fragment>
+
+      <Dialog
+        // onClose={props.handleClose}
+        aria-labelledby="customized-dialog-title"
+        open={props.open}
+        className="fullDialog"
+      >
+        <DialogTitle sx={{ m: 0, p: 2 }} style={{background:"red", color:"white"}} id="customized-dialog-title">
+            <FontAwesomeIcon icon={faExclamationTriangle} style={{ fontSize:"2.5rem", marginRight:"20px"}} sx={{padding:1}}/> {props.title}      </DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={props.handleClose}
+          style={{
+            position: 'absolute',
+            right: 10,
+            top: 10,
+            color: "white",
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+        <DialogContent dividers>
+          <Typography dangerouslySetInnerHTML={{ __html:props.message }}>
+
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={props.handleClose}>
+            Return
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </React.Fragment>
+  );
+}