Merge branch '20846-ruby3-compat'
[arvados.git] / 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 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 );