- onUploadDataClick();
- }}
- variant='contained'
- color='primary'
- size='small'>
- <DownloadIcon className={classes.uploadIcon} />
- Upload data
- </Button>
- }
- <div className={classes.dataWrapper}>
- {
- rightData && !isLoading ?
- <AutoSizer defaultHeight={500}>
- {({ height, width }) => {
- const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
-
- return !!filtered.length ? <FixedSizeList
- height={height}
- itemCount={filtered.length}
- itemSize={35}
- width={width}
- >
- {
- ({ index, style }) => {
- const { id, type, name, size } = filtered[index];
-
- return <div
- style={style}
- data-id={id}
- data-item="true"
- data-type={type}
- data-subfolder-path={name}
- className={classes.row} key={id}>
- <Checkbox
- color="primary"
- className={classes.rowSelection}
- checked={collectionPanelFiles[id] ? collectionPanelFiles[id].value.selected : false}
- />
- {getItemIcon(type, null)} <div className={classes.rowName}>
- {name}
- </div>
- <span className={classes.rowName} style={{ marginLeft: 'auto', marginRight: '1rem' }}>
- {formatFileSize(size)}
- </span>
- </div>
- }
- }
- </FixedSizeList> : <div className={classes.rowEmpty}>No data available</div>
- }}
- </AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
- }
- </div>
+ </div>;
+ }}</FixedSizeList>
+ : <div className={classes.rowEmpty}>No directories available</div>
+ }}
+ </AutoSizer>
+ : <div data-cy="collection-loader" className={classes.row}><CircularProgress className={classes.loader} size={30} /></div> }
+ </div>
+ </div>
+ <div className={classes.rightPanel} data-cy="collection-files-right-panel">
+ <div className={classes.searchWrapper}>
+ <SearchInput selfClearProp={rightKey} label="Search" value={rightSearch} onSearch={setRightSearch} />
+ </div>
+ { isWritable &&
+ <Button className={classes.uploadButton} data-cy='upload-button'
+ onClick={() => {
+ onUploadDataClick(rightKey === leftKey ? undefined : rightKey);
+ }}
+ variant='contained' color='primary' size='small'>
+ <DownloadIcon className={classes.uploadIcon} />
+ Upload data
+ </Button> }
+ <div className={classes.dataWrapper}>{ rightData && !isLoading
+ ? <AutoSizer defaultHeight={500}>{({ height, width }) => {
+ const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+ return !!filtered.length
+ ? <FixedSizeList height={height} itemCount={filtered.length}
+ itemSize={35} width={width}>{ ({ index, style }) => {
+ const { id, type, name, size } = filtered[index];
+
+ return <div style={style} data-id={id} data-item="true"
+ data-type={type} data-subfolder-path={name}
+ className={classes.row} key={id}>
+ <Checkbox color="primary"
+ className={classes.rowSelection}
+ checked={collectionPanelFiles[id] ? collectionPanelFiles[id].value.selected : false}
+ />
+ {getItemIcon(type, null)}
+ <div className={classes.rowName}>
+ {name}
+ </div>
+ <span className={classes.rowName} style={{
+ marginLeft: 'auto', marginRight: '1rem' }}>
+ { formatFileSize(size) }
+ </span>
+ <Tooltip title="More options" disableFocusListener>
+ <IconButton data-id='moreOptions'
+ data-cy='file-item-options-btn'
+ className={classes.moreOptionsButton}>
+ <MoreOptionsIcon
+ data-id='moreOptions'
+ className={classes.moreOptions} />
+ </IconButton>
+ </Tooltip>
+ </div>
+ } }</FixedSizeList>
+ : <div className={classes.rowEmpty}>This collection is empty</div>
+ }}</AutoSizer>
+ : <div className={classes.row}>
+ <CircularProgress className={classes.loader} size={30} />
+ </div> }