From 7cb22c90b804e4cb446225e955738f31068af5e4 Mon Sep 17 00:00:00 2001
From: Sky Rubenstein <blrubenstein@wpi.edu>
Date: Tue, 3 Dec 2024 15:37:14 -0500
Subject: [PATCH 1/2] Add study details page

---
 src/Routes.jsx                                | 102 +++++-----
 src/components/DuosHeader.jsx                 |  94 ++++-----
 .../data_search/DatasetSearchFooter.tsx       |   4 +-
 .../data_search/DatasetSearchTable.jsx        |  32 +--
 .../DatasetSearchTableConstants.tsx           |   4 +-
 .../data_search/DatasetSearchTableDisplay.tsx |   2 +-
 src/components/study_details/StudyDetails.tsx | 191 ++++++++++++++++++
 src/types/tdrModel.ts                         |   7 +
 8 files changed, 319 insertions(+), 117 deletions(-)
 create mode 100644 src/components/study_details/StudyDetails.tsx

diff --git a/src/Routes.jsx b/src/Routes.jsx
index 2f5fce388..fed9fdcdb 100644
--- a/src/Routes.jsx
+++ b/src/Routes.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Redirect, Route, Switch} from 'react-router-dom';
+import { StudyDetails } from './components/study_details/StudyDetails';
 import AuthenticatedRoute from './components/AuthenticatedRoute';
 import {USER_ROLES} from './libs/utils';
 import ManageDac from './pages/manage_dac/ManageDac';
