DT-530: Add conditional rendering around apply for access #2718
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,49 @@ | ||
| import React from 'react'; | ||
| import {useCallback, useState, useEffect} from 'react'; | ||
| import {DatasetMetrics} from '../libs/ajax/DatasetMetrics'; | ||
| import {DataSet} from '../libs/ajax/DataSet'; | ||
| import {DAR} from '../libs/ajax/DAR'; | ||
| import {Notifications} from '../libs/utils'; | ||
| import {Styles, Theme} from '../libs/theme'; | ||
| import {find} from 'lodash/fp'; | ||
| import {ReadMore} from '../components/ReadMore'; | ||
| import {formatDate} from '../libs/utils'; | ||
| import {Button} from '@mui/material'; | ||
|
|
||
| const LINE = <div style={{borderTop: '1px solid #BABEC1', height: 0}}/>; | ||
|
|
||
| export default function DatasetStatistics(props) { | ||
| const {history, match: {params: {datasetIdentifier}}} = props; | ||
| const [datasetId, setDatasetId] = useState(); | ||
| const [dataset, setDataset] = useState(); | ||
| const [dars, setDars] = useState(); | ||
| const [isLoading, setIsLoading] = useState(true); | ||
|
|
||
| const applyForAccess = async () => { | ||
| try { | ||
| const draftResponse = await DAR.postDarDraft({datasetId: [datasetId]}); | ||
| 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'}); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| DataSet.getDatasetByDatasetIdentifier(datasetIdentifier).then((dataset) => { | ||
| setData(dataset.datasetId); | ||
| }).catch(() => { | ||
| Notifications.showError({text: 'Error: Unable to retrieve dataset from server'}); | ||
| }); | ||
| }, [datasetIdentifier]); | ||
|
|
||
| const extract = useCallback((propertyName) => { | ||
| const property = find({propertyName})(dataset.properties); | ||
| return property?.propertyValue; | ||
| }, [dataset]); | ||
|
|
||
|
|
@@ -57,57 +57,82 @@ export default function DatasetStatistics(props) { | |
| setDars(metrics.dars); | ||
| setIsLoading(false); | ||
| } catch (error) { | ||
| Notifications.showError({text: 'Error: Unable to retrieve dataset statistics from server'}); | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| const accessButton = () => { | ||
| const accessManagement = extract('Access Management').toLowerCase(); | ||
| if (accessManagement === 'controlled') { | ||
|
There was a problem hiding this comment. Would a If you used a functional style switch (like lodash https://lodash.com/docs/4.17.15#cond), you could say There was a problem hiding this comment. Yes, this could be cleaner with a switch. I will look into There was a problem hiding this comment. I found some unintended behavior with using |
||
| return <Button variant='contained' onClick={applyForAccess} sx={{transform: 'scale(1.5)'}}> | ||
| Apply for Access | ||
| </Button>; | ||
| } | ||
| const locationUrl = extract('URL'); | ||
| if (accessManagement === 'open') { | ||
| return <span> | ||
| This dataset is open access, does not require an access request | ||
| {locationUrl && | ||
| <span>, and can be accessed directly through this <a href={locationUrl}>link</a>.</span> | ||
| } | ||
| </span>; | ||
| } | ||
| if (accessManagement === 'external') { | ||
| return <span> | ||
| This dataset is externally managed. Requests cannot be made via DUOS | ||
| {locationUrl && | ||
| <span>, but must be made directly through the <a href={locationUrl}>dataset's host repository</a>.</span> | ||
| } | ||
| </span>; | ||
| } | ||
| return <div/>; | ||
|
There was a problem hiding this comment. I see There was a problem hiding this comment. Just string values come through. On the consent side, we do have an enum so we can actually enforce this here as well. |
||
| }; | ||
|
|
||
| if (!isLoading) { | ||
| return ( | ||
| <div style={{...Styles.PAGE, color: Theme.palette.primary}}> | ||
| <div style={{justifyContent: 'space-between'}}> | ||
| <div style={{marginTop: '25px'}}> | ||
| <div style={Styles.TITLE}>Dataset Statistics</div> | ||
| <div style={Styles.MEDIUM_ROW}> | ||
| <div style={{fontWeight: '500', marginRight: '5px'}}>Dataset ID:</div> | ||
| <div>{dataset?.datasetIdentifier}</div> | ||
| </div> | ||
| <div style={Styles.MEDIUM_ROW}> | ||
| <div style={{fontWeight: '500', marginRight: '5px'}}>Dataset Name:</div> | ||
| <div> | ||
| {extract('Dataset Name') || dataset?.name} | ||
| </div> | ||
| </div> | ||
| <div style={{paddingTop: '20px', paddingLeft: '30px'}}> | ||
| {accessButton()} | ||
| </div> | ||
| </div> | ||
| <div style={Styles.SUB_HEADER}>Dataset Information</div> | ||
| <div style={{display: 'flex'}}> | ||
| <div style={Styles.DESCRIPTION_BOX}> | ||
| <div style={{...Styles.MINOR_HEADER, paddingLeft: '10px'}}>Dataset Description:</div> | ||
| {LINE} | ||
| <div style={{fontSize: Theme.font.size.small, padding: '1rem'}}> | ||
| {extract('Dataset Description') || dataset?.description || dataset?.study?.description || 'N/A'} | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div style={{display: 'flex'}}> | ||
| <div style={Styles.SMALL_BOLD}>Number of Participants:</div> | ||
| <div style={Styles.SMALL_BOLD}> | ||
| {extract('# of participants')} | ||
| </div> | ||
| </div> | ||
| {(extract('Principal Investigator(PI)') || dataset?.study?.piName) && <div style={{display: 'flex'}}> | ||
| <div style={Styles.SMALL_BOLD}>Principal Investigator:</div> | ||
| <div style={Styles.SMALL_BOLD}> | ||
| {extract('Principal Investigator(PI)') || dataset?.study?.piName} | ||
| </div> | ||
| </div>} | ||
| {(extract('Data Depositor') || dataset?.createUser?.displayName) && <div style={{display: 'flex'}}> | ||
| <div style={Styles.SMALL_BOLD}>Data Custodian:</div> | ||
| <div style={Styles.SMALL_BOLD}> | ||
| {extract('Data Depositor') || dataset?.createUser?.displayName} | ||
| </div> | ||
|
|
@@ -121,24 +146,24 @@ export default function DatasetStatistics(props) { | |
| props={props} | ||
| readLessText='Show less' | ||
| readMoreText='Show More' | ||
| readStyle={{fontWeight: 500, margin: '20px', height: 0}} | ||
| content={[ | ||
| <div key='dar' style={{display: 'flex'}}> | ||
| <div style={{...Styles.MEDIUM, width: '12%', margin: '15px'}}>{dar.darCode}</div> | ||
| <div style={{...Styles.MEDIUM, margin: '15px'}}>{dar.projectTitle}</div> | ||
| </div>, | ||
| LINE | ||
| ]} | ||
| moreContent={[ | ||
| <div key='updated' style={{display: 'flex', backgroundColor: 'white'}}> | ||
| <div style={{display: 'flex', paddingRight: '2rem'}}> | ||
| <div style={Styles.SMALL_BOLD}>Last Updated:</div> | ||
| <div style={Styles.SMALL_BOLD}>{formatDate(dar.updateDate)}</div> | ||
| </div> | ||
| </div>, | ||
| <div key='summary' style={{backgroundColor: 'white'}}> | ||
| <div style={Styles.SMALL_BOLD}>NonTechnical Summary:</div> | ||
| <div style={{fontSize: Theme.font.size.small, padding: '0 1rem 1rem 1rem'}}> | ||
| {dar.nonTechRus} | ||
| </div> | ||
| </div>, | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this name correct? It only returns a button in one case.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll rename it to make it more reflective of what it's doing now that it's not just a button any more.