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
+
+ ;
+};
+
+
+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();
+ });
+
+ 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');
+ });
+});
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) => (
- } />
- } />
- } />
-
- } />
+ } />
+ } />
+
+
checkEnv(envGroups.NON_STAGING)
?
:
} />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {DAAUtils.isEnabled() && }
- {DAAUtils.isEnabled() && }
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {DAAUtils.isEnabled() && }
+ {DAAUtils.isEnabled() && }
+
+
+
+
+
+
-
{/* Order is important for processing links with embedded dataRequestIds */}
-
-
-
- {DAAUtils.isEnabled() && }
-
- {DAAUtils.isEnabled() && }
-
-
-
-
-
-
-
-
-
-
-
-
- {checkEnv(envGroups.NON_PROD) && }
-
+
+
+ {DAAUtils.isEnabled() && }
+
+ {DAAUtils.isEnabled() && }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {checkEnv(envGroups.NON_PROD) && }
+
);
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 (