@@ -47,65 +48,66 @@ import EditDac from './pages/manage_dac/EditDac';
 
 const Routes = (props) => (
   <Switch>
-    <Route exact path="/" render={(routeProps) => <Home {...routeProps} {...props} />} />
-    <Route exact path="/home" render={(routeProps) => <Home {...routeProps} {...props} />} />
-    <Route exact path="/status" render={(routeProps) => <Status {...routeProps} {...props} />} />
-    <Route exact path="/liveness" component={HealthCheck} />
-    <Route exact path="/backgroundsignin" render={
+    <Route exact path='/' render={(routeProps) => <Home {...routeProps} {...props} />} />
+    <Route exact path='/home' render={(routeProps) => <Home {...routeProps} {...props} />} />
+    <Route exact path='/status' render={(routeProps) => <Status {...routeProps} {...props} />} />
+    <Route exact path='/liveness' component={HealthCheck} />
+    <Route exact path='/backgroundsignin' render={
       (routeProps) =>
         checkEnv(envGroups.NON_STAGING)
           ? <BackgroundSignIn {...routeProps} />
           : <NotFound />
     } />
-    <Route path="/nih_ic_webform" component={NIHICWebform} />
-    <Route path="/nih_pilot_info" component={NIHPilotInfo} />
-    <Route path="/privacy" component={PrivacyPolicy} />
-    <Route path="/tos" component={TermsOfService} props={props} />
-    <Route path="/tos_acceptance" component={TermsOfServiceAcceptance} props={props} />
-    <Route path="/consent_text_generator" component={ConsentTextGenerator} />
-    <Route path="/nih_dms_policy" component={NIHDMSPolicyInfo} />
-    <Route path="/anvil_dms_policy" component={AnVILDMSPolicyInfo} />
-    <AuthenticatedRoute path="/profile" component={UserProfile} props={props} rolesAllowed={[USER_ROLES.all]} />
-    <AuthenticatedRoute path="/request_role" component={RequestForm} rolesAllowed={[USER_ROLES.all]} />
-    <AuthenticatedRoute path="/admin_review_collection/:collectionId" component={DarCollectionReview} props={Object.assign({adminPage: true}, props)} rolesAllowed={[USER_ROLES.admin]} />
-    <AuthenticatedRoute path="/admin_manage_users" component={AdminManageUsers} props={props} rolesAllowed={[USER_ROLES.admin]} />
-    <AuthenticatedRoute path="/admin_edit_user/:userId" component={AdminEditUser} props={props} rolesAllowed={[USER_ROLES.admin]} />
-    <AuthenticatedRoute path="/manage_dac" component={ManageDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
-    <AuthenticatedRoute path="/manage_edit_dac/:dacId" component={ManageEditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
-    <AuthenticatedRoute path="/manage_add_dac" component={ManageEditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
-    {DAAUtils.isEnabled() && <AuthenticatedRoute path="/manage_edit_dac_daa/:dacId" component={EditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />}
-    {DAAUtils.isEnabled() &&  <AuthenticatedRoute path="/manage_add_dac_daa" component={EditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />}
-    <AuthenticatedRoute path="/admin_manage_institutions" component={AdminManageInstitutions} props={props} rolesAllowed={[USER_ROLES.admin]} />
-    <AuthenticatedRoute path="/researcher_console" component={ResearcherConsole} props={props} rolesAllowed={[USER_ROLES.researcher]}/>
-    <AuthenticatedRoute path="/dar_collection/:collectionId" component={DarCollectionReview} props={props} rolesAllowed={[USER_ROLES.researcher, USER_ROLES.chairperson, USER_ROLES.member, USER_ROLES.signingOfficial]}/>
-    <AuthenticatedRoute path="/chair_console" component={ChairConsole} props={props} rolesAllowed={[USER_ROLES.chairperson]}/>
-    <AuthenticatedRoute path="/member_console" component={MemberConsole} props={props} rolesAllowed={[USER_ROLES.member]}/>
-    <AuthenticatedRoute path="/dar_vote_review/:collectionId" component={DarCollectionReview} props={Object.assign({readOnly: true}, props)}
+    <Route path='/nih_ic_webform' component={NIHICWebform} />
+    <Route path='/nih_pilot_info' component={NIHPilotInfo} />
+    <Route path='/privacy' component={PrivacyPolicy} />
+    <Route path='/tos' component={TermsOfService} props={props} />
+    <Route path='/tos_acceptance' component={TermsOfServiceAcceptance} props={props} />
+    <Route path='/consent_text_generator' component={ConsentTextGenerator} />
+    <Route path='/nih_dms_policy' component={NIHDMSPolicyInfo} />
+    <Route path='/anvil_dms_policy' component={AnVILDMSPolicyInfo} />
+    <AuthenticatedRoute path='/profile' component={UserProfile} props={props} rolesAllowed={[USER_ROLES.all]} />
+    <AuthenticatedRoute path='/request_role' component={RequestForm} rolesAllowed={[USER_ROLES.all]} />
+    <AuthenticatedRoute path='/admin_review_collection/:collectionId' component={DarCollectionReview} props={Object.assign({adminPage: true}, props)} rolesAllowed={[USER_ROLES.admin]} />
+    <AuthenticatedRoute path='/admin_manage_users' component={AdminManageUsers} props={props} rolesAllowed={[USER_ROLES.admin]} />
+    <AuthenticatedRoute path='/admin_edit_user/:userId' component={AdminEditUser} props={props} rolesAllowed={[USER_ROLES.admin]} />
+    <AuthenticatedRoute path='/manage_dac' component={ManageDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
+    <AuthenticatedRoute path='/manage_edit_dac/:dacId' component={ManageEditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
+    <AuthenticatedRoute path='/manage_add_dac' component={ManageEditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
+    {DAAUtils.isEnabled() && <AuthenticatedRoute path='/manage_edit_dac_daa/:dacId' component={EditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />}
+    {DAAUtils.isEnabled() &&  <AuthenticatedRoute path='/manage_add_dac_daa' component={EditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />}
+    <AuthenticatedRoute path='/admin_manage_institutions' component={AdminManageInstitutions} props={props} rolesAllowed={[USER_ROLES.admin]} />
+    <AuthenticatedRoute path='/researcher_console' component={ResearcherConsole} props={props} rolesAllowed={[USER_ROLES.researcher]}/>
+    <AuthenticatedRoute path='/dar_collection/:collectionId' component={DarCollectionReview} props={props} rolesAllowed={[USER_ROLES.researcher, USER_ROLES.chairperson, USER_ROLES.member, USER_ROLES.signingOfficial]}/>
+    <AuthenticatedRoute path='/chair_console' component={ChairConsole} props={props} rolesAllowed={[USER_ROLES.chairperson]}/>
+    <AuthenticatedRoute path='/member_console' component={MemberConsole} props={props} rolesAllowed={[USER_ROLES.member]}/>
+    <AuthenticatedRoute path='/dar_vote_review/:collectionId' component={DarCollectionReview} props={Object.assign({readOnly: true}, props)}
       rolesAllowed={[USER_ROLES.chairperson, USER_ROLES.member]}/>
-    <AuthenticatedRoute path="/dar_application_review/:collectionId" component={DataAccessRequestApplication} props={Object.assign({}, props, {readOnlyMode: true})}
+    <AuthenticatedRoute path='/dar_application_review/:collectionId' component={DataAccessRequestApplication} props={Object.assign({}, props, {readOnlyMode: true})}
       rolesAllowed={[USER_ROLES.researcher]} />
     {/* Order is important for processing links with embedded dataRequestIds */}
-    <AuthenticatedRoute path="/dar_application/:dataRequestId" component={DataAccessRequestApplication} props={Object.assign({}, props, {draftDar: true})}
+    <AuthenticatedRoute path='/dar_application/:dataRequestId' component={DataAccessRequestApplication} props={Object.assign({}, props, {draftDar: true})}
       rolesAllowed={[USER_ROLES.researcher]} />
-    <AuthenticatedRoute path="/dar_application" component={DataAccessRequestApplication} props={props} rolesAllowed={[USER_ROLES.researcher]} />
-    <AuthenticatedRoute path="/signing_official_console/researchers" component={ensureSoHasDaaAcknowledgement(SigningOfficialResearchers, true)} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.signingOfficial]} />
-    {DAAUtils.isEnabled() && <AuthenticatedRoute path="/signing_official_console/researchers_daa_associations" component={ensureSoHasDaaAcknowledgement(ManageResearcherDAAs, true)} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.signingOfficial]} />}
-    <AuthenticatedRoute path="/signing_official_console/dar_requests" component={ensureSoHasDaaAcknowledgement(SigningOfficialDarRequests)} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.signingOfficial]} />
-    {DAAUtils.isEnabled() && <AuthenticatedRoute path="/signing_official_console/data_submitters" component={ensureSoHasDaaAcknowledgement(SigningOfficialDataSubmitters, false, true)} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.signingOfficial]} />}
-    <AuthenticatedRoute path="/dataset_submissions" component={DatasetSubmissions} props={props} rolesAllowed={[USER_ROLES.dataSubmitter]}/>
-    <AuthenticatedRoute path="/dataset_update/:datasetId" component={DatasetUpdateForm} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
-    <AuthenticatedRoute path="/data_submission_form" component={DataSubmissionForm} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson, USER_ROLES.dataSubmitter]} />
-    <AuthenticatedRoute path="/study_update/:studyId" component={StudyUpdateForm} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson, USER_ROLES.dataSubmitter]} />
-    <AuthenticatedRoute path="/admin_manage_lc/" component={AdminManageLC} props={props} rolesAllowed={[USER_ROLES.admin]} />
-    <AuthenticatedRoute path="/admin_manage_dar_collections/" component={AdminManageDarCollections} props={props} rolesAllowed={[USER_ROLES.admin]} />
-    <AuthenticatedRoute path="/datalibrary/:query" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
-    <AuthenticatedRoute path="/datalibrary" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
-    <AuthenticatedRoute path="/dataset/:datasetIdentifier" component={DatasetStatistics} props={props} rolesAllowed={[USER_ROLES.all]} />
-    <Redirect from="/DUOS-:duosId" to="/dataset/DUOS-:duosId" props={props} rolesAllowed={[USER_ROLES.all]} />
-    <AuthenticatedRoute path="/dac_datasets" component={DACDatasets} props={props} rolesAllowed={[USER_ROLES.chairperson]} />
-    <AuthenticatedRoute path="/tos_acceptance" component={TermsOfServiceAcceptance} props={props} rolesAllowed={[USER_ROLES.all]} />
-    {checkEnv(envGroups.NON_PROD) && <AuthenticatedRoute path="/translate" component={Translator} props={props} rolesAllowed={[USER_ROLES.researcher]}/>}
-    <Route path="*" component={NotFound} />
+    <AuthenticatedRoute path='/dar_application' component={DataAccessRequestApplication} props={props} rolesAllowed={[USER_ROLES.researcher]} />
+    <AuthenticatedRoute path='/signing_official_console/researchers' component={ensureSoHasDaaAcknowledgement(SigningOfficialResearchers, true)} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.signingOfficial]} />
+    {DAAUtils.isEnabled() && <AuthenticatedRoute path='/signing_official_console/researchers_daa_associations' component={ensureSoHasDaaAcknowledgement(ManageResearcherDAAs, true)} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.signingOfficial]} />}
+    <AuthenticatedRoute path='/signing_official_console/dar_requests' component={ensureSoHasDaaAcknowledgement(SigningOfficialDarRequests)} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.signingOfficial]} />
+    {DAAUtils.isEnabled() && <AuthenticatedRoute path='/signing_official_console/data_submitters' component={ensureSoHasDaaAcknowledgement(SigningOfficialDataSubmitters, false, true)} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.signingOfficial]} />}
+    <AuthenticatedRoute path='/dataset_submissions' component={DatasetSubmissions} props={props} rolesAllowed={[USER_ROLES.dataSubmitter]}/>
+    <AuthenticatedRoute path='/dataset_update/:datasetId' component={DatasetUpdateForm} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
+    <AuthenticatedRoute path='/data_submission_form' component={DataSubmissionForm} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson, USER_ROLES.dataSubmitter]} />
+    <AuthenticatedRoute path='/study_update/:studyId' component={StudyUpdateForm} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson, USER_ROLES.dataSubmitter]} />
+    <AuthenticatedRoute path='/admin_manage_lc/' component={AdminManageLC} props={props} rolesAllowed={[USER_ROLES.admin]} />
+    <AuthenticatedRoute path='/admin_manage_dar_collections/' component={AdminManageDarCollections} props={props} rolesAllowed={[USER_ROLES.admin]} />
+    <AuthenticatedRoute path='/datalibrary/:query' component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path='/datalibrary' component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path='/studies/:studyId' component={StudyDetails} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path='/dataset/:datasetIdentifier' component={DatasetStatistics} props={props} rolesAllowed={[USER_ROLES.all]} />
+    <Redirect from='/DUOS-:duosId' to='/dataset/DUOS-:duosId' props={props} rolesAllowed={[USER_ROLES.all]} />
+    <AuthenticatedRoute path='/dac_datasets' component={DACDatasets} props={props} rolesAllowed={[USER_ROLES.chairperson]} />
+    <AuthenticatedRoute path='/tos_acceptance' component={TermsOfServiceAcceptance} props={props} rolesAllowed={[USER_ROLES.all]} />
+    {checkEnv(envGroups.NON_PROD) && <AuthenticatedRoute path='/translate' component={Translator} props={props} rolesAllowed={[USER_ROLES.researcher]}/>}
+    <Route path='*' component={NotFound} />
   </Switch>
 );
 
