[DUOS-2662][DUOS-2663][DUOS-2664][DUOS-2665][DUOS-2666][DUOS-2667] Support the branded data libraries

package.json

@@ -8,6 +8,7 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.14.9",
     "@mui/material": "5.14.10",
+    "@mui/utils": "5.14.10",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1",
     "axios": "^1.5.0",

src/Routes.js

@@ -97,7 +97,11 @@ const Routes = (props) => (
     <AuthenticatedRoute path="/admin_manage_dar_collections/" component={AdminManageDarCollections} props={props} rolesAllowed={[USER_ROLES.admin]} />
     {checkEnv(envGroups.NON_STAGING) && <AuthenticatedRoute path="/dataset_catalog/:variant" component={CustomDatasetCatalog} props={props} rolesAllowed={[USER_ROLES.researcher]}/>}
     <AuthenticatedRoute path="/dataset_catalog" component={DatasetCatalog} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
-    <AuthenticatedRoute path="/dataset_search" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path="/datalibrary" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path="/datalibrary_broad" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path="/datalibrary_mgb" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path="/datalibrary_elwazi" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path="/datalibrary_myinstitution" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
     <AuthenticatedRoute path="/dataset_statistics/:datasetId" component={DatasetStatistics} props={props}
       rolesAllowed={[USER_ROLES.all]} />
     <AuthenticatedRoute path="/dac_datasets" component={DACDatasets} props={props} rolesAllowed={[USER_ROLES.chairperson]} />

src/components/DuosHeader.js

@@ -131,6 +131,7 @@ export const headerTabsConfig = [
     search: 'dataset_catalog',
     children: [
       { label: 'Data Catalog', link: '/dataset_catalog' },
+      { label: 'Data Library', link: '/datalibrary' },
       { label: 'DAR Requests', link: '/researcher_console' },
       { label: 'Submitted Datasets', link: '/dataset_submissions', isRenderedForUser: (user) => user?.isDataSubmitter }
     ],

src/components/TableHeaderSection.js

@@ -1,3 +1,4 @@
+import { isNil } from 'lodash';
 import { Styles } from '../libs/theme';
 import { div, img } from 'react-hyperscript-helpers';
 
@@ -8,11 +9,14 @@ export const TableHeaderSection = (props) => {
     div(
       { className: 'left-header-section', style: Styles.LEFT_HEADER_SECTION },
       [
-        div({ style: Styles.ICON_CONTAINER }, [
+        !isNil(icon) && div({ style: Styles.ICON_CONTAINER }, [
           img({
             id: 'dataset-icon',
             src: icon,
-            style: Styles.HEADER_IMG,
+            style: {
+              width: icon.width,
+              height: icon.height,
+            }
           }),
         ]),
         div({ style: { ...Styles.HEADER_CONTAINER, width: '120%' } }, [

src/components/data_search/DatasetSearchTable.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Button } from '@mui/material';
 import { useEffect, useState } from 'react';
-import datasetIcon from '../../logo.svg';
 import { groupBy, isEmpty } from 'lodash';
 import CollapsibleTable from '../CollapsibleTable';
 import TableHeaderSection from '../TableHeaderSection';
@@ -31,7 +30,7 @@ const datasetTableHeader = [
 ];
 
 export const DatasetSearchTable = (props) => {
-  const { datasets, history } = props;
+  const { datasets, history, icon, title } = props;
   const [filters, setFilters] = useState([]);
   const [filtered, setFiltered] = useState([]);
   const [tableData, setTableData] = useState({});
@@ -183,7 +182,7 @@ export const DatasetSearchTable = (props) => {
 
   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" />
+      <TableHeaderSection icon={icon} title={title} 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} />