src/views-components/navigation-panel/navigation-panel.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, WithStyles, withStyles } from '@material-ui/core/styles';
   7 import Drawer from '@material-ui/core/Drawer';
   8 import { connect } from "react-redux";
   9 import { ProjectTree } from '~/views-components/project-tree/project-tree';
  10 import { SidePanel, SidePanelItem } from '~/components/side-panel/side-panel';
  11 import { ArvadosTheme } from '~/common/custom-theme';
  12 import { RootState } from '~/store/store';
  13 import { TreeItem } from '~/components/tree/tree';
  14 import { ProjectResource } from '~/models/project';
  15 import { sidePanelActions } from '../../store/side-panel/side-panel-action';
  16 import { Dispatch } from 'redux';
  17 import { projectActions } from '~/store/project/project-action';
  18 import { navigateToResource } from '../../store/navigation/navigation-action';
  19 import { openContextMenu } from '~/store/context-menu/context-menu-actions';
  20 import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
  21
  22
  23 const DRAWER_WITDH = 240;
  24
  25 type CssRules = 'drawerPaper' | 'toolbar';
  26
  27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     drawerPaper: {
  29         position: 'relative',
  30         width: DRAWER_WITDH,
  31         display: 'flex',
  32         flexDirection: 'column',
  33     },
  34     toolbar: theme.mixins.toolbar
  35 });
  36
  37 interface NavigationPanelDataProps {
  38     projects: Array<TreeItem<ProjectResource>>;
  39     sidePanelItems: SidePanelItem[];
  40 }
  41
  42 interface NavigationPanelActionProps {
  43     toggleSidePanelOpen: (panelItemId: string) => void;
  44     toggleSidePanelActive: (panelItemId: string) => void;
  45     toggleProjectOpen: (projectUuid: string) => void;
  46     toggleProjectActive: (projectUuid: string) => void;
  47     openRootContextMenu: (event: React.MouseEvent<any>) => void;
  48     openProjectContextMenu: (event: React.MouseEvent<any>, item: TreeItem<ProjectResource>) => void;
  49 }
  50
  51 type NavigationPanelProps = NavigationPanelDataProps & NavigationPanelActionProps & WithStyles<CssRules>;
  52
  53 const mapStateToProps = (state: RootState): NavigationPanelDataProps => ({
  54     projects: state.projects.items,
  55     sidePanelItems: state.sidePanel
  56 });
  57
  58 const mapDispatchToProps = (dispatch: Dispatch): NavigationPanelActionProps => ({
  59     toggleSidePanelOpen: panelItemId => {
  60         dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(panelItemId));
  61     },
  62     toggleSidePanelActive: panelItemId => {
  63         dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(panelItemId));
  64
  65         // const panelItem = this.props.sidePanelItems.find(it => it.id === itemId);
  66         // if (panelItem && panelItem.activeAction) {
  67         //     panelItem.activeAction(this.props.dispatch, this.props.authService.getUuid());
  68         // }
  69     },
  70     toggleProjectOpen: projectUuid => {
  71         dispatch<any>(navigateToResource(projectUuid));
  72     },
  73     toggleProjectActive: projectUuid => {
  74         dispatch<any>(navigateToResource(projectUuid));
  75     },
  76     openRootContextMenu: event => {
  77         dispatch<any>(openContextMenu(event, {
  78             uuid: "",
  79             name: "",
  80             kind: ContextMenuKind.ROOT_PROJECT
  81         }));
  82     },
  83     openProjectContextMenu: (event, item) => {
  84         dispatch<any>(openContextMenu(event, {
  85             uuid: item.data.uuid,
  86             name: item.data.name,
  87             kind: ContextMenuKind.PROJECT
  88         }));
  89     }
  90 });
  91
  92 export const NavigationPanel = withStyles(styles)(
  93     connect(mapStateToProps, mapDispatchToProps)(
  94         ({ classes, sidePanelItems, projects, ...actions }: NavigationPanelProps) => <Drawer
  95             variant="permanent"
  96             classes={{ paper: classes.drawerPaper }}>
  97             <div className={classes.toolbar} />
  98             <SidePanel
  99                 toggleOpen={actions.toggleSidePanelOpen}
 100                 toggleActive={actions.toggleSidePanelOpen}
 101                 sidePanelItems={sidePanelItems}
 102                 onContextMenu={actions.openRootContextMenu}>
 103                 <ProjectTree
 104                     projects={projects}
 105                     toggleOpen={actions.toggleProjectOpen}
 106                     onContextMenu={actions.openProjectContextMenu}
 107                     toggleActive={actions.toggleProjectActive} />
 108             </SidePanel>
 109         </Drawer>
 110     )
 111 );