From d91f9417832cae4e167c124b302d3fb1341f62f7 Mon Sep 17 00:00:00 2001 From: Alec M Date: Wed, 15 Nov 2023 15:25:53 -0500 Subject: [PATCH 1/3] CRDCDH-602 Uploader CLI Dialog --- .../Header/HeaderTabletAndMobile.tsx | 11 +- .../Header/components/NavbarDesktop.tsx | 8 ++ src/content/users/UploaderToolDialog.tsx | 119 ++++++++++++++++++ 3 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 src/content/users/UploaderToolDialog.tsx 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..ef1a1517 --- /dev/null +++ b/src/content/users/UploaderToolDialog.tsx @@ -0,0 +1,119 @@ +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 locate the README for instructions, click on the GitHub URL below. + + https://github.com/CBIIT/crdc-datahub-cli-uploader + + + Close + + +); + +export default UploaderToolDialog; From d9ebbfeafc993d728d1ac1a7d3489b684c50a08e Mon Sep 17 00:00:00 2001 From: Alec M Date: Mon, 20 Nov 2023 09:32:43 -0500 Subject: [PATCH 2/3] Update UploaderToolDialog content --- src/content/users/UploaderToolDialog.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/content/users/UploaderToolDialog.tsx b/src/content/users/UploaderToolDialog.tsx index ef1a1517..43f97fdd 100644 --- a/src/content/users/UploaderToolDialog.tsx +++ b/src/content/users/UploaderToolDialog.tsx @@ -104,9 +104,8 @@ const UploaderToolDialog: FC = ({ - 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 locate the README for instructions, click on the GitHub URL below. + 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 From faa591d061de8e29548fe7da1859a5d6b34024b8 Mon Sep 17 00:00:00 2001 From: Alec M Date: Tue, 21 Nov 2023 16:35:57 -0500 Subject: [PATCH 3/3] Add release link --- src/content/users/UploaderToolDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/users/UploaderToolDialog.tsx b/src/content/users/UploaderToolDialog.tsx index 43f97fdd..c02fc394 100644 --- a/src/content/users/UploaderToolDialog.tsx +++ b/src/content/users/UploaderToolDialog.tsx @@ -107,7 +107,7 @@ const UploaderToolDialog: FC = ({ 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 + https://github.com/CBIIT/crdc-datahub-cli-uploader/releases Close