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 } 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                 <DetailsIcon />
  71             </IconButton>
  72             }
  73         </Toolbar>
  74     </AppBar>;
  75 };
  76
  77 const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => {
  78     return (
  79         <>
  80             <IconButton color="inherit">
  81                 <Badge badgeContent={3} color="primary">
  82                     <NotificationIcon />
  83                 </Badge>
  84             </IconButton>
  85             <DropdownMenu icon={<UserPanelIcon />} id="account-menu">
  86                 <MenuItem>
  87                     {getUserFullname(user)}
  88                 </MenuItem>
  89                 {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
  90             </DropdownMenu>
  91             <DropdownMenu icon={<HelpIcon />} id="help-menu">
  92                 {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
  93             </DropdownMenu>
  94         </>
  95     );
  96 };
  97
  98 const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
  99     return menuItems.anonymousMenu.map((item, index) => (
 100         <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>
 101             {item.label}
 102         </Button>
 103     ));
 104 };
 105
 106 const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
 107     return menuItems.map((item, index) => (
 108         <MenuItem key={index} onClick={() => onMenuItemClick(item)}>
 109             {item.label}
 110         </MenuItem>
 111     ));
 112 };