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