X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/f1065fb7260dd562ea2e826e9cbc508d7932ecca..1514f6a2ae8103f75f08034299115ad751d8a785:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 8028f2c3..553afa4d 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -4,433 +4,130 @@ 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, 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 { 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 { Route, Switch } from "react-router"; 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 { ProjectResource } from '~/models/project'; -import { ResourceKind } from '~/models/resource'; -import { ContextMenu, ContextMenuKind } from "~/views-components/context-menu/context-menu"; +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 { RichTextEditorDialog } from '~/views-components/rich-text-editor-dialog/rich-text-editor-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, 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 { Routes } from '~/routes/routes'; +import { SidePanel } from '~/views-components/side-panel/side-panel'; +import { ProcessPanel } from '~/views/process-panel/process-panel'; +import { ProcessLogPanel } from '~/views/process-log-panel/process-log-panel'; +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 { CopyProcessDialog } from '~/views-components/dialog-forms/copy-process-dialog'; +import { UpdateCollectionDialog } from '~/views-components/dialog-forms/update-collection-dialog'; +import { UpdateProcessDialog } from '~/views-components/dialog-forms/update-process-dialog'; +import { UpdateProjectDialog } from '~/views-components/dialog-forms/update-project-dialog'; +import { MoveProcessDialog } from '~/views-components/dialog-forms/move-process-dialog'; +import { MoveProjectDialog } from '~/views-components/dialog-forms/move-project-dialog'; +import { MoveCollectionDialog } from '~/views-components/dialog-forms/move-collection-dialog'; +import { FilesUploadCollectionDialog } from '~/views-components/dialog-forms/files-upload-collection-dialog'; +import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog'; +import { ProcessCommandDialog } from '~/views-components/process-command-dialog/process-command-dialog'; +import { MainContentBar } from '~/views-components/main-content-bar/main-content-bar'; +import { Grid } from '@material-ui/core'; import { TrashPanel } from "~/views/trash-panel/trash-panel"; -import { trashPanelActions } from "~/store/trash-panel/trash-panel-action"; - -const DRAWER_WITDH = 240; -const APP_BAR_HEIGHT = 100; +import { SharedWithMePanel } from '~/views/shared-with-me-panel/shared-with-me-panel'; +import { RunProcessPanel } from '~/views/run-process-panel/run-process-panel'; +import SplitterLayout from 'react-splitter-layout'; +import { WorkflowPanel } from '~/views/workflow-panel/workflow-panel'; +import { FileSelectionDialog } from '~/views-components/dialog-forms/file-selection-dialog'; -type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; +type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { - flexGrow: 1, - zIndex: 1, - overflow: 'hidden', - position: 'relative', - display: 'flex', - width: '100vw', - height: '100vh' + paddingTop: theme.spacing.unit * 7, + background: theme.palette.background.default }, - appBar: { - zIndex: theme.zIndex.drawer + 1, - position: "absolute", - width: "100%" + container: { + position: 'relative' + }, + splitter: { + '& > .layout-splitter': { + width: '2px' + } }, - drawerPaper: { - position: 'relative', - width: DRAWER_WITDH, - display: 'flex', - flexDirection: 'column', + asidePanel: { + paddingTop: theme.spacing.unit, + height: '100%' }, contentWrapper: { - backgroundColor: theme.palette.background.default, - display: "flex", - flexGrow: 1, - minWidth: 0, - paddingTop: APP_BAR_HEIGHT + paddingTop: theme.spacing.unit, + minWidth: 0 }, content: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`, - overflowY: "auto", - flexGrow: 1, - position: 'relative' - }, - toolbar: theme.mixins.toolbar + minWidth: 0, + paddingLeft: theme.spacing.unit * 3, + paddingRight: theme.spacing.unit * 3, + } }); -interface WorkbenchDataProps { - projects: Array>; - currentProjectId: string; - user?: User; - currentToken?: string; - sidePanelItems: SidePanelItem[]; -} - -interface WorkbenchGeneralProps { - authService: AuthService; - buildInfo: string; -} - -interface WorkbenchActionProps { -} - -type WorkbenchProps = WorkbenchDataProps & WorkbenchGeneralProps & WorkbenchActionProps & DispatchProp & WithStyles; - -interface NavBreadcrumb extends Breadcrumb { - itemId: string; -} - -interface NavMenuItem extends MainAppBarMenuItem { - action: () => void; -} - -interface WorkbenchState { - isCurrentTokenDialogOpen: boolean; - anchorEl: any; - searchText: string; - menuItems: { - accountMenu: NavMenuItem[], - helpMenu: NavMenuItem[], - anonymousMenu: NavMenuItem[] - }; -} - -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()) - } - ] - } - }; - - 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: 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, - ownerUuid: item.data.ownerUuid || this.props.authService.getUuid(), - isTrashed: item.data.isTrashed, - name: item.data.name, - kind: ContextMenuKind.PROJECT - })} - toggleActive={itemId => { - this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE)); - this.props.dispatch(loadDetails(itemId, ResourceKind.PROJECT)); - }} /> - - } -
-
- - } /> - - - - - -
- {user && } -
- - - - - - - - - - - -
- ); - } - - renderCollectionPanel = (props: RouteComponentProps<{ id: string }>) => { - 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, - isTrashed: item.isTrashed, - kind: ContextMenuKind.COLLECTION - }); - }} - {...props} /> - - 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; - } - - this.openContextMenu(event, { - uuid: item.uuid, - name: item.name, - description: item.description, - isTrashed: item.isTrashed, - ownerUuid: item.owner || this.props.authService.getUuid(), - kind - }); - }} - onProjectCreationDialogOpen={this.handleProjectCreationDialogOpen} - onCollectionCreationDialogOpen={this.handleCollectionCreationDialogOpen} - 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)); - 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, - isTrashed: item.isTrashed, - 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)); - this.props.dispatch(push(getCollectionUrl(item.uuid))); - default: - this.props.dispatch(loadDetails(item.uuid, ResourceKind.PROJECT)); - this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE)); - } - - }} - {...props} /> - - renderTrashPanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(trashPanelActions.REQUEST_ITEMS())} - onContextMenu={(event, item) => { - const kind = item.kind === ResourceKind.PROJECT ? ContextMenuKind.PROJECT : ContextMenuKind.COLLECTION; - this.openContextMenu(event, { - uuid: item.uuid, - name: item.name, - isTrashed: item.isTrashed, - ownerUuid: item.owner, - 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)); - // this.props.dispatch(push(getCollectionUrl(item.uuid))); - // default: - // this.props.dispatch(loadDetails(item.uuid, ResourceKind.PROJECT)); - // this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE)); - // } - - }} - {...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)); - } - - toggleSidePanelActive = (itemId: string) => { - 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, 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; description?: string; isTrashed?: boolean, ownerUuid?: 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 }); - } - } - ) -); +type WorkbenchPanelProps = WithStyles; + +export const WorkbenchPanel = + withStyles(styles)(({ classes }: WorkbenchPanelProps) => + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + );