Merge branch '14307-search-basic-view'
[arvados-workbench2.git] / src / views-components / main-app-bar / main-app-bar.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from "react";
6 import { AppBar, Toolbar, Typography, Grid } from "@material-ui/core";
7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
8 import { Link } from "react-router-dom";
9 import { User } from "~/models/user";
10 import { SearchBar } from "~/views-components/search-bar/search-bar";
11 import { Routes } from '~/routes/routes';
12 import { NotificationsMenu } from "~/views-components/main-app-bar/notifications-menu";
13 import { AccountMenu } from "~/views-components/main-app-bar/account-menu";
14 import { HelpMenu } from './help-menu';
15 import { ReactNode } from "react";
16
17 type CssRules = 'toolbar' | 'link';
18
19 const styles: StyleRulesCallback<CssRules> = () => ({
20     link: {
21         textDecoration: 'none',
22         color: 'inherit'
23     },
24     toolbar: {
25         height: '56px'
26     }
27 });
28
29 interface MainAppBarDataProps {
30     user?: User;
31     buildInfo?: string;
32     children?: ReactNode;
33 }
34
35 export type MainAppBarProps = MainAppBarDataProps & WithStyles<CssRules>;
36
37 export const MainAppBar = withStyles(styles)(
38     (props: MainAppBarProps) => {
39         return <AppBar position="absolute">
40             <Toolbar className={props.classes.toolbar}>
41                 <Grid container justify="space-between">
42                     <Grid container item xs={3} direction="column" justify="center">
43                         <Typography variant="title" color="inherit" noWrap>
44                             <Link to={Routes.ROOT} className={props.classes.link}>
45                                 arvados workbench
46                             </Link>
47                         </Typography>
48                         <Typography variant="caption" color="inherit">{props.buildInfo}</Typography>
49                     </Grid>
50                     <Grid
51                         item
52                         xs={6}
53                         container
54                         alignItems="center">
55                         {props.user && <SearchBar /> }
56                     </Grid>
57                     <Grid
58                         item
59                         xs={3}
60                         container
61                         alignItems="center"
62                         justify="flex-end"
63                         wrap="nowrap">
64                         {props.user
65                             ? <>
66                                 <NotificationsMenu />
67                                 <AccountMenu />
68                                 <HelpMenu />
69                             </>
70                             : <HelpMenu />}
71                     </Grid>
72                 </Grid>
73             </Toolbar>
74             {props.children}
75         </AppBar>;
76     }
77 );