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';
|
|
|
|
|
|
|
|
import { DataCenterIcon, TritonIcon, ServicesIcon } from './components';
|
|
|
|
import * as Overlays from './containers';
|
|
|
|
|
|
|
|
import {
|
|
|
|
Avatar,
|
|
|
|
Header,
|
|
|
|
HeaderRow,
|
|
|
|
HeaderItem,
|
|
|
|
HeaderItemContent,
|
|
|
|
HeaderItemSubContent,
|
|
|
|
HeaderItemIcon,
|
|
|
|
HeaderFlexibleSpaceItem,
|
|
|
|
HeaderDividerItem
|
|
|
|
} 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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2018-01-17 21:10:39 +02:00
|
|
|
const Panel = ({ name = '', expanded = false, children, ...rest }) => {
|
|
|
|
if (!expanded) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
const overlay = Overlays[pascalCase(name)];
|
|
|
|
|
|
|
|
if (!overlay) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return React.createElement(overlay, rest, children);
|
|
|
|
};
|
|
|
|
|
2018-01-08 17:13:05 +02:00
|
|
|
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'}
|
|
|
|
>
|
|
|
|
<HeaderItemContent>Services</HeaderItemContent>
|
|
|
|
<HeaderItemIcon>
|
|
|
|
<ServicesIcon light />
|
|
|
|
</HeaderItemIcon>
|
|
|
|
</HeaderItem>
|
|
|
|
<HeaderDividerItem />
|
|
|
|
<HeaderFlexibleSpaceItem />
|
|
|
|
<HeaderDividerItem />
|
|
|
|
<HeaderItem
|
|
|
|
onClick={() => toggleSectionOpen('datacenter')}
|
|
|
|
active={isOpen && activePanel === 'datacenter'}
|
|
|
|
>
|
|
|
|
<HeaderItemContent>
|
|
|
|
<HeaderItemSubContent>Data Center:</HeaderItemSubContent> us-east-1
|
|
|
|
</HeaderItemContent>
|
|
|
|
<HeaderItemIcon>
|
|
|
|
<DataCenterIcon light />
|
|
|
|
</HeaderItemIcon>
|
|
|
|
</HeaderItem>
|
|
|
|
<HeaderDividerItem />
|
2018-01-08 17:13:05 +02:00
|
|
|
{login ? (
|
|
|
|
<HeaderItem>
|
|
|
|
<HeaderItemContent>
|
|
|
|
<HeaderItemSubContent>Account:</HeaderItemSubContent> {login}
|
|
|
|
</HeaderItemContent>
|
|
|
|
<HeaderItemIcon>
|
|
|
|
<Avatar />
|
|
|
|
</HeaderItemIcon>
|
|
|
|
</HeaderItem>
|
|
|
|
) : null}
|
2018-01-17 21:10:39 +02:00
|
|
|
</HeaderRow>
|
|
|
|
<Panel expanded={isOpen} name={activePanel} />
|
|
|
|
</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);
|