X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/27bcade93df26e25bb2b4aff537875f78d3c1ff5..75db1e88374315f84fdfb30faee84253e1383a28:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index bd8c28e8..f23a9784 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -6,43 +6,50 @@ import * as React from 'react'; import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import { connect, DispatchProp } from "react-redux"; -import { Route, Switch, RouteComponentProps } from "react-router"; -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 { Route, RouteComponentProps, Switch, Redirect } from "react-router"; +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 { 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 { ItemMode, setProjectItem } 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 { 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'; +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 { collectionCreateActions } from '~/store/collections/creator/collection-creator-action'; +import { ProjectPanel } from "~/views/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 { 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 { detailsPanelActions, loadDetails } from "~/store/details-panel/details-panel-action"; +import { contextMenuActions } from "~/store/context-menu/context-menu-actions"; +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 { CurrentTokenDialog } from '~/views-components/current-token-dialog/current-token-dialog'; +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 { UpdateCollectionDialog } from '../../views-components/update-collection-dialog/update-collection-dialog.'; -import { AuthService } from "../../services/auth-service/auth-service"; +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 { UpdateProjectDialog } from '~/views-components/update-project-dialog/update-project-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'; +import { UploadCollectionFilesDialog } from '~/views-components/upload-collection-files-dialog/upload-collection-files-dialog'; const DRAWER_WITDH = 240; const APP_BAR_HEIGHT = 100; @@ -80,7 +87,8 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ content: { padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`, overflowY: "auto", - flexGrow: 1 + flexGrow: 1, + position: 'relative' }, toolbar: theme.mixins.toolbar }); @@ -91,17 +99,17 @@ interface WorkbenchDataProps { user?: User; currentToken?: string; sidePanelItems: SidePanelItem[]; - router?: any; } -interface WorkbenchServiceProps { +interface WorkbenchGeneralProps { authService: AuthService; + buildInfo: string; } interface WorkbenchActionProps { } -type WorkbenchProps = WorkbenchDataProps & WorkbenchServiceProps & WorkbenchActionProps & DispatchProp & WithStyles; +type WorkbenchProps = WorkbenchDataProps & WorkbenchGeneralProps & WorkbenchActionProps & DispatchProp & WithStyles; interface NavBreadcrumb extends Breadcrumb { itemId: string; @@ -129,8 +137,7 @@ export const Workbench = withStyles(styles)( currentProjectId: state.projects.currentItemId, user: state.auth.user, currentToken: state.auth.apiToken, - sidePanelItems: state.sidePanel, - router: state.router.location + sidePanelItems: state.sidePanel }) )( class extends React.Component { @@ -170,13 +177,6 @@ export const Workbench = withStyles(styles)( } }; - componentDidMount() { - if (this.props.router.pathname.includes("/projects")) { - this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(SidePanelIdentifiers.PROJECTS)); - this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.PROJECTS)); - } - } - render() { const path = getTreePath(this.props.projects, this.props.currentProjectId); const breadcrumbs = path.map(item => ({ @@ -184,7 +184,6 @@ export const Workbench = withStyles(styles)( itemId: item.data.uuid, status: item.status })); - console.log("breadcrumbs", breadcrumbs); const { classes, user } = this.props; return ( @@ -195,6 +194,7 @@ export const Workbench = withStyles(styles)( searchText={this.state.searchText} user={this.props.user} menuItems={this.state.menuItems} + buildInfo={this.props.buildInfo} {...this.mainAppBarActions} /> {user && @@ -224,13 +224,13 @@ export const Workbench = withStyles(styles)( 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)); }} /> }
+ } /> @@ -242,7 +242,13 @@ export const Workbench = withStyles(styles)( + + + + + + ) => this.props.dispatch(loadCollection(collectionId, ResourceKind.COLLECTION))} + onItemRouteChange={(collectionId) => { + this.props.dispatch(loadCollection(collectionId)); + this.props.dispatch(loadCollectionTags(collectionId)); + }} onContextMenu={(event, item) => { this.openContextMenu(event, { uuid: item.uuid, name: item.name, + description: item.description, kind: ContextMenuKind.COLLECTION }); }} @@ -265,11 +275,20 @@ export const Workbench = withStyles(styles)( renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} onContextMenu={(event, item) => { + let kind: ContextMenuKind; + + if (item.kind === ResourceKind.PROJECT) { + kind = ContextMenuKind.PROJECT; + } else if (item.kind === ResourceKind.COLLECTION) { + kind = ContextMenuKind.COLLECTION_RESOURCE; + } else { + kind = ContextMenuKind.RESOURCE; + } - const kind = item.kind === ResourceKind.PROJECT ? ContextMenuKind.PROJECT : ContextMenuKind.RESOURCE; this.openContextMenu(event, { uuid: item.uuid, name: item.name, + description: item.description, kind }); }} @@ -281,9 +300,9 @@ export const Workbench = withStyles(styles)( onItemDoubleClick={item => { switch (item.kind) { case ResourceKind.COLLECTION: - this.props.dispatch(loadCollection(item.uuid, item.kind as ResourceKind)); + this.props.dispatch(loadCollection(item.uuid)); this.props.dispatch(push(getCollectionUrl(item.uuid))); - default: + default: this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE)); this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind)); } @@ -308,12 +327,11 @@ export const Workbench = withStyles(styles)( onItemDoubleClick={item => { switch (item.kind) { case ResourceKind.COLLECTION: - this.props.dispatch(loadCollection(item.uuid, item.kind as ResourceKind)); + this.props.dispatch(loadCollection(item.uuid)); 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)); } }} @@ -346,23 +364,25 @@ 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)); + const panelItem = this.props.sidePanelItems.find(it => it.id === itemId); if (panelItem && panelItem.activeAction) { - panelItem.activeAction(this.props.dispatch); + panelItem.activeAction(this.props.dispatch, this.props.authService.getUuid()); } } 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({