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