1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from "react";
6 import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, 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";
16 export interface MainAppBarMenuItem {
20 export interface MainAppBarMenuItems {
21 accountMenu: MainAppBarMenuItem[];
22 helpMenu: MainAppBarMenuItem[];
23 anonymousMenu: MainAppBarMenuItem[];
26 interface MainAppBarDataProps {
28 searchDebounce?: number;
29 breadcrumbs: Breadcrumb[];
31 menuItems: MainAppBarMenuItems;
34 export interface MainAppBarActionProps {
35 onSearch: (searchText: string) => void;
36 onBreadcrumbClick: (breadcrumb: Breadcrumb) => void;
37 onMenuItemClick: (menuItem: MainAppBarMenuItem) => void;
38 onDetailsPanelToggle: () => void;
41 type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps;
43 export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
44 return <AppBar position="static">
46 <Grid container justify="space-between">
48 <Typography variant="headline" color="inherit" noWrap>
51 <Typography variant="body1" color="inherit" noWrap >
55 <Grid item xs={6} container alignItems="center">
57 props.user && <SearchBar
58 value={props.searchText}
59 onSearch={props.onSearch}
60 debounce={props.searchDebounce}
64 <Grid item xs={3} container alignItems="center" justify="flex-end">
66 props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props)
73 props.user && <Breadcrumbs items={props.breadcrumbs} onClick={props.onBreadcrumbClick} />
75 <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
83 const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => {
86 <IconButton color="inherit">
87 <Badge badgeContent={3} color="primary">
91 <DropdownMenu icon={PersonIcon} id="account-menu">
93 {getUserFullname(user)}
95 {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
97 <DropdownMenu icon={HelpIcon} id="help-menu">
98 {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
104 const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
105 return menuItems.anonymousMenu.map((item, index) => (
106 <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>
112 const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
113 return menuItems.map((item, index) => (
114 <MenuItem key={index} onClick={() => onMenuItemClick(item)}>
120 export default MainAppBar;