From a2e37254f1abd0f9969587166e1945111fd73d21 Mon Sep 17 00:00:00 2001
From: rjohanek <rjohanek@broadinstitute.org>
Date: Tue, 12 Nov 2024 14:06:32 -0500
Subject: [PATCH 1/8] add new footer component and add to the table

---
 .../data_search/DatasetSearchFooter.tsx       | 39 +++++++++++++++++++
 .../data_search/DatasetSearchTable.jsx        | 13 ++-----
 2 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 src/components/data_search/DatasetSearchFooter.tsx

diff --git a/src/components/data_search/DatasetSearchFooter.tsx b/src/components/data_search/DatasetSearchFooter.tsx
new file mode 100644
index 000000000..ae4541591
--- /dev/null
+++ b/src/components/data_search/DatasetSearchFooter.tsx
@@ -0,0 +1,39 @@
+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));
+  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'
+  }}>
+    {selectedDatasets.length > 1 && selectedStudies.length > 1 && (<div style={{paddingRight: 15}}> {selectedDatasets.length} Datasets selected from {selectedStudies.length} Studies </div>)}
+    {selectedDatasets.length > 1 && selectedStudies.length === 1 && (<div style={{paddingRight: 15}}> {selectedDatasets.length} Datasets selected from 1 Study </div>)}
+    {selectedDatasets.length === 1 && (<div style={{paddingRight: 15}}> 1 Dataset selected from 1 Study </div>)}
+    <Button
+      variant="contained"
+      onClick={onClick}
+      sx={{fontSize: 14, height: 35, marginRight: 5}}
+    >
+            Apply for Access
+    </Button>
+  </div>;
+};
\ No newline at end of file
diff --git a/src/components/data_search/DatasetSearchTable.jsx b/src/components/data_search/DatasetSearchTable.jsx
index b83640dd7..0c830bd9f 100644
--- a/src/components/data_search/DatasetSearchTable.jsx
+++ b/src/components/data_search/DatasetSearchTable.jsx
@@ -2,7 +2,7 @@ import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import * as React from 'react';
 import { Box, Button } from '@mui/material';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { isEmpty } from 'lodash';
 import { TerraDataRepo } from '../../libs/ajax/TerraDataRepo';
 import { DatasetSearchTableDisplay } from './DatasetSearchTableDisplay';
@@ -14,6 +14,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: {
@@ -271,14 +272,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>
     </>
   );

From 559a198b4f7d79a043f69ec36bf56c6da95e86fe Mon Sep 17 00:00:00 2001
From: rjohanek <rjohanek@broadinstitute.org>
Date: Tue, 12 Nov 2024 14:27:26 -0500
Subject: [PATCH 2/8] linting

---
 src/components/data_search/DatasetSearchFooter.tsx | 4 ++--
 src/components/data_search/DatasetSearchTable.jsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/data_search/DatasetSearchFooter.tsx b/src/components/data_search/DatasetSearchFooter.tsx
index ae4541591..f51330e97 100644
--- a/src/components/data_search/DatasetSearchFooter.tsx
+++ b/src/components/data_search/DatasetSearchFooter.tsx
@@ -29,11 +29,11 @@ export const DatasetSearchFooter = (props: DatasetSearchFooterProps) => {
     {selectedDatasets.length > 1 && selectedStudies.length === 1 && (<div style={{paddingRight: 15}}> {selectedDatasets.length} Datasets selected from 1 Study </div>)}
     {selectedDatasets.length === 1 && (<div style={{paddingRight: 15}}> 1 Dataset selected from 1 Study </div>)}
     <Button
-      variant="contained"
+      variant='contained'
       onClick={onClick}
       sx={{fontSize: 14, height: 35, marginRight: 5}}
     >
             Apply for Access
     </Button>
   </div>;
-};
\ No newline at end of file
+};
diff --git a/src/components/data_search/DatasetSearchTable.jsx b/src/components/data_search/DatasetSearchTable.jsx
index 71a03dc8b..362cc7573 100644
--- a/src/components/data_search/DatasetSearchTable.jsx
+++ b/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';
@@ -141,7 +141,7 @@ export const DatasetSearchTable = (props) => {
                   'dac.dacName': term
                 }
               }))
