X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/e5b901f7d6f87b56f43d3dbe002c9c90a3d41349..d7068565b29b52ffe6761a81e71f0725d120211a:/src/views-components/main-app-bar/main-app-bar.tsx diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx index c0525a56..de6be7e7 100644 --- a/src/views-components/main-app-bar/main-app-bar.tsx +++ b/src/views-components/main-app-bar/main-app-bar.tsx @@ -3,14 +3,11 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from "react"; -import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, StyleRulesCallback, withStyles, WithStyles, Button, MenuItem } from "@material-ui/core"; -import NotificationsIcon from "@material-ui/icons/Notifications"; -import PersonIcon from "@material-ui/icons/Person"; -import HelpIcon from "@material-ui/icons/Help"; -import SearchBar from "../../components/search-bar/search-bar"; -import Breadcrumbs, { Breadcrumb } from "../../components/breadcrumbs/breadcrumbs"; -import DropdownMenu from "../../components/dropdown-menu/dropdown-menu"; -import { User, getUserFullname } from "../../models/user"; +import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, Button, MenuItem } from "@material-ui/core"; +import { User, getUserFullname } from "~/models/user"; +import { SearchBar } from "~/components/search-bar/search-bar"; +import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu"; +import { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "~/components/icon/icon"; export interface MainAppBarMenuItem { label: string; @@ -25,32 +22,30 @@ export interface MainAppBarMenuItems { interface MainAppBarDataProps { searchText: string; searchDebounce?: number; - breadcrumbs: Breadcrumb[]; + breadcrumbs: React.ComponentType; user?: User; menuItems: MainAppBarMenuItems; + buildInfo: string; } export interface MainAppBarActionProps { onSearch: (searchText: string) => void; - onBreadcrumbClick: (breadcrumb: Breadcrumb) => void; onMenuItemClick: (menuItem: MainAppBarMenuItem) => void; + onDetailsPanelToggle: () => void; } -type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles; +export type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps; export const MainAppBar: React.SFC = (props) => { - return - - + return + + - Arvados + Arvados 2 - Workbench 2 + {props.buildInfo} @@ -69,30 +64,31 @@ export const MainAppBar: React.SFC = (props) => { - { - props.user && - - - } + + {props.user && } + {props.user && + + + } + ; }; - const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => { return ( <> - + - + } id="account-menu"> {getUserFullname(user)} {renderMenuItems(menuItems.accountMenu, onMenuItemClick)} - + } id="help-menu"> {renderMenuItems(menuItems.helpMenu, onMenuItemClick)} @@ -114,16 +110,3 @@ const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menu )); }; - -type CssRules = "appBar" | "toolbar"; - -const styles: StyleRulesCallback = theme => ({ - appBar: { - backgroundColor: "#692498" - }, - toolbar: { - minHeight: '48px' - } -}); - -export default withStyles(styles)(MainAppBar);