Merge pull request #227 from CBIIT/mvp-2

Sync MVP-2.0.0 (M2) into MVP-2.1.0 (M3)
CBIIT · Nov 27, 2023 · 8584133 · 8584133
2 parents 91d8133 + 6ee4335
commit 8584133
Show file tree

Hide file tree

Showing 16 changed files with 291 additions and 108 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -24,7 +24,7 @@ module.exports = {
     }
   },
   root: true,
-  ignorePatterns: ["injectEnv.js"],
+  ignorePatterns: ["public/injectEnv.js", "public/js/session.js"],
   rules: {
     // Note: you must disable the base rule as it can report incorrect errors
     "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx", ".tsx", ".ts"] }],

diff --git a/.github/workflows/code-certify.yml b/.github/workflows/code-certify.yml
@@ -1,6 +1,7 @@
 name: Certify Changes
 
 on:
+  workflow_dispatch:
   pull_request:
     branches: "*"
     paths:
@@ -23,8 +24,22 @@ jobs:
       - name: Checkout Repository
         uses: actions/checkout@v3
 
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18.x"
+          cache: "npm"
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-modules-
+
       - name: Install Dependencies
-        run: npm ci --legacy-peer-deps
+        run: npm install --legacy-peer-deps
 
       - name: Run Typecheck
         run: npm run check:ci

diff --git a/public/index.html b/public/index.html
@@ -5,45 +5,25 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <!-- This page will be indexed by search engines, and they will follow the links on the page -->
     <meta name="robots" content="index, follow">
     <meta
       name="description"
       content="The CRDC Data Submission Portal provides a platform that allows participated organizations to submit cancer research data associated with study registered in dbGap; performs data validations and harmonization, and releases data into the Data Commons Repository."
     />
     <meta name="keywords" content="CRDC Data Submission Portal, Cancer Research Data, dbGaP Study Data, Data Validations, Data Harmonization, Data Commons Repository, Cancer Research Data Platform, Research Data Submission, Data Release Services, Participated Organizations, Cancer Data Repository, Data Commons Platform, Cancer Study Data Submission, Research Data Management, Data Commons Harmonization">
-
-
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>CRDC DataHub</title>
+
+    <script src="https://cbiit.github.io/crdc-alert-elements/components/include-html.js"></script>
+    <script src="%PUBLIC_URL%/injectEnv.js"></script>
+    <script src="%PUBLIC_URL%/js/session.js"></script>
   </head>
   <body>
+    <header>
+      <include-html src="https://cbiit.github.io/crdc-alert-elements/banners/government-shutdown.html"></include-html>
+    </header>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
-  <script src="%PUBLIC_URL%/injectEnv.js"></script>
 </html>
