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