Merge branch 'master'

Feature #13678

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

diff --combined src/store/store.ts
index 9d2a95359e1287ec2b1ff90afe34aa3d79c19f94,6089caf35cdf409d77ceb5ede5ced2ebc4083967..7092c1d9e80c9740d22f73f308e21b999ae894f9
--- 1/src/store/store.ts
--- 2/src/store/store.ts
+++ b/src/store/store.ts
@@@ -6,21 -6,22 +6,24 @@@ import { createStore, applyMiddleware, 
  import { routerMiddleware, routerReducer, RouterState } from "react-router-redux";
  import thunkMiddleware from 'redux-thunk';
  import { History } from "history";
+ 
  import projectsReducer, { ProjectState } from "./project/project-reducer";
+ import sidePanelReducer, { SidePanelState } from './side-panel/side-panel-reducer';
  import authReducer, { AuthState } from "./auth/auth-reducer";
  import collectionsReducer from "./collection/collection-reducer";
 +import dataExplorerReducer, { DataExplorerState } from './data-explorer/data-explorer-reducer';
  
  const composeEnhancers =
      (process.env.NODE_ENV === 'development' &&
-     window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
+         window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
      compose;
  
  export interface RootState {
      auth: AuthState;
      projects: ProjectState;
      router: RouterState;
 +    dataExplorer: DataExplorerState;
+     sidePanel: SidePanelState;
  }
  
  const rootReducer = combineReducers({
@@@ -28,15 -29,15 +31,16 @@@
      projects: projectsReducer,
      collections: collectionsReducer,
      router: routerReducer,
-     dataExplorer: dataExplorerReducer
++    dataExplorer: dataExplorerReducer,
+     sidePanel: sidePanelReducer
  });
  
  
 -export default function configureStore(initialState: RootState, history: History) {
 +export default function configureStore(history: History) {
      const middlewares: Middleware[] = [
          routerMiddleware(history),
          thunkMiddleware
      ];
      const enhancer = composeEnhancers(applyMiddleware(...middlewares));
 -    return createStore(rootReducer, initialState!, enhancer);
 +    return createStore(rootReducer, enhancer);
  }

diff --combined src/views/workbench/workbench.tsx
index 6a8698fd7f9e5c2a86b2c182512d7dd992e9533d,4f9843cb0a3e952786ef3489de8ac29b477796ee..a05d4db564623155cf31468f461f295f883241fe
--- 1/src/views/workbench/workbench.tsx
--- 2/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@@ -3,13 -3,11 +3,12 @@@
  // 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 { connect, DispatchProp } from "react-redux";
  import { Route, Switch } from "react-router";
  import authActions from "../../store/auth/auth-action";
 +import dataExplorerActions from "../../store/data-explorer/data-explorer-action";
  import { User } from "../../models/user";
  import { RootState } from "../../store/store";
  import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItem } from '../../views-components/main-app-bar/main-app-bar';
@@@ -19,10 -17,11 +18,13 @@@ import projectActions, { getProjectLis
  import ProjectTree from '../../views-components/project-tree/project-tree';
  import { TreeItem, TreeItemStatus } from "../../components/tree/tree";
  import { Project } from "../../models/project";
 -import { getTreePath } from '../../store/project/project-reducer';
 +import { getTreePath, findTreeItem } from '../../store/project/project-reducer';
  import ProjectPanel from '../project-panel/project-panel';
 +import { PROJECT_EXPLORER_ID } from '../../views-components/project-explorer/project-explorer';
 +import { ProjectExplorerItem } from '../../views-components/project-explorer/project-explorer-item';
+ import sidePanelActions from '../../store/side-panel/side-panel-action';
+ import { projectService } from '../../services/services';
+ import SidePanel, { SidePanelItem } from '../../components/side-panel/side-panel';
  
  const drawerWidth = 240;
  const appBarHeight = 102;
@@@ -48,6 -47,8 +50,8 @@@ const styles: StyleRulesCallback<CssRul
      drawerPaper: {
          position: 'relative',
          width: drawerWidth,
+         display: 'flex',
+         flexDirection: 'column',
      },
      contentWrapper: {
          backgroundColor: theme.palette.background.default,
@@@ -67,6 -68,7 +71,7 @@@
  interface WorkbenchDataProps {
      projects: Array<TreeItem<Project>>;
      user?: User;
+     sidePanelItems: SidePanelItem[];
  }
  
  interface WorkbenchActionProps {
@@@ -128,7 -130,7 +133,7 @@@ class Workbench extends React.Component
  
      mainAppBarActions: MainAppBarActionProps = {
          onBreadcrumbClick: ({ itemId, status }: NavBreadcrumb) => {
-             this.toggleProjectTreeItem(itemId, status);
+             this.toggleProjectTreeItemOpen(itemId, status);
          },
          onSearch: searchText => {
              this.setState({ searchText });
@@@ -137,15 -139,45 +142,45 @@@
          onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
      };
  
-     toggleProjectTreeItem = (itemId: string, status: TreeItemStatus) => {
+     toggleProjectTreeItemOpen = (itemId: string, status: TreeItemStatus) => {
          if (status === TreeItemStatus.Loaded) {
              this.openProjectItem(itemId);
+             this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId));
+             this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
          } else {
              this.props.dispatch<any>(getProjectList(itemId))
-                 .then(() => this.openProjectItem(itemId));
+                 .then(() => {
+                     this.openProjectItem(itemId);
+                     this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId));
+                     this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
+                 });
          }
      }
  
+     toggleProjectTreeItemActive = (itemId: string, status: TreeItemStatus) => {
+         if (status === TreeItemStatus.Loaded) {
+             this.openProjectItem(itemId);
+             this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
+             this.props.dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(itemId));
+         } else {
+             this.props.dispatch<any>(getProjectList(itemId))
+                 .then(() => {
+                     this.openProjectItem(itemId);
+                     this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
+                     this.props.dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(itemId));
+                 });
+         }
+     }
+ 
+     toggleSidePanelOpen = (itemId: string) => {
+         this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId));
+     }
+ 
+     toggleSidePanelActive = (itemId: string) => {
+         this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId));
+         this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId));
+     }
+ 
      openProjectItem = (itemId: string) => {
          const branch = getTreePath(this.props.projects, itemId);
          this.setState({
@@@ -155,24 -187,12 +190,24 @@@
                  status: item.status
              }))
          });
