2018-01-17 21:10:39 +02:00
|
|
|
import React from 'react';
|
|
|
|
import { graphql, compose } from 'react-apollo';
|
|
|
|
import gql from 'graphql-tag';
|
|
|
|
import pascalCase from 'pascal-case';
|
2018-01-25 18:23:30 +02:00
|
|
|
import keys from 'lodash.keys';
|
2018-01-17 21:10:39 +02:00
|
|
|
|
|
|
|
import { DataCenterIcon, TritonIcon, ServicesIcon } from './components';
|
|
|
|
import * as Overlays from './containers';
|
|
|
|
|
|
|
|
import {
|
|
|
|
Avatar,
|
|
|
|
Header,
|
|
|
|
HeaderRow,
|
|
|
|
HeaderItem,
|
|
|
|
HeaderItemContent,
|
|
|
|
HeaderItemSubContent,
|
|
|
|
HeaderItemIcon,
|
|
|
|
HeaderFlexibleSpaceItem,
|
2018-01-25 18:23:30 +02:00
|
|
|
HeaderDividerItem,
|
|
|
|
HeaderSpace
|
2018-01-17 21:10:39 +02:00
|
|
|
} from './components';
|
|
|
|
|
|
|
|
const updateHeaderMutation = gql`
|
|
|
|
mutation updateHeader($isOpen: Boolean!, $activePanel: String!) {
|
|
|
|
updateHeader(isOpen: $isOpen, activePanel: $activePanel) @client
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const getHeader = gql`
|
|
|
|
{
|
|
|
|
isOpen @client
|
|
|
|
activePanel @client
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2018-01-08 17:13:05 +02:00
|
|
|
const getAccount = gql`
|
|
|
|
{
|
|
|
|
account {
|
|
|
|
login
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Navigation = ({ login, toggleSectionOpen, isOpen, activePanel }) => (
|
2018-01-17 21:10:39 +02:00
|
|
|
<Header onOutsideClick={() => toggleSectionOpen()}>
|
|
|
|
<HeaderRow>
|
|
|
|
<HeaderItem>
|
|
|
|
<TritonIcon light />
|
|
|
|
</HeaderItem>
|
|
|
|
<HeaderDividerItem />
|
|
|
|
<HeaderItem
|
|
|
|
onClick={() => toggleSectionOpen('services')}
|
|
|
|
active={isOpen && activePanel === 'services'}
|
|
|
|
>
|
2018-01-25 18:23:30 +02:00
|
|
|
<HeaderItemContent>Products & Services</HeaderItemContent>
|
2018-01-17 21:10:39 +02:00
|
|
|
<HeaderItemIcon>
|
|
|
|
<ServicesIcon light />
|
|
|
|
</HeaderItemIcon>
|
|
|
|
</HeaderItem>
|
|
|
|
<HeaderDividerItem />
|
|
|
|
<HeaderFlexibleSpaceItem />
|
|
|
|
<HeaderDividerItem />
|
|
|
|
<HeaderItem
|
|
|
|
onClick={() => toggleSectionOpen('datacenter')}
|
|
|
|
active={isOpen && activePanel === 'datacenter'}
|
|
|
|
>
|
|
|
|
<HeaderItemContent>
|
2018-01-25 18:23:30 +02:00
|
|
|
<HeaderItemSubContent>Data Center:</HeaderItemSubContent>
|
|
|
|
<HeaderSpace />
|
|
|
|
<span>us-east-1</span>
|
2018-01-17 21:10:39 +02:00
|
|
|
</HeaderItemContent>
|
|
|
|
<HeaderItemIcon>
|
|
|
|
<DataCenterIcon light />
|
|
|
|
</HeaderItemIcon>
|
|
|
|
</HeaderItem>
|
|
|
|
<HeaderDividerItem />
|
2018-01-08 17:13:05 +02:00
|
|
|
{login ? (
|
|
|
|
<HeaderItem>
|
|
|
|
<HeaderItemContent>
|
2018-01-25 18:23:30 +02:00
|
|
|
<HeaderItemSubContent>Account:</HeaderItemSubContent>
|
|
|
|
<HeaderSpace />
|
|
|
|
{login}
|
2018-01-08 17:13:05 +02:00
|
|
|
</HeaderItemContent>
|
|
|
|
<HeaderItemIcon>
|
|
|
|
<Avatar />
|
|
|
|
</HeaderItemIcon>
|
|
|
|
</HeaderItem>
|
|
|
|
) : null}
|
2018-01-17 21:10:39 +02:00
|
|
|
</HeaderRow>
|
2018-01-25 18:23:30 +02:00
|
|
|
{keys(Overlays).map(panelName =>
|
|
|
|
React.createElement(Overlays[panelName], {
|
|
|
|
expanded: isOpen && panelName === pascalCase(activePanel)
|
|
|
|
})
|
|
|
|
)}
|
2018-01-17 21:10:39 +02:00
|
|
|
</Header>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default compose(
|
2018-01-08 17:13:05 +02:00
|
|
|
graphql(getAccount, {
|
|
|
|
props: ({ data }) => {
|
|
|
|
const { account = {}, loading = false, error = null } = data;
|
|
|
|
const { login } = account;
|
|
|
|
|
|
|
|
return { login, loading, error };
|
|
|
|
}
|
|
|
|
}),
|
2018-01-17 21:10:39 +02:00
|
|
|
graphql(getHeader, {
|
|
|
|
props: ({ data }) => {
|
|
|
|
const {
|
|
|
|
isOpen = false,
|
|
|
|
activePanel = '',
|
|
|
|
loading = false,
|
|
|
|
error = null
|
|
|
|
} = data;
|
|
|
|
|
|
|
|
return { isOpen, activePanel, loading, error };
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
graphql(updateHeaderMutation, {
|
|
|
|
props: ({ mutate, ownProps }) => ({
|
|
|
|
toggleSectionOpen: (name = '') => {
|
|
|
|
const { isOpen, activePanel } = ownProps;
|
|
|
|
return mutate({
|
|
|
|
variables: {
|
|
|
|
isOpen: !(isOpen && name === activePanel),
|
|
|
|
activePanel: name
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
)(Navigation);
|