X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/e6039bec0497aa7e1391958e5c4f84bbaeef653e..c9185154744d997a35833de9c8e2cb9640b1162b:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index c7bfc8b4..a7d8cba7 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -7,46 +7,93 @@ 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'; +import { MainAppBar, MainAppBarActionProps, MainAppBarMenuItem } from '../../views-components/main-app-bar/main-app-bar'; import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs'; import { push } from 'react-router-redux'; -import ProjectTree from '../../views-components/project-tree/project-tree'; +import { ProjectTree } from '../../views-components/project-tree/project-tree'; 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 { 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 projectActions from "../../store/project/project-action"; -import ProjectPanel from "../project-panel/project-panel"; -import DetailsPanel from '../../views-components/details-panel/details-panel'; +import { projectActions } from "../../store/project/project-action"; +import { ProjectPanel } from "../project-panel/project-panel"; +import { DetailsPanel } from '../../views-components/details-panel/details-panel'; import { ArvadosTheme } from '../../common/custom-theme'; -import ContextMenu, { ContextMenuKind } from "../../views-components/context-menu"; -import CreateProjectDialog from "../../views-components/create-project-dialog/create-project-dialog"; -import { authService } from '../../services/services'; +import { CreateProjectDialog } from "../../views-components/create-project-dialog/create-project-dialog"; -import detailsPanelActions, { loadDetails } from "../../store/details-panel/details-panel-action"; -import contextMenuActions from "../../store/context-menu/context-menu-actions"; +import { detailsPanelActions, loadDetails } from "../../store/details-panel/details-panel-action"; +import { contextMenuActions } from "../../store/context-menu/context-menu-actions"; 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, FAVORITE_PANEL_ID } 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 { AuthService } from "../../services/auth-service/auth-service"; + +const DRAWER_WITDH = 240; +const APP_BAR_HEIGHT = 100; + +type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; + +const styles: StyleRulesCallback = (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: DRAWER_WITDH, + display: 'flex', + flexDirection: 'column', + }, + contentWrapper: { + backgroundColor: theme.palette.background.default, + display: "flex", + flexGrow: 1, + minWidth: 0, + paddingTop: APP_BAR_HEIGHT + }, + content: { + padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`, + overflowY: "auto", + flexGrow: 1 + }, + toolbar: theme.mixins.toolbar +}); interface WorkbenchDataProps { projects: Array>; currentProjectId: string; user?: User; + currentToken?: string; sidePanelItems: SidePanelItem[]; } +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; @@ -57,6 +104,7 @@ interface NavMenuItem extends MainAppBarMenuItem { } interface WorkbenchState { + isCurrentTokenDialogOpen: boolean; anchorEl: any; searchText: string; menuItems: { @@ -66,201 +114,216 @@ interface WorkbenchState { }; } - -class Workbench extends React.Component { - state = { - isCreationDialogOpen: false, - anchorEl: null, - searchText: "", - breadcrumbs: [], - menuItems: { - accountMenu: [ - { - label: "Logout", - action: () => this.props.dispatch(authActions.LOGOUT()) - }, - { - label: "My account", - action: () => this.props.dispatch(push("/my-account")) +export const Workbench = withStyles(styles)( + connect( + (state: RootState) => ({ + projects: state.projects.items, + currentProjectId: state.projects.currentItemId, + user: state.auth.user, + currentToken: state.auth.apiToken, + sidePanelItems: state.sidePanel + }) + )( + class extends React.Component { + state = { + isCreationDialogOpen: false, + isCurrentTokenDialogOpen: false, + anchorEl: null, + searchText: "", + breadcrumbs: [], + menuItems: { + accountMenu: [ + { + label: 'Current token', + action: () => this.toggleCurrentTokenModal() + }, + { + label: "Logout", + action: () => this.props.dispatch(logout()) + }, + { + label: "My account", + action: () => this.props.dispatch(push("/my-account")) + } + ], + helpMenu: [ + { + label: "Help", + action: () => this.props.dispatch(push("/help")) + } + ], + anonymousMenu: [ + { + label: "Sign in", + action: () => this.props.dispatch(login()) + } + ] } - ], - helpMenu: [ - { - label: "Help", - action: () => this.props.dispatch(push("/help")) - } - ], - anonymousMenu: [ - { - label: "Sign in", - action: () => this.props.dispatch(authActions.LOGIN()) - } - ] - } - }; + }; - render() { - const path = getTreePath(this.props.projects, this.props.currentProjectId); - const breadcrumbs = path.map(item => ({ - label: item.data.name, - itemId: item.data.uuid, - status: item.status - })); + render() { + const path = getTreePath(this.props.projects, this.props.currentProjectId); + const breadcrumbs = path.map(item => ({ + label: item.data.name, + itemId: item.data.uuid, + status: item.status + })); - const { classes, user } = this.props; - return ( -
-
- -
- {user && - -
- this.openContextMenu(event, authService.getUuid() || "", ContextMenuKind.RootProject)}> - this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} - onContextMenu={(event, item) => this.openContextMenu(event, item.data.uuid, 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)); - }} /> - - } -
-
- - - + const { classes, user } = this.props; + return ( +
+
+ +
+ {user && + +
+ 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, { + 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)); + }} /> + + } +
+
+ + + + +
+ {user && } +
+ + + +
- -
- - -
- ); - } - - 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} - onItemClick={item => { - 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)); - }} - {...props} /> + ); + } - mainAppBarActions: MainAppBarActionProps = { - onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => { - this.props.dispatch(setProjectItem(itemId, ItemMode.BOTH)); - this.props.dispatch(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, breadcrumb: NavBreadcrumb) => { - this.openContextMenu(event, breadcrumb.itemId, ContextMenuKind.Project); - } - }; - - toggleSidePanelOpen = (itemId: string) => { - this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId)); - } + renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => 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 + }); + }} + onDialogOpen={this.handleCreationDialogOpen} + onItemClick={item => { + 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)); + }} + {...props} /> - 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, itemUuid: string, kind: ContextMenuKind) => { - event.preventDefault(); - this.props.dispatch( - contextMenuActions.OPEN_CONTEXT_MENU({ - position: { x: event.clientX, y: event.clientY }, - resource: { uuid: itemUuid, kind } - }) - ); - } + renderFavoritePanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(dataExplorerActions.REQUEST_ITEMS({ id: FAVORITE_PANEL_ID }))} + 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.handleCreationDialogOpen} + onItemClick={item => { + this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind)); + }} + onItemDoubleClick={item => { + 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)); + }, + 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, breadcrumb: NavBreadcrumb) => { + this.openContextMenu(event, { + uuid: breadcrumb.itemId, + name: breadcrumb.label, + kind: ContextMenuKind.PROJECT + }); + } + }; -} + toggleSidePanelOpen = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId)); + } -const drawerWidth = 240; -const appBarHeight = 100; + toggleSidePanelActive = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId)); + this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId)); + const panelItem = this.props.sidePanelItems.find(it => it.id === itemId); + if (panelItem && panelItem.activeAction) { + panelItem.activeAction(this.props.dispatch); + } + } -type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; + handleCreationDialogOpen = (itemUuid: string) => { + this.props.dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: itemUuid })); + } -const styles: StyleRulesCallback = (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 -}); + 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 + }) + ); + } -export default connect( - (state: RootState) => ({ - projects: state.projects.items, - currentProjectId: state.projects.currentItemId, - user: state.auth.user, - sidePanelItems: state.sidePanel - }) -)( - withStyles(styles)(Workbench) + toggleCurrentTokenModal = () => { + this.setState({ isCurrentTokenDialogOpen: !this.state.isCurrentTokenDialogOpen }); + } + } + ) );