Create collection files upload dialog
[arvados-workbench2.git] / src / components / collection-panel-files / collection-panel-files.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 { TreeItem, TreeItemStatus } from '../tree/tree';
7 import { FileTreeData } from '../file-tree/file-tree-data';
8 import { FileTree } from '../file-tree/file-tree';
9 import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button } from '@material-ui/core';
10 import { CustomizeTableIcon } from '../icon/icon';
11
12 export interface CollectionPanelFilesProps {
13     items: Array<TreeItem<FileTreeData>>;
14     onUploadDataClick: () => void;
15     onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
16     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
17     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
18     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
19 }
20
21 type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader';
22
23 const styles: StyleRulesCallback<CssRules> = theme => ({
24     root: {
25         paddingBottom: theme.spacing.unit
26     },
27     cardSubheader: {
28         paddingTop: 0,
29         paddingBottom: 0
30     },
31     nameHeader: {
32         marginLeft: '75px'
33     },
34     fileSizeHeader: {
35         marginRight: '65px'
36     }
37 });
38
39 export const CollectionPanelFiles =
40     withStyles(styles)(
41         ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
42             <Card className={classes.root}>
43                 <CardHeader
44                     title="Files"
45                     action={
46                         <Button onClick={onUploadDataClick}
47                             variant='raised'
48                             color='primary'
49                             size='small'>
50                             Upload data
51                     </Button>
52                     } />
53                 <CardHeader
54                     className={classes.cardSubheader}
55                     action={
56                         <IconButton onClick={onOptionsMenuOpen}>
57                             <CustomizeTableIcon />
58                         </IconButton>
59                     } />
60                 <Grid container justify="space-between">
61                     <Typography variant="caption" className={classes.nameHeader}>
62                         Name
63                     </Typography>
64                     <Typography variant="caption" className={classes.fileSizeHeader}>
65                         File size
66                     </Typography>
67                 </Grid>
68                 <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
69             </Card>);