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 { 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";
13 export interface MainAppBarMenuItem {
17 export interface MainAppBarMenuItems {
18 accountMenu: MainAppBarMenuItem[];
19 helpMenu: MainAppBarMenuItem[];
20 anonymousMenu: MainAppBarMenuItem[];
23 interface MainAppBarDataProps {
25 searchDebounce?: number;
26 breadcrumbs: Breadcrumb[];
28 menuItems: MainAppBarMenuItems;
31 export interface MainAppBarActionProps {
32 onSearch: (searchText: string) => void;
33 onBreadcrumbClick: (breadcrumb: Breadcrumb) => void;
34 onMenuItemClick: (menuItem: MainAppBarMenuItem) => void;
35 onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
36 onDetailsPanelToggle: () => void;
39 type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps;
41 export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
42 return <AppBar position="static">
44 <Grid container justify="space-between">
46 <Typography variant="headline" color="inherit" noWrap>
49 <Typography variant="body1" color="inherit" noWrap >
53 <Grid item xs={6} container alignItems="center">
55 props.user && <SearchBar
56 value={props.searchText}
57 onSearch={props.onSearch}
58 debounce={props.searchDebounce}
62 <Grid item xs={3} container alignItems="center" justify="flex-end">
64 props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props)
71 props.user && <Breadcrumbs
72 items={props.breadcrumbs}
73 onClick={props.onBreadcrumbClick}
74 onContextMenu={props.onContextMenu} />
76 { props.user && <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
85 const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => {
88 <IconButton color="inherit">
89 <Badge badgeContent={3} color="primary">
93 <DropdownMenu icon={<UserPanelIcon />} id="account-menu">
95 {getUserFullname(user)}
97 {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
99 <DropdownMenu icon={<HelpIcon />} id="help-menu">
100 {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
106 const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
107 return menuItems.anonymousMenu.map((item, index) => (
108 <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>
114 const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
115 return menuItems.map((item, index) => (
116 <MenuItem key={index} onClick={() => onMenuItemClick(item)}>
122 export default MainAppBar;