[ARVADOS-WORKBENCH2] created: 1.2.0-304-gbae676c
Git user
git at public.curoverse.com
Thu Sep 6 06:00:41 EDT 2018
at bae676cf6c9130ec6ef9708b86343024d11034b2 (commit)
commit bae676cf6c9130ec6ef9708b86343024d11034b2
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Thu Sep 6 12:00:27 2018 +0200
Extract main-content-bar component
Feature #14149
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/main-content-bar/main-content-bar.tsx b/src/views-components/main-content-bar/main-content-bar.tsx
new file mode 100644
index 0000000..7506974
--- /dev/null
+++ b/src/views-components/main-content-bar/main-content-bar.tsx
@@ -0,0 +1,28 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Toolbar, IconButton, Tooltip, Grid } from "@material-ui/core";
+import { DetailsIcon } from "~/components/icon/icon";
+import { Breadcrumbs } from "~/views-components/breadcrumbs/breadcrumbs";
+import { detailsPanelActions } from "~/store/details-panel/details-panel-action";
+import { connect } from 'react-redux';
+
+interface MainContentBarProps {
+ onDetailsPanelToggle: () => void;
+}
+
+export const MainContentBar = connect(undefined, {
+ onDetailsPanelToggle: detailsPanelActions.TOGGLE_DETAILS_PANEL
+})((props: MainContentBarProps) =>
+ <Toolbar>
+ <Grid justify="space-between">
+ <Breadcrumbs />
+ <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
+ <Tooltip title="Additional Info">
+ <DetailsIcon />
+ </Tooltip>
+ </IconButton>
+ </Grid>
+ </Toolbar>);
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 3c28108..7c76a0b 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -40,6 +40,7 @@ import { FilesUploadCollectionDialog } from '~/views-components/dialog-forms/fil
import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog';
import { TrashPanel } from "~/views/trash-panel/trash-panel";
+import { MainContentBar } from '../../views-components/main-content-bar/main-content-bar';
const APP_BAR_HEIGHT = 100;
@@ -163,6 +164,7 @@ export const Workbench = withStyles(styles)(
</div>
{user && <SidePanel />}
<main className={classes.contentWrapper}>
+ {this.props.user && <MainContentBar />}
<div className={classes.content}>
<Switch>
<Route path={Routes.PROJECTS} component={ProjectPanel} />
@@ -209,6 +211,10 @@ export const Workbench = withStyles(styles)(
},
};
+ toggleDetailsPanel = () => {
+ this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+ }
+
toggleCurrentTokenModal = () => {
this.setState({ isCurrentTokenDialogOpen: !this.state.isCurrentTokenDialogOpen });
}
commit cee5fc55b8b13217ac9aa540d74375a59afbb49a
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Thu Sep 6 11:41:22 2018 +0200
Extract appbar menus to their own components
Feature #14149
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/main-app-bar/account-menu.tsx b/src/views-components/main-app-bar/account-menu.tsx
new file mode 100644
index 0000000..2597c19
--- /dev/null
+++ b/src/views-components/main-app-bar/account-menu.tsx
@@ -0,0 +1,36 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { MenuItem } from "@material-ui/core";
+import { User, getUserFullname } from "~/models/user";
+import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
+import { UserPanelIcon } from "~/components/icon/icon";
+import { DispatchProp, connect } from 'react-redux';
+import { logout } from "~/store/auth/auth-action";
+import { RootState } from "~/store/store";
+
+interface AccountMenuProps {
+ user?: User;
+}
+
+const mapStateToProps = (state: RootState): AccountMenuProps => ({
+ user: state.auth.user
+});
+
+export const AccountMenu = connect(mapStateToProps)(
+ ({ user, dispatch }: AccountMenuProps & DispatchProp<any>) =>
+ user
+ ? <DropdownMenu
+ icon={<UserPanelIcon />}
+ id="account-menu"
+ title="Account Management">
+ <MenuItem>
+ {getUserFullname(user)}
+ </MenuItem>
+ <MenuItem>Current token</MenuItem>
+ <MenuItem>My account</MenuItem>
+ <MenuItem onClick={() => dispatch(logout())}>Logout</MenuItem>
+ </DropdownMenu>
+ : null);
diff --git a/src/views-components/main-app-bar/anonymous-menu.tsx b/src/views-components/main-app-bar/anonymous-menu.tsx
new file mode 100644
index 0000000..6f77a52
--- /dev/null
+++ b/src/views-components/main-app-bar/anonymous-menu.tsx
@@ -0,0 +1,16 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Button } from '@material-ui/core';
+import { DispatchProp, connect } from 'react-redux';
+import { login } from '~/store/auth/auth-action';
+
+export const AnonymousMenu = connect()(
+ ({ dispatch }: DispatchProp<any>) =>
+ <Button
+ color="inherit"
+ onClick={() => dispatch(login())}>
+ Sign in
+ </Button>);
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 04e0fb8..63bdd8b 100644
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -12,6 +12,9 @@ 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";
import { Routes } from '~/routes/routes';
+import { NotificationsMenu } from "~/views-components/main-app-bar/notifications-menu";
+import { AccountMenu } from "~/views-components/main-app-bar/account-menu";
+import { AnonymousMenu } from "~/views-components/main-app-bar/anonymous-menu";
type CssRules = 'link';
@@ -54,15 +57,15 @@ export const MainAppBar = withStyles(styles)(
return <AppBar position="static">
<Toolbar>
<Grid container justify="space-between">
- <Grid item xs={3}>
+ <Grid container item xs={3} alignItems="center">
<Typography variant="headline" color="inherit" noWrap>
<Link to={Routes.ROOT} className={props.classes.link}>
- Arvados 2
+ arvados workbench
</Link>
</Typography>
- <Typography variant="body1" color="inherit" noWrap >
+ {/* <Typography variant="body1" color="inherit" noWrap >
{props.buildInfo}
- </Typography>
+ </Typography> */}
</Grid>
<Grid item xs={6} container alignItems="center">
{
@@ -75,58 +78,24 @@ export const MainAppBar = withStyles(styles)(
</Grid>
<Grid item xs={3} container alignItems="center" justify="flex-end">
{
- props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props)
+ props.user
+ ? <>
+ <NotificationsMenu />
+ <AccountMenu />
+ </>
+ : <AnonymousMenu />
}
</Grid>
</Grid>
</Toolbar>
- <Toolbar >
+ {/* <Toolbar >
{props.user && <props.breadcrumbs />}
{props.user && <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
<Tooltip title="Additional Info">
<DetailsIcon />
</Tooltip>
</IconButton>}
- </Toolbar>
+ </Toolbar> */}
</AppBar>;
}
);
-
-const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => {
- return (
- <>
- <IconButton color="inherit">
- <Tooltip title="Notification">
- <Badge badgeContent={3} color="primary">
- <NotificationIcon />
- </Badge>
- </Tooltip>
- </IconButton>
- <DropdownMenu icon={<UserPanelIcon />} id="account-menu" title="Account Management">
- <MenuItem>
- {getUserFullname(user)}
- </MenuItem>
- {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
- </DropdownMenu>
- <DropdownMenu icon={<HelpIcon />} id="help-menu" title="Help">
- {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
- </DropdownMenu>
- </>
- );
-};
-
-const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
- return menuItems.anonymousMenu.map((item, index) => (
- <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>
- {item.label}
- </Button>
- ));
-};
-
-const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
- return menuItems.map((item, index) => (
- <MenuItem key={index} onClick={() => onMenuItemClick(item)}>
- {item.label}
- </MenuItem>
- ));
-};
diff --git a/src/views-components/main-app-bar/notifications-menu.tsx b/src/views-components/main-app-bar/notifications-menu.tsx
new file mode 100644
index 0000000..5781ec1
--- /dev/null
+++ b/src/views-components/main-app-bar/notifications-menu.tsx
@@ -0,0 +1,23 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Badge, MenuItem } from '@material-ui/core';
+import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
+import { NotificationIcon } from '~/components/icon/icon';
+
+export const NotificationsMenu =
+ () =>
+ <DropdownMenu
+ icon={
+ <Badge
+ badgeContent={0}
+ color="primary">
+ <NotificationIcon />
+ </Badge>}
+ id="account-menu"
+ title="Notifications">
+ <MenuItem>You are up to date</MenuItem>
+ </DropdownMenu>;
+
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list