- 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 variant="caption" className={classes.fileSizeHeader}>
- File size
- </Typography>
- </Grid>
- <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
- </Card>)
-);
+ <DownloadIcon className={classes.uploadIcon} />
+ Upload data
+ </Button>}
+ {!tooManyFiles &&
+ <Tooltip title="More options" disableFocusListener>
+ <IconButton
+ data-cy='collection-files-panel-options-btn'
+ onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
+ <CustomizeTableIcon />
+ </IconButton>
+ </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}><CircularProgress /></div>
+ : <div style={{ height: 'calc(100% - 60px)' }}>
+ <FileTree
+ onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)}
+ {...treeProps}
+ items={treeProps.items} /></div>}
+ </>
+ }
+ </Card>);
+};
+
+export const CollectionPanelFiles = withStyles(styles)(CollectionPanelFilesComponent);