Merge branch 'develop' into gr-DUOS-2641-ds-datasets

package.json

@@ -6,15 +6,15 @@
     "@databiosphere/bard-client": "^0.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "11.11.0",
-    "@mui/icons-material": "5.14.6",
-    "@mui/material": "5.14.6",
+    "@mui/icons-material": "5.14.7",
+    "@mui/material": "5.14.7",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1",
     "axios": "^1.5.0",
     "bootstrap": "3.4.1",
     "dompurify": "3.0.5",
     "http-proxy-middleware": "^2.0.6",
-    "jquery": "3.7.0",
+    "jquery": "3.7.1",
     "js-file-download": "0.4.12",
     "lodash": "4.17.21",
     "mixin-deep": "2.0.1",
@@ -61,7 +61,7 @@
     "@babel/preset-react": "7.22.5",
     "@types/react": "18.2.21",
     "ajv-cli": "5.0.0",
-    "cypress": "12.17.4",
+    "cypress": "13.1.0",
     "eslint": "7.32.0",
     "eslint-plugin-flowtype": "7.0.0",
     "eslint-plugin-react": "7.33.2",

src/components/CollapsibleTable.js

@@ -194,14 +194,14 @@ const CollapsibleRow = (props) => {
 };
 
 export const CollapsibleTable = (props) => {
-  const { data, summary, isLoading, selected, selectHandler } = props;
+  const { data, summary, selected, selectHandler } = props;
 
   const [allSelected, setAllSelected] = useState(false);
   const [someSelected, setSomeSelected] = useState(false);
 
   useEffect(() => {
     const isSelected = (id) => selected.indexOf(id) !== -1;
-    if (!isEmpty(data)) {
+    if (!isEmpty(data) && !isEmpty(data.rows)) {
       setAllSelected(data.rows.every((row) => {
         return row.subtable.rows.every((subRow) => isSelected(subRow.id));
       }));
@@ -211,7 +211,7 @@ export const CollapsibleTable = (props) => {
     }
   }, [data, selected]);
 
-  return !isLoading && !isEmpty(data) && (
+  return !isEmpty(data) && (
     <TableContainer component={Paper}>
       <Table aria-label={summary}>
         {/* main table header */}

src/components/TableHeaderSection.js

@@ -4,7 +4,7 @@ import { div, img } from 'react-hyperscript-helpers';
 export const TableHeaderSection = (props) => {
   const { icon, title, description } = props;
 
-  return div({ style: { display: 'flex', justifyContent: 'space-between', width: '112%', marginLeft: '-6%', padding: '0 2.5%' } }, [
+  return div({ style: { display: 'flex', padding: '0 0 0 2em' } }, [
     div(
       { className: 'left-header-section', style: Styles.LEFT_HEADER_SECTION },
       [
@@ -15,12 +15,12 @@ export const TableHeaderSection = (props) => {
             style: Styles.HEADER_IMG,
           }),
         ]),
-        div({ style: Styles.HEADER_CONTAINER }, [
+        div({ style: { ...Styles.HEADER_CONTAINER, width: '120%' } }, [
           div({
             style: {
               fontFamily: 'Montserrat',
               fontWeight: 600,
-              fontSize: '2.8rem'
+              fontSize: '2.8rem',
             }
           }, [
             title,

src/components/dac_dataset_table/DACDatasetApprovalStatus.js

@@ -21,7 +21,7 @@ export default function DACDatasetApprovalStatus(props) {
       style={{marginLeft: '15px'}}
       id={`${dataset.dataSetId}_edit`}
       className={'glyphicon glyphicon-pencil'}
-      to={`dataset_registration/${dataset.dataSetId}`}
+      to={dataset.study?.studyId === undefined ? `dataset_registration/${dataset.dataSetId}` : `study_update/${dataset.study.studyId}`}
     />
   </div>;
 

src/components/data_search/DatasetFilterList.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Divider from '@mui/material/Divider';
+import { Typography } from '@mui/material';
+import { Checkbox } from '@mui/material';
+
+export const DatasetFilterList = (props) => {
+  const { datasets, filters, filterHandler } = props;
+
+  const isFiltered = (filter) => filters.indexOf(filter) > -1;
+
+  return (
+    <Box sx={{ bgcolor: 'background.paper' }}>
+      <Typography variant="h5" gutterBottom component="div" sx={{ fontFamily: 'Montserrat', fontWeight: '600' }}>
+        Filters
+      </Typography>
+      <Divider />
+      <Typography variant="h6" gutterBottom component="div" sx={{ fontFamily: 'Montserrat', fontWeight: '600' }} marginTop="1em">
+        Access Type
+      </Typography>
+      <List sx={{ margin: '-0.5em -0.5em'}}>
+        <ListItem disablePadding>
+          <ListItemButton sx={{ padding: '0' }} onClick={(event) => filterHandler(event, datasets, 'open')}>
+            <ListItemIcon>
+              <Checkbox checked={isFiltered('open')} />
+            </ListItemIcon>
+            <ListItemText primary="Open" sx={{ fontFamily: 'Montserrat', transform: 'scale(1.2)' }} />
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton sx={{ padding: '0' }} onClick={(event) => filterHandler(event, datasets, 'controlled')}>
+            <ListItemIcon>
+              <Checkbox checked={isFiltered('controlled')} />
+            </ListItemIcon>
+            <ListItemText primary="Controlled" sx={{ fontFamily: 'Montserrat', transform: 'scale(1.2)' }} />
+          </ListItemButton>
+        </ListItem>
+      </List>
+    </Box>
+  );
+};
+
+export default DatasetFilterList;

src/components/data_search/DatasetSearchTable.js

@@ -1,11 +1,13 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { h, div, button } from 'react-hyperscript-helpers';
 import datasetIcon from '../../logo.svg';
-import { Styles } from '../../libs/theme';
-import { groupBy } from 'lodash';
+import { groupBy, isEmpty } from 'lodash';
 import CollapsibleTable from '../CollapsibleTable';
 import TableHeaderSection from '../TableHeaderSection';
 import { DAR } from '../../libs/ajax';
+import DatasetFilterList from './DatasetFilterList';
+import { Box } from '@mui/material';
 
 const studyTableHeader = [
   'Study Name',
@@ -29,10 +31,40 @@ const datasetTableHeader = [
 ];
 
 export const DatasetSearchTable = (props) => {
-  const { datasets, isLoading, history } = props;
+  const { datasets, history } = props;
+  const [filters, setFilters] = useState([]);
+  const [filtered, setFiltered] = useState([]);
   const [tableData, setTableData] = useState({});
   const [selected, setSelected] = useState([]);
 
+  const isFiltered = (filter) => filters.indexOf(filter) > -1;
+
+  const filterHandler = (event, data, filter) => {
+    var newFilters = [];
+    if (!isFiltered(filter)) {
+      newFilters = filters.concat(filter);
+    } else {
+      newFilters = filters.filter((f) => f !== filter);
+    }
+    setFilters(newFilters);
+
+    var newFiltered = [];
+    if (newFilters.length === 0) {
+      newFiltered = data;
+    } else {
+      newFiltered = data.filter((dataset) => {
+        if (newFilters.includes('open') && dataset.openAccess) {
+          return true;
+        }
+        if (newFilters.includes('controlled') && !dataset.openAccess) {
+          return true;
+        }
+        return false;
+      });
+    }
+    setFiltered(newFiltered);
+  };
+
   const selectHandler = (event, data, selector) => {
     let idsToModify = [];
     if (selector === 'all') {
@@ -67,11 +99,11 @@ export const DatasetSearchTable = (props) => {
   };
 
   useEffect(() => {
-    if (isLoading) {
+    if (isEmpty(filtered)) {
       return;
     }
 
-    const studies = groupBy(datasets, 'study.studyId');
+    const studies = groupBy(filtered, 'study.studyId');
     const table = {
       id: 'study-table',
       headers: studyTableHeader.map((header) => ({ value: header })),
@@ -143,33 +175,30 @@ export const DatasetSearchTable = (props) => {
     };
 
     setTableData(table);
-  }, [datasets, isLoading]);
-
-  return div({ style: Styles.PAGE }, [
-    h(TableHeaderSection, {
-      icon: datasetIcon,
-      title: 'Broad Data Library',
-      description: 'Search, filter, and select datasets, then click \'Apply for Access\' to request access'
-    }),
-    div({ style: { paddingTop: '2rem' } }, [
-      h(CollapsibleTable, {
-        data: tableData,
-        selected,
-        selectHandler,
-        isLoading,
-        summary: 'faceted study search table'
-      }),
-    ]),
-    div({ className: 'f-right' }, [
-      button({
-        id: 'btn_applyAccess',
-        className: `btn-primary dataset-background search-wrapper`,
-        onClick: applyForAccess,
-        'data-tip': 'Request Access for selected Studies', 'data-for': 'tip_requestAccess',
-        style: { marginBottom: '30%' }
-      }, ['Apply for Access'])
-    ]),
-  ]);
+  }, [filtered]);
+
+  useEffect(() => {
+    setFiltered(datasets);
+  }, [datasets]);
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <TableHeaderSection icon={datasetIcon} title='Broad Data Library' description="Search, filter, and select datasets, then click 'Apply for Access' to request access" />
+      <Box sx={{ display: 'flex', flexDirection: 'row', paddingTop: '2em' }}>
+        <Box sx={{ width: '14%', padding: '0 1em' }}>
+          <DatasetFilterList datasets={datasets} filters={filters} filterHandler={filterHandler} />
+        </Box>
+        <Box sx={{ width: '85%', padding: '0 1em' }}>
+          <CollapsibleTable data={tableData} selected={selected} selectHandler={selectHandler} summary='faceted study search table' />
+        </Box>
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', padding: '2em 4em' }}>
+        <Button variant="contained" onClick={applyForAccess} sx={{ transform: 'scale(1.5)' }} >
+            Apply for Access
+        </Button>
+      </Box>
+    </Box>
+  );
 };
 
 export default DatasetSearchTable;

src/components/manage_dac_table/ManageDacTable.js

@@ -195,11 +195,10 @@ export const ManageDacTable = function ManageDacTable(props) {
 
   const viewDatasets = useCallback(async (selectedDac) => {
     const datasets = await DAC.datasets(selectedDac.dacId);
-    const activeDatasets = filter({ active: true })(datasets);
-
+    const approvedDatasets = filter({ dacApproval: true })(datasets);
     setShowDatasetsModal(true);
     setSelectedDac(selectedDac);
-    setSelectedDatasets(activeDatasets);
+    setSelectedDatasets(approvedDatasets);
   }, [setShowDatasetsModal, setSelectedDac, setSelectedDatasets]);
 
   const changeTableSize = useCallback((value) => {

src/components/modals/ConnectDatasetModal.js

@@ -1,8 +1,8 @@
 import { Component, Fragment } from 'react';
-import { div, h, form, input, label, select, hh, option } from 'react-hyperscript-helpers';
+import { div, h, form, input, select, hh, option } from 'react-hyperscript-helpers';
 import { BaseModal } from '../BaseModal';
 import { Alert } from '../Alert';
-import { DatasetAssociation, DataSet } from '../../libs/ajax';
+import { DatasetAssociation } from '../../libs/ajax';
 import datasetLinkIcon from '../../images/icon_dataset_link.png';
 
 export const ConnectDatasetModal = hh(class ConnectDatasetModal extends Component {
@@ -14,16 +14,12 @@ export const ConnectDatasetModal = hh(class ConnectDatasetModal extends Componen
       selected: [],
       availableclients: [],
       selectedclients: [],
-      needsApproval: props.dataset.needsApproval,
       updatedInfoModal: false,
-      needsApprovalModified: false,
       showError: false,
       alert: {},
       isUpdate: false,
     };
 
-    this.handleNeedsApprovalChange = this.handleNeedsApprovalChange.bind(this);
-
     this.closeHandler = this.closeHandler.bind(this);
     this.OKHandler = this.OKHandler.bind(this);
     this.handleLSelection  = this.handleLSelection.bind(this);
@@ -58,24 +54,14 @@ export const ConnectDatasetModal = hh(class ConnectDatasetModal extends Componen
   }
 
   OKHandler() {
-    if (this.state.needsApprovalModified) {
-      DataSet.reviewDataSet(this.state.datasetId, this.state.needsApproval).then(() => {
-        this.createOrUpdateAssociations();
-      }, () => {
-        this.setState(prev => {
-          prev.showError = true;
-          return prev;
-        });
-      });
-    } else {
-      this.createOrUpdateAssociations();
-    }
+    this.createOrUpdateAssociations();
   }
 
   createOrUpdateAssociations = () => {
     const usersId = [];
     this.state.selectedclients.forEach(user => {
-      usersId.push(JSON.parse(user.id));
+      const userId = user.id.replace(/'/g, '');
+      usersId.push(userId);
     });
 
     if (this.state.isUpdate) {
@@ -105,15 +91,6 @@ export const ConnectDatasetModal = hh(class ConnectDatasetModal extends Componen
     this.props.onCloseRequest();
   }
 
-  handleNeedsApprovalChange(event) {
-    const checked = event.target.checked;
-    this.setState(prev =>{
-      prev.needsApproval = checked;
-      return prev;
-    },
-    () => this.handleStateSubmit() );
-  }
-
   moveLItem = () => {
 
     let filteredTo = this.state.selectedclients;
@@ -171,16 +148,7 @@ export const ConnectDatasetModal = hh(class ConnectDatasetModal extends Componen
   handleStateSubmit = () => {
     const modifiedList = this.isSelectedListModified();
 
-    if (this.props.dataset.needsApproval !== this.state.needsApproval) {
-      this.setState(prev => {
-        prev.needsApprovalModified = true;
-        return prev;
-      });
-    }
-
-    if ((this.props.dataset.needsApproval !== this.state.needsApproval && this.state.selectedclients.length > 0) ||
-      (modifiedList && this.state.selectedclients.length > 0) ||
-      (modifiedList && this.state.needsApproval === false && this.state.selectedclients.length === 0) ) {
+    if ((this.state.selectedclients.length > 0) || (modifiedList && this.state.selectedclients.length > 0)) {
       this.setState({ updatedInfoModal: true });
     } else {
       this.setState({ updatedInfoModal: false });
@@ -301,23 +269,6 @@ export const ConnectDatasetModal = hh(class ConnectDatasetModal extends Componen
             ]),
 
           ]),
-
-          div({ className: 'form-group row', style: { 'margin': '10px 0' } }, [
-            div({ className: 'checkbox dataset-label' }, [
-              input({ id: 'chk_needsApproval',
-                onChange: this.handleNeedsApprovalChange,
-                checked: this.state.needsApproval,
-                type: 'checkbox',
-                className: 'checkbox-inline',
-                name: 'needsApproval'
-              }),
-              label({
-                id: 'lbl_needsApproval',
-                className: 'regular-checkbox dataset-label',
-                htmlFor: 'chk_needsApproval'
-              }, ['Needs Data Owner\'s approval']),
-            ]),
-          ]),
         ]),
         div({ isRendered: this.state.showError}, [
           Alert({ id: 'modal', type: 'danger', title: 'Server Error', description: 'There was an error creating the associations.'})