Merge master branch

Feature #13590

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --combined src/views/workbench/workbench.tsx
index f002ad9a9ae4774f6bf2fe01055cf6406fd06feb,d18d113bcbca66ced17a91bfc920e04a7d1be65d..3d0a7ad310b0c135b08a2eade23690aa0627c3ae
--- 1/src/views/workbench/workbench.tsx
--- 2/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@@ -10,8 -10,6 +10,6 @@@ import AppBar from '@material-ui/core/A
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  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";
@@@ -24,9 -22,12 +22,14 @@@ import { AccountCircle } from "@materia
  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 { push } from 'react-router-redux';
+ import projectActions from "../../store/project/project-action"
+ import ProjectTree from '../../components/project-tree/project-tree';
+ import { TreeItem } from "../../components/tree/tree";
+ import { Project } from "../../models/project";
+ import { projectService } from '../../services/services';
  
  const drawerWidth = 240;
  
@@@ -44,9 -45,7 +47,9 @@@ const styles: StyleRulesCallback<CssRul
      },
      appBar: {
          zIndex: theme.zIndex.drawer + 1,
 -        backgroundColor: '#692498'
 +        backgroundColor: '#692498',
 +        position: "absolute",
 +        width: "100%"
      },
      drawerPaper: {
          position: 'relative',
@@@ -63,7 -62,7 +66,7 @@@
  });
  
  interface WorkbenchDataProps {
-     projects: Project[];
+     projects: Array<TreeItem<Project>>;
      user?: User;
  }
  
@@@ -72,104 -71,107 +75,109 @@@ interface WorkbenchActionProps 
  
  type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles<CssRules>;
  
 +interface NavBreadcrumb extends Breadcrumb {
 +    path: string
 +}
 +
 +interface NavMenuItem extends MainAppBarMenuItem {
 +    action: () => void
 +}
 +
  interface WorkbenchState {
      anchorEl: any;
 +    breadcrumbs: NavBreadcrumb[];
 +    searchText: string;
 +    menuItems: {
 +        accountMenu: NavMenuItem[],
 +        helpMenu: NavMenuItem[],
 +        anonymousMenu: NavMenuItem[]
 +    };
  }
  
  class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
 -    constructor(props: WorkbenchProps) {
 -        super(props);
 -        this.state = {
 -            anchorEl: null
 +    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())
 +                }
 +            ]
          }
      }
  
 -    login = () => {
 -        this.props.dispatch(authActions.LOGIN());
 -    };
 -
 -    logout = () => {
 -        this.handleClose();
 -        this.props.dispatch(authActions.LOGOUT());
 -    };
 -
 -    handleOpenMenu = (event: React.MouseEvent<any>) => {
 -        this.setState({
 -            anchorEl: event.currentTarget
 -        });
 -    };
  
 -    handleClose = () => {
 -        this.setState({
 -            anchorEl: null
 -        });
 -    };
 +    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()
 +    }
  
+     toggleProjectTreeItem = (itemId: string) => {
+         this.props.dispatch<any>(projectService.getProjectList(itemId)).then(() => {
+             this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId));
+         });
+     };
+ 
      render() {
 -        const {classes, user} = this.props;
 +        const { classes, user } = this.props;
          return (
              <div className={classes.root}>
 -                <AppBar position="absolute" className={classes.appBar}>
 -                    <Toolbar>
 -                        <Typography variant="title" color="inherit" noWrap style={{flexGrow: 1}}>
 -                            <span>Arvados</span><br/><span style={{fontSize: 12}}>Workbench 2</span>
 -                        </Typography>
 -                        {user ?
 -                            <Grid container style={{width: 'auto'}}>
 -                                <Grid container style={{width: 'auto'}} alignItems='center'>
 -                                    <Typography variant="title" color="inherit" noWrap>
 -                                        {user.firstName} {user.lastName}
 -                                    </Typography>
 -                                </Grid>
 -                                <Grid item>
 -                                    <IconButton
 -                                          aria-owns={this.state.anchorEl ? 'menu-appbar' : undefined}
 -                                          aria-haspopup="true"
 -                                          onClick={this.handleOpenMenu}
 -                                          color="inherit">
 -                                      <AccountCircle/>
 -                                    </IconButton>
 -                                </Grid>
 -                                <Menu
 -                                  id="menu-appbar"
 -                                  anchorEl={this.state.anchorEl}
 -                                  anchorOrigin={{
 -                                    vertical: 'top',
 -                                    horizontal: 'right',
 -                                  }}
 -                                  transformOrigin={{
 -                                    vertical: 'top',
 -                                    horizontal: 'right',
 -                                  }}
 -                                  open={!!this.state.anchorEl}
 -                                  onClose={this.handleClose}>
 -                                  <MenuItem onClick={this.logout}>Logout</MenuItem>
 -                                  <MenuItem onClick={this.handleClose}>My account</MenuItem>
 -                                </Menu>
 -                            </Grid>
 -                            :
 -                            <Button color="inherit" onClick={this.login}>Login</Button>
 -                        }
 -                    </Toolbar>
 -                </AppBar>
 +                <div className={classes.appBar}>
 +                    <MainAppBar
 +                        breadcrumbs={this.state.breadcrumbs}
 +                        searchText={this.state.searchText}
 +                        user={this.props.user}
 +                        menuItems={this.state.menuItems}
 +                        {...this.mainAppBarActions}
 +                    />
 +                </div>
                  {user &&
-                     <Drawer
-                         variant="permanent"
-                         classes={{
-                             paper: classes.drawerPaper,
-                         }}>
-                         <div className={classes.toolbar} />
-                         <div className={classes.toolbar} />
-                         <Tree items={this.props.projects} render={(p: Project) =>
-                             <Link to={`/project/${p.name}`}>{p.name}</Link>
-                         } />
-                     </Drawer>}
+                 <Drawer
+                     variant="permanent"
+                     classes={{
+                         paper: classes.drawerPaper,
+                     }}>
+                     <div className={classes.toolbar}/>
+                     <ProjectTree
+                         projects={this.props.projects}
+                         toggleProjectTreeItem={this.toggleProjectTreeItem}/>
+                 </Drawer>}
                  <main className={classes.content}>
 -                    <div className={classes.toolbar}/>
 +                    <div className={classes.toolbar} />
 +                    <div className={classes.toolbar} />
                      <Switch>
 -                        <Route path="/project/:name" component={ProjectList}/>
 +                        <Route path="/project/:name" component={ProjectList} />
                      </Switch>
                  </main>
              </div>