X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/823ac8656c70068c6cd59bb96ec8b6d6201076d9..219d452e647c01754bf71b91086b15cc9f00027a:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 74ab8ff0..e78c3e7c 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -7,7 +7,7 @@ import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/st import Drawer from '@material-ui/core/Drawer'; import { connect, DispatchProp } from "react-redux"; import { Route, Switch, RouteComponentProps } from "react-router"; -import { authActions } from "../../store/auth/auth-action"; +import { login, logout } from "../../store/auth/auth-action"; import { User } from "../../models/user"; import { RootState } from "../../store/store"; import { MainAppBar, MainAppBarActionProps, MainAppBarMenuItem } from '../../views-components/main-app-bar/main-app-bar'; @@ -18,13 +18,13 @@ import { TreeItem } from "../../components/tree/tree"; import { getTreePath } from '../../store/project/project-reducer'; import { sidePanelActions } from '../../store/side-panel/side-panel-action'; import { SidePanel, SidePanelItem } from '../../components/side-panel/side-panel'; -import { ItemMode, setProjectItem } from "../../store/navigation/navigation-action"; +import { ItemMode, setProjectItem, restoreBranch } from "../../store/navigation/navigation-action"; import { projectActions } from "../../store/project/project-action"; +import { collectionCreateActions } from '../../store/collections/creator/collection-creator-action'; import { ProjectPanel } from "../project-panel/project-panel"; import { DetailsPanel } from '../../views-components/details-panel/details-panel'; import { ArvadosTheme } from '../../common/custom-theme'; import { CreateProjectDialog } from "../../views-components/create-project-dialog/create-project-dialog"; -import { authService } from '../../services/services'; import { detailsPanelActions, loadDetails } from "../../store/details-panel/details-panel-action"; import { contextMenuActions } from "../../store/context-menu/context-menu-actions"; @@ -32,10 +32,22 @@ import { SidePanelIdentifiers } from '../../store/side-panel/side-panel-reducer' import { ProjectResource } from '../../models/project'; import { ResourceKind } from '../../models/resource'; import { ContextMenu, ContextMenuKind } from "../../views-components/context-menu/context-menu"; +import { FavoritePanel } from "../favorite-panel/favorite-panel"; import { CurrentTokenDialog } from '../../views-components/current-token-dialog/current-token-dialog'; +import { dataExplorerActions } from '../../store/data-explorer/data-explorer-action'; +import { Snackbar } from '../../views-components/snackbar/snackbar'; +import { favoritePanelActions } from '../../store/favorite-panel/favorite-panel-action'; +import { CreateCollectionDialog } from '../../views-components/create-collection-dialog/create-collection-dialog'; +import { CollectionPanel } from '../collection-panel/collection-panel'; +import { loadCollection } from '../../store/collection-panel/collection-panel-action'; +import { getCollectionUrl } from '../../models/collection'; +import { RemoveDialog } from '../../views-components/remove-dialog/remove-dialog'; +import { RenameDialog } from '../../views-components/rename-dialog/rename-dialog'; +import { UpdateCollectionDialog } from '../../views-components/update-collection-dialog/update-collection-dialog.'; +import { AuthService } from "../../services/auth-service/auth-service"; -const drawerWidth = 240; -const appBarHeight = 100; +const DRAWER_WITDH = 240; +const APP_BAR_HEIGHT = 100; type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; @@ -56,7 +68,7 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }, drawerPaper: { position: 'relative', - width: drawerWidth, + width: DRAWER_WITDH, display: 'flex', flexDirection: 'column', }, @@ -65,7 +77,7 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ display: "flex", flexGrow: 1, minWidth: 0, - paddingTop: appBarHeight + paddingTop: APP_BAR_HEIGHT }, content: { padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`, @@ -81,12 +93,17 @@ interface WorkbenchDataProps { user?: User; currentToken?: string; sidePanelItems: SidePanelItem[]; + router?: any; +} + +interface WorkbenchServiceProps { + authService: AuthService; } interface WorkbenchActionProps { } -type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles; +type WorkbenchProps = WorkbenchDataProps & WorkbenchServiceProps & WorkbenchActionProps & DispatchProp & WithStyles; interface NavBreadcrumb extends Breadcrumb { itemId: string; @@ -114,7 +131,8 @@ export const Workbench = withStyles(styles)( currentProjectId: state.projects.currentItemId, user: state.auth.user, currentToken: state.auth.apiToken, - sidePanelItems: state.sidePanel + sidePanelItems: state.sidePanel, + router: state.router.location }) )( class extends React.Component { @@ -132,7 +150,7 @@ export const Workbench = withStyles(styles)( }, { label: "Logout", - action: () => this.props.dispatch(authActions.LOGOUT()) + action: () => this.props.dispatch(logout()) }, { label: "My account", @@ -148,12 +166,26 @@ export const Workbench = withStyles(styles)( anonymousMenu: [ { label: "Sign in", - action: () => this.props.dispatch(authActions.LOGIN()) + action: () => this.props.dispatch(login()) } ] } }; + componentDidMount() { + const PROJECT_URL_REGEX = /\/projects\/(.*)/; + const getProjectIdFromUrl = (url: string) => { + const match = PROJECT_URL_REGEX.exec(url); + return match ? match[1] : match; + }; + + const id = getProjectIdFromUrl(this.props.router.pathname); + if (id) { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS)); + this.props.dispatch(restoreBranch(id)); + } + } + render() { const path = getTreePath(this.props.projects, this.props.currentProjectId); const breadcrumbs = path.map(item => ({ @@ -184,15 +216,23 @@ export const Workbench = withStyles(styles)( toggleOpen={this.toggleSidePanelOpen} toggleActive={this.toggleSidePanelActive} sidePanelItems={this.props.sidePanelItems} - onContextMenu={(event) => this.openContextMenu(event, authService.getUuid() || "", ContextMenuKind.RootProject)}> + onContextMenu={(event) => this.openContextMenu(event, { + uuid: this.props.authService.getUuid() || "", + name: "", + kind: ContextMenuKind.ROOT_PROJECT + })}> this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} - onContextMenu={(event, item) => this.openContextMenu(event, item.data.uuid, ContextMenuKind.Project)} + toggleOpen={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} + onContextMenu={(event, item) => this.openContextMenu(event, { + uuid: item.data.uuid, + name: item.data.name, + kind: ContextMenuKind.PROJECT + })} toggleActive={itemId => { - this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE)); - this.props.dispatch(loadDetails(itemId, ResourceKind.Project)); - this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.Projects)); + this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE)); + this.props.dispatch(loadDetails(itemId, ResourceKind.PROJECT)); + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS)); }} /> } @@ -200,37 +240,99 @@ export const Workbench = withStyles(styles)(
+ +
- { user && } + {user && } + - + + + + ); } + renderCollectionPanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(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 }>) => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} - onContextMenu={(event, item) => this.openContextMenu(event, item.uuid, ContextMenuKind.Project)} - onDialogOpen={this.handleCreationDialogOpen} + onItemRouteChange={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} + onContextMenu={(event, item) => { + + const kind = item.kind === ResourceKind.PROJECT ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE; + this.openContextMenu(event, { + uuid: item.uuid, + name: item.name, + kind + }); + }} + onProjectCreationDialogOpen={this.handleProjectCreationDialogOpen} + onCollectionCreationDialogOpen={this.handleCollectionCreationDialogOpen} onItemClick={item => { - this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind)); + this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind)); }} onItemDoubleClick={item => { - this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE)); - this.props.dispatch(loadDetails(item.uuid, ResourceKind.Project)); + switch (item.kind) { + case ResourceKind.COLLECTION: + this.props.dispatch(loadCollection(item.uuid, item.kind as ResourceKind)); + this.props.dispatch(push(getCollectionUrl(item.uuid))); + default: + this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE)); + this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind)); + } + + }} + {...props} /> + + renderFavoritePanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(favoritePanelActions.REQUEST_ITEMS())} + onContextMenu={(event, item) => { + const kind = item.kind === ResourceKind.PROJECT ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE; + this.openContextMenu(event, { + uuid: item.uuid, + name: item.name, + kind, + }); + }} + onDialogOpen={this.handleProjectCreationDialogOpen} + onItemClick={item => { + this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind)); + }} + onItemDoubleClick={item => { + switch (item.kind) { + case ResourceKind.COLLECTION: + this.props.dispatch(loadCollection(item.uuid, item.kind as ResourceKind)); + this.props.dispatch(push(getCollectionUrl(item.uuid))); + default: + this.props.dispatch(loadDetails(item.uuid, ResourceKind.PROJECT)); + this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE)); + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS)); + } + }} {...props} /> mainAppBarActions: MainAppBarActionProps = { onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => { - this.props.dispatch(setProjectItem(itemId, ItemMode.BOTH)); - this.props.dispatch(loadDetails(itemId, ResourceKind.Project)); + this.props.dispatch(setProjectItem(itemId, ItemMode.BOTH)); + this.props.dispatch(loadDetails(itemId, ResourceKind.PROJECT)); }, onSearch: searchText => { this.setState({ searchText }); @@ -241,7 +343,11 @@ export const Workbench = withStyles(styles)( this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); }, onContextMenu: (event: React.MouseEvent, breadcrumb: NavBreadcrumb) => { - this.openContextMenu(event, breadcrumb.itemId, ContextMenuKind.Project); + this.openContextMenu(event, { + uuid: breadcrumb.itemId, + name: breadcrumb.label, + kind: ContextMenuKind.PROJECT + }); } }; @@ -252,19 +358,26 @@ export const Workbench = withStyles(styles)( 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("/")); + const panelItem = this.props.sidePanelItems.find(it => it.id === itemId); + if (panelItem && panelItem.activeAction) { + panelItem.activeAction(this.props.dispatch); + } } - handleCreationDialogOpen = (itemUuid: string) => { + handleProjectCreationDialogOpen = (itemUuid: string) => { this.props.dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: itemUuid })); } - openContextMenu = (event: React.MouseEvent, itemUuid: string, kind: ContextMenuKind) => { + handleCollectionCreationDialogOpen = (itemUuid: string) => { + this.props.dispatch(collectionCreateActions.OPEN_COLLECTION_CREATOR({ ownerUuid: itemUuid })); + } + + openContextMenu = (event: React.MouseEvent, resource: { name: string; uuid: string; kind: ContextMenuKind; }) => { event.preventDefault(); this.props.dispatch( contextMenuActions.OPEN_CONTEXT_MENU({ position: { x: event.clientX, y: event.clientY }, - resource: { uuid: itemUuid, kind } + resource }) ); }