[DT-788] Footer: Apply for Access to selected Studies and Datasets (#…

…2723)

Co-authored-by: rjohanek <rjohanek@broadinstitute.org>

cypress/component/DataSearch/dataset_search_footer.spec.js

@@ -0,0 +1,65 @@
+/* eslint-disable no-undef */
+import {mount} from 'cypress/react';
+import {React} from 'react';
+import {DatasetSearchFooter} from '../../../src/components/data_search/DatasetSearchFooter';
+
+const datasets = [
+  {
+    datasetId: 123456,
+    study: {
+      studyId: 1,
+    }
+  },
+  {
+    datasetId: 234567,
+    study: {
+      studyId: 1,
+    }
+  },
+  {
+    datasetId: 345678,
+    study: {
+      studyId: 2,
+    }
+  },
+];
+
+const oneDatasetProps = {
+  selectedDatasets: [123456],
+  datasets: datasets,
+  onClick: () => {},
+};
+
+const oneStudyProps = {
+  selectedDatasets: [123456, 234567],
+  datasets: datasets,
+  onClick: () => {},
+};
+
+const twoStudiesProps = {
+  selectedDatasets: [123456, 234567, 345678],
+  datasets: datasets,
+  onClick: () => {},
+};
+
+describe('Dataset Search Footer renders correct text and button', () => {
+
+  it('Shows button and single dataset and study text', () => {
+    mount(<DatasetSearchFooter {...oneDatasetProps} />);
+    cy.contains('1 dataset selected from 1 study');
+    cy.contains('Apply for Access');
+  });
+
+
+  it('Shows button and two datasets from one study text', () => {
+    mount(<DatasetSearchFooter {...oneStudyProps} />);
+    cy.contains('2 datasets selected from 1 study');
+    cy.contains('Apply for Access');
+  });
+
+  it('Shows button and three datasets from two studies text', () => {
+    mount(<DatasetSearchFooter {...twoStudiesProps} />);
+    cy.contains('3 datasets selected from 2 studies');
+    cy.contains('Apply for Access');
+  });
+});

cypress/component/DataSearch/dataset_search_table.spec.js

@@ -0,0 +1,43 @@
+/* eslint-disable no-undef */
+import {React} from 'react';
+import {mount} from 'cypress/react';
+import DatasetSearchTable from '../../../src/components/data_search/DatasetSearchTable';
+import {TerraDataRepo} from '../../../src/libs/ajax/TerraDataRepo';
+
+const datasets = [
+  {
+    datasetId: 123456,
+    datasetIdentifier: `DUOS-123456`,
+    datasetName: 'Some Dataset 1',
+    study: {
+      studyId: 1,
+      dataCustodianEmail: ['Some Data Custodian Email 1'],
+    }
+  }
+];
+
+const props = {
+  datasets: datasets,
+  history: {}
+};
+
+describe('Dataset Search Table tests', () => {
+
+  describe('Data library with three datasets', () => {
+    beforeEach(() => {
+      cy.stub(TerraDataRepo, 'listSnapshotsByDatasetIds').returns({});
+      mount(<DatasetSearchTable {...props} />);
+    });
+
+    it('When no datasets are selected the footer does not appear', () => {
+      cy.contains('1 dataset selected from 1 study').should('not.exist');
+    });
+
+
+    it('When a dataset is selected the footer appears', () => {
+      cy.get('#header-checkbox').click();
+      cy.contains('1 dataset selected from 1 study');
+    });
+
+  });
+});

src/components/dac_dataset_table/DACDatasetConstants.tsx

@@ -0,0 +1,51 @@
+import {Styles} from '../../libs/theme';
+
+export const styles = {
+  baseStyle: {
+    fontFamily: 'Montserrat',
+    fontSize: '1.6rem',
+    fontWeight: 400,
+    display: 'flex',
+    padding: '1rem 2%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    whiteSpace: 'pre-wrap',
+    backgroundColor: 'white',
+    border: '1px solid #DEDEDE',
+    borderRadius: '4px',
+    margin: '0.5% 0'
+  },
+  columnStyle: Object.assign({}, Styles.TABLE.HEADER_ROW, {
+    justifyContent: 'space-between',
+    color: '#7B7B7B',
+    fontFamily: 'Montserrat',
+    fontSize: '1.2rem',
+    fontWeight: 'bold',
+    letterSpacing: '0.2px',
+    textTransform: 'uppercase',
+    backgroundColor: 'B8CDD3',
+    border: 'none'
+  }),
+  cellWidths: {
+    duosId: '10%',
+    phsId: '10%',
+    datasetName: '15%',
+    studyName: '15%',
+    dataSubmitter: '15%',
+    dataCustodian: '15%',
+    dataUse: '10%',
+    status: '10%'
+  },
+  color: {
+    dataUseGroup: '#000000',
+    votes: '#000000',
+    numberOfDatasets: '#000000',
+    datasets: '#000000',
+  },
+  fontSize: {
+    dataUseGroup: '1.4rem',
+    votes: '1.4rem',
+    numberOfDatasets: '1.4rem',
+    datasets: '1.4rem',
+  },
+};

src/components/dac_dataset_table/DACDatasetTableCellData.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import style from '../../pages/DACDatasets.module.css';
-import {styles} from './DACDatasetsTable';
+import {styles} from './DACDatasetConstants';
 import DACDatasetApprovalStatus from './DACDatasetApprovalStatus';
 import ReactTooltip from 'react-tooltip';
 

src/components/dac_dataset_table/DACDatasetsTable.jsx

