// SPDX-License-Identifier: AGPL-3.0
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 { TreeItem, TreeItemStatus } from '~/components/tree/tree';
+import { FileTreeData } from '~/components/file-tree/file-tree-data';
+import { FileTree } from '~/components/file-tree/file-tree';
import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
-import { CustomizeTableIcon } from '../icon/icon';
+import { CustomizeTableIcon } from '~/components/icon/icon';
import { DownloadIcon } from '~/components/icon/icon';
export interface CollectionPanelFilesProps {
items: Array<TreeItem<FileTreeData>>;
+ isWritable: boolean;
+ isLoading: boolean;
+ tooManyFiles: boolean;
onUploadDataClick: () => void;
- onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
- onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
+ onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, isWritable: boolean) => void;
+ onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>, isWritable: boolean) => void;
onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onCollapseToggle: (id: string, status: TreeItemStatus) => void;
+ onFileClick: (id: string) => void;
+ loadFilesFunc: () => void;
+ currentItemUuid?: string;
}
-type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button' | 'centeredLabel';
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
- paddingBottom: theme.spacing.unit
+ paddingBottom: theme.spacing.unit,
+ height: '100%'
},
cardSubheader: {
paddingTop: 0,
button: {
marginRight: -theme.spacing.unit,
marginTop: '0px'
- }
+ },
+ centeredLabel: {
+ fontSize: '0.875rem',
+ textAlign: 'center'
+ },
});
export const CollectionPanelFiles =
withStyles(styles)(
- ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
- <Card className={classes.root}>
+ ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes,
+ isWritable, isLoading, tooManyFiles, loadFilesFunc, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
+ <Card data-cy='collection-files-panel' className={classes.root}>
<CardHeader
title="Files"
+ className={classes.cardSubheader}
classes={{ action: classes.button }}
- action={
- <Button onClick={onUploadDataClick}
- variant='raised'
+ action={<>
+ {isWritable &&
+ <Button
+ data-cy='upload-button'
+ onClick={onUploadDataClick}
+ variant='contained'
color='primary'
size='small'>
<DownloadIcon className={classes.uploadIcon} />
Upload data
- </Button>
- } />
- <CardHeader
- className={classes.cardSubheader}
- action={
+ </Button>}
+ {!tooManyFiles &&
<Tooltip title="More options" disableFocusListener>
- <IconButton onClick={onOptionsMenuOpen}>
+ <IconButton
+ data-cy='collection-files-panel-options-btn'
+ onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
<CustomizeTableIcon />
</IconButton>
- </Tooltip>
- } />
- <Grid container justify="space-between">
- <Typography variant="caption" className={classes.nameHeader}>
- Name
- </Typography>
- <Typography variant="caption" className={classes.fileSizeHeader}>
- File size
- </Typography>
- </Grid>
- <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
+ </Tooltip>}
+ </>
+ } />
+ { tooManyFiles
+ ? <div className={classes.centeredLabel}>
+ File listing may take some time, please click to browse: <Button onClick={loadFilesFunc}><DownloadIcon/>Show files</Button>
+ </div>
+ : <>
+ <Grid container justify="space-between">
+ <Typography variant="caption" className={classes.nameHeader}>
+ Name
+ </Typography>
+ <Typography variant="caption" className={classes.fileSizeHeader}>
+ File size
+ </Typography>
+ </Grid>
+ { isLoading
+ ? <div className={classes.centeredLabel}>(loading files...)</div>
+ : <div style={{height: 'calc(100% - 60px)'}}><FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /></div> }
+ </>
+ }
</Card>);