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 "~/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 { AnonymousMenu } from "~/views-components/main-app-bar/anonymous-menu";
  15
  16 type CssRules = 'link';
  17
  18 const styles: StyleRulesCallback<CssRules> = () => ({
  19     link: {
  20         textDecoration: 'none',
  21         color: 'inherit'
  22     }
  23 });
  24
  25 interface MainAppBarDataProps {
  26     searchText: string;
  27     searchDebounce?: number;
  28     user?: User;
  29 }
  30
  31 export interface MainAppBarActionProps {
  32     onSearch: (searchText: string) => void;
  33 }
  34
  35 export type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
  36
  37 export const MainAppBar = withStyles(styles)(
  38     (props: MainAppBarProps) => {
  39         return <AppBar position="static">
  40             <Toolbar>
  41                 <Grid container justify="space-between">
  42                     <Grid container item xs={3} alignItems="center">
  43                         <Typography variant="headline" color="inherit" noWrap>
  44                             <Link to={Routes.ROOT} className={props.classes.link}>
  45                                 arvados workbench
  46                             </Link>
  47                         </Typography>
  48                     </Grid>
  49                     <Grid
  50                         item
  51                         xs={6}
  52                         container
  53                         alignItems="center">
  54                         {props.user && <SearchBar
  55                             value={props.searchText}
  56                             onSearch={props.onSearch}
  57                             debounce={props.searchDebounce}
  58                         />}
  59                     </Grid>
  60                     <Grid
  61                         item
  62                         xs={3}
  63                         container
  64                         alignItems="center"
  65                         justify="flex-end">
  66                         {props.user
  67                             ? <>
  68                                 <NotificationsMenu />
  69                                 <AccountMenu />
  70                             </>
  71                             : <AnonymousMenu />}
  72                     </Grid>
  73                 </Grid>
  74             </Toolbar>
  75         </AppBar>;
  76     }
  77 );