X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/c632f0edf3f863fd29efb90e010f286b40cb9e92..e2ea20e09a5e5a629eee78145f35a9ed443a5867:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 8e2cb578..1d53842b 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -4,43 +4,44 @@ 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 { authActions } 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, Switch } 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 { 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 { 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"; -import { sidePanelData, 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'; - -const drawerWidth = 240; -const appBarHeight = 100; - -type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; +import { ProjectPanel } from "~/views/project-panel/project-panel"; +import { DetailsPanel } from '~/views-components/details-panel/details-panel'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { detailsPanelActions } from "~/store/details-panel/details-panel-action"; +import { ContextMenu } 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 { Snackbar } from '~/views-components/snackbar/snackbar'; +import { CollectionPanel } from '../collection-panel/collection-panel'; +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 { SidePanel } from '~/views-components/side-panel/side-panel'; +import { Routes } from '~/routes/routes'; +import { Breadcrumbs } from '~/views-components/breadcrumbs/breadcrumbs'; +import { CreateProjectDialog } from '~/views-components/dialog-forms/create-project-dialog'; +import { CreateCollectionDialog } from '~/views-components/dialog-forms/create-collection-dialog'; +import { CopyCollectionDialog } from '~/views-components/dialog-forms/copy-collection-dialog'; +import { UpdateCollectionDialog } from '~/views-components/dialog-forms/update-collection-dialog'; +import { UpdateProjectDialog } from '~/views-components/dialog-forms/update-project-dialog'; +import { MoveProjectDialog } from '~/views-components/dialog-forms/move-project-dialog'; +import { MoveCollectionDialog } from '~/views-components/dialog-forms/move-collection-dialog'; +import { ProcessPanel } from '~/views/process-panel/process-panel'; +import { UploadCollectionFilesDialog } from '~/views-components/dialog-forms/upload-collection-files-dialog'; +import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog'; + + +const APP_BAR_HEIGHT = 100; + +type CssRules = 'root' | 'appBar' | 'content' | 'contentWrapper'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { @@ -57,44 +58,36 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ 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 + 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 }); interface WorkbenchDataProps { - projects: Array>; - currentProjectId: string; user?: User; currentToken?: string; - sidePanelItems: SidePanelItem[]; } -interface WorkbenchActionProps { +interface WorkbenchGeneralProps { + authService: AuthService; + buildInfo: string; } -type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles; - -interface NavBreadcrumb extends Breadcrumb { - itemId: string; +interface WorkbenchActionProps { } +type WorkbenchProps = WorkbenchDataProps & WorkbenchGeneralProps & WorkbenchActionProps & DispatchProp & WithStyles; + interface NavMenuItem extends MainAppBarMenuItem { action: () => void; } @@ -113,16 +106,12 @@ interface WorkbenchState { 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: "", @@ -135,7 +124,7 @@ export const Workbench = withStyles(styles)( }, { label: "Logout", - action: () => this.props.dispatch(authActions.LOGOUT()) + action: () => this.props.dispatch(logout()) }, { label: "My account", @@ -151,67 +140,33 @@ export const Workbench = withStyles(styles)( anonymousMenu: [ { label: "Sign in", - action: () => this.props.dispatch(authActions.LOGIN()) + action: () => this.props.dispatch(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 - })); - const { classes, user } = this.props; return (
- {user && - -
- this.openContextMenu(event, { - uuid: authService.getUuid() || "", - name: "", - kind: ContextMenuKind.RootProject - })}> - 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 && }
- - + + + +
{user && } @@ -219,6 +174,17 @@ export const Workbench = withStyles(styles)( + + + + + + + + + + + ) => 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} /> - - 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}`)); @@ -281,42 +202,8 @@ export const Workbench = withStyles(styles)( 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)); - } - - 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); - } - } - - handleCreationDialogOpen = (itemUuid: string) => { - this.props.dispatch(projectActions.OPEN_PROJECT_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 - }) - ); - } - toggleCurrentTokenModal = () => { this.setState({ isCurrentTokenDialogOpen: !this.state.isCurrentTokenDialogOpen }); }