@@ -1,63 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { Styles } from '../../libs/theme';
 import { Storage } from '../../libs/storage';
 import PaginationBar from '../PaginationBar';
 import SimpleTable from '../SimpleTable';
 import cellData from './DACDatasetTableCellData';
+import {styles} from './DACDatasetConstants';
 import {isNil} from 'lodash/fp';
 import {goToPage as updatePage, recalculateVisibleTable} from '../../libs/utils';
 import {useCallback} from 'react';
 
-export const styles = {
-  baseStyle: {
-    fontFamily: 'Montserrat',
-    fontSize: '1.6rem',
-    fontWeight: 400,
-    display: 'flex',
-    padding: '1rem 2%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    whiteSpace: 'pre-wrap',
-    backgroundColor: 'white',
-    border: '1px solid #DEDEDE',
-    borderRadius: '4px',
-    margin: '0.5% 0'
-  },
-  columnStyle: Object.assign({}, Styles.TABLE.HEADER_ROW, {
-    justifyContent: 'space-between',
-    color: '#7B7B7B',
-    fontFamily: 'Montserrat',
-    fontSize: '1.2rem',
-    fontWeight: 'bold',
-    letterSpacing: '0.2px',
-    textTransform: 'uppercase',
-    backgroundColor: 'B8CDD3',
-    border: 'none'
-  }),
-  cellWidths: {
-    duosId: '10%',
-    phsId: '10%',
-    datasetName: '15%',
-    studyName: '15%',
-    dataSubmitter: '15%',
-    dataCustodian: '15%',
-    dataUse: '10%',
-    status: '10%'
-  },
-  color: {
-    dataUseGroup: '#000000',
-    votes: '#000000',
-    numberOfDatasets: '#000000',
-    datasets: '#000000',
-  },
-  fontSize: {
-    dataUseGroup: '1.4rem',
-    votes: '1.4rem',
-    numberOfDatasets: '1.4rem',
-    datasets: '1.4rem',
-  },
-};
-
 export const DACDatasetTableColumnOptions = {
   DUOS_ID: 'duosId',
   PHS_ID: 'phsId',

src/components/data_search/DatasetSearchFooter.tsx

@@ -0,0 +1,40 @@
+import * as _ from 'lodash';
+import {Button} from '@mui/material';
+import * as React from 'react';
+import {Dataset} from 'src/types/model';
+
+interface DatasetSearchFooterProps {
+  selectedDatasets: number[];
+  datasets: Dataset[];
+  onClick: () => void;
+}
+export const DatasetSearchFooter = (props: DatasetSearchFooterProps) => {
+  const { selectedDatasets, datasets, onClick } = props;
+  const selectedStudies = _.uniq(
+    _.filter(datasets, dataset => selectedDatasets.includes(dataset.datasetId))
+      .map(dataset => dataset.study.studyId));
+  const datasetText = selectedDatasets.length > 1 ? 'datasets' : 'dataset';
+  const studyText = selectedStudies.length > 1 ? 'studies' : 'study';
+
+  return <div style={{
+    position: 'fixed',
+    bottom: 0,
+    zIndex: 999,
+    width: '100vw',
+    height: 60,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    backgroundColor: 'white',
+    border: '1px solid #DEDEDE',
+    alignItems: 'center'
+  }}>
+    <div style={{paddingRight: 15}}>{selectedDatasets.length} {datasetText} selected from {selectedStudies.length} {studyText}</div>
+    <Button
+      variant='contained'
+      onClick={onClick}
+      sx={{fontSize: 14, height: 35, marginRight: 5}}
+    >
+            Apply for Access
+    </Button>
+  </div>;
+};

src/components/data_search/DatasetSearchTable.jsx

@@ -1,6 +1,6 @@
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import useOnMount from '@mui/utils/useOnMount'
+import useOnMount from '@mui/utils/useOnMount';
 import * as React from 'react';
 import { Box, Button } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -15,6 +15,7 @@ import DatasetFilterList from './DatasetFilterList';
 import { Notifications } from '../../libs/utils';
 import { Styles } from '../../libs/theme';
 import * as _ from 'lodash';
+import {DatasetSearchFooter} from './DatasetSearchFooter';
 
 const styles = {
   subTab: {
@@ -140,7 +141,7 @@ export const DatasetSearchTable = (props) => {
                   'dac.dacName': term
                 }
               }))
-            }
+        }
       });
 
       if (filterTerms.length > 0) {
@@ -288,14 +289,8 @@ export const DatasetSearchTable = (props) => {
             })()}
           </Box>
         </Box>
-        <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', padding: '2em 4em' }}>
-          {
-            !isEmpty(datasets) &&
-          <Button variant='contained' onClick={applyForAccess} sx={{ transform: 'scale(1.5)' }} >
-            Apply for Access
-          </Button>
-          }
-        </Box>
+        <Box sx={{padding: '1em'}}/>
+        {!isEmpty(selected) && <DatasetSearchFooter selectedDatasets={selected} datasets={datasets} onClick={applyForAccess}/>}
       </Box>
     </>
   );

src/components/data_search/DatasetSearchTableConstants.tsx

@@ -79,7 +79,7 @@ export const makeStudyTableHeaders = (datasets: DatasetTerm[], selected: number[
   const selectableDatasetIds = datasets.filter(isSelectable).map(dataset => dataset.datasetId);
   return [
     {
-      label: <Checkbox checked={datasets.length === selected.length}
+      label: <Checkbox id='header-checkbox' checked={datasets.length === selected.length}
         indeterminate={selected.length > 0 && selected.length < selectableDatasetIds.length}
         onClick={() => onSelect(selectableDatasetIds.length === selected.length ? [] : selectableDatasetIds)}/>,
       sortable: false,