-         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId));
+         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId));
          this.props.dispatch(push(`/project/${itemId}`));
 +
 +        const project = findTreeItem(this.props.projects, itemId);
 +        const items: ProjectExplorerItem[] = project && project.items
 +            ? project.items.map(({ data }) => ({
 +                uuid: data.uuid,
 +                name: data.name,
 +                type: data.kind,
 +                owner: data.ownerUuid,
 +                lastModified: data.modifiedAt
 +            }))
 +            : [];
 +        this.props.dispatch(dataExplorerActions.SET_ITEMS({ id: PROJECT_EXPLORER_ID, items }));
      }
  
      render() {
-         const { classes, user } = this.props;
+         const { classes, user, projects, sidePanelItems } = this.props;
          return (
              <div className={classes.root}>
                  <div className={classes.appBar}>
@@@ -191,9 -211,15 +226,15 @@@
                              paper: classes.drawerPaper,
                          }}>
                          <div className={classes.toolbar} />
-                         <ProjectTree
-                             projects={this.props.projects}
-                             toggleProjectTreeItem={this.toggleProjectTreeItem} />
+                         <SidePanel
+                             toggleOpen={this.toggleSidePanelOpen}
+                             toggleActive={this.toggleSidePanelActive}
+                             sidePanelItems={sidePanelItems}>
+                             <ProjectTree
+                                 projects={projects}
+                                 toggleOpen={this.toggleProjectTreeItemOpen}
+                                 toggleActive={this.toggleProjectTreeItemActive} />
+                         </SidePanel>
                      </Drawer>}
                  <main className={classes.contentWrapper}>
                      <div className={classes.content}>
@@@ -210,7 -236,8 +251,8 @@@
  export default connect<WorkbenchDataProps>(
      (state: RootState) => ({
          projects: state.projects,
-         user: state.auth.user
+         user: state.auth.user,
+         sidePanelItems: state.sidePanel,
      })
  )(
      withStyles(styles)(Workbench)