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