Add toolbar with project explorer actions

Feature #13678

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

diff --git a/src/views-components/project-explorer/project-explorer.tsx b/src/views-components/project-explorer/project-explorer.tsx
index e9dc2a9ebf65e595296fef0014a1170253f985b0..16f670cb008d76b8d4cc3baaebe4ef57df32d843 100644 (file)
--- 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 * 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';
 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";
 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() {
     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() {
     }
 
     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
 const renderName = (item: ProjectExplorerItem) =>
     <Grid
         container


@@ -181,4 +206,4 @@ const contextMenuActions = [[{
 }
 ]];
 
 }
 ]];
 

-export default connect()(ProjectExplorer);
+export default withStyles(styles)(connect()(ProjectExplorer));