CRDCDH-602 Uploader CLI Dialog

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<boolean>(false);
+  const [uploaderToolOpen, setUploaderToolOpen] = useState<boolean>(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 = () => {
           />
         </MenuArea>
         <APITokenDialog open={openAPITokenDialog} onClose={() => setOpenAPITokenDialog(false)} />
+        <UploaderToolDialog open={uploaderToolOpen} onClose={() => setUploaderToolOpen(false)} />
       </NavMobileContainer>
     </>
   );

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<boolean>(false);
+  const [uploaderToolOpen, setUploaderToolOpen] = useState<boolean>(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
               </Link>
             </span>
+            <span className="dropdownItem">
+              <Button id="navbar-dropdown-item-name-uploader-tool" className="dropdownItem dropdownItemButton" onClick={() => setUploaderToolOpen(true)}>
+                Uploader CLI Tool
+              </Button>
+            </span>
             {(authData?.user?.role === "Admin" || authData?.user?.role === "Organization Owner") && (
               <span className="dropdownItem">
                 <Link id="navbar-dropdown-item-name-user-manage" to="/users" className="dropdownItem" onClick={() => setClickedTitle("")}>
@@ -574,6 +581,7 @@ const NavBar = () => {
         </NameDropdownContainer>
       </NameDropdown>
       <APITokenDialog open={openAPITokenDialog} onClose={() => setOpenAPITokenDialog(false)} />
+      <UploaderToolDialog open={uploaderToolOpen} onClose={() => setUploaderToolOpen(false)} />
     </Nav>
   );
 };

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<DialogProps, "onClose">;
+
+const UploaderToolDialog: FC<Props> = ({
+  title,
+  onClose,
+  onSubmit,
+  open,
+  ...rest
+}) => (
+  <StyledDialog
+    open={open}
+    onClose={() => onClose?.()}
+    {...rest}
+  >
+    <StyledCloseDialogButton
+      aria-label="close"
+      onClick={() => onClose?.()}
+    >
+      <CloseIconSvg />
+    </StyledCloseDialogButton>
+    <StyledHeader id="uploader-cli-header" variant="h3">
+      Uploader CLI Tool
+    </StyledHeader>
+    <StyledDialogContent>
+      <StyledBodyText id="uploader-cli-body" variant="h6">
+        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.
+      </StyledBodyText>
+      <Link to="https://github.com/CBIIT/crdc-datahub-cli-uploader/releases" target="_blank">https://github.com/CBIIT/crdc-datahub-cli-uploader/releases</Link>
+    </StyledDialogContent>
+    <StyledCloseButton id="uploader-cli-close-button" variant="outlined" onClick={onClose}>
+      Close
+    </StyledCloseButton>
+  </StyledDialog>
+);
+
+export default UploaderToolDialog;