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 '~/views-components/main-app-bar/help-menu';
  15 import { ReactNode } from "react";
  16 import { AdminMenu } from "~/views-components/main-app-bar/admin-menu";
  17
  18 type CssRules = 'toolbar' | 'link';
  19
  20 const styles: StyleRulesCallback<CssRules> = () => ({
  21     link: {
  22         textDecoration: 'none',
  23         color: 'inherit'
  24     },
  25     toolbar: {
  26         height: '56px'
  27     }
  28 });
  29
  30 interface MainAppBarDataProps {
  31     user?: User;
  32     buildInfo?: string;
  33     children?: ReactNode;
  34 }
  35
  36 export type MainAppBarProps = MainAppBarDataProps & WithStyles<CssRules>;
  37
  38 export const MainAppBar = withStyles(styles)(
  39     (props: MainAppBarProps) => {
  40         return <AppBar position="absolute">
  41             <Toolbar className={props.classes.toolbar}>
  42                 <Grid container justify="space-between">
  43                     <Grid container item xs={3} direction="column" justify="center">
  44                         <Typography variant="title" color="inherit" noWrap>
  45                             <Link to={Routes.ROOT} className={props.classes.link}>
  46                                 arvados workbench
  47                             </Link>
  48                         </Typography>
  49                         <Typography variant="caption" color="inherit">{props.buildInfo}</Typography>
  50                     </Grid>
  51                     <Grid
  52                         item
  53                         xs={6}
  54                         container
  55                         alignItems="center">
  56                         {props.user && <SearchBar /> }
  57                     </Grid>
  58                     <Grid
  59                         item
  60                         xs={3}
  61                         container
  62                         alignItems="center"
  63                         justify="flex-end"
  64                         wrap="nowrap">
  65                         {props.user
  66                             ? <>
  67                                 <NotificationsMenu />
  68                                 <AccountMenu />
  69                                 {props.user.isAdmin && <AdminMenu />}
  70                                 <HelpMenu />
  71                             </>
  72                             : <HelpMenu />}
  73                     </Grid>
  74                 </Grid>
  75             </Toolbar>
  76             {props.children}
  77         </AppBar>;
  78     }
  79 );