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, 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 const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
  42     const { classes, searchText, breadcrumbs, searchDebounce, user } = props;
  43     return <AppBar className={classes.appBar} position="static">
  44         <Toolbar className={classes.toolbar}>
  45             <Grid
  46                 container
  47                 justify="space-between"
  48             >
  49                 <Grid item xs={3}>
  50                     <Typography variant="headline" color="inherit" noWrap>
  51                         Arvados
  52                     </Typography>
  53                     <Typography variant="body1" color="inherit" noWrap >
  54                         Workbench 2
  55                     </Typography>
  56                 </Grid>
  57                 <Grid item xs={6} container alignItems="center">
  58                     {
  59                         props.user && <SearchBar
  60                             value={searchText}
  61                             onSearch={props.onSearch}
  62                             debounce={searchDebounce}
  63                         />
  64                     }
  65                 </Grid>
  66                 <Grid item xs={3} container alignItems="center" justify="flex-end">
  67                     {
  68                         props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props)
  69                     }
  70                 </Grid>
  71             </Grid>
  72         </Toolbar>
  73         {
  74             props.user && <Toolbar className={classes.toolbar}>
  75                 <Breadcrumbs items={breadcrumbs} onClick={props.onBreadcrumbClick} />
  76             </Toolbar>
  77         }
  78     </AppBar>;
  79 };
  80
  81
  82 const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => {
  83     return (
  84         <>
  85             <IconButton color="inherit">
  86                 <Badge badgeContent={3} color="primary">
  87                     <NotificationsIcon />
  88                 </Badge>
  89             </IconButton>
  90             <DropdownMenu icon={PersonIcon} id="account-menu">
  91                 <MenuItem>{getUserFullname(user)}</MenuItem>
  92                 {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
  93             </DropdownMenu>
  94             <DropdownMenu icon={HelpIcon} id="help-menu">
  95                 {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
  96             </DropdownMenu>
  97         </>
  98     );
  99 };
 100
 101 const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
 102     return menuItems.anonymousMenu.map((item, index) => (
 103         <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>{item.label}</Button>
 104     ));
 105 };
 106
 107 const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
 108     return menuItems.map((item, index) => (
 109         <MenuItem key={index} onClick={() => onMenuItemClick(item)}>{item.label}</MenuItem>
 110     ));
 111 };
 112
 113 const getUserFullname = (user?: User) => {
 114     return user ? `${user.firstName} ${user.lastName}` : "";
 115 };
 116
 117 type CssRules = "appBar" | "toolbar";
 118
 119 const styles: StyleRulesCallback<CssRules> = theme => ({
 120     appBar: {
 121         backgroundColor: "#692498"
 122     },
 123     toolbar: {
 124         minHeight: '48px'
 125     }
 126 });
 127
 128 export default withStyles(styles)(MainAppBar);