X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/4b065bb111ccdfdde1756e6507b84b72ce67c511..732294bc8aeafde5e85a4437cbd36b0d2648b04e:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 9cf02643b1..ce8e24625a 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -7,12 +7,13 @@ 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 { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs'; import { push } from 'react-router-redux'; +import { reset } from 'redux-form'; import { ProjectTree } from '../../views-components/project-tree/project-tree'; import { TreeItem } from "../../components/tree/tree"; import { getTreePath } from '../../store/project/project-reducer'; @@ -25,7 +26,6 @@ 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"; @@ -33,18 +33,25 @@ 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 { 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 { loadCollection, loadCollectionTags } from '../../store/collection-panel/collection-panel-action'; import { getCollectionUrl } from '../../models/collection'; import { UpdateCollectionDialog } from '../../views-components/update-collection-dialog/update-collection-dialog.'; +import { AuthService } from "../../services/auth-service/auth-service"; +import { RenameFileDialog } from '../../views-components/rename-file-dialog/rename-file-dialog'; +import { FileRemoveDialog } from '../../views-components/file-remove-dialog/file-remove-dialog'; +import { MultipleFilesRemoveDialog } from '../../views-components/file-remove-dialog/multiple-files-remove-dialog'; +import { DialogCollectionCreateWithSelectedFile } from '../../views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected'; +import { COLLECTION_CREATE_DIALOG } from '../../views-components/dialog-create/dialog-collection-create'; +import { PROJECT_CREATE_DIALOG } from '../../views-components/dialog-create/dialog-project-create'; -const drawerWidth = 240; -const appBarHeight = 100; +const DRAWER_WITDH = 240; +const APP_BAR_HEIGHT = 100; type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; @@ -65,7 +72,7 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }, drawerPaper: { position: 'relative', - width: drawerWidth, + width: DRAWER_WITDH, display: 'flex', flexDirection: 'column', }, @@ -74,12 +81,13 @@ 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`, overflowY: "auto", - flexGrow: 1 + flexGrow: 1, + position: 'relative' }, toolbar: theme.mixins.toolbar }); @@ -92,10 +100,14 @@ interface WorkbenchDataProps { 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; @@ -141,7 +153,7 @@ export const Workbench = withStyles(styles)( }, { label: "Logout", - action: () => this.props.dispatch(authActions.LOGOUT()) + action: () => this.props.dispatch(logout()) }, { label: "My account", @@ -157,7 +169,7 @@ export const Workbench = withStyles(styles)( anonymousMenu: [ { label: "Sign in", - action: () => this.props.dispatch(authActions.LOGIN()) + action: () => this.props.dispatch(login()) } ] } @@ -194,22 +206,22 @@ export const Workbench = withStyles(styles)( toggleActive={this.toggleSidePanelActive} sidePanelItems={this.props.sidePanelItems} onContextMenu={(event) => this.openContextMenu(event, { - uuid: authService.getUuid() || "", + uuid: this.props.authService.getUuid() || "", name: "", kind: ContextMenuKind.ROOT_PROJECT })}> this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} + 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)); }} /> } @@ -227,6 +239,10 @@ export const Workbench = withStyles(styles)( + + + + ) => this.props.dispatch(loadCollection(collectionId, ResourceKind.COLLECTION))} + onItemRouteChange={(collectionId) => { + this.props.dispatch(loadCollection(collectionId, ResourceKind.COLLECTION)); + this.props.dispatch(loadCollectionTags(collectionId)); + }} onContextMenu={(event, item) => { this.openContextMenu(event, { uuid: item.uuid, name: item.name, + description: item.description, kind: ContextMenuKind.COLLECTION }); }} {...props} /> renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} + onItemRouteChange={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} onContextMenu={(event, item) => { + let kind: ContextMenuKind; - const kind = item.kind === ResourceKind.PROJECT ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE; + if (item.kind === ResourceKind.PROJECT) { + kind = ContextMenuKind.PROJECT; + } else if (item.kind === ResourceKind.COLLECTION) { + kind = ContextMenuKind.COLLECTION_RESOURCE; + } else { + kind = ContextMenuKind.RESOURCE; + } + this.openContextMenu(event, { uuid: item.uuid, name: item.name, + description: item.description, 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 => { switch (item.kind) { case ResourceKind.COLLECTION: - this.props.dispatch(loadCollection(item.uuid, item.kind as ResourceKind)); + 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)); + 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(dataExplorerActions.REQUEST_ITEMS({ id: FAVORITE_PANEL_ID }))} + onItemRouteChange={() => this.props.dispatch(favoritePanelActions.REQUEST_ITEMS())} onContextMenu={(event, item) => { const kind = item.kind === ResourceKind.PROJECT ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE; this.openContextMenu(event, { @@ -288,17 +317,17 @@ export const Workbench = withStyles(styles)( }} onDialogOpen={this.handleProjectCreationDialogOpen} onItemClick={item => { - this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind)); + 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(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)); + 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)); } }} @@ -306,8 +335,8 @@ export const Workbench = withStyles(styles)( 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 }); @@ -340,14 +369,16 @@ export const Workbench = withStyles(styles)( } handleProjectCreationDialogOpen = (itemUuid: string) => { + this.props.dispatch(reset(PROJECT_CREATE_DIALOG)); this.props.dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: itemUuid })); } handleCollectionCreationDialogOpen = (itemUuid: string) => { + this.props.dispatch(reset(COLLECTION_CREATE_DIALOG)); this.props.dispatch(collectionCreateActions.OPEN_COLLECTION_CREATOR({ ownerUuid: itemUuid })); } - openContextMenu = (event: React.MouseEvent, resource: { name: string; uuid: string; kind: ContextMenuKind; }) => { + openContextMenu = (event: React.MouseEvent, resource: { name: string; uuid: string; description?: string; kind: ContextMenuKind; }) => { event.preventDefault(); this.props.dispatch( contextMenuActions.OPEN_CONTEXT_MENU({