X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/762c232937e6825839ada7d682542601aaffbd90..e2ea20e09a5e5a629eee78145f35a9ed443a5867:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index f002ad9a..1d53842b 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -3,36 +3,47 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; - -import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles'; -import Drawer from '@material-ui/core/Drawer'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; +import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; import { connect, DispatchProp } from "react-redux"; -import Tree from "../../components/tree/tree"; -import { Project } from "../../models/project"; -import ProjectList from "../../components/project-list/project-list"; import { Route, Switch } from "react-router"; -import { Link } from "react-router-dom"; -import Button from "@material-ui/core/Button/Button"; -import authActions from "../../store/auth/auth-action"; -import IconButton from "@material-ui/core/IconButton/IconButton"; -import Menu from "@material-ui/core/Menu/Menu"; -import MenuItem from "@material-ui/core/MenuItem/MenuItem"; -import { AccountCircle } from "@material-ui/icons"; -import { User } from "../../models/user"; -import Grid from "@material-ui/core/Grid/Grid"; -import { RootState } from "../../store/store"; -import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItems, MainAppBarMenuItem } from '../../components/main-app-bar/main-app-bar'; -import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs'; +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'; - -const drawerWidth = 240; - -type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar'; - -const styles: StyleRulesCallback = (theme: Theme) => ({ +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: { flexGrow: 1, zIndex: 1, @@ -44,45 +55,46 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ }, appBar: { zIndex: theme.zIndex.drawer + 1, - backgroundColor: '#692498', position: "absolute", width: "100%" }, - drawerPaper: { - position: 'relative', - width: drawerWidth, + 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, - backgroundColor: theme.palette.background.default, - padding: theme.spacing.unit * 3, - height: '100%', - minWidth: 0, + position: 'relative' }, - toolbar: theme.mixins.toolbar }); interface WorkbenchDataProps { - projects: Project[]; user?: User; + currentToken?: string; } -interface WorkbenchActionProps { +interface WorkbenchGeneralProps { + authService: AuthService; + buildInfo: string; } -type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles; - -interface NavBreadcrumb extends Breadcrumb { - path: string +interface WorkbenchActionProps { } +type WorkbenchProps = WorkbenchDataProps & WorkbenchGeneralProps & WorkbenchActionProps & DispatchProp & WithStyles; + interface NavMenuItem extends MainAppBarMenuItem { - action: () => void + action: () => void; } interface WorkbenchState { + isCurrentTokenDialogOpen: boolean; anchorEl: any; - breadcrumbs: NavBreadcrumb[]; searchText: string; menuItems: { accountMenu: NavMenuItem[], @@ -91,97 +103,110 @@ interface WorkbenchState { }; } -class Workbench extends React.Component { - state = { - anchorEl: null, - searchText: "", - breadcrumbs: [ - { - label: "Projects", - path: "/projects" - }, { - label: "Project 1", - path: "/projects/project-1" - } - ], - menuItems: { - accountMenu: [ - { - label: "Logout", - action: () => this.props.dispatch(authActions.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(authActions.LOGIN()) +export const Workbench = withStyles(styles)( + connect( + (state: RootState) => ({ + user: state.auth.user, + currentToken: state.auth.apiToken, + }) + )( + class extends React.Component { + state = { + 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()) + } + ] } - ] - } - } - - - mainAppBarActions: MainAppBarActionProps = { - onBreadcrumbClick: (breadcrumb: NavBreadcrumb) => this.props.dispatch(push(breadcrumb.path)), - onSearch: searchText => { - this.setState({ searchText }); - this.props.dispatch(push(`/search?q=${searchText}`)); - }, - onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action() - } + }; + + render() { + const { classes, user } = this.props; + return ( +
+
+ +
+ {user && } +
+
+ + + + + + +
+ {user && } +
+ + + + + + + + + + + + + + + +
+ ); + } - render() { - const { classes, user } = this.props; - return ( -
-
- -
- {user && - -
-
- - {p.name} - } /> - } -
-
-
- - - -
-
- ); - } -} + mainAppBarActions: MainAppBarActionProps = { + 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()); + }, + }; -export default connect( - (state: RootState) => ({ - projects: state.projects, - user: state.auth.user - }) -)( - withStyles(styles)(Workbench) + toggleCurrentTokenModal = () => { + this.setState({ isCurrentTokenDialogOpen: !this.state.isCurrentTokenDialogOpen }); + } + } + ) );