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 '~/components/tree/tree';
   7 import { FileTreeData } from '~/components/file-tree/file-tree-data';
   8 import { FileTree } from '~/components/file-tree/file-tree';
   9 import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
  10 import { CustomizeTableIcon } from '~/components/icon/icon';
  11 import { DownloadIcon } from '~/components/icon/icon';
  12
  13 export interface CollectionPanelFilesProps {
  14     items: Array<TreeItem<FileTreeData>>;
  15     isWritable: boolean;
  16     isLoading: boolean;
  17     onUploadDataClick: () => void;
  18     onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, isWritable: boolean) => void;
  19     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>, isWritable: boolean) => void;
  20     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
  21     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
  22     onFileClick: (id: string) => void;
  23     currentItemUuid?: string;
  24 }
  25
  26 type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button' | 'centeredLabel';
  27
  28 const styles: StyleRulesCallback<CssRules> = theme => ({
  29     root: {
  30         paddingBottom: theme.spacing.unit
  31     },
  32     cardSubheader: {
  33         paddingTop: 0,
  34         paddingBottom: 0
  35     },
  36     nameHeader: {
  37         marginLeft: '75px'
  38     },
  39     fileSizeHeader: {
  40         marginRight: '65px'
  41     },
  42     uploadIcon: {
  43         transform: 'rotate(180deg)'
  44     },
  45     button: {
  46         marginRight: -theme.spacing.unit,
  47         marginTop: '0px'
  48     },
  49     centeredLabel: {
  50         fontSize: '0.875rem',
  51         textAlign: 'center'
  52     },
  53 });
  54
  55 export const CollectionPanelFiles =
  56     withStyles(styles)(
  57         ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes,
  58             isWritable, isLoading, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
  59             <Card data-cy='collection-files-panel' className={classes.root}>
  60                 <CardHeader
  61                     title="Files"
  62                     classes={{ action: classes.button }}
  63                     action={
  64                         isWritable &&
  65                         <Button
  66                             data-cy='upload-button'
  67                             onClick={onUploadDataClick}
  68                             variant='contained'
  69                             color='primary'
  70                             size='small'>
  71                             <DownloadIcon className={classes.uploadIcon} />
  72                             Upload data
  73                         </Button>
  74                     } />
  75                 <CardHeader
  76                     className={classes.cardSubheader}
  77                     action={
  78                         <Tooltip title="More options" disableFocusListener>
  79                             <IconButton
  80                                 data-cy='collection-files-panel-options-btn'
  81                                 onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
  82                                 <CustomizeTableIcon />
  83                             </IconButton>
  84                         </Tooltip>
  85                     } />
  86                 <Grid container justify="space-between">
  87                     <Typography variant="caption" className={classes.nameHeader}>
  88                         Name
  89                     </Typography>
  90                     <Typography variant="caption" className={classes.fileSizeHeader}>
  91                         File size
  92                     </Typography>
  93                 </Grid>
  94                 { isLoading
  95                 ? <div className={classes.centeredLabel}>(loading files...)</div>
  96                 : <FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /> }
  97             </Card>);