const mainAppBar = mount(
<MainAppBar
user={user}
+ onContextMenu={jest.fn()}
onDetailsPanelToggle={jest.fn()}
onContextMenu={jest.fn()}
{...{ searchText: "", breadcrumbs: [], menuItems: { accountMenu: [], helpMenu: [], anonymousMenu: [] }, onSearch: jest.fn(), onBreadcrumbClick: jest.fn(), onMenuItemClick: jest.fn() }}
<MainAppBar
searchText="search text"
searchDebounce={2000}
+ onContextMenu={jest.fn()}
onSearch={onSearch}
onContextMenu={jest.fn()}
onDetailsPanelToggle={jest.fn()}
const mainAppBar = mount(
<MainAppBar
breadcrumbs={items}
+ onContextMenu={jest.fn()}
onBreadcrumbClick={onBreadcrumbClick}
onContextMenu={jest.fn()}
onDetailsPanelToggle={jest.fn()}
const mainAppBar = mount(
<MainAppBar
menuItems={menuItems}
+ onContextMenu={jest.fn()}
onMenuItemClick={onMenuItemClick}
onContextMenu={jest.fn()}
onDetailsPanelToggle={jest.fn()}
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from 'react';
-import { Theme } from "@material-ui/core";
-import { StyleRulesCallback, WithStyles, withStyles } from "@material-ui/core/styles";
-import Paper from "@material-ui/core/Paper/Paper";
-import Table from "@material-ui/core/Table/Table";
-import TableHead from "@material-ui/core/TableHead/TableHead";
-import TableRow from "@material-ui/core/TableRow/TableRow";
-import TableCell from "@material-ui/core/TableCell/TableCell";
-import TableBody from "@material-ui/core/TableBody/TableBody";
-
-type CssRules = 'root' | 'table';
-
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
- root: {
- width: '100%',
- marginTop: theme.spacing.unit * 3,
- overflowX: 'auto',
- },
- table: {
- minWidth: 700,
- },
-});
-
-interface ProjectListProps {
-}
-
-class ProjectList extends React.Component<ProjectListProps & WithStyles<CssRules>, {}> {
- render() {
- const {classes} = this.props;
- return <Paper className={classes.root}>
- <Table className={classes.table}>
- <TableHead>
- <TableRow>
- <TableCell>Name</TableCell>
- <TableCell>Status</TableCell>
- <TableCell>Type</TableCell>
- <TableCell>Shared by</TableCell>
- <TableCell>File size</TableCell>
- <TableCell>Last modified</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- <TableRow>
- <TableCell>Project 1</TableCell>
- <TableCell>Complete</TableCell>
- <TableCell>Project</TableCell>
- <TableCell>John Doe</TableCell>
- <TableCell>1.5 GB</TableCell>
- <TableCell>9:22 PM</TableCell>
- </TableRow>
- </TableBody>
- </Table>
- </Paper>;
- }
-}
-
-export default withStyles(styles)(ProjectList);
class ProjectPanel extends React.Component<ProjectPanelProps> {
render() {
+ const { classes, currentItemId, onItemClick, onItemDoubleClick, onContextMenu, onDialogOpen } = this.props;
return <div>
- <div className={this.props.classes.toolbar}>
- <Button color="primary" variant="raised" className={this.props.classes.button}>
+ <div className={classes.toolbar}>
+ <Button color="primary" variant="raised" className={classes.button}>
Create a collection
</Button>
- <Button color="primary" variant="raised" className={this.props.classes.button}>
+ <Button color="primary" variant="raised" className={classes.button}>
Run a process
</Button>
- <Button color="primary" onClick={() => this.props.onDialogOpen(this.props.currentItemId)} variant="raised" className={this.props.classes.button}>
+ <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
New project
</Button>
</div>
extractKey={(item: ProjectPanelItem) => item.uuid} />
</div>;
}
-
- componentWillReceiveProps({ match, currentItemId }: ProjectPanelProps) {
+
+ handleNewProjectClick = () => {
+ this.props.onDialogOpen(this.props.currentItemId);
+ }
+ componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) {
if (match.params.id !== currentItemId) {
- this.props.onItemRouteChange(match.params.id);
+ onItemRouteChange(match.params.id);
}
}
}
import { ProjectResource } from '../../models/project';
import { ResourceKind } from '../../models/resource';
-const drawerWidth = 240;
-const appBarHeight = 100;
-
-type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- root: {
- flexGrow: 1,
- zIndex: 1,
- overflow: 'hidden',
- position: 'relative',
- display: 'flex',
- width: '100vw',
- height: '100vh'
- },
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- position: "absolute",
- width: "100%"
- },
- drawerPaper: {
- position: 'relative',
- width: drawerWidth,
- display: 'flex',
- flexDirection: 'column',
- },
- contentWrapper: {
- backgroundColor: theme.palette.background.default,
- display: "flex",
- flexGrow: 1,
- minWidth: 0,
- paddingTop: appBarHeight
- },
- content: {
- padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
- overflowY: "auto",
- flexGrow: 1
- },
- toolbar: theme.mixins.toolbar
-});
-
interface WorkbenchDataProps {
projects: Array<TreeItem<ProjectResource>>;
currentProjectId: string;
}
};
- mainAppBarActions: MainAppBarActionProps = {
- onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => {
- this.props.dispatch<any>(setProjectItem(itemId, ItemMode.BOTH));
- this.props.dispatch<any>(loadDetails(itemId, ResourceKind.Project));
- },
- onSearch: searchText => {
- this.setState({ searchText });
- this.props.dispatch(push(`/search?q=${searchText}`));
- },
- onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(),
- onDetailsPanelToggle: () => {
- this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
- },
- onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: NavBreadcrumb) => {
- this.openContextMenu(event, breadcrumb.itemId, ContextMenuKind.Project);
- }
- };
-
- toggleSidePanelOpen = (itemId: string) => {
- this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId));
- }
-
- toggleSidePanelActive = (itemId: string) => {
- this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId));
- this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId));
- this.props.dispatch(push("/"));
- }
-
- handleCreationDialogOpen = (itemUuid: string) => {
- this.props.dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: itemUuid }));
- }
-
- openContextMenu = (event: React.MouseEvent<HTMLElement>, itemUuid: string, kind: ContextMenuKind) => {
- event.preventDefault();
- this.props.dispatch(
- contextMenuActions.OPEN_CONTEXT_MENU({
- position: { x: event.clientX, y: event.clientY },
- resource: { uuid: itemUuid, kind }
- })
- );
- }
-
render() {
const path = getTreePath(this.props.projects, this.props.currentProjectId);
const breadcrumbs = path.map(item => ({
this.props.dispatch<any>(loadDetails(item.uuid, ResourceKind.Project));
}}
{...props} />
+
+ mainAppBarActions: MainAppBarActionProps = {
+ onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => {
+ this.props.dispatch<any>(setProjectItem(itemId, ItemMode.BOTH));
+ this.props.dispatch<any>(loadDetails(itemId, ResourceKind.Project));
+ },
+ onSearch: searchText => {
+ this.setState({ searchText });
+ this.props.dispatch(push(`/search?q=${searchText}`));
+ },
+ onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(),
+ onDetailsPanelToggle: () => {
+ this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+ },
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: NavBreadcrumb) => {
+ this.openContextMenu(event, breadcrumb.itemId, ContextMenuKind.Project);
+ }
+ };
+
+ toggleSidePanelOpen = (itemId: string) => {
+ this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId));
+ }
+
+ toggleSidePanelActive = (itemId: string) => {
+ this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId));
+ this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId));
+ this.props.dispatch(push("/"));
+ }
+
+ handleCreationDialogOpen = (itemUuid: string) => {
+ this.props.dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: itemUuid }));
+ }
+
+ openContextMenu = (event: React.MouseEvent<HTMLElement>, itemUuid: string, kind: ContextMenuKind) => {
+ event.preventDefault();
+ this.props.dispatch(
+ contextMenuActions.OPEN_CONTEXT_MENU({
+ position: { x: event.clientX, y: event.clientY },
+ resource: { uuid: itemUuid, kind }
+ })
+ );
+ }
+
+
}
+const drawerWidth = 240;
+const appBarHeight = 100;
+
+type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ flexGrow: 1,
+ zIndex: 1,
+ overflow: 'hidden',
+ position: 'relative',
+ display: 'flex',
+ width: '100vw',
+ height: '100vh'
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ position: "absolute",
+ width: "100%"
+ },
+ drawerPaper: {
+ position: 'relative',
+ width: drawerWidth,
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ contentWrapper: {
+ backgroundColor: theme.palette.background.default,
+ display: "flex",
+ flexGrow: 1,
+ minWidth: 0,
+ paddingTop: appBarHeight
+ },
+ content: {
+ padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
+ overflowY: "auto",
+ flexGrow: 1
+ },
+ toolbar: theme.mixins.toolbar
+});
+
export default connect<WorkbenchDataProps>(
(state: RootState) => ({
projects: state.projects.items,
projects / arvados-workbench2.git / commitdiff