src/views/project-panel/project-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 { RouteComponentProps } from 'react-router';
   7 import { ProjectState } from '../../store/project/project-reducer';
   8 import { RootState } from '../../store/store';
   9 import { connect, DispatchProp } from 'react-redux';
  10 import { CollectionState } from "../../store/collection/collection-reducer";
  11 import { ItemMode, setProjectItem } from "../../store/navigation/navigation-action";
  12 import ProjectExplorer from "../../views-components/project-explorer/project-explorer";
  13 import { projectExplorerItems } from "./project-panel-selectors";
  14 import { ProjectExplorerItem } from "../../views-components/project-explorer/project-explorer-item";
  15 import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
  16
  17 interface ProjectPanelDataProps {
  18     projects: ProjectState;
  19     collections: CollectionState;
  20 }
  21
  22 type ProjectPanelProps = ProjectPanelDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
  23
  24 class ProjectPanel extends React.Component<ProjectPanelProps & WithStyles<CssRules>> {
  25     render() {
  26         const items = projectExplorerItems(
  27             this.props.projects.items,
  28             this.props.projects.currentItemId,
  29             this.props.collections
  30         );
  31         return (
  32             <div>
  33                 <div className={this.props.classes.toolbar}>
  34                     <Button color="primary" variant="raised" className={this.props.classes.button}>
  35                         Create a collection
  36                     </Button>
  37                     <Button color="primary" variant="raised" className={this.props.classes.button}>
  38                         Run a process
  39                     </Button>
  40                     <Button color="primary" variant="raised" className={this.props.classes.button}>
  41                         Create a project
  42                     </Button>
  43                 </div>
  44                 <ProjectExplorer
  45                     items={items}
  46                     onRowClick={this.goToItem}
  47                 />
  48             </div>
  49         );
  50     }
  51
  52     goToItem = (item: ProjectExplorerItem) => {
  53         this.props.dispatch<any>(setProjectItem(this.props.projects.items, item.uuid, item.kind, ItemMode.BOTH));
  54     }
  55 }
  56
  57 type CssRules = "toolbar" | "button";
  58
  59 const styles: StyleRulesCallback<CssRules> = theme => ({
  60     toolbar: {
  61         marginBottom: theme.spacing.unit * 3,
  62         display: "flex",
  63         justifyContent: "flex-end"
  64     },
  65     button: {
  66         marginLeft: theme.spacing.unit
  67     }
  68 });
  69
  70 export default withStyles(styles)(
  71     connect(
  72         (state: RootState) => ({
  73             projects: state.projects,
  74             collections: state.collections
  75         })
  76     )(ProjectPanel));