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