-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/hubmapconsortium/ingest-ui …
…into dev-integrate
- Loading branch information
Showing
6 changed files
with
99 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,11 +18,13 @@ 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 [exampleLink, setExampleLink] = React.useState("block"); | ||
| // const [userGroups, setUserGroups] = React.useState(); | ||
| const [userDataGroups, setUserDataGroups] = React.useState([]); | ||
| const [uploadsDialog, setUploadsDialog] = React.useState(false); | ||
|
|
@@ -32,6 +34,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=\""+exampleLink+"\" target=\"_blank\">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 <a href=\"https://docs.google.com/document/d/1lfgiDGbyO4K4Hz1FMsJjmJd9RdwjShtJqFYNwKpbcZY/edit#heading=h.d6xf2xeysl78\" target=\"_blank\">process outlined here</a>. <strong>Please also <a href=\"https://docs.google.com/spreadsheets/d/19ZJx_EVyBGKNeW0xxQlOsMdt1DVNZYWmuG014rXsQP4/edit#gid=0\" target=\"_blank\">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=\"mailto:[email protected]\">[email protected]</a> if you have questions."; | ||
| const location = useLocation(); | ||
| let navigate = useNavigate(); | ||
| useEffect(() => { | ||
|
|
@@ -45,6 +50,16 @@ export const Navigation = (props) => { | |
| } | ||
| }, [props, props.app_info, location]); | ||
|
|
||
| const handleCancel = () => { | ||
| setMetaModalOpen(false); | ||
| } | ||
| const handleOpenModal = (type) => { | ||
| let sampleType = type.toString(); | ||
| console.debug('%c◉ type ', 'color:#00ff7b', type, sampleType, typeof sampleType); | ||
| setExampleLink("https://hubmapconsortium.github.io/ingest-validation-tools/sample-"+sampleType.toLowerCase()+"/current/") | ||
| console.debug('%c◉ link ', 'color:#00ff7b', exampleLink); | ||
| setMetaModalOpen(true); | ||
| } | ||
|
|
||
| // @TODO: Dry this up | ||
| const handleClick_S = (event) => { | ||
|
|
@@ -79,6 +94,13 @@ export const Navigation = (props) => { | |
|
|
||
| return ( | ||
| <AppBar position="static" id="header"> | ||
| <MUIDialog | ||
| open={metaModalOpen} | ||
| handleClose={handleCancel} | ||
| title={dialogMetadataTitle} | ||
| message={dialogMetadataMessage} | ||
| // dialogHelpLink={dialogHelpLinkURL} | ||
| bgcol = "Red" /> | ||
| <Dialog open={uploadsDialog}> | ||
| <DialogContent> | ||
| <UploadsForm | ||
|
|
@@ -227,23 +249,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("Block")}> | ||
| Block | ||
| </MenuItem> | ||
| <MenuItem | ||
| className="nav-link" | ||
| component={Link} | ||
| onClick={handleClose} | ||
| to="/metadata/section" > | ||
| to="/metadata/section" | ||
| onClick={() => handleOpenModal("Section")}> | ||
| Section | ||
| </MenuItem> | ||
| <MenuItem | ||
| className="nav-link" | ||
| component={Link} | ||
| onClick={handleClose} | ||
| to="/metadata/suspension" > | ||
| to="/metadata/suspension" | ||
| onClick={() => handleOpenModal("Suspension")}> | ||
| Suspension | ||
| </MenuItem> | ||
| </Menu> | ||
|
|
@@ -396,22 +418,22 @@ export const Navigation = (props) => { | |
| className="nav-link" | ||
| sx={{ width: "200px" }} | ||
| component={Link} | ||
| onClick={handleClose} | ||
| to="/metadata/block" > | ||
| // to="/metadata/block" | ||
| onClick={() => handleOpenModal("Block")}> | ||
| Block | ||
| </MenuItem> | ||
| <MenuItem | ||
| className="nav-link" | ||
| component={Link} | ||
| onClick={handleClose} | ||
| to="/metadata/section" > | ||
| // to="/metadata/section" | ||
| onClick={() => handleOpenModal("Section")}> | ||
| Section | ||
| </MenuItem> | ||
| <MenuItem | ||
| className="nav-link" | ||
| component={Link} | ||
| onClick={handleClose} | ||
| to="/metadata/suspension" > | ||
| // to="/metadata/suspension" | ||
| onClick={() => handleOpenModal("Suspension")} > | ||
| Suspension | ||
| </MenuItem> | ||
| </Menu> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 style={{position:"relative",margin:"0 auto 0 auto"}} autoFocus onClick={props.handleClose}> | ||
| OK | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| </React.Fragment> | ||
| ); | ||
| } |