diff --git a/public/injectEnv.js b/public/injectEnv.js
@@ -1,4 +1,3 @@
-/* eslint-disable */
 window.injectedEnv = {
   NIH_AUTHORIZE_URL: '',
   NIH_CLIENT_ID: '',

diff --git a/public/js/session.js b/public/js/session.js
@@ -0,0 +1,34 @@
+const sessionStorageTransfer = (event) => {
+  let $event = event;
+  if (!$event) {
+    $event = window.event;
+  } // ie suq
+  if (!$event.newValue) return; // do nothing if no value to work with
+  if ($event.key === 'getSessionStorage') {
+    // another tab asked for the sessionStorage -> send it
+    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
+    // the other tab should now have it, so we're done with it.
+    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
+  } else if ($event.key === 'sessionStorage' && !sessionStorage.length) {
+    // another tab sent data <- get it
+    const data = JSON.parse($event.newValue);
+    Object.keys(data).forEach((key) => {
+      sessionStorage.setItem(key, data[key]);
+    });
+  } else if ($event.key === 'logout') {
+    sessionStorage.clear();
+  }
+};
+
+// listen for changes to localStorage
+if (window.addEventListener) {
+  window.addEventListener('storage', sessionStorageTransfer, false);
+} else {
+  window.addEventListener('onstorage', sessionStorageTransfer);
+}
+
+// Ask other tabs for session storage (this is ONLY to trigger 'storage' event)
+if (!sessionStorage.length) {
+  localStorage.setItem('getSessionStorage', 'true');
+  localStorage.removeItem('getSessionStorage');
+}
diff --git a/src/components/DataSubmissions/DataSubmissionUpload.tsx b/src/components/DataSubmissions/DataSubmissionUpload.tsx
@@ -127,6 +127,7 @@ const DataSubmissionUpload = ({ submitterID, readOnly, onUpload }: Props) => {
   const uploadMetatadataInputRef = useRef<HTMLInputElement>(null);
   const isSubmissionOwner = submitterID === user?._id;
   const canUpload = UploadRoles.includes(user?.role) || isSubmissionOwner;
+  const acceptedExtensions = [".tsv", ".txt"];
 
   const [createBatch] = useMutation<CreateBatchResp>(CREATE_BATCH, {
     context: { clientName: 'backend' },
@@ -169,8 +170,8 @@ const DataSubmissionUpload = ({ submitterID, readOnly, onUpload }: Props) => {
       return;
     }
 
-    // Filter out any file that is not tsv
-    const filteredFiles = Array.from(files)?.filter((file: File) => file.name?.toLowerCase()?.endsWith(".tsv"));
+    // Filter out any file that is not an accepted file extension
+    const filteredFiles = Array.from(files)?.filter((file: File) => acceptedExtensions.some((ext) => file.name?.toLowerCase()?.endsWith(ext)));
     if (!filteredFiles?.length) {
       setSelectedFiles(null);
       return;
@@ -311,7 +312,7 @@ const DataSubmissionUpload = ({ submitterID, readOnly, onUpload }: Props) => {
         <VisuallyHiddenInput
           ref={uploadMetatadataInputRef}
           type="file"
-          accept="text/tab-separated-values"
+          accept={acceptedExtensions.toString()}
           onChange={handleChooseFiles}
           readOnly={readOnly}
           multiple

diff --git a/src/components/Header/HeaderTabletAndMobile.tsx b/src/components/Header/HeaderTabletAndMobile.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { NavLink, Link, useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { NavLink, Link, useNavigate, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import Logo from "./components/LogoMobile";
 import menuClearIcon from '../../assets/header/Menu_Cancel_Icon.svg';
@@ -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,14 +166,17 @@ 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];
   const [showLogoutAlert, setShowLogoutAlert] = useState<boolean>(false);
+  const [restorePath, setRestorePath] = useState<string>(null);
 
   const authData = useAuthContext();
   const displayName = authData?.user?.firstName || "N/A";
   const navigate = useNavigate();
+  const location = useLocation();
 
   const handleLogout = async () => {
     const logoutStatus = await authData.logout();
@@ -190,6 +194,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',
@@ -228,6 +238,15 @@ const Header = () => {
     setNavbarMobileList(navbarSublists[clickTitle]);
   };
 
+  useEffect(() => {
+    if (!location?.pathname || location?.pathname === "/") {
+      setRestorePath(null);
+      return;
+    }
+
+    setRestorePath(location?.pathname);
+  }, [location]);
+
   return (
     <>
       <GenericAlert open={showLogoutAlert}>
@@ -393,15 +412,13 @@ const Header = () => {
                   >
                     {displayName}
                   </div>
-                )
-                  : (
-                    <Link id="navbar-link-login" to="/login">
-                      <div role="button" tabIndex={0} className="navMobileItem" onKeyDown={(e) => { if (e.key === "Enter") { setNavMobileDisplay('none'); } }} onClick={() => setNavMobileDisplay('none')}>
-                        Login
-                      </div>
-                    </Link>
-
-                  )) : null}
+                ) : (
+                  <Link id="navbar-link-login" to="/login" state={{ redirectURLOnLoginSuccess: restorePath }}>
+                    <div role="button" tabIndex={0} className="navMobileItem" onKeyDown={(e) => { if (e.key === "Enter") { setNavMobileDisplay('none'); } }} onClick={() => setNavMobileDisplay('none')}>
+                      Login
+                    </div>
+                  </Link>
+                )) : null}
             </div>
           </div>
           <div
@@ -419,6 +436,7 @@ const Header = () => {
           />
         </MenuArea>
         <APITokenDialog open={openAPITokenDialog} onClose={() => setOpenAPITokenDialog(false)} />
+        <UploaderToolDialog open={uploaderToolOpen} onClose={() => setUploaderToolOpen(false)} />
       </NavMobileContainer>
     </>
   );

diff --git a/src/components/Header/components/NavbarDesktop.tsx b/src/components/Header/components/NavbarDesktop.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { NavLink, Link, useNavigate } from 'react-router-dom';
+import { NavLink, Link, useNavigate, useLocation } from 'react-router-dom';
 import { Button } from '@mui/material';
 import styled from 'styled-components';
 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,14 +369,18 @@ 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');
   const clickableTitle = clickableObject.map((item) => item.name);
   const navigate = useNavigate();
   const authData = useAuthContext();
+  const location = useLocation();
   const displayName = authData?.user?.firstName?.toUpperCase() || "N/A";
   const [showLogoutAlert, setShowLogoutAlert] = useState<boolean>(false);
+  const [restorePath, setRestorePath] = useState<string>(null);
+
   clickableTitle.push(displayName);
 
   useOutsideAlerter(dropdownSelection, nameDropdownSelection);
@@ -430,6 +435,16 @@ const NavBar = () => {
   useEffect(() => {
     setClickedTitle("");
   }, []);
+
+  useEffect(() => {
+    if (!location?.pathname || location?.pathname === "/") {
+      setRestorePath(null);
+      return;
+    }
+
+    setRestorePath(location?.pathname);
+  }, [location]);
+
   return (
     <Nav>
       <GenericAlert open={showLogoutAlert}>
@@ -497,9 +512,8 @@ const NavBar = () => {
                   </div>
                 </div>
               </LiSection>
-            )
-            : (
-              <StyledLoginLink id="header-navbar-login-button" to="/login">
+            ) : (
+              <StyledLoginLink id="header-navbar-login-button" to="/login" state={{ redirectURLOnLoginSuccess: restorePath }}>
                 Login
               </StyledLoginLink>
             )}
@@ -534,6 +548,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 +593,7 @@ const NavBar = () => {
         </NameDropdownContainer>
       </NameDropdown>
       <APITokenDialog open={openAPITokenDialog} onClose={() => setOpenAPITokenDialog(false)} />
+      <UploaderToolDialog open={uploaderToolOpen} onClose={() => setUploaderToolOpen(false)} />
     </Nav>
   );
 };

diff --git a/src/components/SystemUseWarningOverlay/OverlayWindow.tsx b/src/components/SystemUseWarningOverlay/OverlayWindow.tsx
@@ -50,7 +50,8 @@ const theme = createTheme({
                 root: {
                     color: '#000045',
                     '& p': {
-                    fontSize: '14px',
+                      fontSize: '14px',
+                      margin: '0px 0px 10px !important',
                     },
                     padding: '20px 0px 0px 0px !important',
                     '& ul': {
@@ -65,11 +66,12 @@ const theme = createTheme({
                 root: {
                     width: '133px',
                     height: '35px',
-                    backgroundColor: '#337ab7',
+                    backgroundColor: '#337ab7 !important',
                     color: '#fff',
-                    textTransform: 'none',
+                    textTransform: 'capitalize !important' as 'capitalize',
+                    boxShadow: 'none !important',
                     '&:hover': {
-                    backgroundColor: '#2e6da4',
+                      backgroundColor: '#2e6da4 !important',
                     },
                 },
             },
@@ -198,7 +200,7 @@ const OverlayWindow = () => {
         </DialogContent>
         <Divider />
         <DialogActions>
-          <Button onClick={handleClose}>
+          <Button onClick={handleClose} variant="contained">
             Continue
           </Button>
         </DialogActions>

diff --git a/src/config/globalHeaderData.tsx b/src/config/globalHeaderData.tsx
@@ -51,10 +51,12 @@ export const navbarSublists = {
   //     className: 'navMobileSubTitle',
   //   },
   // ],
+  //
+  // To make it a link, the className has to be navMobileSubItem
   "Model Navigator": DataCommons.map((dc) => ({
     name: `${dc.name} Model`,
     link: `/model-navigator/${dc.name}`,
     text: '',
-    className: 'navMobileSubTitle',
+    className: 'navMobileSubItem',
   })),
 };