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, Button, MenuItem, Tooltip } from "@material-ui/core";
   7 import { User, getUserFullname } from "~/models/user";
   8 import { SearchBar } from "~/components/search-bar/search-bar";
   9 import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
  10 import { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "~/components/icon/icon";
  11
  12 export interface MainAppBarMenuItem {
  13     label: string;
  14 }
  15
  16 export interface MainAppBarMenuItems {
  17     accountMenu: MainAppBarMenuItem[];
  18     helpMenu: MainAppBarMenuItem[];
  19     anonymousMenu: MainAppBarMenuItem[];
  20 }
  21
  22 interface MainAppBarDataProps {
  23     searchText: string;
  24     searchDebounce?: number;
  25     breadcrumbs: React.ComponentType<any>;
  26     user?: User;
  27     menuItems: MainAppBarMenuItems;
  28     buildInfo: string;
  29 }
  30
  31 export interface MainAppBarActionProps {
  32     onSearch: (searchText: string) => void;
  33     onMenuItemClick: (menuItem: MainAppBarMenuItem) => void;
  34     onDetailsPanelToggle: () => void;
  35 }
  36
  37 export type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps;
  38
  39 export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
  40     return <AppBar position="static">
  41         <Toolbar>
  42             <Grid container justify="space-between">
  43                 <Grid item xs={3}>
  44                     <Typography variant="headline" color="inherit" noWrap>
  45                         Arvados 2
  46                     </Typography>
  47                     <Typography variant="body1" color="inherit" noWrap >
  48                         {props.buildInfo}
  49                     </Typography>
  50                 </Grid>
  51                 <Grid item xs={6} container alignItems="center">
  52                     {
  53                         props.user && <SearchBar
  54                             value={props.searchText}
  55                             onSearch={props.onSearch}
  56                             debounce={props.searchDebounce}
  57                         />
  58                     }
  59                 </Grid>
  60                 <Grid item xs={3} container alignItems="center" justify="flex-end">
  61                     {
  62                         props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props)
  63                     }
  64                 </Grid>
  65             </Grid>
  66         </Toolbar>
  67         <Toolbar >
  68             {props.user && <props.breadcrumbs />}
  69             {props.user && <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
  70                 <Tooltip title="Additional Info">
  71                     <DetailsIcon />
  72                 </Tooltip>
  73             </IconButton>
  74             }
  75         </Toolbar>
  76     </AppBar>;
  77 };
  78
  79 const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => {
  80     return (
  81         <>
  82             <IconButton color="inherit">
  83                 <Tooltip title="Notification">
  84                     <Badge badgeContent={3} color="primary">
  85                         <NotificationIcon />
  86                     </Badge>
  87                 </Tooltip>
  88             </IconButton>
  89             <DropdownMenu icon={<UserPanelIcon />} id="account-menu" title="Account Management">
  90                 <MenuItem>
  91                     {getUserFullname(user)}
  92                 </MenuItem>
  93                 {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
  94             </DropdownMenu>
  95             <DropdownMenu icon={<HelpIcon />} id="help-menu" title="Help">
  96                 {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
  97             </DropdownMenu>
  98         </>
  99     );
 100 };
 101
 102 const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
 103     return menuItems.anonymousMenu.map((item, index) => (
 104         <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>
 105             {item.label}
 106         </Button>
 107     ));
 108 };
 109
 110 const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
 111     return menuItems.map((item, index) => (
 112         <MenuItem key={index} onClick={() => onMenuItemClick(item)}>
 113             {item.label}
 114         </MenuItem>
 115     ));
 116 };