// 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 { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
-import { CustomizeTableIcon } from '../icon/icon';
+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, CircularProgress } from '@material-ui/core';
+import { CustomizeTableIcon } from '~/components/icon/icon';
+import { DownloadIcon } from '~/components/icon/icon';
+import { SearchInput } from '../search-input/search-input';
export interface CollectionPanelFilesProps {
items: Array<TreeItem<FileTreeData>>;
- onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
- onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
+ isWritable: boolean;
+ isLoading: boolean;
+ tooManyFiles: boolean;
+ onUploadDataClick: () => void;
+ onSearchChange: (searchValue: string) => 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 = 'nameHeader' | 'fileSizeHeader';
+export type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button' | 'centeredLabel' | 'cardHeaderContent' | 'cardHeaderContentTitle';
const styles: StyleRulesCallback<CssRules> = theme => ({
+ root: {
+ paddingBottom: theme.spacing.unit,
+ height: '100%'
+ },
+ cardSubheader: {
+ paddingTop: 0,
+ paddingBottom: 0,
+ minHeight: 8 * theme.spacing.unit,
+ },
+ cardHeaderContent: {
+ display: 'flex',
+ paddingRight: 2 * theme.spacing.unit,
+ justifyContent: 'space-between',
+ },
+ cardHeaderContentTitle: {
+ paddingLeft: theme.spacing.unit,
+ paddingTop: 2 * theme.spacing.unit,
+ paddingRight: 2 * theme.spacing.unit,
+ },
nameHeader: {
marginLeft: '75px'
},
fileSizeHeader: {
- marginRight: '50px'
- }
+ marginRight: '65px'
+ },
+ uploadIcon: {
+ transform: 'rotate(180deg)'
+ },
+ button: {
+ marginRight: -theme.spacing.unit,
+ marginTop: '8px'
+ },
+ centeredLabel: {
+ fontSize: '0.875rem',
+ textAlign: 'center'
+ },
});
-export const CollectionPanelFiles = withStyles(styles)(
- ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
- <div>
- <Grid container justify="flex-end">
- <IconButton onClick={onOptionsMenuOpen}>
- <CustomizeTableIcon />
- </IconButton>
- </Grid>
- <Grid container justify="space-between">
- <Typography variant="caption" className={classes.nameHeader}>
- Name
+export const CollectionPanelFilesComponent = ({ onItemMenuOpen, onSearchChange, onOptionsMenuOpen, onUploadDataClick, classes,
+ isWritable, isLoading, tooManyFiles, loadFilesFunc, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) => {
+ const { useState, useEffect } = React;
+ const [searchValue, setSearchValue] = useState('');
+
+ useEffect(() => {
+ onSearchChange(searchValue);
+ }, [searchValue]);
+
+ return (<Card data-cy='collection-files-panel' className={classes.root}>
+ <CardHeader
+ title={
+ <div className={classes.cardHeaderContent}>
+ <span className={classes.cardHeaderContentTitle}>Files</span>
+ <SearchInput
+ value={searchValue}
+ onSearch={setSearchValue} />
+ </div>
+ }
+ className={classes.cardSubheader}
+ classes={{ action: classes.button }}
+ action={<>
+ {isWritable &&
+ <Button
+ data-cy='upload-button'
+ onClick={onUploadDataClick}
+ variant='contained'
+ color='primary'
+ size='small'>
+ <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>
- <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
- </div>);
+ <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 collectionPanelItems: Array<TreeItem<FileTreeData>> = [{
- active: false,
- data: {
- name: "Directory 1",
- type: "directory"
- },
- id: "Directory 1",
- open: true,
- status: TreeItemStatus.LOADED,
- items: [{
- active: false,
- data: {
- name: "Directory 1.1",
- type: "directory"
- },
- id: "Directory 1.1",
- open: false,
- status: TreeItemStatus.LOADED,
- items: []
- }, {
- active: false,
- data: {
- name: "File 1.1",
- type: "file",
- size: 20033
- },
- id: "File 1.1",
- open: false,
- status: TreeItemStatus.LOADED,
- items: []
- }]
-}, {
- active: false,
- data: {
- name: "Directory 2",
- type: "directory"
- },
- id: "Directory 2",
- open: false,
- status: TreeItemStatus.LOADED
-}];
+export const CollectionPanelFiles = withStyles(styles)(CollectionPanelFilesComponent);
projects / arvados-workbench2.git / blobdiff