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