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 } from "@material-ui/core";
7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
8 import { Link } from "react-router-dom";
9 import { User } from "~/models/user";
10 import { SearchBar } from "~/views-components/search-bar/search-bar";
11 import { Routes } from '~/routes/routes';
12 import { NotificationsMenu } from "~/views-components/main-app-bar/notifications-menu";
13 import { AccountMenu } from "~/views-components/main-app-bar/account-menu";
14 import { HelpMenu } from './help-menu';
15 import { ReactNode } from "react";
17 type CssRules = 'toolbar' | 'link';
19 const styles: StyleRulesCallback<CssRules> = () => ({
21 textDecoration: 'none',
29 interface MainAppBarDataProps {
31 searchDebounce?: number;
37 export interface MainAppBarActionProps {
38 onSearch: (searchText: string) => void;
41 export type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
43 export const MainAppBar = withStyles(styles)(
44 (props: MainAppBarProps) => {
45 return <AppBar position="absolute">
46 <Toolbar className={props.classes.toolbar}>
47 <Grid container justify="space-between">
48 <Grid container item xs={3} direction="column" justify="center">
49 <Typography variant="title" color="inherit" noWrap>
50 <Link to={Routes.ROOT} className={props.classes.link}>
54 <Typography variant="caption" color="inherit">{props.buildInfo}</Typography>
61 {props.user && <SearchBar
62 value={props.searchText}
63 onSearch={props.onSearch}
64 debounce={props.searchDebounce}