make section H1s linkable

frontend/package.json

@@ -25,6 +25,7 @@
     "inherits": "^2.0.3",
     "locale": "^0.1.0",
     "lodash.find": "^4.6.0",
+    "lodash.flatten": "^4.4.0",
     "lodash.get": "^4.4.2",
     "lodash.isempty": "^4.4.0",
     "lodash.template": "^4.4.0",

frontend/src/components/header/index.js

@@ -70,6 +70,11 @@ const arrowPosition = {
   right: '10%'
 };
 
+const EmptyButton = styled.button`
+  background: none
+  border: none
+`;
+
 const Header = ({
   account = {},
   tooltip = false,
@@ -114,7 +119,7 @@ const Header = ({
           >
             <StyledProfileWrapper>
               <StyledAvatarWrapper toggled={tooltip}>
-                <a onClick={handleToggleClick}>
+                <EmptyButton onClick={handleToggleClick}>
                   <StyledName>{account.name}</StyledName>
                   <Avatar
                     alt={account.name}
@@ -124,7 +129,7 @@ const Header = ({
                       marginLeft: '12px'
                     }}
                   />
-                </a>
+                </EmptyButton>
               </StyledAvatarWrapper>
               {tooltipComponent}
             </StyledProfileWrapper>
@@ -137,8 +142,8 @@ const Header = ({
 
 Header.propTypes = {
   account: PropTypes.account,
-  tooltip: React.PropTypes.boolean,
-  handleToggle: React.PropTypes.func
+  handleToggle: React.PropTypes.func,
+  tooltip: React.PropTypes.bool
 };
 
 module.exports = Header;

frontend/src/components/section/index.js

@@ -1,9 +1,11 @@
+const flatten = require('lodash.flatten');
 const React = require('react');
 const ReactIntl = require('react-intl');
 const ReactRouter = require('react-router');
 
 const H1 = require('@ui/components/h1');
 const Li = require('@ui/components/horizontal-list/li');
+const PropTypes = require('@root/prop-types');
 const Ul = require('@ui/components/horizontal-list/ul');
 
 const {
@@ -17,7 +19,7 @@ const {
 const Section = ({
   children,
   links = [],
-  name = ''
+  name = []
 }) => {
   const navLinks = links.map((link) => (
     <Li key={link.name}>
@@ -27,9 +29,28 @@ const Section = ({
     </Li>
   ));
 
+  const nameLinks = flatten(name.map((part, i) => {
+    const link = (
+      <Link key={part.pathname} to={part.pathname}>
+        {part.name}
+      </Link>
+    );
+
+    const slash = (
+      <span key={`${part.pathname}${i}`}> / </span>
+    );
+
+    return (i === 0) ? link : [
+      slash,
+      link
+    ];
+  }));
+
   return (
     <div>
-      <H1>{name}</H1>
+      <H1>
+        {nameLinks}
+      </H1>
       <Ul>
         {navLinks}
       </Ul>
@@ -40,13 +61,8 @@ const Section = ({
 
 Section.propTypes = {
   children: React.PropTypes.node,
-  links: React.PropTypes.arrayOf(
-    React.PropTypes.shape({
-      name: React.PropTypes.string,
-      pathname: React.PropTypes.string
-    })
-  ),
-  name: React.PropTypes.string
+  links: React.PropTypes.arrayOf(PropTypes.link),
+  name: React.PropTypes.arrayOf(PropTypes.link)
 };
 
 module.exports = Section;

frontend/src/containers/header/index.js

@@ -1,10 +1,8 @@
-const React = require('react');
 const ReactRedux = require('react-redux');
 
 const selectors = require('@state/selectors');
 const actions = require('@state/actions');
 const Header = require('@components/header');
-const PropTypes = require('@root/prop-types');
 
 const {
   connect
@@ -19,24 +17,6 @@ const {
   toggleHeaderTooltip
 } = actions;
 
-const Component = ({
-  account = {},
-  tooltip = false,
-  handleToggle
-}) => (
-  <Header
-    account={account}
-    tooltip={tooltip}
-    handleToggle={handleToggle}
-  />
-);
-
-Component.propTypes = {
-  account: PropTypes.account,
-  tooltip: React.PropTypes.bool,
-  handleToggle: React.PropTypes.func
-};
-
 const mapStateToProps = (state, ownProps) => ({
   account: accountSelector(state),
   ...accountUISelector(state)

frontend/src/containers/org/section.js

@@ -19,13 +19,18 @@ const OrgSection = ({
   org = {},
   sections = []
 }) => {
-  const links = sections.map((name) => ({
+  const navLinks = sections.map((name) => ({
     pathname: `/${org.id}/${name}`,
     name
   }));
 
+  const nameLinks = [{
+    pathname: `/${org.id}`,
+    name: org.name
+  }];
+
   return (
-    <Section links={links} name={org.name}>
+    <Section links={navLinks} name={nameLinks}>
       {children}
     </Section>
   );

frontend/src/containers/project/section.js

@@ -21,13 +21,11 @@ const OrgSection = ({
   project = {},
   sections = []
 }) => {
-  const name = `${org.name} / ${project.name}`;
-
   const pathname = (props) => (
     `/${props.org}/projects/${props.project}/${props.section}`
   );
 
-  const links = sections.map((name) => ({
+  const navLinks = sections.map((name) => ({
     pathname: pathname({
       org: org.id,
       project: project.id,
@@ -36,8 +34,16 @@ const OrgSection = ({
     name
   }));
 
+  const nameLinks = [{
+    pathname: `/${org.id}`,
+    name: org.name
+  }, {
+    pathname: `/${org.id}/projects/${project.id}`,
+    name: project.name
+  }];
+
   return (
-    <Section links={links} name={name}>
+    <Section links={navLinks} name={nameLinks}>
       {children}
     </Section>
   );

frontend/src/containers/service/index.js

@@ -40,8 +40,6 @@ const Service = ({
   sections = [],
   service = {}
 }) => {
-  const name = `${org.name} / ${project.name} / ${service.name}`;
-
   const pathname = ({
     org,
     project,
@@ -51,7 +49,14 @@ const Service = ({
     `/${org}/projects/${project}/services/${service}/${section}`
   );
 
-  const links = sections.map((name) => ({
+  const redirectHref = pathname({
+    org: org.id,
+    project: project.id,
+    service: service.id,
+    section: 'summary'
+  });
+
+  const navLinks = sections.map((name) => ({
     pathname: pathname({
       org: org.id,
       project: project.id,
@@ -61,6 +66,17 @@ const Service = ({
     name
   }));
 
+  const nameLinks = [{
+    pathname: `/${org.id}`,
+    name: org.name
+  }, {
+    pathname: `/${org.id}/projects/${project.id}`,
+    name: project.name
+  }, {
+    pathname: redirectHref,
+    name: service.name
+  }];
+
   const navMatches = sections.map((name) => (
     <Match
       component={SectionComponents[name]}
@@ -69,19 +85,13 @@ const Service = ({
     />
   ));
 
-  const redirectHref = pathname({
-    org: org.id,
-    project: project.id,
-    service: service.id,
-    section: 'summary'
-  });
 
   const missMatch = !sections.length ? null : (
     <Miss component={Redirect(redirectHref)} />
   );
 
   return (
-    <Section links={links} name={name}>
+    <Section links={navLinks} name={nameLinks}>
       {navMatches}
       {missMatch}
     </Section>

frontend/src/prop-types.js

@@ -10,6 +10,11 @@ const Account = React.PropTypes.shape({
   ...BaseObject
 });
 
+const Link = React.PropTypes.shape({
+  name: React.PropTypes.string,
+  pathname: React.PropTypes.string
+});
+
 const Org = React.PropTypes.shape({
   ...BaseObject,
   owner: React.PropTypes.string
@@ -29,6 +34,7 @@ const Sections = React.PropTypes.arrayOf(
 
 module.exports = {
   account: Account,
+  link: Link,
   org: Org,
   project: Project,
   sections: Sections,

frontend/yarn.lock

@@ -3529,7 +3529,7 @@ lodash.find@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
 
-lodash.flatten@^4.2.0:
+lodash.flatten, lodash.flatten@^4.2.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"