diff --git a/src/components/DuosHeader.jsx b/src/components/DuosHeader.jsx
index b1fc90ca0..80b73e33f 100644
--- a/src/components/DuosHeader.jsx
+++ b/src/components/DuosHeader.jsx
@@ -160,26 +160,26 @@ const NavigationTabsComponent = (props) => {
   return (
     <div className={`navbar-logged ${orientation === 'vertical' ? 'navbar-vertical' : ''}`}>
       {makeNotifications()}
-      <ul className="navbar-main">
+      <ul className='navbar-main'>
         <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
           {
             orientation === 'horizontal' && (
               <Link
-                id="link_logo"
-                to="/home"
-                className="navbar-brand"
+                id='link_logo'
+                to='/home'
+                className='navbar-brand'
               >
-                <img style={duosLogoImage} src={DuosLogo} alt="DUOS Logo" />
+                <img style={duosLogoImage} src={DuosLogo} alt='DUOS Logo' />
               </Link>
             )
           }
           {
             isLogged && (
-              <Box className="duos-navigation-box">
+              <Box className='duos-navigation-box'>
                 <Tabs
                   value={selectedMenuTab}
-                  variant="scrollable"
-                  scrollButtons="auto"
+                  variant='scrollable'
+                  scrollButtons='auto'
                   orientation={orientation}
                   TabIndicatorProps={{ style: { background: '#2BBD9B' } }}
                 >
@@ -198,27 +198,27 @@ const NavigationTabsComponent = (props) => {
           }
           {
             !isLogged && (
-              <ul className="navbar-public">
+              <ul className='navbar-public'>
                 <li>
                   <a
-                    id="link_about"
-                    className="navbar-duos-link"
-                    href="https://support.terra.bio/hc/en-us/articles/28485372215579-About-DUOS"
-                    target="_blank"
-                    rel="noreferrer"
+                    id='link_about'
+                    className='navbar-duos-link'
+                    href='https://support.terra.bio/hc/en-us/articles/28485372215579-About-DUOS'
+                    target='_blank'
+                    rel='noreferrer'
                   >
-                    <div className="navbar-duos-icon-about" style={navbarDuosIcon}></div>
+                    <div className='navbar-duos-icon-about' style={navbarDuosIcon}></div>
                     <span style={navbarDuosText}>About</span>
                   </a>
                 </li>
                 <li>
                   <a
-                    id="link_help"
-                    className="navbar-duos-link"
-                    href="https://support.terra.bio/hc/en-us/articles/28486067349531-Frequently-Asked-Questions-about-DUOS"
-                    target="_blank" rel="noreferrer"
+                    id='link_help'
+                    className='navbar-duos-link'
+                    href='https://support.terra.bio/hc/en-us/articles/28486067349531-Frequently-Asked-Questions-about-DUOS'
+                    target='_blank' rel='noreferrer'
                   >
-                    <div className="navbar-duos-icon-help" style={navbarDuosIcon}></div>
+                    <div className='navbar-duos-icon-help' style={navbarDuosIcon}></div>
                     <span style={navbarDuosText}>FAQs</span>
                   </a>
                 </li>
@@ -257,30 +257,30 @@ const NavigationTabsComponent = (props) => {
               flexDirection: orientation === 'vertical' ? 'column' : 'row'
             }}
           >
-            <a href="https://support.terra.bio/hc/en-us/categories/28485138480539-Managing-Data-Access-with-DUOS"
-              id="terra-support-docs-link" target="_blank" rel="noreferrer"
+            <a href='https://support.terra.bio/hc/en-us/categories/28485138480539-Managing-Data-Access-with-DUOS'
+              id='terra-support-docs-link' target='_blank' rel='noreferrer'
               style={{color: 'white', paddingTop: 30, paddingBottom: 30, paddingLeft: 2, paddingRight: 2, marginRight: 20}}>Help</a>
             <button onClick={showRequestModal} style={styles.navButton}>
-              <div id="help" style={{whiteSpace: 'nowrap'}}>Contact Us</div>
+              <div id='help' style={{whiteSpace: 'nowrap'}}>Contact Us</div>
             </button>
             {supportrequestModal}
-            <li className="dropdown user-li" onClick={showProfileLinks} style={{listStyleType: 'none'}}>
-              <a id="sel_user" role="button" className="dropdown-toggle" data-toggle="dropdown">
-                <div id="dacUser">
+            <li className='dropdown user-li' onClick={showProfileLinks} style={{listStyleType: 'none'}}>
+              <a id='sel_user' role='button' className='dropdown-toggle' data-toggle='dropdown'>
+                <div id='dacUser'>
                   {currentUser.displayName}
-                  <span className="caret caret-margin"></span>
+                  <span className='caret caret-margin'></span>
                 </div>
-                <small id="dacUserMail">{currentUser.email}</small>
+                <small id='dacUserMail'>{currentUser.email}</small>
               </a>
-              <ul className="dropdown-menu navbar-dropdown" role="menu" style={{
+              <ul className='dropdown-menu navbar-dropdown' role='menu' style={{
                 display: `${profileState ? 'block' : 'none'}`,
                 top: orientation === 'vertical' ? '-100%' : '100%'
               }}>
                 <li>
-                  <Link id="link_profile" to="/profile" onClick={onSubtabChange}>Your Profile</Link>
+                  <Link id='link_profile' to='/profile' onClick={onSubtabChange}>Your Profile</Link>
                 </li>
                 <li>
-                  <a id="link_signOut" onClick={signOut}>Sign out</a>
+                  <a id='link_signOut' onClick={signOut}>Sign out</a>
                 </li>
               </ul>
             </li>
@@ -290,11 +290,11 @@ const NavigationTabsComponent = (props) => {
 
       {/* Sub Tabs */}
       {tabs[selectedMenuTab]?.children && (
-        <Box className="duos-navigation-box navbar-sub">
+        <Box className='duos-navigation-box navbar-sub'>
           <Tabs
             value={selectedSubTab}
-            variant="scrollable"
-            scrollButtons="auto"
+            variant='scrollable'
+            scrollButtons='auto'
             orientation={orientation}
             TabIndicatorProps={{ style: { background: '#00609f' } }}
             onChange={onSubtabChange}
@@ -434,7 +434,7 @@ const DuosHeader = (props) => {
   const contactUsText = isLogged ? 'Contact Us' : <span style={{ display: 'inline', verticalAlign: 'text-bottom' }}>Contact Us</span>;
   const contactUsButton = (
     <button
-      id="btn_applyAcces"
+      id='btn_applyAcces'
       style={{
         color: state.hover ? '#2FA4E7' : '#ffffff',
         fontSize: '14px',
@@ -448,8 +448,8 @@ const DuosHeader = (props) => {
       onMouseEnter={toggleHover}
       onMouseLeave={toggleHover}
       onClick={supportRequestModal}
-      data-tip="Need help? Contact us for some assistance"
-      data-for="tip_requestAccess"
+      data-tip='Need help? Contact us for some assistance'
+      data-for='tip_requestAccess'
     >
       {contactUsIcon}
       {contactUsText}
@@ -506,9 +506,9 @@ const DuosHeader = (props) => {
   }
 
   return (
-    <nav className="navbar-duos" role="navigation">
+    <nav className='navbar-duos' role='navigation'>
       <Hidden mdDown={true}>
-        <div className="row no-margin" style={{ width: '100%' }}>
+        <div className='row no-margin' style={{ width: '100%' }}>
           {/* Standard navbar for medium sized displays and higher (pre-existing navbar) */}
           <NavigationTabsComponent
             history={history}
@@ -527,7 +527,7 @@ const DuosHeader = (props) => {
             tabs={tabs}
             initialTab={initialTab}
             initialSubTab={initialSubTab}
-            orientation="horizontal"
+            orientation='horizontal'
             showProfileLinks={profileLinks}
             profileState={state.showProfileLinks}
           />
@@ -541,21 +541,21 @@ const DuosHeader = (props) => {
       }
       <Hidden mdUp={true}>
         {makeNotifications()}
-        <div className="navbar-main" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div className='navbar-main' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
           <img
             style={duosLogoImage}
             src={DuosLogo}
-            alt="DUOS Logo"
+            alt='DUOS Logo'
             onClick={() => goToLink('/home')}
           />
-          <IconButton  id='collapsed-navigation-icon-button' size="small" onClick={() => toggleDrawer(true)}>
+          <IconButton  id='collapsed-navigation-icon-button' size='small' onClick={() => toggleDrawer(true)}>
             <MenuIcon id='navbar-menu-icon' style={{ color: 'white', fontSize: '6rem', flex: 1 }} anchor='right' />
           </IconButton>
           <Drawer
-            anchor="right"
+            anchor='right'
             open={state.openDrawer}
             PaperProps={{ className: classes.drawerPaper }}
-            className="navbar-duos"
+            className='navbar-duos'
             onClose={() => toggleDrawer(false)}
           >
             <NavigationTabsComponent
@@ -576,7 +576,7 @@ const DuosHeader = (props) => {
               tabs={tabs}
               initialTab={initialTab}
               initialSubTab={initialSubTab}
-              orientation="vertical"
+              orientation='vertical'
               onSubtabChange={() => toggleDrawer(false)}
               showProfileLinks={profileLinks}
               profileState={state.showProfileLinks}
@@ -589,4 +589,4 @@ const DuosHeader = (props) => {
   );
 };
 
-export default withRouter(withStyles(DuosHeader, styles));
\ No newline at end of file
+export default withRouter(withStyles(DuosHeader, styles));
diff --git a/src/components/data_search/DatasetSearchFooter.tsx b/src/components/data_search/DatasetSearchFooter.tsx
index ded789eaf..33e43badc 100644
--- a/src/components/data_search/DatasetSearchFooter.tsx
+++ b/src/components/data_search/DatasetSearchFooter.tsx
@@ -1,11 +1,11 @@
 import * as _ from 'lodash';
 import {Button} from '@mui/material';
 import * as React from 'react';
-import {Dataset} from 'src/types/model';
+import {DatasetTerm} from 'src/types/model';
 
 interface DatasetSearchFooterProps {
   selectedDatasets: number[];
-  datasets: Dataset[];
+  datasets: DatasetTerm[];
   onClick: () => void;
 }
 export const DatasetSearchFooter = (props: DatasetSearchFooterProps) => {
diff --git a/src/components/data_search/DatasetSearchTable.jsx b/src/components/data_search/DatasetSearchTable.jsx
index 989e8dfc6..e29b261b0 100644
--- a/src/components/data_search/DatasetSearchTable.jsx
+++ b/src/components/data_search/DatasetSearchTable.jsx
@@ -31,6 +31,21 @@ const styles = {
   },
 };
 
+export const applyForAccess = async (selected, history) => {
+  try {
+    const draftResponse = await DAR.postDarDraft({ datasetId: selected });
+    if (draftResponse.referenceId) {
+      history.push(`/dar_application/${draftResponse.referenceId}`);
+    } else if (draftResponse.message) {
+      Notifications.showError({ text: draftResponse.message + ' Please contact customer support for help.' });
+    } else {
+      Notifications.showError({ text: 'Error: Unable to create a Draft Data Access Request' });
+    }
+  } catch (error) {
+    Notifications.showError({ text: 'Error: Unable to create a Draft Data Access Request' });
+  }
+};
+
 
 
 const defaultFilters = {
@@ -189,20 +204,7 @@ export const DatasetSearchTable = (props) => {
     setFilters(newFilters);
   };
 
-  const applyForAccess = async () => {
-    try {
-      const draftResponse = await DAR.postDarDraft({ datasetId: selected  });
-      if (draftResponse.referenceId) {
-        history.push(`/dar_application/${draftResponse.referenceId}`);
-      } else if (draftResponse.message) {
-        Notifications.showError({ text: draftResponse.message + ' Please contact customer support for help.' });
-      } else {
-        Notifications.showError({ text: 'Error: Unable to create a Draft Data Access Request' });
-      }
-    } catch (error) {
-      Notifications.showError({ text: 'Error: Unable to create a Draft Data Access Request' });
-    }
-  };
+
 
   useOnMount(() => {
     if (isEmpty(datasets)) {
@@ -299,7 +301,7 @@ export const DatasetSearchTable = (props) => {
           </Box>
         </Box>
         <Box sx={{padding: '1em'}}/>
-        {!isEmpty(selected) && <DatasetSearchFooter selectedDatasets={selected} datasets={datasets} onClick={applyForAccess}/>}
+        {!isEmpty(selected) && <DatasetSearchFooter selectedDatasets={selected} datasets={datasets} onClick={() => applyForAccess(selected, history)}/>}
       </Box>
     </>
   );
diff --git a/src/components/data_search/DatasetSearchTableConstants.tsx b/src/components/data_search/DatasetSearchTableConstants.tsx
index 586d4d13b..52f6a78b4 100644
--- a/src/components/data_search/DatasetSearchTableConstants.tsx
+++ b/src/components/data_search/DatasetSearchTableConstants.tsx
@@ -118,9 +118,9 @@ export const makeStudyTableHeaders = (datasets: DatasetTerm[], selected: number[
       sortable: true,
       cellStyle: makeHeaderStyle(studyCellWidths.studyName),
       cellDataFn: (datasets) => ({
-        data: <OverflowTooltip place={'top'} tooltipText={datasets[0].study.studyName} id={`${datasets[0].study.studyId}-study-name-data`}>
+        data: <Link key={datasets[0].study.studyId} id='link_study' href={`/studies/${datasets[0].study.studyId}`}>
           {trimNewlineCharacters(datasets[0].study.studyName)}
-        </OverflowTooltip>,
+        </Link>,
         value: datasets[0].study.studyName,
         id: `${datasets[0].study.studyId}-study-name`,
         style: makeRowStyle(studyCellWidths.selected),
diff --git a/src/components/data_search/DatasetSearchTableDisplay.tsx b/src/components/data_search/DatasetSearchTableDisplay.tsx
index 7a420768c..f469a8e77 100644
--- a/src/components/data_search/DatasetSearchTableDisplay.tsx
+++ b/src/components/data_search/DatasetSearchTableDisplay.tsx
@@ -7,7 +7,7 @@ import {Styles} from '../../libs/theme';
 import {
   DatasetSearchTableTab,
 } from './DatasetSearchTableConstants';
-import {SnapshotSummaryModel} from "src/types/tdrModel";
+import {SnapshotSummaryModel} from '../../types/tdrModel';
 
 const styles = {
   baseStyle: {
diff --git a/src/components/study_details/StudyDetails.tsx b/src/components/study_details/StudyDetails.tsx
new file mode 100644
index 000000000..6e6cb9d92
--- /dev/null
+++ b/src/components/study_details/StudyDetails.tsx
@@ -0,0 +1,191 @@
+import React, {useEffect, useState} from 'react';
+import {DataSet} from '../../libs/ajax/DataSet';
+import {DatasetTerm, StudyTerm} from '../../types/model';
+import backArrowIcon from '../../images/back_arrow.svg';
+import {Link} from 'react-router-dom';
+import {
+  makeDatasetTableHeader,
+  makeDatasetTableRows
+} from '../data_search/DatasetSearchTableConstants';
+import SimpleTable from '../SimpleTable';
+import {Styles} from '../../libs/theme';
+import {TerraDataRepo} from '../../libs/ajax/TerraDataRepo';
+import * as _ from 'lodash';
+import {EnumerateSnapshotModel, SnapshotSummaryModel} from '../../types/tdrModel';
+import {DatasetSearchFooter} from '../data_search/DatasetSearchFooter';
+import {applyForAccess} from '../data_search/DatasetSearchTable';
+import {History} from 'history';
+
+const styles = {
+  row: {
+    display: 'flex',
+    alignItems: 'flex-start'
+  },
+  baseStyle: {
+    fontFamily: 'Montserrat',
+    fontSize: '1.4rem',
+    fontWeight: 400,
+    display: 'flex',
+    padding: '1rem 2%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    whiteSpace: 'pre-wrap',
+    backgroundColor: 'white',
+    border: '1px solid #DEDEDE',
+    borderRadius: '4px',
+    textOverflow: 'ellipsis',
+    height: '4rem',
+    marginTop: 5,
+  },
+  columnStyle: Object.assign({}, Styles.TABLE.HEADER_ROW, {
+    justifyContent: 'space-between',
+    fontFamily: 'Montserrat',
+    fontSize: '1.2rem',
+    fontWeight: 'bold',
+    letterSpacing: '0.2px',
+    backgroundColor: '#E2E8F4',
+    border: 'none',
+    textTransform: 'uppercase',
+    lineHeight: '16px',
+  }),
+  containerOverride: {}
+};
+
+interface StudyDetailsProps {
+  history: History,
+  match: {
+    params: {
+      studyId: number;
+    }
+  }
+}
+export const StudyDetails = (props: StudyDetailsProps) => {
+  const { history } = props;
+  const { studyId } = props.match.params;
+  const [loading, setLoading] = useState(true);
+  const [datasets, setDatasets] = useState<DatasetTerm[]>([]);
+  const [exportableDatasets, setExportableDatasets] = useState<_.Dictionary<SnapshotSummaryModel[]>>({});
+  const [selectedDatasets, setSelectedDatasets] = useState<number[]>([]);
+
+  const study: StudyTerm | undefined = datasets.length > 0 ? datasets[0].study : undefined;
+  const headers = makeDatasetTableHeader(datasets, selectedDatasets, setSelectedDatasets, exportableDatasets);
+  const rowData = makeDatasetTableRows(datasets, headers);
+
+  const getExportableDatasets = async (datasets: DatasetTerm[]) => {
+    // Note the dataset identifier is in each sub-table row.
+    const datasetIdentifiers = datasets.map((row) => row.datasetIdentifier);
+    const snapshots = await TerraDataRepo.listSnapshotsByDatasetIds(datasetIdentifiers) as any as EnumerateSnapshotModel;
+    if (snapshots.filteredTotal > 0) {
+      const datasetIdToSnapshot = _.chain(snapshots.items)
+        // Ignore any snapshots that a user does not have export (steward or reader) to
+        .filter((snapshot: { id: string }) => _.intersection(snapshots.roleMap[snapshot.id] as string[], ['steward', 'reader']).length > 0)
+        .groupBy('duosId')
+        .value();
+      setExportableDatasets(datasetIdToSnapshot);
+    }
+  };
+
+  useEffect(() => {
+    const query = {
+      'from': 0,
+      'size': 10000,
+      'query': {
+        'bool': {
+          'must': [
+            {
+              'match': {
+                '_type': 'dataset'
+              }
+            },
+            {
+              'match': {
+                'study.studyId': studyId
+              }
+            },
+            {
+              'exists': {
+                'field': 'study'
+              }
+            }
+          ],
+        }
+      }
+    };
+    DataSet.searchDatasetIndex(query).then((datasets) => {
+      setDatasets(datasets);
+      setLoading(false);
+    });
+  }, [studyId, setDatasets]);
+
+  useEffect(() => {
+    getExportableDatasets(datasets);
+  }, [datasets]);
+
+  interface SectionProps {
+    style?: React.CSSProperties
+  }
+
+  const Section = ({ style, children }: React.PropsWithChildren<SectionProps>) =>
+    <div style={{paddingTop: 20, ...style}}>{children}</div>;
+
+  const participantCount = datasets
+    .map(dataset => dataset.participantCount)
+    .reduce((partialSum, participants) => partialSum + participants, 0);
+
+  return !loading ? <div style={styles.row}>
+    <div style={{paddingLeft: 40}}>
+      <Link
+        id='link_datalibrary'
+        to='/datalibrary'
+        className='navbar-brand'
+        style={{height: 28, width: 28}}
+      >
+        <img id='back-arrow-icon' src={backArrowIcon} alt={'Back'} style={{height: 28, width: 28}}/>
+      </Link>
+    </div>
+    <div style={{padding: '0 16px', display: 'flex', flexDirection: 'column', width: '100%'}}>
+      <div style={{ fontSize: 20, fontWeight: 600 }}>
+        Back to library
+      </div>
+      <div style={{ fontSize: 20, fontWeight: 600, paddingTop: 20 }}>
+        {study?.studyName}
+      </div>
+      <Section>
+        {study?.description}
+      </Section>
+      {!isNaN(participantCount) && <Section>
+        <span style={{fontWeight: 600}}>Participants: </span>
+        <span>{
+          participantCount
+        }</span>
+      </Section>}
+      {study?.phenotype && <Section>
+        <span style={{fontWeight: 600}}>Phenotype: </span>
+        <span>{study?.phenotype}</span>
+      </Section>}
+      {study?.species && <Section>
+        <span style={{fontWeight: 600}}>Species: </span>
+        <span>{study?.species}</span>
+      </Section>}
+      {study?.piName && <Section>
+        <span style={{fontWeight: 600}}>PI Name: </span>
+        <span>{study?.piName}</span>
+      </Section>}
+      {study?.dataCustodianEmail && study.dataCustodianEmail.length > 0 && <Section>
+        <span style={{fontWeight: 600}}>Data Custodian: </span>
+        <span>{study?.dataCustodianEmail.join(', ')}</span>
+      </Section>}
+      <div style={{paddingTop: 20, marginTop: 20, borderTop: '1px solid black', width: '100%'}}>
+        <SimpleTable
+          rowData={rowData}
+          columnHeaders={headers}
+          selected={selectedDatasets}
+          styles={styles}
+          tableSize={10}
+          summary='faceted dataset search table'
+        />
+      </div>
+    </div>
+    {!_.isEmpty(selectedDatasets) && <DatasetSearchFooter selectedDatasets={selectedDatasets} datasets={datasets} onClick={() => applyForAccess(selectedDatasets, history)}/>}
+  </div> : <div>Loading</div>;
+};
diff --git a/src/types/tdrModel.ts b/src/types/tdrModel.ts
index 8778ab065..ae0bc2ecd 100644
--- a/src/types/tdrModel.ts
+++ b/src/types/tdrModel.ts
@@ -29,3 +29,10 @@ export interface SnapshotSummaryModel {
   resourceLocks: ResourceLocks;
   duosId: string;
 }
+
+export interface EnumerateSnapshotModel {
+  items: SnapshotSummaryModel[];
+  roleMap: { [key: string]: string[] };
+  filteredTotal: number;
+  total: number;
+}

From 5cf53285e838014e6948431e0cdd4ada13408797 Mon Sep 17 00:00:00 2001
From: Sky Rubenstein <blrubenstein@wpi.edu>
Date: Thu, 5 Dec 2024 14:32:35 -0500
Subject: [PATCH 2/2] Add tests

---
 DEVNOTES.md                                   |  6 ++
 .../StudyDetails/StudyDetails.spec.tsx        | 82 +++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 cypress/component/StudyDetails/StudyDetails.spec.tsx

diff --git a/DEVNOTES.md b/DEVNOTES.md
index 7b2e89d87..054f9c3e6 100644
--- a/DEVNOTES.md
+++ b/DEVNOTES.md
@@ -119,4 +119,10 @@ To run cypress component tests in a browser:
 ```shell
 npm run cypress:open:component
 ```
+
+To run a single test suite:
+
+```shell
+npm run cypress:open:component --spec "**/data_access_governance.spec.js"
+```
  
diff --git a/cypress/component/StudyDetails/StudyDetails.spec.tsx b/cypress/component/StudyDetails/StudyDetails.spec.tsx
new file mode 100644
index 000000000..e7e1cb28b
--- /dev/null
+++ b/cypress/component/StudyDetails/StudyDetails.spec.tsx
@@ -0,0 +1,82 @@
+/* eslint-disable no-undef */
+
+import React from 'react';
+import {mount} from 'cypress/react';
+import { StudyDetails } from '../../../src/components/study_details/StudyDetails';
+import {TerraDataRepo} from '../../../src/libs/ajax/TerraDataRepo';
+import {DataSet} from '../../../src/libs/ajax/DataSet';
+import {BrowserRouter} from 'react-router-dom';
+
+const datasets = [
+  {
+    datasetId: 123456,
+    datasetIdentifier: `DUOS-123456`,
+    datasetName: 'Some Dataset 1',
+    participantCount: 1,
+    study: {
+      studyId: 1,
+      studyName: 'study name',
+      description: 'study description',
+      phenotype: 'phenotype',
+      species: 'species',
+      piName: 'piName',
+      dataCustodianEmail: ['custodian1@foo.bar', 'custodian2@foo.bar'],
+    }
+  },
+  {
+    datasetId: 123457,
+    datasetIdentifier: `DUOS-123457`,
+    datasetName: 'Some Dataset 2',
+    participantCount: 2,
+    study: {
+      studyId: 1,
+      studyName: 'study name',
+      description: 'study description',
+      phenotype: 'phenotype',
+      species: 'species',
+      piName: 'piName',
+      dataCustodianEmail: ['custodian1@foo.bar', 'custodian2@foo.bar'],
+    }
+  }
+];
+
+// It's necessary to wrap components that contain `Link` components
+const WrappedStudyDetailsComponent = (props) => {
+  return <BrowserRouter>
+    <StudyDetails {...props}/>
+  </BrowserRouter>;
+};
+
+
+describe('Study details test', () => {
+  beforeEach(() => {
+    cy.stub(TerraDataRepo, 'listSnapshotsByDatasetIds').returns({});
+    cy.stub(DataSet, 'searchDatasetIndex').returns(Promise.resolve(datasets));
+    const props = {
+      history: {},
+      match: { params: { studyId: 1 } }
+    };
+    // @ts-ignore
+    mount(<WrappedStudyDetailsComponent {...props} />);
+  });
+
+  it('shows the appropriate data for fields', () => {
+    cy.contains(datasets[0].study.studyName).should('exist');
+    cy.contains(datasets[0].study.description).should('exist');
+    cy.contains((datasets[0].participantCount + datasets[1].participantCount).toString()).should('exist');
+    cy.contains(datasets[0].study.phenotype).should('exist');
+    cy.contains(datasets[0].study.species).should('exist');
+    cy.contains(datasets[0].study.piName).should('exist');
+    cy.contains(datasets[0].study.dataCustodianEmail.join(', ')).should('exist');
+    cy.get('[role=row]').should('have.length', datasets.length + 1);
+  });
+
+  it('displays DatasetSearchFooter when dataset is selected', () => {
+    cy.get('.row-data-0').find('input').click();
+    cy.contains('1 dataset selected from 1 study').should('exist');
+  });
+
+  it('allows navigation back to datalibrary', () => {
+    cy.get('#link_datalibrary').should('have.attr', 'href', '/datalibrary');
+  });
+});