From 2d31e440b94eca0f22b2968f30a48cfc825514f1 Mon Sep 17 00:00:00 2001
From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Tue, 26 Jun 2018 10:27:27 +0200
Subject: [PATCH] Add toolbar with project explorer actions

Feature #13678

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---
 .../project-explorer/project-explorer.tsx     | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/views-components/project-explorer/project-explorer.tsx b/src/views-components/project-explorer/project-explorer.tsx
index e9dc2a9e..16f670cb 100644
--- a/src/views-components/project-explorer/project-explorer.tsx
+++ b/src/views-components/project-explorer/project-explorer.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import { ProjectExplorerItem } from './project-explorer-item';
-import { Grid, Typography } from '@material-ui/core';
+import { Grid, Typography, Button, Toolbar, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
 import { formatDate, formatFileSize } from '../../common/formatters';
 import DataExplorer from '../data-explorer/data-explorer';
 import { DataColumn } from '../../components/data-table/data-column';
@@ -15,19 +15,32 @@ import actions from "../../store/data-explorer/data-explorer-action";
 import { DataColumns } from '../../components/data-table/data-table';
 
 export const PROJECT_EXPLORER_ID = "projectExplorer";
-class ProjectExplorer extends React.Component<DispatchProp> {
+class ProjectExplorer extends React.Component<DispatchProp & WithStyles<CssRules>> {
     render() {
-        return <DataExplorer
-            id={PROJECT_EXPLORER_ID}
-            contextActions={contextMenuActions}
-            onColumnToggle={this.toggleColumn}
-            onFiltersChange={this.changeFilters}
-            onRowClick={console.log}
-            onSortToggle={this.toggleSort}
-            onSearch={this.search}
-            onContextAction={this.executeAction}
-            onChangePage={this.changePage}
-            onChangeRowsPerPage={this.changeRowsPerPage} />;
+        return <div>
+            <div className={this.props.classes.toolbar}>
+                <Button color="primary" variant="raised" className={this.props.classes.button}>
+                    Create a collection
+                </Button>
+                <Button color="primary" variant="raised" className={this.props.classes.button}>
+                    Run a process
+                </Button>
+                <Button color="primary" variant="raised" className={this.props.classes.button}>
+                    Create a project
+                </Button>
+            </div>
+            <DataExplorer
+                id={PROJECT_EXPLORER_ID}
+                contextActions={contextMenuActions}
+                onColumnToggle={this.toggleColumn}
+                onFiltersChange={this.changeFilters}
+                onRowClick={console.log}
+                onSortToggle={this.toggleSort}
+                onSearch={this.search}
+                onContextAction={this.executeAction}
+                onChangePage={this.changePage}
+                onChangeRowsPerPage={this.changeRowsPerPage} />;
+        </div>;
     }
 
     componentDidMount() {
@@ -63,6 +76,18 @@ class ProjectExplorer extends React.Component<DispatchProp> {
     }
 }
 
+type CssRules = "toolbar" | "button";
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+    toolbar: {
+        paddingBottom: theme.spacing.unit * 3,
+        textAlign: "right"
+    },
+    button: {
+        marginLeft: theme.spacing.unit
+    }
+});
+
 const renderName = (item: ProjectExplorerItem) =>
     <Grid
         container
@@ -181,4 +206,4 @@ const contextMenuActions = [[{
 }
 ]];
 
-export default connect()(ProjectExplorer);
+export default withStyles(styles)(connect()(ProjectExplorer));
-- 
2.30.2