[ARVADOS-WORKBENCH2] updated: 1.1.4-429-g3ee31ce
Git user
git at public.curoverse.com
Mon Jul 30 06:18:43 EDT 2018
Summary of changes:
src/components/icon/icon.tsx | 6 +-
src/index.tsx | 10 ++-
src/store/context-menu/context-menu-reducer.ts | 1 -
.../action-sets/collection-action-set.ts | 77 +++++++++++++++++
.../action-sets/favorite-action-set.ts | 2 +-
.../context-menu/action-sets/project-action-set.ts | 2 +-
.../action-sets/resource-action-set.ts | 2 +-
.../{action-sets => actions}/favorite-action.tsx | 2 +-
src/views-components/context-menu/context-menu.tsx | 9 +-
src/views/collection-panel/collection-panel.tsx | 97 ++--------------------
src/views/workbench/workbench.tsx | 29 +++++--
11 files changed, 123 insertions(+), 114 deletions(-)
create mode 100644 src/views-components/context-menu/action-sets/collection-action-set.ts
rename src/views-components/context-menu/{action-sets => actions}/favorite-action.tsx (89%)
via 3ee31ce16470660d90fb870e048c2de9fcde6e47 (commit)
from ccc52fb9e9a880f8b8e9b15b09c2ebd513575bd4 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 3ee31ce16470660d90fb870e048c2de9fcde6e47
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Mon Jul 30 12:18:16 2018 +0200
create collection context menu and modify code
Feature #13853
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index cc3108a..f8e53d3 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -14,6 +14,7 @@ import Close from '@material-ui/icons/Close';
import ContentCopy from '@material-ui/icons/ContentCopy';
import CreateNewFolder from '@material-ui/icons/CreateNewFolder';
import Delete from '@material-ui/icons/Delete';
+import DeviceHub from '@material-ui/icons/DeviceHub';
import Edit from '@material-ui/icons/Edit';
import Folder from '@material-ui/icons/Folder';
import GetApp from '@material-ui/icons/GetApp';
@@ -31,13 +32,14 @@ import PersonAdd from '@material-ui/icons/PersonAdd';
import PlayArrow from '@material-ui/icons/PlayArrow';
import RateReview from '@material-ui/icons/RateReview';
import Search from '@material-ui/icons/Search';
+import SettingsApplications from '@material-ui/icons/SettingsApplications';
import Star from '@material-ui/icons/Star';
import StarBorder from '@material-ui/icons/StarBorder';
export type IconType = React.SFC<{ className?: string }>;
export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
-export const AdvancedIcon: IconType = (props) => <Folder {...props} />;
+export const AdvancedIcon: IconType = (props) => <SettingsApplications {...props} />;
export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
export const CollectionIcon: IconType = (props) => <LibraryBooks {...props} />;
@@ -58,7 +60,7 @@ export const PaginationRightArrowIcon: IconType = (props) => <ChevronRight {...p
export const ProcessIcon: IconType = (props) => <BubbleChart {...props} />;
export const ProjectIcon: IconType = (props) => <Folder {...props} />;
export const ProjectsIcon: IconType = (props) => <Inbox {...props} />;
-export const ProvenanceGraphIcon: IconType = (props) => <Folder {...props} />;
+export const ProvenanceGraphIcon: IconType = (props) => <DeviceHub {...props} />;
export const RecentIcon: IconType = (props) => <AccessTime {...props} />;
export const RemoveIcon: IconType = (props) => <Delete {...props} />;
export const RemoveFavoriteIcon: IconType = (props) => <Star {...props} />;
diff --git a/src/index.tsx b/src/index.tsx
index 7443aea..b2c00f9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -24,11 +24,13 @@ import { rootProjectActionSet } from "./views-components/context-menu/action-set
import { projectActionSet } from "./views-components/context-menu/action-sets/project-action-set";
import { resourceActionSet } from './views-components/context-menu/action-sets/resource-action-set';
import { favoriteActionSet } from "./views-components/context-menu/action-sets/favorite-action-set";
+import { collectionActionSet } from './views-components/context-menu/action-sets/collection-action-set';
-addMenuActionSet(ContextMenuKind.RootProject, rootProjectActionSet);
-addMenuActionSet(ContextMenuKind.Project, projectActionSet);
-addMenuActionSet(ContextMenuKind.Resource, resourceActionSet);
-addMenuActionSet(ContextMenuKind.Favorite, favoriteActionSet);
+addMenuActionSet(ContextMenuKind.ROOT_PROJECT, rootProjectActionSet);
+addMenuActionSet(ContextMenuKind.PROJECT, projectActionSet);
+addMenuActionSet(ContextMenuKind.RESOURCE, resourceActionSet);
+addMenuActionSet(ContextMenuKind.FAVORITE, favoriteActionSet);
+addMenuActionSet(ContextMenuKind.COLLECTION, collectionActionSet);
fetchConfig()
.then(config => {
diff --git a/src/store/context-menu/context-menu-reducer.ts b/src/store/context-menu/context-menu-reducer.ts
index 7ce2b3e..8b51478 100644
--- a/src/store/context-menu/context-menu-reducer.ts
+++ b/src/store/context-menu/context-menu-reducer.ts
@@ -2,7 +2,6 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import { ResourceKind } from "../../models/resource";
import { contextMenuActions, ContextMenuAction } from "./context-menu-actions";
export interface ContextMenuState {
diff --git a/src/views-components/context-menu/action-sets/collection-action-set.ts b/src/views-components/context-menu/action-sets/collection-action-set.ts
new file mode 100644
index 0000000..0822b78
--- /dev/null
+++ b/src/views-components/context-menu/action-sets/collection-action-set.ts
@@ -0,0 +1,77 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { ContextMenuActionSet } from "../context-menu-action-set";
+import { ToggleFavoriteAction } from "../actions/favorite-action";
+import { toggleFavorite } from "../../../store/favorites/favorites-actions";
+import { dataExplorerActions } from "../../../store/data-explorer/data-explorer-action";
+import { FAVORITE_PANEL_ID } from "../../../views/favorite-panel/favorite-panel";
+import { RenameIcon, ShareIcon, MoveToIcon, CopyIcon, DetailsIcon, ProvenanceGraphIcon, AdvancedIcon, RemoveIcon } from "../../../components/icon/icon";
+
+export const collectionActionSet: ContextMenuActionSet = [[
+ {
+ icon: RenameIcon,
+ name: "Edit collection",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: ShareIcon,
+ name: "Share",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: MoveToIcon,
+ name: "Move to",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ component: ToggleFavoriteAction,
+ execute: (dispatch, resource) => {
+ dispatch<any>(toggleFavorite(resource)).then(() => {
+ dispatch<any>(dataExplorerActions.REQUEST_ITEMS({ id: FAVORITE_PANEL_ID }));
+ });
+ }
+ },
+ {
+ icon: CopyIcon,
+ name: "Copy to project",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: DetailsIcon,
+ name: "View details",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: ProvenanceGraphIcon,
+ name: "Provenance graph",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: AdvancedIcon,
+ name: "Advanced",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: RemoveIcon,
+ name: "Remove",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ }
+]];
diff --git a/src/views-components/context-menu/action-sets/favorite-action-set.ts b/src/views-components/context-menu/action-sets/favorite-action-set.ts
index 58cf6cc..9682d4b 100644
--- a/src/views-components/context-menu/action-sets/favorite-action-set.ts
+++ b/src/views-components/context-menu/action-sets/favorite-action-set.ts
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import { ContextMenuActionSet } from "../context-menu-action-set";
-import { ToggleFavoriteAction } from "./favorite-action";
+import { ToggleFavoriteAction } from "../actions/favorite-action";
import { toggleFavorite } from "../../../store/favorites/favorites-actions";
import { dataExplorerActions } from "../../../store/data-explorer/data-explorer-action";
import { FAVORITE_PANEL_ID } from "../../../views/favorite-panel/favorite-panel";
diff --git a/src/views-components/context-menu/action-sets/project-action-set.ts b/src/views-components/context-menu/action-sets/project-action-set.ts
index efcc429..25e0ba3 100644
--- a/src/views-components/context-menu/action-sets/project-action-set.ts
+++ b/src/views-components/context-menu/action-sets/project-action-set.ts
@@ -5,7 +5,7 @@
import { ContextMenuActionSet } from "../context-menu-action-set";
import { projectActions } from "../../../store/project/project-action";
import { NewProjectIcon } from "../../../components/icon/icon";
-import { ToggleFavoriteAction } from "./favorite-action";
+import { ToggleFavoriteAction } from "../actions/favorite-action";
import { toggleFavorite } from "../../../store/favorites/favorites-actions";
import { dataExplorerActions } from "../../../store/data-explorer/data-explorer-action";
import { FAVORITE_PANEL_ID } from "../../../views/favorite-panel/favorite-panel";
diff --git a/src/views-components/context-menu/action-sets/resource-action-set.ts b/src/views-components/context-menu/action-sets/resource-action-set.ts
index 8915283..9585a86 100644
--- a/src/views-components/context-menu/action-sets/resource-action-set.ts
+++ b/src/views-components/context-menu/action-sets/resource-action-set.ts
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import { ContextMenuActionSet } from "../context-menu-action-set";
-import { ToggleFavoriteAction } from "./favorite-action";
+import { ToggleFavoriteAction } from "../actions/favorite-action";
import { toggleFavorite } from "../../../store/favorites/favorites-actions";
export const resourceActionSet: ContextMenuActionSet = [[{
diff --git a/src/views-components/context-menu/action-sets/favorite-action.tsx b/src/views-components/context-menu/actions/favorite-action.tsx
similarity index 89%
rename from src/views-components/context-menu/action-sets/favorite-action.tsx
rename to src/views-components/context-menu/actions/favorite-action.tsx
index a4cf4e3..05e03fb 100644
--- a/src/views-components/context-menu/action-sets/favorite-action.tsx
+++ b/src/views-components/context-menu/actions/favorite-action.tsx
@@ -4,7 +4,7 @@
import * as React from "react";
import { ListItemIcon, ListItemText } from "@material-ui/core";
-import { FavoriteIcon, AddFavoriteIcon, RemoveFavoriteIcon } from "../../../components/icon/icon";
+import { AddFavoriteIcon, RemoveFavoriteIcon } from "../../../components/icon/icon";
import { connect } from "react-redux";
import { RootState } from "../../../store/store";
diff --git a/src/views-components/context-menu/context-menu.tsx b/src/views-components/context-menu/context-menu.tsx
index 9b339c6..4ec7029 100644
--- a/src/views-components/context-menu/context-menu.tsx
+++ b/src/views-components/context-menu/context-menu.tsx
@@ -56,8 +56,9 @@ const getMenuActionSet = (resource?: ContextMenuResource): ContextMenuActionSet
};
export enum ContextMenuKind {
- RootProject = "RootProject",
- Project = "Project",
- Resource = "Resource",
- Favorite = "Favorite"
+ ROOT_PROJECT = "RootProject",
+ PROJECT = "Project",
+ RESOURCE = "Resource",
+ FAVORITE = "Favorite",
+ COLLECTION = 'Collection'
}
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 1e5fb5e..b55e50c 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -4,17 +4,14 @@
import * as React from 'react';
import {
- StyleRulesCallback, WithStyles, withStyles, Card, CardHeader, IconButton,
- CardContent, Grid, MenuItem, Menu, ListItemIcon, ListItemText, Typography
+ StyleRulesCallback, WithStyles, withStyles, Card,
+ CardHeader, IconButton, CardContent, Grid
} from '@material-ui/core';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { ArvadosTheme } from '../../common/custom-theme';
import { RootState } from '../../store/store';
-import {
- MoreOptionsIcon, CollectionIcon, ShareIcon, RenameIcon, AddFavoriteIcon, MoveToIcon,
- CopyIcon, ProvenanceGraphIcon, DetailsIcon, AdvancedIcon, RemoveIcon
-} from '../../components/icon/icon';
+import { MoreOptionsIcon, CollectionIcon } from '../../components/icon/icon';
import { DetailsAttribute } from '../../components/details-attribute/details-attribute';
import { CollectionResource } from '../../models/collection';
@@ -30,51 +27,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
}
});
-const MENU_OPTIONS = [
- {
- title: 'Edit collection',
- icon: RenameIcon
- },
- {
- title: 'Share',
- icon: ShareIcon
- },
- {
- title: 'Move to',
- icon: MoveToIcon
- },
- {
- title: 'Add to favorites',
- icon: AddFavoriteIcon
- },
- {
- title: 'Copy to project',
- icon: CopyIcon
- },
- {
- title: 'View details',
- icon: DetailsIcon
- },
- {
- title: 'Provenance graph',
- icon: ProvenanceGraphIcon
- },
- {
- title: 'Advanced',
- icon: AdvancedIcon
- },
- {
- title: 'Remove',
- icon: RemoveIcon
- }
-];
-
interface CollectionPanelDataProps {
item: CollectionResource;
}
interface CollectionPanelActionProps {
onItemRouteChange: (collectionId: string) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: CollectionResource) => void;
}
type CollectionPanelProps = CollectionPanelDataProps & CollectionPanelActionProps
@@ -84,32 +43,8 @@ export const CollectionPanel = withStyles(styles)(
connect((state: RootState) => ({ item: state.collectionPanel.item }))(
class extends React.Component<CollectionPanelProps> {
- state = {
- anchorEl: undefined,
- open: false
- };
-
- showMenu = (event: any) => {
- this.setState({ anchorEl: event.currentTarget, open: true });
- }
-
- closeMenu = () => {
- this.setState({ anchorEl: undefined, open: false });
- }
-
- displayMenuAction = () => {
- return <IconButton
- aria-label="More options"
- aria-owns={this.state.anchorEl ? 'submenu' : undefined}
- aria-haspopup="true"
- onClick={this.showMenu}>
- <MoreOptionsIcon />
- </IconButton>;
- }
-
render() {
- const { anchorEl, open } = this.state;
- const { classes, item } = this.props;
+ const { classes, item, onContextMenu } = this.props;
return <div>
<Card className={classes.card}>
<CardHeader
@@ -117,32 +52,12 @@ export const CollectionPanel = withStyles(styles)(
action={
<IconButton
aria-label="More options"
- aria-owns={anchorEl ? 'submenu' : undefined}
- aria-haspopup="true"
- onClick={this.showMenu}>
+ onClick={event => onContextMenu(event, item)}>
<MoreOptionsIcon />
</IconButton>
}
title={item && item.name } />
<CardContent>
- <Menu
- id="submenu"
- anchorEl={anchorEl}
- open={open}
- onClose={this.closeMenu}>
- {MENU_OPTIONS.map((option) => (
- <MenuItem key={option.title}>
- <ListItemIcon>
- <option.icon />
- </ListItemIcon>
- <ListItemText inset primary={
- <Typography variant='body1'>
- {option.title}
- </Typography>
- }/>
- </MenuItem>
- ))}
- </Menu>
<Grid container direction="column">
<Grid item xs={6}>
<DetailsAttribute label='Collection UUID' value={item && item.uuid} />
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index bef7ad8..6c7f85d 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -193,7 +193,7 @@ export const Workbench = withStyles(styles)(
onContextMenu={(event) => this.openContextMenu(event, {
uuid: authService.getUuid() || "",
name: "",
- kind: ContextMenuKind.RootProject
+ kind: ContextMenuKind.ROOT_PROJECT
})}>
<ProjectTree
projects={this.props.projects}
@@ -201,7 +201,7 @@ export const Workbench = withStyles(styles)(
onContextMenu={(event, item) => this.openContextMenu(event, {
uuid: item.data.uuid,
name: item.data.name,
- kind: ContextMenuKind.Project
+ kind: ContextMenuKind.PROJECT
})}
toggleActive={itemId => {
this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE));
@@ -233,12 +233,19 @@ export const Workbench = withStyles(styles)(
renderCollectionPanel = (props: RouteComponentProps<{ id: string }>) => <CollectionPanel
onItemRouteChange={(collectionId) => this.props.dispatch<any>(loadCollection(collectionId, ResourceKind.Collection))}
+ onContextMenu={(event, item) => {
+ this.openContextMenu(event, {
+ uuid: item.uuid,
+ name: item.name,
+ kind: ContextMenuKind.COLLECTION
+ });
+ }}
{...props} />
renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => <ProjectPanel
onItemRouteChange={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
onContextMenu={(event, item) => {
- const kind = item.kind === ResourceKind.Project ? ContextMenuKind.Project : ContextMenuKind.Resource;
+ const kind = item.kind === ResourceKind.Project ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE;
this.openContextMenu(event, {
uuid: item.uuid,
name: item.name,
@@ -264,7 +271,7 @@ export const Workbench = withStyles(styles)(
renderFavoritePanel = (props: RouteComponentProps<{ id: string }>) => <FavoritePanel
onItemRouteChange={() => this.props.dispatch<any>(dataExplorerActions.REQUEST_ITEMS({ id: FAVORITE_PANEL_ID }))}
onContextMenu={(event, item) => {
- const kind = item.kind === ResourceKind.Project ? ContextMenuKind.Project : ContextMenuKind.Resource;
+ const kind = item.kind === ResourceKind.Project ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE;
this.openContextMenu(event, {
uuid: item.uuid,
name: item.name,
@@ -276,9 +283,15 @@ export const Workbench = withStyles(styles)(
this.props.dispatch<any>(loadDetails(item.uuid, item.kind as ResourceKind));
}}
onItemDoubleClick={item => {
- this.props.dispatch<any>(loadDetails(item.uuid, ResourceKind.Project));
- this.props.dispatch<any>(setProjectItem(item.uuid, ItemMode.ACTIVE));
- this.props.dispatch<any>(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.Projects));
+ switch (item.kind) {
+ case ResourceKind.Collection:
+ this.props.dispatch<any>(loadCollection(item.uuid, item.kind as ResourceKind));
+ this.props.dispatch(push(getCollectionUrl(item.uuid)));
+ default:
+ this.props.dispatch<any>(loadDetails(item.uuid, ResourceKind.Project));
+ this.props.dispatch<any>(setProjectItem(item.uuid, ItemMode.ACTIVE));
+ this.props.dispatch<any>(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.Projects));
+ }
}}
{...props} />
@@ -299,7 +312,7 @@ export const Workbench = withStyles(styles)(
this.openContextMenu(event, {
uuid: breadcrumb.itemId,
name: breadcrumb.label,
- kind: ContextMenuKind.Project
+ kind: ContextMenuKind.PROJECT
});
}
};
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list