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 { findTreeBranch } from '../../store/project/project-reducer';
  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     itemId: 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         menuItems: {
 104             accountMenu: [
 105                 {
 106                     label: "Logout",
 107                     action: () => this.props.dispatch(authActions.LOGOUT())
 108                 },
 109                 {
 110                     label: "My account",
 111                     action: () => this.props.dispatch(push("/my-account"))
 112                 }
 113             ],
 114             helpMenu: [
 115                 {
 116                     label: "Help",
 117                     action: () => this.props.dispatch(push("/help"))
 118                 }
 119             ],
 120             anonymousMenu: [
 121                 {
 122                     label: "Sign in",
 123                     action: () => this.props.dispatch(authActions.LOGIN())
 124                 }
 125             ]
 126         }
 127     };
 128
 129
 130     mainAppBarActions: MainAppBarActionProps = {
 131         onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => {
 132             this.toggleProjectTreeItem(itemId);
 133         },
 134         onSearch: searchText => {
 135             this.setState({ searchText });
 136             this.props.dispatch(push(`/search?q=${searchText}`));
 137         },
 138         onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
 139     };
 140
 141     toggleProjectTreeItem = (itemId: string) => {
 142         const branch = findTreeBranch(this.props.projects, itemId);
 143         this.setState({
 144             breadcrumbs: branch.map(item => ({
 145                 label: item.data.name,
 146                 itemId: item.data.uuid
 147             }))
 148         });
 149         this.props.dispatch<any>(projectService.getProjectList(itemId)).then(() => {
 150             this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(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={ProjectList} />
 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 );