diff --git a/frontend/package.json b/frontend/package.json index 6fd5a270..55f977fa 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index 058ea925..dd1de46d 100644 --- a/frontend/src/components/header/index.js +++ b/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 = ({ > - + {account.name} - + {tooltipComponent} @@ -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; diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js index f018d2a9..4ccfde16 100644 --- a/frontend/src/components/section/index.js +++ b/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) => (
  • @@ -27,9 +29,28 @@ const Section = ({
    • )); + const nameLinks = flatten(name.map((part, i) => { + const link = ( + + {part.name} + + ); + + const slash = ( + / + ); + + return (i === 0) ? link : [ + slash, + link + ]; + })); + return (
    -

    {name}

    +

    + {nameLinks} +

    @@ -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; diff --git a/frontend/src/containers/header/index.js b/frontend/src/containers/header/index.js index 705eb1cb..76b6d143 100644 --- a/frontend/src/containers/header/index.js +++ b/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 -}) => ( -
    -); - -Component.propTypes = { - account: PropTypes.account, - tooltip: React.PropTypes.bool, - handleToggle: React.PropTypes.func -}; - const mapStateToProps = (state, ownProps) => ({ account: accountSelector(state), ...accountUISelector(state) diff --git a/frontend/src/containers/org/section.js b/frontend/src/containers/org/section.js index 5750871e..22b88bbd 100644 --- a/frontend/src/containers/org/section.js +++ b/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 ( -
    +
    {children}
    ); diff --git a/frontend/src/containers/project/section.js b/frontend/src/containers/project/section.js index ef196fe2..2362a783 100644 --- a/frontend/src/containers/project/section.js +++ b/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 ( -
    +
    {children}
    ); diff --git a/frontend/src/containers/service/index.js b/frontend/src/containers/service/index.js index 6e920447..dcf4ff6c 100644 --- a/frontend/src/containers/service/index.js +++ b/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) => ( )); - const redirectHref = pathname({ - org: org.id, - project: project.id, - service: service.id, - section: 'summary' - }); const missMatch = !sections.length ? null : ( ); return ( -
    +
    {navMatches} {missMatch}
    diff --git a/frontend/src/prop-types.js b/frontend/src/prop-types.js index 3b98f5fa..1a5b45ef 100644 --- a/frontend/src/prop-types.js +++ b/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, diff --git a/frontend/yarn.lock b/frontend/yarn.lock index be8e6ed9..f28cf789 100644 --- a/frontend/yarn.lock +++ b/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"