src/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 * as React from "react";
   6 import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, Paper, Input, StyleRulesCallback, withStyles, WithStyles, Button, MenuItem } from "@material-ui/core";
   7 import NotificationsIcon from "@material-ui/icons/Notifications";
   8 import PersonIcon from "@material-ui/icons/Person";
   9 import HelpIcon from "@material-ui/icons/Help";
  10 import SearchBar from "./search-bar/search-bar";
  11 import Breadcrumbs, { Breadcrumb } from "../breadcrumbs/breadcrumbs"
  12 import DropdownMenu from "./dropdown-menu/dropdown-menu"
  13 import { User } from "../../models/user";
  14
  15 export interface MainAppBarMenuItem {
  16     label: string;
  17 }
  18
  19 export interface MainAppBarMenuItems {
  20     accountMenu: MainAppBarMenuItem[];
  21     helpMenu: MainAppBarMenuItem[];
  22     anonymousMenu: MainAppBarMenuItem[];
  23 }
  24
  25 interface MainAppBarDataProps {
  26     searchText: string;
  27     searchDebounce?: number;
  28     breadcrumbs: Breadcrumb[];
  29     user?: User;
  30     menuItems: MainAppBarMenuItems;
  31 }
  32
  33 export interface MainAppBarActionProps {
  34     onSearch: (searchText: string) => void,
  35     onBreadcrumbClick: (breadcrumb: Breadcrumb) => void,
  36     onMenuItemClick: (menuItem: MainAppBarMenuItem) => void
  37 }
  38
  39 type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
  40
  41 export class MainAppBar extends React.Component<MainAppBarProps> {
  42
  43     render() {
  44         const { classes, searchText, breadcrumbs, searchDebounce } = this.props
  45         return <AppBar className={classes.appBar} position="static">
  46             <Toolbar>
  47                 <Grid
  48                     container
  49                     justify="space-between"
  50                 >
  51                     <Grid item xs={3}>
  52                         <Typography variant="title" color="inherit" noWrap style={{ flexGrow: 1 }}>
  53                             <span>Arvados</span><br /><span style={{ fontSize: 12 }}>Workbench 2</span>
  54                         </Typography>
  55                     </Grid>
  56                     <Grid item xs={6} container alignItems="center">
  57                         {
  58                             this.props.user && <SearchBar
  59                                 value={searchText}
  60                                 onSearch={this.props.onSearch}
  61                                 debounce={searchDebounce}
  62                             />
  63                         }
  64                     </Grid>
  65                     <Grid item xs={3} container alignItems="center" justify="flex-end">
  66                         {
  67                             this.props.user ? this.renderMenuForUser() : this.renderMenuForAnonymous()
  68                         }
  69                     </Grid>
  70                 </Grid>
  71             </Toolbar>
  72             {
  73                 this.props.user && <Toolbar>
  74                     <Breadcrumbs items={breadcrumbs} onClick={this.props.onBreadcrumbClick} />
  75                 </Toolbar>
  76             }
  77         </AppBar>
  78     }
  79
  80     renderMenuForUser = () => {
  81         const { user } = this.props
  82         return (
  83             <>
  84                 <IconButton color="inherit">
  85                     <Badge badgeContent={3} color="primary">
  86                         <NotificationsIcon />
  87                     </Badge>
  88                 </IconButton>
  89                 <DropdownMenu icon={PersonIcon} id="account-menu">
  90                     <MenuItem>{this.getUserFullname()}</MenuItem>
  91                     {this.renderMenuItems(this.props.menuItems.accountMenu)}
  92                 </DropdownMenu>
  93                 <DropdownMenu icon={HelpIcon} id="help-menu">
  94                     {this.renderMenuItems(this.props.menuItems.helpMenu)}
  95                 </DropdownMenu>
  96             </>
  97         )
  98     }
  99
 100     renderMenuForAnonymous = () => {
 101         return this.props.menuItems.anonymousMenu.map((item, index) => (
 102             <Button key={index} color="inherit" onClick={() => this.props.onMenuItemClick(item)}>{item.label}</Button>
 103         ))
 104     }
 105
 106     renderMenuItems = (menuItems: MainAppBarMenuItem[]) => {
 107         return menuItems.map((item, index) => (
 108             <MenuItem key={index} onClick={() => this.props.onMenuItemClick(item)}>{item.label}</MenuItem>
 109         ))
 110     }
 111
 112     getUserFullname = () => {
 113         const { user } = this.props;
 114         return user ? `${user.firstName} ${user.lastName}` : "";
 115     }
 116
 117 }
 118
 119 type CssRules = "appBar"
 120
 121 const styles: StyleRulesCallback<CssRules> = theme => ({
 122     appBar: {
 123         backgroundColor: "#692498"
 124     }
 125 })
 126
 127 export default withStyles(styles)(MainAppBar)