From 7f33c4d3b197a3a8c1b29ac04e65255a3a8ca2f8 Mon Sep 17 00:00:00 2001 From: Chuck McCallum Date: Mon, 13 Sep 2021 16:14:42 -0400 Subject: [PATCH] Mccalluc/previews to resources (#2121) * "Previews" -> "Resources" * changelog * menus in sync! * remove menuListId... does anything break? * Gratuitous factor out * comment out publications until they are ready * Helper component for fold down menus: state is internal * fix tests... with a hack --- CHANGELOG-previews-resources.md | 1 + .../AtlasToolsLinks.jsx} | 13 ++-- .../Header/AtlasToolsLinks/index.js | 3 + .../js/components/Header/CCFLinks/index.js | 3 - .../Header/HeaderContent/HeaderContent.jsx | 21 +++---- .../static/js/components/Header/Menu/Menu.jsx | 62 +++++++++---------- .../components/Header/PreviewLinks/index.js | 3 - .../ResourceLinks.jsx} | 15 +++-- .../components/Header/ResourceLinks/index.js | 3 + .../integration/file-based-routes.spec.js | 5 +- .../cypress/integration/portal-ui.spec.js | 4 ++ 11 files changed, 72 insertions(+), 61 deletions(-) create mode 100644 CHANGELOG-previews-resources.md rename context/app/static/js/components/Header/{CCFLinks/CCFLinks.jsx => AtlasToolsLinks/AtlasToolsLinks.jsx} (69%) create mode 100644 context/app/static/js/components/Header/AtlasToolsLinks/index.js delete mode 100644 context/app/static/js/components/Header/CCFLinks/index.js delete mode 100644 context/app/static/js/components/Header/PreviewLinks/index.js rename context/app/static/js/components/Header/{PreviewLinks/PreviewLinks.jsx => ResourceLinks/ResourceLinks.jsx} (59%) create mode 100644 context/app/static/js/components/Header/ResourceLinks/index.js diff --git a/CHANGELOG-previews-resources.md b/CHANGELOG-previews-resources.md new file mode 100644 index 0000000000..0704bc3b63 --- /dev/null +++ b/CHANGELOG-previews-resources.md @@ -0,0 +1 @@ +- Change "Previews" menu to "Resources". diff --git a/context/app/static/js/components/Header/CCFLinks/CCFLinks.jsx b/context/app/static/js/components/Header/AtlasToolsLinks/AtlasToolsLinks.jsx similarity index 69% rename from context/app/static/js/components/Header/CCFLinks/CCFLinks.jsx rename to context/app/static/js/components/Header/AtlasToolsLinks/AtlasToolsLinks.jsx index 1fe04f9acd..1b32d77697 100644 --- a/context/app/static/js/components/Header/CCFLinks/CCFLinks.jsx +++ b/context/app/static/js/components/Header/AtlasToolsLinks/AtlasToolsLinks.jsx @@ -2,8 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import DropdownLink from '../DropdownLink'; +import { StyledDivider } from '../HeaderContent/style'; -function CCFLinks(props) { +function AtlasToolsLinks(props) { const { isIndented } = props; return ( <> @@ -19,16 +20,20 @@ function CCFLinks(props) { Registration User Interface (RUI) + + + Azimuth: Reference-based single cell mapping + ); } -CCFLinks.propTypes = { +AtlasToolsLinks.propTypes = { isIndented: PropTypes.bool, }; -CCFLinks.defaultProps = { +AtlasToolsLinks.defaultProps = { isIndented: false, }; -export default CCFLinks; +export default AtlasToolsLinks; diff --git a/context/app/static/js/components/Header/AtlasToolsLinks/index.js b/context/app/static/js/components/Header/AtlasToolsLinks/index.js new file mode 100644 index 0000000000..715683b409 --- /dev/null +++ b/context/app/static/js/components/Header/AtlasToolsLinks/index.js @@ -0,0 +1,3 @@ +import AtlasToolsLinks from './AtlasToolsLinks'; + +export default AtlasToolsLinks; diff --git a/context/app/static/js/components/Header/CCFLinks/index.js b/context/app/static/js/components/Header/CCFLinks/index.js deleted file mode 100644 index 479deab139..0000000000 --- a/context/app/static/js/components/Header/CCFLinks/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import CCFLinks from './CCFLinks'; - -export default CCFLinks; diff --git a/context/app/static/js/components/Header/HeaderContent/HeaderContent.jsx b/context/app/static/js/components/Header/HeaderContent/HeaderContent.jsx index 57861fa146..2e42e46692 100644 --- a/context/app/static/js/components/Header/HeaderContent/HeaderContent.jsx +++ b/context/app/static/js/components/Header/HeaderContent/HeaderContent.jsx @@ -5,13 +5,12 @@ import { useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import Menu from '../Menu'; -import PreviewLinks from '../PreviewLinks'; +import ResourceLinks from '../ResourceLinks'; import Dropdown from '../Dropdown'; import LoginButton from '../LoginButton'; -import CCFLinks from '../CCFLinks'; +import AtlasToolsLinks from '../AtlasToolsLinks'; import DocumentationLinks from '../DocumentationLinks'; -import DropdownLink from '../DropdownLink'; -import { HubmapLogo, Spacer, HeaderButton, FlexNoWrap, StyledDivider } from './style'; +import { HubmapLogo, Spacer, HeaderButton, FlexNoWrap } from './style'; function HeaderContent({ anchorRef }) { const theme = useTheme(); @@ -41,17 +40,13 @@ function HeaderContent({ anchorRef }) { If this changes, remember to update Menu.jsx! */} - - + + - - - - - Azimuth: Reference-based single cell mapping - + + - + diff --git a/context/app/static/js/components/Header/Menu/Menu.jsx b/context/app/static/js/components/Header/Menu/Menu.jsx index 67cc4422c8..4b05cc80e5 100644 --- a/context/app/static/js/components/Header/Menu/Menu.jsx +++ b/context/app/static/js/components/Header/Menu/Menu.jsx @@ -7,53 +7,53 @@ import MenuList from '@material-ui/core/MenuList'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDownRounded'; import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUpRounded'; -import PreviewLinks from '../PreviewLinks'; -import CCFLinks from '../CCFLinks'; -import DocumentationLinks from '../DocumentationLinks'; import { WidePopper, WidePaper, DropdownMenuItem } from './style'; import DropdownLink from '../DropdownLink'; +import ResourceLinks from '../ResourceLinks'; +import AtlasToolsLinks from '../AtlasToolsLinks'; +import DocumentationLinks from '../DocumentationLinks'; + +function DropdownContainer(props) { + const { label, children } = props; + const [isOpen, toggle] = useReducer((v) => !v, false); + + return ( + <> + + {label} + {isOpen ? : } + + {isOpen && children} + + ); +} + function Menu(props) { - const [open, toggle] = useReducer((v) => !v, false); - const [openPreview, togglePreview] = useReducer((v) => !v, false); - const [openCCF, toggleCCF] = useReducer((v) => !v, false); - const [openDocumentation, toggleDocumentation] = useReducer((v) => !v, false); + const [isOpen, toggle] = useReducer((v) => !v, false); const { anchorRef } = props; return ( <> - {open ? : } + {isOpen ? : } - + {['Donor', 'Sample', 'Dataset'].map((type) => ( {`${type}s`} ))} Collections - - {/* - If this changes, remember to update HeaderContent.jsx! - */} - - - Previews - {openPreview ? : } - - {openPreview && } - - - Atlas & Tools - {openCCF ? : } - - {openCCF && } - - - Documentation - {openDocumentation ? : } - - {openDocumentation && } + {[ + ['Resources', ResourceLinks], + ['Atlas & Tools', AtlasToolsLinks], + ['Documentation', DocumentationLinks], + ].map(([label, Component]) => ( + + + + ))} My Lists diff --git a/context/app/static/js/components/Header/PreviewLinks/index.js b/context/app/static/js/components/Header/PreviewLinks/index.js deleted file mode 100644 index b25a9a5857..0000000000 --- a/context/app/static/js/components/Header/PreviewLinks/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import PreviewLinks from './PreviewLinks'; - -export default PreviewLinks; diff --git a/context/app/static/js/components/Header/PreviewLinks/PreviewLinks.jsx b/context/app/static/js/components/Header/ResourceLinks/ResourceLinks.jsx similarity index 59% rename from context/app/static/js/components/Header/PreviewLinks/PreviewLinks.jsx rename to context/app/static/js/components/Header/ResourceLinks/ResourceLinks.jsx index ee8d4457c8..e889bbe5c5 100644 --- a/context/app/static/js/components/Header/PreviewLinks/PreviewLinks.jsx +++ b/context/app/static/js/components/Header/ResourceLinks/ResourceLinks.jsx @@ -1,30 +1,35 @@ import React from 'react'; import PropTypes from 'prop-types'; import DropdownLink from '../DropdownLink'; +// import { StyledDivider } from '../HeaderContent/style'; -function PreviewLinks(props) { +function ResourceLinks(props) { const { isIndented } = props; return ( <> + {/* + Publications + + */} {['Multimodal Molecular Imaging Data', 'Cell Type Annotations'].map((previewName) => ( - {previewName} + Preview: {previewName} ))} ); } -PreviewLinks.propTypes = { +ResourceLinks.propTypes = { isIndented: PropTypes.bool, }; -PreviewLinks.defaultProps = { +ResourceLinks.defaultProps = { isIndented: false, }; -export default React.memo(PreviewLinks); +export default React.memo(ResourceLinks); diff --git a/context/app/static/js/components/Header/ResourceLinks/index.js b/context/app/static/js/components/Header/ResourceLinks/index.js new file mode 100644 index 0000000000..ae6610e1c9 --- /dev/null +++ b/context/app/static/js/components/Header/ResourceLinks/index.js @@ -0,0 +1,3 @@ +import ResourceLinks from './ResourceLinks'; + +export default ResourceLinks; diff --git a/end-to-end/cypress/integration/file-based-routes.spec.js b/end-to-end/cypress/integration/file-based-routes.spec.js index d2320172d2..a1576e70b9 100644 --- a/end-to-end/cypress/integration/file-based-routes.spec.js +++ b/end-to-end/cypress/integration/file-based-routes.spec.js @@ -5,7 +5,7 @@ describe('file-based-routes', () => { }) it('has working preview pages', () => { cy.visit('/'); - cy.contains('Previews').click(); + cy.contains('Resources').click(); cy.contains('Cell Type Annotations').click(); cy.contains('HuBMAP Data Portal Previews demonstrate functionality'); cy.contains('Rahul Satija'); @@ -24,7 +24,8 @@ describe('file-based-routes', () => { // TODO: When we link to it from the menu, follow the link instead. cy.visit('/publication'); cy.contains('Blue B. Lake'); - cy.contains('An atlas of healthy and injured cell states').click(); + // be.visible is a hack: https://github.com/cypress-io/cypress/issues/695 + cy.contains('An atlas of healthy and injured cell states').should('be.visible').click(); cy.contains('Understanding kidney disease relies upon'); cy.contains('www.biorxiv.org/content/10.1101/2021.07.28.454201'); cy.contains('Blue B. Lake, Rajasree Menon'); diff --git a/end-to-end/cypress/integration/portal-ui.spec.js b/end-to-end/cypress/integration/portal-ui.spec.js index 7e8d478aad..a4f8415611 100644 --- a/end-to-end/cypress/integration/portal-ui.spec.js +++ b/end-to-end/cypress/integration/portal-ui.spec.js @@ -23,6 +23,10 @@ describe('portal-ui', () => { cy.contains('Datasets'); // CCF-UI cy.contains('Atlas & Tools'); + // Resources + cy.contains('Resources'); + + // Static pages are tested separately. // login cy.contains('login');