1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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 { CollectionFileType } from "~/models/collection-file";
10 import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip, CircularProgress } from '@material-ui/core';
11 import { CustomizeTableIcon } from '~/components/icon/icon';
12 import { DownloadIcon } from '~/components/icon/icon';
13 import { SearchInput } from '../search-input/search-input';
15 export interface CollectionPanelFilesProps {
16 items: Array<TreeItem<FileTreeData>>;
19 tooManyFiles: boolean;
20 onUploadDataClick: () => void;
21 onSearchChange: (searchValue: string) => void;
22 onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, isWritable: boolean) => void;
23 onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>, isWritable: boolean) => void;
24 onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
25 onCollapseToggle: (id: string, status: TreeItemStatus) => void;
26 onFileClick: (id: string) => void;
27 loadFilesFunc: () => void;
28 currentItemUuid?: string;
31 type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button' | 'centeredLabel' | 'cardHeaderContent' | 'cardHeaderContentTitle';
33 const styles: StyleRulesCallback<CssRules> = theme => ({
35 paddingBottom: theme.spacing.unit,
41 minHeight: 8 * theme.spacing.unit,
45 paddingRight: 2 * theme.spacing.unit,
46 justifyContent: 'space-between',
48 cardHeaderContentTitle: {
49 paddingLeft: theme.spacing.unit,
50 paddingTop: 2 * theme.spacing.unit,
51 paddingRight: 2 * theme.spacing.unit,
60 transform: 'rotate(180deg)'
63 marginRight: -theme.spacing.unit,
74 export const CollectionPanelFiles =
76 ({ onItemMenuOpen, onSearchChange, onOptionsMenuOpen, onUploadDataClick, classes,
77 isWritable, isLoading, tooManyFiles, loadFilesFunc, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) => {
78 const { useState, useEffect } = React;
79 const [searchValue, setSearchValue] = useState('');
82 onSearchChange(searchValue);
85 return (<Card data-cy='collection-files-panel' className={classes.root}>
88 <div className={classes.cardHeaderContent}>
89 <span className={classes.cardHeaderContentTitle}>Files</span>
92 onSearch={setSearchValue} />
95 className={classes.cardSubheader}
96 classes={{ action: classes.button }}
100 data-cy='upload-button'
101 onClick={onUploadDataClick}
105 <DownloadIcon className={classes.uploadIcon} />
109 <Tooltip title="More options" disableFocusListener>
111 data-cy='collection-files-panel-options-btn'
112 onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
113 <CustomizeTableIcon />
119 ? <div className={classes.centeredLabel}>
120 File listing may take some time, please click to browse: <Button onClick={loadFilesFunc}><DownloadIcon />Show files</Button>
123 <Grid container justify="space-between">
124 <Typography variant="caption" className={classes.nameHeader}>
127 <Typography variant="caption" className={classes.fileSizeHeader}>
132 ? <div className={classes.centeredLabel}><CircularProgress /></div>
133 : <div style={{ height: 'calc(100% - 60px)' }}>
135 onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)}
137 items={treeProps.items.filter((item) => {
138 if (item.data.type === CollectionFileType.FILE) {
139 return item.data.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;