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 import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
   7 import Drawer from '@material-ui/core/Drawer';
   8 import { connect, DispatchProp } from "react-redux";
   9
  10 import ProjectList from "../../components/project-list/project-list";
  11 import { Route, Switch } from "react-router";
  12 import authActions from "../../store/auth/auth-action";
  13 import { User } from "../../models/user";
  14 import { RootState } from "../../store/store";
  15 import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItem } from '../../components/main-app-bar/main-app-bar';
  16 import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs';
  17 import { push } from 'react-router-redux';
  18 import projectActions from "../../store/project/project-action";
  19 import sidePanelActions from '../../store/side-panel/side-panel-action';
  20 import ProjectTree from '../../components/project-tree/project-tree';
  21 import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
  22 import { Project } from "../../models/project";
  23 import { projectService } from '../../services/services';
  24 import SidePanel, {SidePanelItem} from '../../components/side-panel/side-panel';
  25
  26 const drawerWidth = 240;
  27
  28 type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar';
  29
  30 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  31     root: {
  32         flexGrow: 1,
  33         zIndex: 1,
  34         overflow: 'hidden',
  35         position: 'relative',
  36         display: 'flex',
  37         width: '100vw',
  38         height: '100vh'
  39     },
  40     appBar: {
  41         zIndex: theme.zIndex.drawer + 1,
  42         backgroundColor: '#692498',
  43         position: "absolute",
  44         width: "100%"
  45     },
  46     drawerPaper: {
  47         position: 'relative',
  48         width: drawerWidth,
  49     },
  50     content: {
  51         flexGrow: 1,
  52         backgroundColor: theme.palette.background.default,
  53         padding: theme.spacing.unit * 3,
  54         height: '100%',
  55         minWidth: 0,
  56     },
  57     toolbar: theme.mixins.toolbar
  58 });
  59
  60 interface WorkbenchDataProps {
  61     projects: Array<TreeItem<Project>>;
  62     user?: User;
  63     sidePanelItems: SidePanelItem[];
  64 }
  65
  66 interface WorkbenchActionProps {
  67 }
  68
  69 type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles<CssRules>;
  70
  71 interface NavBreadcrumb extends Breadcrumb {
  72     path: string;
  73 }
  74
  75 interface NavMenuItem extends MainAppBarMenuItem {
  76     action: () => void;
  77 }
  78
  79 interface WorkbenchState {
  80     anchorEl: any;
  81     breadcrumbs: NavBreadcrumb[];
  82     searchText: string;
  83     menuItems: {
  84         accountMenu: NavMenuItem[],
  85         helpMenu: NavMenuItem[],
  86         anonymousMenu: NavMenuItem[]
  87     };
  88 }
  89
  90 class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
  91     state = {
  92         anchorEl: null,
  93         searchText: "",
  94         breadcrumbs: [
  95             {
  96                 label: "Projects",
  97                 path: "/projects"
  98             }, {
  99                 label: "Project 1",
 100                 path: "/projects/project-1"
 101             }
 102         ],
 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: (breadcrumb: NavBreadcrumb) => this.props.dispatch(push(breadcrumb.path)),
 132         onSearch: searchText => {
 133             this.setState({ searchText });
 134             this.props.dispatch(push(`/search?q=${searchText}`));
 135         },
 136         onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
 137     };
 138
 139     toggleProjectTreeItemOpen = (itemId: string, status: TreeItemStatus) => {
 140         if (status === TreeItemStatus.Loaded) {
 141             this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId));
 142             this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
 143         } else {
 144             this.props.dispatch<any>(projectService.getProjectList(itemId)).then(() => {
 145                 this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId));
 146                 this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
 147             });
 148         }
 149     }
 150
 151     toggleProjectTreeItemActive = (itemId: string) => {
 152         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
 153     }
 154
 155     toggleSidePanelOpen = (itemId: string) => {
 156         this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId));
 157     }
 158
 159     toggleSidePanelActive = (itemId: string) => {
 160         this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId));
 161     }
 162
 163     render() {
 164         const { classes, user, projects, sidePanelItems } = this.props;
 165         return (
 166             <div className={classes.root}>
 167                 <div className={classes.appBar}>
 168                     <MainAppBar
 169                         breadcrumbs={this.state.breadcrumbs}
 170                         searchText={this.state.searchText}
 171                         user={this.props.user}
 172                         menuItems={this.state.menuItems}
 173                         {...this.mainAppBarActions}
 174                     />
 175                 </div>
 176                 {user &&
 177                     <Drawer
 178                         variant="permanent"
 179                         classes={{
 180                             paper: classes.drawerPaper,
 181                         }}>
 182                         <div className={classes.toolbar} />
 183                         <SidePanel
 184                             toggleSidePanelOpen={this.toggleSidePanelOpen}
 185                             toggleSidePanelActive={this.toggleSidePanelActive}
 186                             sidePanelItems={sidePanelItems}>
 187                             <ProjectTree
 188                                 projects={projects}
 189                                 toggleProjectTreeItemOpen={this.toggleProjectTreeItemOpen}
 190                                 toggleProjectTreeItemActive={this.toggleProjectTreeItemActive} />
 191                         </SidePanel>
 192                     </Drawer>}
 193                 <main className={classes.content}>
 194                     <div className={classes.toolbar} />
 195                     <Switch>
 196                         <Route path="/project/:name" component={ProjectList} />
 197                     </Switch>
 198                 </main>
 199             </div>
 200         );
 201     }
 202 }
 203
 204 export default connect<WorkbenchDataProps>(
 205     (state: RootState) => ({
 206         projects: state.projects,
 207         user: state.auth.user,
 208         sidePanelItems: state.sidePanel,
 209     })
 210 )(
 211     withStyles(styles)(Workbench)
 212 );