- {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}>
- <MoreHorizontalIcon
- 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>}
+ <div className={classes.wrapper}>
+ <div
+ className={classNames(classes.leftPanel, path.length > 1 ? classes.leftPanelVisible : classes.leftPanelHidden)}
+ data-cy="collection-files-left-panel"
+ >
+ <Tooltip
+ title="Go back"
+ className={path.length > 1 ? classes.backButton : classes.backButtonHidden}
+ >
+ <IconButton onClick={() => setPath(state => [...state.slice(0, state.length - 1)])}>
+ <BackIcon />
+ </IconButton>
+ </Tooltip>
+ <div className={path.length > 1 ? classes.searchWrapper : classes.searchWrapperHidden}>
+ <SearchInput
+ selfClearProp={leftKey}
+ label="Search"
+ value={leftSearch}
+ onSearch={setLeftSearch}
+ />
+ </div>
+ <div className={classes.dataWrapper}>
+ {leftData ? (
+ <AutoSizer defaultWidth={0}>
+ {({ height, width }) => {
+ const filtered = leftData.filter(({ name }) => name.indexOf(leftSearch) > -1);
+ return !!filtered.length ? (
+ <FixedSizeList
+ height={height}
+ itemCount={filtered.length}
+ itemSize={35}
+ width={width}
+ >
+ {({ index, style }) => {
+ const { id, type, name } = filtered[index];
+ return (
+ <div
+ data-id={id}
+ style={style}
+ data-item="true"
+ data-type={type}
+ data-parent-path={name}
+ className={classNames(classes.row, getActiveClass(name))}
+ key={id}
+ >
+ {getItemIcon(type, getActiveClass(name))}
+ <div className={classes.rowName}>{name}</div>
+ {getActiveClass(name) ? (
+ <SidePanelRightArrowIcon
+ style={{ display: "inline", marginTop: "5px", marginLeft: "5px" }}
+ />
+ ) : null}
+ </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}
+ >
+ <MoreHorizontalIcon
+ 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>
+ )}
+ </div>
+ </div>