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