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
hubmapconsortium · Sep 13, 2021 · 7f33c4d · 7f33c4d
1 parent f1574e2
commit 7f33c4d
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 61 deletions.
diff --git a/CHANGELOG-previews-resources.md b/CHANGELOG-previews-resources.md
@@ -0,0 +1 @@
+- Change "Previews" menu to "Resources".
diff --git a/...s/components/Header/CCFLinks/CCFLinks.jsx → ...eader/AtlasToolsLinks/AtlasToolsLinks.jsx b/...s/components/Header/CCFLinks/CCFLinks.jsx → ...eader/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) {
       <DropdownLink href="https://hubmapconsortium.github.io/ccf-ui/rui/" isIndented={isIndented}>
         Registration User Interface (RUI)
       </DropdownLink>
+      <StyledDivider />
+      <DropdownLink href="https://azimuth.hubmapconsortium.org/" isIndented={isIndented}>
+        Azimuth: Reference-based single cell mapping
+      </DropdownLink>
     </>
   );
 }
 
-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
@@ -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
diff --git 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!
           */}
 
-          <Dropdown title="Previews" menuListId="preview-options">
-            <PreviewLinks />
+          <Dropdown title="Resources">
+            <ResourceLinks />
           </Dropdown>
-          <Dropdown title="Atlas & Tools" menuListId="ccf-options">
-            <CCFLinks />
-            <StyledDivider />
-            <DropdownLink href="https://azimuth.hubmapconsortium.org/">
-              Azimuth: Reference-based single cell mapping
-            </DropdownLink>
+          <Dropdown title="Atlas & Tools">
+            <AtlasToolsLinks />
           </Dropdown>
-          <Dropdown title="Documentation" menuListId="documentation-options">
+          <Dropdown title="Documentation">
             <DocumentationLinks />
           </Dropdown>
           <HeaderButton component={Link} href="/my-lists">

diff --git 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 (
+    <>
+      <DropdownMenuItem onClick={toggle}>
+        {label}
+        {isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
+      </DropdownMenuItem>
+      {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 (
     <>
       <IconButton color="inherit" aria-describedby="main-menu" aria-haspopup="true" onClick={toggle}>
-        {open ? <CloseIcon /> : <MenuIcon />}
+        {isOpen ? <CloseIcon /> : <MenuIcon />}
       </IconButton>
-      <WidePopper id="main-menu" open={open} anchorEl={anchorRef.current}>
+      <WidePopper id="main-menu" open={isOpen} anchorEl={anchorRef.current}>
         <WidePaper>
           <MenuList>
             {['Donor', 'Sample', 'Dataset'].map((type) => (
               <DropdownLink key={type} href={`/search?entity_type[0]=${type}`}>{`${type}s`}</DropdownLink>
             ))}
             <DropdownLink href="/collections">Collections</DropdownLink>
-
-            {/*
-                If this changes, remember to update HeaderContent.jsx!
-            */}
-
-            <DropdownMenuItem onClick={togglePreview}>
-              Previews
-              {openPreview ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
-            </DropdownMenuItem>
-            {openPreview && <PreviewLinks isIndented />}
-
-            <DropdownMenuItem onClick={toggleCCF}>
-              Atlas & Tools
-              {openCCF ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
-            </DropdownMenuItem>
-            {openCCF && <CCFLinks isIndented />}
-
-            <DropdownMenuItem onClick={toggleDocumentation}>
-              Documentation
-              {openDocumentation ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
-            </DropdownMenuItem>
-            {openDocumentation && <DocumentationLinks isIndented />}
+            {[
+              ['Resources', ResourceLinks],
+              ['Atlas & Tools', AtlasToolsLinks],
+              ['Documentation', DocumentationLinks],
+            ].map(([label, Component]) => (
+              <DropdownContainer label={label}>
+                <Component isIndented />
+              </DropdownContainer>
+            ))}
           </MenuList>
           <DropdownLink href="/my-lists">My Lists</DropdownLink>
         </WidePaper>

diff --git a/context/app/static/js/components/Header/PreviewLinks/index.js b/context/app/static/js/components/Header/PreviewLinks/index.js
diff --git a/...ents/Header/PreviewLinks/PreviewLinks.jsx → ...ts/Header/ResourceLinks/ResourceLinks.jsx b/...ents/Header/PreviewLinks/PreviewLinks.jsx → ...ts/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 (
     <>
+      {/* <DropdownLink href="/publication" isIndented={isIndented}>
+        Publications
+      </DropdownLink>
+      <StyledDivider /> */}
       {['Multimodal Molecular Imaging Data', 'Cell Type Annotations'].map((previewName) => (
         <DropdownLink
           key={previewName}
           href={`/preview/${previewName.toLowerCase().replace(/\W+/g, '-')}`}
           isIndented={isIndented}
         >
-          {previewName}
+          Preview: {previewName}
         </DropdownLink>
       ))}
     </>
   );
 }
 
-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
@@ -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
@@ -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
@@ -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');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import AtlasToolsLinks from './AtlasToolsLinks';

		export default AtlasToolsLinks;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ResourceLinks from './ResourceLinks';

		export default ResourceLinks;