-            }
+        }
       });
 
       if (filterTerms.length > 0) {

From fc9188ce6f1ddf997f5acaa6d28f2146aaacf48b Mon Sep 17 00:00:00 2001
From: rjohanek <rjohanek@broadinstitute.org>
Date: Wed, 13 Nov 2024 09:22:21 -0500
Subject: [PATCH 3/8] PR feedback: simplify div logic

---
 src/components/data_search/DatasetSearchFooter.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/data_search/DatasetSearchFooter.tsx b/src/components/data_search/DatasetSearchFooter.tsx
index f51330e97..ded789eaf 100644
--- a/src/components/data_search/DatasetSearchFooter.tsx
+++ b/src/components/data_search/DatasetSearchFooter.tsx
@@ -13,6 +13,9 @@ export const DatasetSearchFooter = (props: DatasetSearchFooterProps) => {
   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,
@@ -25,9 +28,7 @@ export const DatasetSearchFooter = (props: DatasetSearchFooterProps) => {
     border: '1px solid #DEDEDE',
     alignItems: 'center'
   }}>
-    {selectedDatasets.length > 1 && selectedStudies.length > 1 && (<div style={{paddingRight: 15}}> {selectedDatasets.length} Datasets selected from {selectedStudies.length} Studies </div>)}
-    {selectedDatasets.length > 1 && selectedStudies.length === 1 && (<div style={{paddingRight: 15}}> {selectedDatasets.length} Datasets selected from 1 Study </div>)}
-    {selectedDatasets.length === 1 && (<div style={{paddingRight: 15}}> 1 Dataset selected from 1 Study </div>)}
+    <div style={{paddingRight: 15}}>{selectedDatasets.length} {datasetText} selected from {selectedStudies.length} {studyText}</div>
     <Button
       variant='contained'
       onClick={onClick}

From 9f7b6068ca4d75a61598a9d130825d25cf5863e4 Mon Sep 17 00:00:00 2001
From: rjohanek <rjohanek@broadinstitute.org>
Date: Wed, 13 Nov 2024 09:54:16 -0500
Subject: [PATCH 4/8] add unit test for new footer component

---
 .../DataSearch/data_search_footer.spec.js     | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 cypress/component/DataSearch/data_search_footer.spec.js

diff --git a/cypress/component/DataSearch/data_search_footer.spec.js b/cypress/component/DataSearch/data_search_footer.spec.js
new file mode 100644
index 000000000..f13dfbdcd
--- /dev/null
+++ b/cypress/component/DataSearch/data_search_footer.spec.js
@@ -0,0 +1,71 @@
+/* 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,
+    datasetIdentifier: `DUOS-123456`,
+    datasetName: 'Some Dataset 1',
+    study: {
+      studyId: 1,
+    }
+  },
+  {
+    datasetId: 234567,
+    datasetIdentifier: `DUOS-234567`,
+    datasetName: 'Some Dataset 2',
+    study: {
+      studyId: 1,
+    }
+  },
+  {
+    datasetId: 345678,
+    datasetIdentifier: `DUOS-345678`,
+    datasetName: 'Some Dataset 3',
+    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');
+  });
+});

From 97afe13b91bf6c0678091d7317acc16759a75b40 Mon Sep 17 00:00:00 2001
From: rjohanek <rjohanek@broadinstitute.org>
Date: Wed, 13 Nov 2024 09:56:28 -0500
Subject: [PATCH 5/8] simplify test data

---
 cypress/component/DataSearch/data_search_footer.spec.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/cypress/component/DataSearch/data_search_footer.spec.js b/cypress/component/DataSearch/data_search_footer.spec.js
index f13dfbdcd..4bf0c186c 100644
--- a/cypress/component/DataSearch/data_search_footer.spec.js
+++ b/cypress/component/DataSearch/data_search_footer.spec.js
@@ -6,24 +6,18 @@ import {DatasetSearchFooter} from '../../../src/components/data_search/DatasetSe
 const datasets = [
   {
     datasetId: 123456,
-    datasetIdentifier: `DUOS-123456`,
-    datasetName: 'Some Dataset 1',
     study: {
       studyId: 1,
     }
   },
   {
     datasetId: 234567,
-    datasetIdentifier: `DUOS-234567`,
-    datasetName: 'Some Dataset 2',
     study: {
       studyId: 1,
     }
   },
   {
     datasetId: 345678,
-    datasetIdentifier: `DUOS-345678`,
-    datasetName: 'Some Dataset 3',
     study: {
       studyId: 2,
     }

From 71cb12276812080708b2153012968540be078881 Mon Sep 17 00:00:00 2001
From: rjohanek <rjohanek@broadinstitute.org>
Date: Wed, 13 Nov 2024 14:06:04 -0500
Subject: [PATCH 6/8] remove circular dependency

---
 .../dac_dataset_table/DACDatasetConstants.tsx | 51 ++++++++++++++++++
 .../DACDatasetTableCellData.jsx               |  2 +-
 .../dac_dataset_table/DACDatasetsTable.jsx    | 52 +------------------
 3 files changed, 53 insertions(+), 52 deletions(-)
 create mode 100644 src/components/dac_dataset_table/DACDatasetConstants.tsx

diff --git a/src/components/dac_dataset_table/DACDatasetConstants.tsx b/src/components/dac_dataset_table/DACDatasetConstants.tsx
new file mode 100644
index 000000000..25f10cff2
--- /dev/null
+++ b/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',
+  },
+};
\ No newline at end of file
diff --git a/src/components/dac_dataset_table/DACDatasetTableCellData.jsx b/src/components/dac_dataset_table/DACDatasetTableCellData.jsx
index cdf6d0421..3becb5847 100644
--- a/src/components/dac_dataset_table/DACDatasetTableCellData.jsx
+++ b/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';
 
diff --git a/src/components/dac_dataset_table/DACDatasetsTable.jsx b/src/components/dac_dataset_table/DACDatasetsTable.jsx
index 5cd8e556b..2f7aef1c4 100644
--- a/src/components/dac_dataset_table/DACDatasetsTable.jsx
+++ b/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',

From a21842aa628005cc24709a73815fe7289fc0251d Mon Sep 17 00:00:00 2001
From: rjohanek <rjohanek@broadinstitute.org>
Date: Thu, 14 Nov 2024 09:49:10 -0500
Subject: [PATCH 7/8] add test for footer on dataset search table

---
 ....spec.js => dataset_search_footer.spec.js} |  0
 .../DataSearch/dataset_search_table.spec.js   | 44 +++++++++++++++++++
 .../DatasetSearchTableConstants.tsx           |  2 +-
 3 files changed, 45 insertions(+), 1 deletion(-)
 rename cypress/component/DataSearch/{data_search_footer.spec.js => dataset_search_footer.spec.js} (100%)
 create mode 100644 cypress/component/DataSearch/dataset_search_table.spec.js

diff --git a/cypress/component/DataSearch/data_search_footer.spec.js b/cypress/component/DataSearch/dataset_search_footer.spec.js
similarity index 100%
rename from cypress/component/DataSearch/data_search_footer.spec.js
rename to cypress/component/DataSearch/dataset_search_footer.spec.js
diff --git a/cypress/component/DataSearch/dataset_search_table.spec.js b/cypress/component/DataSearch/dataset_search_table.spec.js
new file mode 100644
index 000000000..8ca98275f
--- /dev/null
+++ b/cypress/component/DataSearch/dataset_search_table.spec.js
@@ -0,0 +1,44 @@
+/* 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');
+    });
+
+  });
+
+});
\ No newline at end of file
diff --git a/src/components/data_search/DatasetSearchTableConstants.tsx b/src/components/data_search/DatasetSearchTableConstants.tsx
index c61bda76f..07925b37c 100644
--- a/src/components/data_search/DatasetSearchTableConstants.tsx
+++ b/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,

From 85de688df17d6ecb967651408117efe45f052e86 Mon Sep 17 00:00:00 2001
From: rjohanek <rjohanek@broadinstitute.org>
Date: Thu, 14 Nov 2024 09:56:05 -0500
Subject: [PATCH 8/8] add new lines at end of files

---
 cypress/component/DataSearch/dataset_search_table.spec.js | 3 +--
 src/components/dac_dataset_table/DACDatasetConstants.tsx  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/cypress/component/DataSearch/dataset_search_table.spec.js b/cypress/component/DataSearch/dataset_search_table.spec.js
index 8ca98275f..85c1e92c6 100644
--- a/cypress/component/DataSearch/dataset_search_table.spec.js
+++ b/cypress/component/DataSearch/dataset_search_table.spec.js
@@ -40,5 +40,4 @@ describe('Dataset Search Table tests', () => {
     });
 
   });
-
-});
\ No newline at end of file
+});
diff --git a/src/components/dac_dataset_table/DACDatasetConstants.tsx b/src/components/dac_dataset_table/DACDatasetConstants.tsx
index 25f10cff2..8fdb53e90 100644
--- a/src/components/dac_dataset_table/DACDatasetConstants.tsx
+++ b/src/components/dac_dataset_table/DACDatasetConstants.tsx
@@ -48,4 +48,4 @@ export const styles = {
     numberOfDatasets: '1.4rem',
     datasets: '1.4rem',
   },
-};
\ No newline at end of file
+};