diff --git a/src/components/Header/HeaderTabletAndMobile.tsx b/src/components/Header/HeaderTabletAndMobile.tsx index 3b391a45..c4669e2a 100644 --- a/src/components/Header/HeaderTabletAndMobile.tsx +++ b/src/components/Header/HeaderTabletAndMobile.tsx @@ -9,6 +9,7 @@ import { navMobileList, navbarSublists } from '../../config/globalHeaderData'; import { useAuthContext } from '../Contexts/AuthContext'; import GenericAlert from '../GenericAlert'; import APITokenDialog from '../../content/users/APITokenDialog'; +import UploaderToolDialog from '../../content/users/UploaderToolDialog'; const HeaderBanner = styled.div` width: 100%; @@ -148,7 +149,7 @@ const MenuArea = styled.div` .clickable { cursor: pointer; } - + .action { cursor: pointer; } @@ -165,6 +166,7 @@ type NavbarMobileList = { const Header = () => { const [navMobileDisplay, setNavMobileDisplay] = useState('none'); const [openAPITokenDialog, setOpenAPITokenDialog] = useState(false); + const [uploaderToolOpen, setUploaderToolOpen] = useState(false); const navMobileListHookResult = useState(navMobileList); const navbarMobileList: NavbarMobileList = navMobileListHookResult[0]; const setNavbarMobileList = navMobileListHookResult[1]; @@ -190,6 +192,12 @@ const Header = () => { id: 'navbar-dropdown-item-user-profile', className: 'navMobileSubItem', }, + { + name: 'Uploader CLI Tool', + onClick: () => setUploaderToolOpen(true), + id: 'navbar-dropdown-item-uploader-tool', + className: 'navMobileSubItem action', + }, { name: 'Logout', link: '/logout', @@ -419,6 +427,7 @@ const Header = () => { /> setOpenAPITokenDialog(false)} /> + setUploaderToolOpen(false)} /> ); diff --git a/src/components/Header/components/NavbarDesktop.tsx b/src/components/Header/components/NavbarDesktop.tsx index 20adb3e9..eb0756c1 100644 --- a/src/components/Header/components/NavbarDesktop.tsx +++ b/src/components/Header/components/NavbarDesktop.tsx @@ -6,6 +6,7 @@ import { useAuthContext } from '../../Contexts/AuthContext'; import GenericAlert from '../../GenericAlert'; import { navMobileList, navbarSublists } from '../../../config/globalHeaderData'; import APITokenDialog from '../../../content/users/APITokenDialog'; +import UploaderToolDialog from '../../../content/users/UploaderToolDialog'; const Nav = styled.div` top: 0; @@ -368,6 +369,7 @@ const useOutsideAlerter = (ref1, ref2) => { const NavBar = () => { const [clickedTitle, setClickedTitle] = useState(""); const [openAPITokenDialog, setOpenAPITokenDialog] = useState(false); + const [uploaderToolOpen, setUploaderToolOpen] = useState(false); const dropdownSelection = useRef(null); const nameDropdownSelection = useRef(null); const clickableObject = navMobileList.filter((item) => item.className === 'navMobileItem clickable'); @@ -534,6 +536,11 @@ const NavBar = () => { User Profile + + + {(authData?.user?.role === "Admin" || authData?.user?.role === "Organization Owner") && ( setClickedTitle("")}> @@ -574,6 +581,7 @@ const NavBar = () => { setOpenAPITokenDialog(false)} /> + setUploaderToolOpen(false)} /> ); }; diff --git a/src/content/users/UploaderToolDialog.tsx b/src/content/users/UploaderToolDialog.tsx new file mode 100644 index 00000000..c02fc394 --- /dev/null +++ b/src/content/users/UploaderToolDialog.tsx @@ -0,0 +1,118 @@ +import { FC } from "react"; +import { + Button, Dialog, DialogContent, DialogProps, + IconButton, Typography, styled, +} from "@mui/material"; +import { Link } from 'react-router-dom'; +import { ReactComponent as CloseIconSvg } from "../../assets/icons/close_icon.svg"; + +const StyledDialog = styled(Dialog)({ + "& .MuiDialog-paper": { + maxWidth: "none", + borderRadius: "8px", + width: "755px !important", + padding: "47px 59px 71px 54px", + border: "2px solid #0B7F99", + background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B", + boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)", + }, +}); + +const StyledHeader = styled(Typography)({ + color: "#0B7F99", + fontFamily: "'Nunito Sans', 'Rubik', sans-serif", + fontSize: "35px", + fontStyle: "normal", + fontWeight: 900, + lineHeight: "30px", + marginBottom: "50px" +}); + +const StyledDialogContent = styled(DialogContent)({ + padding: 0, +}); + +const StyledBodyText = styled(Typography)({ + fontFamily: "'Nunito', 'Rubik', sans-serif", + fontSize: "16px", + fontStyle: "normal", + fontWeight: 400, + lineHeight: "19.6px", + marginBottom: "28px", +}); + +const StyledCloseDialogButton = styled(IconButton)(() => ({ + position: 'absolute', + right: "21px", + top: "11px", + padding: "10px", + "& svg": { + color: "#44627C" + } +})); + +const StyledCloseButton = styled(Button)({ + display: "flex", + width: "128px", + height: "42px", + padding: "12px 60px", + justifyContent: "center", + alignItems: "center", + borderRadius: "8px", + border: "1px solid #000", + color: "#000", + textAlign: "center", + fontFamily: "'Nunito', 'Rubik', sans-serif", + fontSize: "16px", + fontStyle: "normal", + fontWeight: "700", + lineHeight: "24px", + letterSpacing: "0.32px", + textTransform: "none", + alignSelf: "center", + marginTop: "45px", + "&:hover": { + background: "transparent", + border: "1px solid #000", + } +}); + +type Props = { + onClose?: () => void; +} & Omit; + +const UploaderToolDialog: FC = ({ + title, + onClose, + onSubmit, + open, + ...rest +}) => ( + onClose?.()} + {...rest} + > + onClose?.()} + > + + + + Uploader CLI Tool + + + + The Uploader CLI is a command-line interface tool provided for directly uploading data submission files from your workstation to the Data Hub cloud storage. + To download the tool and accompanying instructions, click on the Download link. + + https://github.com/CBIIT/crdc-datahub-cli-uploader/releases + + + Close + + +); + +export default UploaderToolDialog;