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, IconButton, Badge, Button, MenuItem, Tooltip } from "@material-ui/core";
   7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from '~/common/custom-theme';
   9 import { Link } from "react-router-dom";
  10 import { User, getUserFullname } from "~/models/user";
  11 import { SearchBar } from "~/components/search-bar/search-bar";
  12 import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
  13 import { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "~/components/icon/icon";
  14 import { Routes } from '~/routes/routes';
  15 import { NotificationsMenu } from "~/views-components/main-app-bar/notifications-menu";
  16 import { AccountMenu } from "~/views-components/main-app-bar/account-menu";
  17 import { AnonymousMenu } from "~/views-components/main-app-bar/anonymous-menu";
  18
  19 type CssRules = 'link';
  20
  21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     link: {
  23         textDecoration: 'none',
  24         color: 'inherit'
  25     }
  26 });
  27
  28 export interface MainAppBarMenuItem {
  29     label: string;
  30 }
  31
  32 export interface MainAppBarMenuItems {
  33     accountMenu: MainAppBarMenuItem[];
  34     helpMenu: MainAppBarMenuItem[];
  35     anonymousMenu: MainAppBarMenuItem[];
  36 }
  37
  38 interface MainAppBarDataProps {
  39     searchText: string;
  40     searchDebounce?: number;
  41     breadcrumbs: React.ComponentType<any>;
  42     user?: User;
  43     menuItems: MainAppBarMenuItems;
  44     buildInfo: string;
  45 }
  46
  47 export interface MainAppBarActionProps {
  48     onSearch: (searchText: string) => void;
  49     onMenuItemClick: (menuItem: MainAppBarMenuItem) => void;
  50     onDetailsPanelToggle: () => void;
  51 }
  52
  53 export type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
  54
  55 export const MainAppBar = withStyles(styles)(
  56     (props: MainAppBarProps) => {
  57         return <AppBar position="static">
  58             <Toolbar>
  59                 <Grid container justify="space-between">
  60                     <Grid container item xs={3} alignItems="center">
  61                         <Typography variant="headline" color="inherit" noWrap>
  62                             <Link to={Routes.ROOT} className={props.classes.link}>
  63                                 arvados workbench
  64                             </Link>
  65                         </Typography>
  66                         {/* <Typography variant="body1" color="inherit" noWrap >
  67                             {props.buildInfo}
  68                         </Typography> */}
  69                     </Grid>
  70                     <Grid item xs={6} container alignItems="center">
  71                         {
  72                             props.user && <SearchBar
  73                                 value={props.searchText}
  74                                 onSearch={props.onSearch}
  75                                 debounce={props.searchDebounce}
  76                             />
  77                         }
  78                     </Grid>
  79                     <Grid item xs={3} container alignItems="center" justify="flex-end">
  80                         {
  81                             props.user
  82                                 ? <>
  83                                     <NotificationsMenu />
  84                                     <AccountMenu />
  85                                 </>
  86                                 : <AnonymousMenu />
  87                         }
  88                     </Grid>
  89                 </Grid>
  90             </Toolbar>
  91             {/* <Toolbar >
  92                 {props.user && <props.breadcrumbs />}
  93                 {props.user && <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
  94                     <Tooltip title="Additional Info">
  95                         <DetailsIcon />
  96                     </Tooltip>
  97                 </IconButton>}
  98             </Toolbar> */}
  99         </AppBar>;
 100     }
 101 );