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 { 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     sidePanelIsCollapsed: boolean;
  38 }
  39
  40 export type MainAppBarProps = MainAppBarDataProps & WithStyles<CssRules>;
  41
  42 export const MainAppBar = withStyles(styles)(
  43     (props: MainAppBarProps) => {
  44         return <AppBar position="absolute">
  45             <Toolbar className={props.classes.toolbar}>
  46                 <Grid container justify="space-between">
  47                     {pluginConfig.appBarLeft || <Grid container item xs={3} direction="column" justify="center">
  48                         <Typography variant='h6' color="inherit" noWrap>
  49                             <Link to={Routes.ROOT} className={props.classes.link}>
  50                                 <span dangerouslySetInnerHTML={{ __html: props.siteBanner }} /> ({props.uuidPrefix})
  51                 </Link>
  52                         </Typography>
  53                         <Typography variant="caption" color="inherit">
  54
  55                             {props.buildInfo}</Typography>
  56                     </Grid>}
  57                     <Grid
  58                         item
  59                         xs={6}
  60                         container
  61                         alignItems="center">
  62                         {pluginConfig.appBarMiddle || (props.user && props.user.isActive && <SearchBar />)}
  63                     </Grid>
  64                     <Grid
  65                         item
  66                         xs={3}
  67                         container
  68                         alignItems="center"
  69                         justify="flex-end"
  70                         wrap="nowrap">
  71                         {props.user ? <>
  72                             <NotificationsMenu />
  73                             <AccountMenu />
  74                             {pluginConfig.appBarRight ||
  75                                 <>
  76                                     {props.user.isAdmin && <AdminMenu />}
  77                                     <HelpMenu />
  78                                 </>}
  79                         </> :
  80                             pluginConfig.appBarRight || <HelpMenu />
  81                         }
  82                     </Grid>
  83                 </Grid>
  84             </Toolbar>
  85             {props.children}
  86         </AppBar>;
  87     }
  88 );