import { NotificationsMenu } from "~/views-components/main-app-bar/notifications-menu";
import { AccountMenu } from "~/views-components/main-app-bar/account-menu";
import { AnonymousMenu } from "~/views-components/main-app-bar/anonymous-menu";
+import { HelpMenu } from './help-menu';
-type CssRules = 'link';
+type CssRules = 'toolbar' | 'link';
const styles: StyleRulesCallback<CssRules> = () => ({
link: {
textDecoration: 'none',
color: 'inherit'
+ },
+ toolbar: {
+ height: '56px'
}
});
searchText: string;
searchDebounce?: number;
user?: User;
+ buildInfo?: string;
}
export interface MainAppBarActionProps {
export const MainAppBar = withStyles(styles)(
(props: MainAppBarProps) => {
return <AppBar position="static">
- <Toolbar>
+ <Toolbar className={props.classes.toolbar}>
<Grid container justify="space-between">
- <Grid container item xs={3} alignItems="center">
- <Typography variant="headline" color="inherit" noWrap>
+ <Grid container item xs={3} direction="column" justify="center">
+ <Typography variant="title" color="inherit" noWrap>
<Link to={Routes.ROOT} className={props.classes.link}>
arvados workbench
</Link>
</Typography>
+ <Typography variant="caption" color="inherit">{props.buildInfo}</Typography>
</Grid>
<Grid
item
xs={3}
container
alignItems="center"
- justify="flex-end">
+ justify="flex-end"
+ wrap="nowrap">
{props.user
? <>
<NotificationsMenu />
<AccountMenu />
+ <HelpMenu />
</>
: <AnonymousMenu />}
</Grid>