Mccalluc/previews to resources

CHANGELOG-previews-resources.md

@@ -0,0 +1 @@
+- Change "Previews" menu to "Resources".

context/app/static/js/components/Header/CCFLinks/CCFLinks.jsx → 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) {
       <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;

context/app/static/js/components/Header/AtlasToolsLinks/index.js

@@ -0,0 +1,3 @@
+import AtlasToolsLinks from './AtlasToolsLinks';
+
+export default AtlasToolsLinks;

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">

context/app/static/js/components/Header/Menu/Menu.jsx

@@ -7,16 +7,16 @@ 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 ResourceLinks from '../ResourceLinks';
 import DocumentationLinks from '../DocumentationLinks';
 import { WidePopper, WidePaper, DropdownMenuItem } from './style';
 import DropdownLink from '../DropdownLink';
+import AtlasToolsLinks from '../AtlasToolsLinks';
 
 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 [openResources, toggleResources] = useReducer((v) => !v, false);
+  const [openAtlasTools, toggleAtlasTools] = useReducer((v) => !v, false);
   const [openDocumentation, toggleDocumentation] = useReducer((v) => !v, false);
   const { anchorRef } = props;
 
@@ -32,28 +32,19 @@ function Menu(props) {
               <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 />}
+            {[
+              [toggleResources, 'Resources', openResources, ResourceLinks],
+              [toggleAtlasTools, 'Atlas & Tools', openAtlasTools, AtlasToolsLinks],
+              [toggleDocumentation, 'Documentation', openDocumentation, DocumentationLinks],
+            ].map(([onClick, label, isOpen, Component]) => (
+              <>
+                <DropdownMenuItem onClick={onClick}>
+                  {label}
+                  {isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
+                </DropdownMenuItem>
+                {isOpen && <Component isIndented />}
+              </>
+            ))}
           </MenuList>
           <DropdownLink href="/my-lists">My Lists</DropdownLink>
         </WidePaper>

context/app/static/js/components/Header/PreviewLinks/PreviewLinks.jsx → 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 (
     <>
+      {/* <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);

context/app/static/js/components/Header/ResourceLinks/index.js

@@ -0,0 +1,3 @@
+import ResourceLinks from './ResourceLinks';
+
+export default ResourceLinks;

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');