Merge pull request #4498 from broadinstitute/conditional-simple-header

correctly show conditional report pages in header

ui/pages/DataManagement/DataManagement.jsx

@@ -5,7 +5,6 @@ import { Route, Switch } from 'react-router-dom'
 
 import { getUser, getElasticsearchEnabled } from 'redux/selectors'
 import { Error404, Error401 } from 'shared/components/page/Errors'
-import { SimplePageHeader } from 'shared/components/page/PageHeaderLayout'
 
 import AddIGV from './components/AddIGV'
 import ElasticsearchStatus from './components/ElasticsearchStatus'
@@ -58,16 +57,10 @@ const dataManagementPages = (isDataManager, elasticsearchEnabled) => {
   return elasticsearchEnabled ? ES_DATA_MANAGEMENT_PAGES : HAIL_SEARCH_DATA_MANAGEMENT_PAGES
 }
 
-const mapPageHeaderStateToProps = state => ({
-  pages: dataManagementPages(getUser(state).isDataManager, getElasticsearchEnabled(state)),
-})
-
-export const DataManagementPageHeader = connect(mapPageHeaderStateToProps)(SimplePageHeader)
-
-const DataManagement = ({ match, user, elasticsearchEnabled }) => (
+const DataManagement = ({ match, user, pages }) => (
   (user.isDataManager || user.isPm) ? (
     <Switch>
-      {dataManagementPages(user.isDataManager, elasticsearchEnabled).map(({ path, params, component }) => (
+      {pages.map(({ path, params, component }) => (
         <Route key={path} path={`${match.url}/${path}${params || ''}`} component={component} />))}
       <Route exact path={match.url} component={null} />
       <Route component={Error404} />
@@ -78,12 +71,15 @@ const DataManagement = ({ match, user, elasticsearchEnabled }) => (
 DataManagement.propTypes = {
   user: PropTypes.object,
   match: PropTypes.object,
-  elasticsearchEnabled: PropTypes.bool,
+  pages: PropTypes.arrayOf(PropTypes.object),
 }
 
-const mapStateToProps = state => ({
-  user: getUser(state),
-  elasticsearchEnabled: getElasticsearchEnabled(state),
-})
+export const mapStateToProps = (state) => {
+  const user = getUser(state)
+  return {
+    user,
+    pages: dataManagementPages(user.isDataManager, getElasticsearchEnabled(state)),
+  }
+}
 
 export default connect(mapStateToProps)(DataManagement)

ui/pages/Report/Report.jsx

@@ -26,10 +26,10 @@ export const REPORT_PAGES = [
   ...LOCAL_REPORT_PAGES,
 ]
 
-const Report = ({ match, user }) => (
+const Report = ({ match, user, pages }) => (
   (user.isAnalyst || user.isPm) ? (
     <Switch>
-      {(user.isAnalyst ? REPORT_PAGES : LOCAL_REPORT_PAGES).map(
+      {pages.map(
         ({ path, params, component }) => <Route key={path} path={`${match.url}/${path}${params || ''}`} component={component} />,
       )}
       <Route path={match.url} component={null} />
@@ -41,10 +41,15 @@ const Report = ({ match, user }) => (
 Report.propTypes = {
   user: PropTypes.object,
   match: PropTypes.object,
+  pages: PropTypes.arrayOf(PropTypes.object),
 }
 
-const mapStateToProps = state => ({
-  user: getUser(state),
-})
+export const mapStateToProps = (state) => {
+  const user = getUser(state)
+  return {
+    user,
+    pages: user.isAnalyst ? REPORT_PAGES : LOCAL_REPORT_PAGES,
+  }
+}
 
 export default connect(mapStateToProps)(Report)

ui/shared/components/page/PageHeader.jsx

@@ -5,8 +5,8 @@ import { Route, Switch } from 'react-router-dom'
 
 import ProjectPageHeader from 'pages/Project/components/PageHeader'
 import VariantSearchPageHeader from 'pages/Search/components/PageHeader'
-import { DataManagementPageHeader } from 'pages/DataManagement/DataManagement'
-import { REPORT_PAGES } from 'pages/Report/Report'
+import { mapStateToProps as mapDataManagementStateToProps } from 'pages/DataManagement/DataManagement'
+import { mapStateToProps as mapReportStateToProps } from 'pages/Report/Report'
 import { SummaryDataPageHeader } from 'pages/SummaryData/SummaryData'
 import { getGenesById } from 'redux/selectors'
 import { PUBLIC_PAGES } from 'shared/utils/constants'
@@ -25,11 +25,11 @@ BaseGenePageHeader.propTypes = {
   match: PropTypes.object,
 }
 
-const mapStateToProps = (state, ownProps) => ({
+const mapGeneStateToProps = (state, ownProps) => ({
   gene: getGenesById(state)[ownProps.match.params.geneId],
 })
 
-export const GenePageHeader = connect(mapStateToProps)(BaseGenePageHeader)
+export const GenePageHeader = connect(mapGeneStateToProps)(BaseGenePageHeader)
 
 const NO_HEADER_PAGES = [
   '/dashboard', '/create_project_from_workspace', '/workspace', '/users', '/login', '/accept_policies', ...PUBLIC_PAGES,
@@ -41,13 +41,13 @@ const NO_HEADER_PAGE_TITLES = {
 }
 
 const SIMPLE_HEADER_PAGES = [
-  { page: 'data_management', component: DataManagementPageHeader },
-  { page: 'report', pages: REPORT_PAGES },
-].map(({ page, component, ...props }) => ({
+  { page: 'data_management', mapStateToProps: mapDataManagementStateToProps },
+  { page: 'report', mapStateToProps: mapReportStateToProps },
+].map(({ page, mapStateToProps, ...props }) => ({
   key: page,
   path: `/${page}/:subPage?`,
   component: ({ match }) => React.createElement(
-    component || SimplePageHeader, { page, subPage: match.params.subPage, ...props },
+    connect(mapStateToProps)(SimplePageHeader), { page, subPage: match.params.subPage, ...props },
   ),
 }))