X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/9072585569eedc1ed276ade47fe9ca16447aff39..c4e503180948300c3a6ef99e338d2e56b2931236:/src/components/collection-panel-files/collection-panel-files.tsx

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index fb1ee0513b..afe9e8517c 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,44 +6,78 @@ import * as React from 'react';
 import { TreeItem, TreeItemStatus } from '../tree/tree';
 import { FileTreeData } from '../file-tree/file-tree-data';
 import { FileTree } from '../file-tree/file-tree';
-import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, CardContent, Card, Button } from '@material-ui/core';
 import { CustomizeTableIcon } from '../icon/icon';
+import { connect, DispatchProp } from "react-redux";
+import { Dispatch } from "redux";
+import { RootState } from "../../store/store";
+import { ServiceRepository } from "../../services/services";
 
 export interface CollectionPanelFilesProps {
     items: Array<TreeItem<FileTreeData>>;
+    onUploadDataClick: () => void;
     onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
 }
 
-type CssRules = 'nameHeader' | 'fileSizeHeader';
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
+    root: {
+        paddingBottom: theme.spacing.unit
+    },
+    cardSubheader: {
+        paddingTop: 0,
+        paddingBottom: 0
+    },
     nameHeader: {
         marginLeft: '75px'
     },
     fileSizeHeader: {
-        marginRight: '50px'
+        marginRight: '65px'
     }
 });
 
-export const CollectionPanelFiles = withStyles(styles)(
-    ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
-        <div>
-            <Grid container justify="flex-end">
-                <IconButton onClick={onOptionsMenuOpen}>
-                    <CustomizeTableIcon />
-                </IconButton>
-            </Grid>
+const renameFile = () => (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+  services.collectionFilesService.renameTest();
+};
+
+
+export const CollectionPanelFiles =
+    connect()(
+    withStyles(styles)(
+    ({ onItemMenuOpen, onOptionsMenuOpen, classes, dispatch, ...treeProps }: CollectionPanelFilesProps & DispatchProp & WithStyles<CssRules>) =>
+        <Card className={classes.root}>
+            <CardHeader
+                title="Files"
+                action={
+                    <Button onClick={
+                        () => {
+                            dispatch<any>(renameFile());
+                        }}
+                        variant='raised'
+                        color='primary'
+                        size='small'>
+                        Upload data
+                    </Button>
+                } />
+            <CardHeader
+                className={classes.cardSubheader}
+                action={
+                    <IconButton onClick={onOptionsMenuOpen}>
+                        <CustomizeTableIcon />
+                    </IconButton>
+                } />
             <Grid container justify="space-between">
                 <Typography variant="caption" className={classes.nameHeader}>
                     Name
-                </Typography>
+                    </Typography>
                 <Typography variant="caption" className={classes.fileSizeHeader}>
                     File size
-            </Typography>
+                    </Typography>
             </Grid>
             <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
-        </div>);
-
+        </Card>)
+);