src/views/workbench/workbench.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6
   7 import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import Drawer from '@material-ui/core/Drawer';
   9 import AppBar from '@material-ui/core/AppBar';
  10 import Toolbar from '@material-ui/core/Toolbar';
  11 import Typography from '@material-ui/core/Typography';
  12 import { connect, DispatchProp } from "react-redux";
  13 import ProjectList from "../../components/project-list/project-list";
  14 import { Route, Switch } from "react-router";
  15 import { Link } from "react-router-dom";
  16 import Button from "@material-ui/core/Button/Button";
  17 import authActions from "../../store/auth/auth-action";
  18 import IconButton from "@material-ui/core/IconButton/IconButton";
  19 import Menu from "@material-ui/core/Menu/Menu";
  20 import MenuItem from "@material-ui/core/MenuItem/MenuItem";
  21 import { AccountCircle } from "@material-ui/icons";
  22 import { User } from "../../models/user";
  23 import Grid from "@material-ui/core/Grid/Grid";
  24 import { RootState } from "../../store/store";
  25 import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItems, MainAppBarMenuItem } from '../../components/main-app-bar/main-app-bar';
  26 import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs';
  27 import { push } from 'react-router-redux';
  28 import projectActions from "../../store/project/project-action";
  29 import ProjectTree from '../../components/project-tree/project-tree';
  30 import { TreeItem } from "../../components/tree/tree";
  31 import { Project } from "../../models/project";
  32 import { projectService } from '../../services/services';
  33 import ProjectExplorer from '../project-explorer/project-explorer';
  34
  35 const drawerWidth = 240;
  36
  37 type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar';
  38
  39 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  40     root: {
  41         flexGrow: 1,
  42         zIndex: 1,
  43         overflow: 'hidden',
  44         position: 'relative',
  45         display: 'flex',
  46         width: '100vw',
  47         height: '100vh'
  48     },
  49     appBar: {
  50         zIndex: theme.zIndex.drawer + 1,
  51         backgroundColor: '#692498',
  52         position: "absolute",
  53         width: "100%"
  54     },
  55     drawerPaper: {
  56         position: 'relative',
  57         width: drawerWidth,
  58     },
  59     content: {
  60         flexGrow: 1,
  61         backgroundColor: theme.palette.background.default,
  62         padding: theme.spacing.unit * 3,
  63         height: '100%',
  64         minWidth: 0,
  65     },
  66     toolbar: theme.mixins.toolbar
  67 });
  68
  69 interface WorkbenchDataProps {
  70     projects: Array<TreeItem<Project>>;
  71     user?: User;
  72 }
  73
  74 interface WorkbenchActionProps {
  75 }
  76
  77 type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles<CssRules>;
  78
  79 interface NavBreadcrumb extends Breadcrumb {
  80     path: string;
  81 }
  82
  83 interface NavMenuItem extends MainAppBarMenuItem {
  84     action: () => void;
  85 }
  86
  87 interface WorkbenchState {
  88     anchorEl: any;
  89     breadcrumbs: NavBreadcrumb[];
  90     searchText: string;
  91     menuItems: {
  92         accountMenu: NavMenuItem[],
  93         helpMenu: NavMenuItem[],
  94         anonymousMenu: NavMenuItem[]
  95     };
  96 }
  97
  98 class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
  99     state = {
 100         anchorEl: null,
 101         searchText: "",
 102         breadcrumbs: [
 103             {
 104                 label: "Projects",
 105                 path: "/projects"
 106             }, {
 107                 label: "Project 1",
 108                 path: "/projects/project-1"
 109             }
 110         ],
 111         menuItems: {
 112             accountMenu: [
 113                 {
 114                     label: "Logout",
 115                     action: () => this.props.dispatch(authActions.LOGOUT())
 116                 },
 117                 {
 118                     label: "My account",
 119                     action: () => this.props.dispatch(push("/my-account"))
 120                 }
 121             ],
 122             helpMenu: [
 123                 {
 124                     label: "Help",
 125                     action: () => this.props.dispatch(push("/help"))
 126                 }
 127             ],
 128             anonymousMenu: [
 129                 {
 130                     label: "Sign in",
 131                     action: () => this.props.dispatch(authActions.LOGIN())
 132                 }
 133             ]
 134         }
 135     };
 136
 137
 138     mainAppBarActions: MainAppBarActionProps = {
 139         onBreadcrumbClick: (breadcrumb: NavBreadcrumb) => this.props.dispatch(push(breadcrumb.path)),
 140         onSearch: searchText => {
 141             this.setState({ searchText });
 142             this.props.dispatch(push(`/search?q=${searchText}`));
 143         },
 144         onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
 145     };
 146
 147     toggleProjectTreeItem = (itemId: string) => {
 148         this.props.dispatch<any>(projectService.getProjectList(itemId)).then(() => {
 149             this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId));
 150             this.props.dispatch(push(`/project/${itemId}`));
 151         });
 152     }
 153
 154     render() {
 155         const { classes, user } = this.props;
 156         return (
 157             <div className={classes.root}>
 158                 <div className={classes.appBar}>
 159                     <MainAppBar
 160                         breadcrumbs={this.state.breadcrumbs}
 161                         searchText={this.state.searchText}
 162                         user={this.props.user}
 163                         menuItems={this.state.menuItems}
 164                         {...this.mainAppBarActions}
 165                     />
 166                 </div>
 167                 {user &&
 168                 <Drawer
 169                     variant="permanent"
 170                     classes={{
 171                         paper: classes.drawerPaper,
 172                     }}>
 173                     <div className={classes.toolbar}/>
 174                     <ProjectTree
 175                         projects={this.props.projects}
 176                         toggleProjectTreeItem={this.toggleProjectTreeItem}/>
 177                 </Drawer>}
 178                 <main className={classes.content}>
 179                     <div className={classes.toolbar} />
 180                     <div className={classes.toolbar} />
 181                     <Switch>
 182                         <Route path="/project/:name" component={ProjectExplorer}/>
 183                     </Switch>
 184                 </main>
 185             </div>
 186         );
 187     }
 188 }
 189
 190 export default connect<WorkbenchDataProps>(
 191     (state: RootState) => ({
 192         projects: state.projects,
 193         user: state.auth.user
 194     })
 195 )(
 196     withStyles(styles)(Workbench)
 197 );