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 } 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";
  16
  17 type CssRules = 'toolbar' | 'link';
  18
  19 const styles: StyleRulesCallback<CssRules> = () => ({
  20     link: {
  21         textDecoration: 'none',
  22         color: 'inherit'
  23     },
  24     toolbar: {
  25         height: '56px'
  26     }
  27 });
  28
  29 interface MainAppBarDataProps {
  30     searchText: string;
  31     searchDebounce?: number;
  32     user?: User;
  33     buildInfo?: string;
  34     children?: ReactNode;
  35 }
  36
  37 export interface MainAppBarActionProps {
  38     onSearch: (searchText: string) => void;
  39 }
  40
  41 export type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
  42
  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}>
  51                                 arvados workbench
  52                             </Link>
  53                         </Typography>
  54                         <Typography variant="caption" color="inherit">{props.buildInfo}</Typography>
  55                     </Grid>
  56                     <Grid
  57                         item
  58                         xs={6}
  59                         container
  60                         alignItems="center">
  61                         {props.user && <SearchBar
  62                             value={props.searchText}
  63                             onSearch={props.onSearch}
  64                             debounce={props.searchDebounce}
  65                         />}
  66                     </Grid>
  67                     <Grid
  68                         item
  69                         xs={3}
  70                         container
  71                         alignItems="center"
  72                         justify="flex-end"
  73                         wrap="nowrap">
  74                         {props.user
  75                             ? <>
  76                                 <NotificationsMenu />
  77                                 <AccountMenu />
  78                                 <HelpMenu />
  79                             </>
  80                             : <HelpMenu />}
  81                     </Grid>
  82                 </Grid>
  83             </Toolbar>
  84             {props.children}
  85         </AppBar>;
  86     }
  87 );