import { FixedSizeList } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import servicesProvider from 'common/service-provider';
-import { CustomizeTableIcon, DownloadIcon } from 'components/icon/icon';
+import { CustomizeTableIcon, DownloadIcon, MoreOptionsIcon } from 'components/icon/icon';
import { SearchInput } from 'components/search-input/search-input';
import {
ListItemIcon,
import { sortBy } from 'lodash';
import { formatFileSize } from 'common/formatters';
import { getInlineFileUrl, sanitizeToken } from 'views-components/context-menu/actions/helpers';
-import _ from 'lodash';
export interface CollectionPanelFilesProps {
isWritable: boolean;
| "pathPanelPathWrapper"
| "uploadButton"
| "uploadIcon"
+ | "moreOptionsButton"
+ | "moreOptions"
| "loader"
| "wrapper"
| "dataWrapper"
wrapper: {
display: 'flex',
minHeight: '600px',
- color: 'rgba(0, 0, 0, 0.87)',
+ color: 'rgba(0,0,0,0.87)',
fontSize: '0.875rem',
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
fontWeight: 400,
marginTop: '-15px',
},
pathPanel: {
- padding: '1rem',
- marginBottom: '1rem',
+ padding: '0.5rem',
+ marginBottom: '0.5rem',
backgroundColor: '#fff',
boxShadow: '0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%)',
},
},
leftPanel: {
flex: 0,
- padding: '1rem',
+ padding: '0 1rem 1rem',
marginRight: '1rem',
whiteSpace: 'nowrap',
position: 'relative',
rightPanel: {
flex: '50%',
padding: '1rem',
- paddingTop: '2rem',
- marginTop: '-1rem',
+ paddingTop: '0.5rem',
+ marginTop: '-0.5rem',
position: 'relative',
backgroundColor: '#fff',
boxShadow: '0px 3px 3px 0px rgb(0 0 0 / 20%), 0px 3px 1px 0px rgb(0 0 0 / 14%), 0px 3px 1px -1px rgb(0 0 0 / 12%)',
},
uploadButton: {
float: 'right',
- }
+ },
+ moreOptionsButton: {
+ width: theme.spacing.unit * 3,
+ height: theme.spacing.unit * 3,
+ marginRight: theme.spacing.unit,
+ marginTop: 'auto',
+ marginBottom: 'auto',
+ justifyContent: 'center',
+ },
+ moreOptions: {
+ position: 'absolute'
+ },
});
const pathPromise = {};
-let prevState = {};
-function difference(object, base) {
- function changes(object, base) {
- return _.transform(object, function(result, value, key) {
- if (!_.isEqual(value, base[key])) {
- result[key] = (_.isObject(value) && _.isObject(base[key])) ? changes(value, base[key]) : value;
- }
- });
- }
- return changes(object, base);
-}
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState) => ({
auth: state.auth,
collectionPanel: state.collectionPanel,
collectionPanelFiles: state.collectionPanelFiles,
}))((props: CollectionPanelFilesProps & WithStyles<CssRules> & { auth: AuthState }) => {
- const diff = difference(props, prevState);
- prevState = props;
- console.log('---> render CollectionPanelFiles <------', diff);
const { classes, onItemMenuOpen, onUploadDataClick, isWritable, dispatch, collectionPanelFiles, collectionPanel } = props;
const { apiToken, config } = props.auth;
- const webdavClient = new WebDAV();
- webdavClient.defaults.baseURL = config.keepWebServiceUrl;
- webdavClient.defaults.headers = {
- Authorization: `Bearer ${apiToken}`
- };
+ const webdavClient = new WebDAV({
+ baseURL: config.keepWebServiceUrl,
+ headers: {
+ Authorization: `Bearer ${apiToken}`
+ },
+ });
const webDAVRequestConfig: WebDAVRequestConfig = {
headers: {
};
const parentRef = React.useRef(null);
- const [path, setPath]: any = React.useState([]);
- const [pathData, setPathData]: any = React.useState({});
+ const [path, setPath] = React.useState<string[]>([]);
+ const [pathData, setPathData] = React.useState({});
const [isLoading, setIsLoading] = React.useState(false);
const [leftSearch, setLeftSearch] = React.useState('');
const [rightSearch, setRightSearch] = React.useState('');
React.useEffect(() => {
if (props.currentItemUuid) {
- console.log(' --> useEffect current UUID: ', props.currentItemUuid);
setPathData({});
setPath([props.currentItemUuid]);
}
}, [props.currentItemUuid]);
const fetchData = (keys, ignoreCache = false) => {
- console.log('---> fetchData', keys);
const keyArray = Array.isArray(keys) ? keys : [keys];
Promise.all(keyArray.filter(key => !!key)
const dataExists = !!pathData[key];
const runningRequest = pathPromise[key];
- if ((!dataExists || ignoreCache) && (!runningRequest || ignoreCache)) {
+ if (ignoreCache || (!dataExists && !runningRequest)) {
if (!isLoading) {
setIsLoading(true);
}
pathPromise[key] = true;
- console.log('>>> fetching data for key', key);
return webdavClient.propfind(`c=${key}`, webDAVRequestConfig);
}
.then((requests) => {
const newState = requests.map((request, index) => {
if (request && request.responseXML != null) {
- console.log(">>> got data for key", keyArray[index]);
const key = keyArray[index];
const result: any = extractFilesData(request.responseXML);
const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
}).reduce((prev, next) => {
return { ...next, ...prev };
}, {});
-
- setPathData({ ...pathData, ...newState });
+ setPathData((state) => ({ ...state, ...newState }));
})
.finally(() => {
setIsLoading(false);
React.useEffect(() => {
if (rightKey) {
- console.log('---> useEffect rightKey:', rightKey);
fetchData(rightKey);
setLeftSearch('');
setRightSearch('');
const currentPDH = (collectionPanel.item || {}).portableDataHash;
React.useEffect(() => {
if (currentPDH) {
- console.log('---> useEffect PDH change:', currentPDH);
- // Avoid fetching the same content level twice
- if (leftKey !== rightKey) {
- fetchData([leftKey, rightKey], true);
- } else {
- fetchData(rightKey, true);
- }
+ fetchData([leftKey, rightKey], true);
}
}, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
React.useEffect(() => {
if (rightData) {
- console.log('---> useEffect rightData:', rightData, 'search:', rightSearch);
const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
setCollectionFiles(filtered, false)(dispatch);
}
onItemMenuOpen(event, item, isWritable);
}
},
- [onItemMenuOpen, isWritable, rightData] // eslint-disable-line react-hooks/exhaustive-deps
- );
+ [onItemMenuOpen, isWritable, rightData]);
React.useEffect(() => {
let node = null;
- if (parentRef && parentRef.current) {
- console.log('---> useEffect parentRef:', parentRef);
+ if (parentRef?.current) {
node = parentRef.current;
(node as any).addEventListener('contextmenu', handleRightClick);
}
const handleClick = React.useCallback(
(event: any) => {
let isCheckbox = false;
+ let isMoreButton = false;
let elem = event.target;
if (elem.type === 'checkbox') {
isCheckbox = true;
}
+ // The "More options" button click event could be triggered on its
+ // internal graphic element.
+ else if ((elem.dataset && elem.dataset.id === 'moreOptions') || (elem.parentNode && elem.parentNode.dataset && elem.parentNode.dataset.id === 'moreOptions')) {
+ isMoreButton = true;
+ }
while (elem && elem.dataset && !elem.dataset.item) {
elem = elem.parentNode;
}
- if (elem && elem.dataset && !isCheckbox) {
+ if (elem && elem.dataset && !isCheckbox && !isMoreButton) {
const { parentPath, subfolderPath, breadcrumbPath, type } = elem.dataset;
if (breadcrumbPath) {
const index = path.indexOf(breadcrumbPath);
- setPath([...path.slice(0, index + 1)]);
+ setPath((state) => ([...state.slice(0, index + 1)]));
}
if (parentPath && type === 'directory') {
path.pop()
}
- setPath([...path, parentPath]);
+ setPath((state) => ([...state, parentPath]));
}
if (subfolderPath && type === 'directory') {
- setPath([...path, subfolderPath]);
+ setPath((state) => ([...state, subfolderPath]));
}
if (elem.dataset.id && type === 'file') {
const item = collectionPanelFiles[id];
props.onSelectionToggle(event, item);
}
+ if (isMoreButton) {
+ const { id } = elem.dataset;
+ const item: any = {
+ id,
+ data: rightData.find((elem) => elem.id === id),
+ };
+ onItemMenuOpen(event, item, isWritable);
+ }
},
[path, setPath, collectionPanelFiles] // eslint-disable-line react-hooks/exhaustive-deps
);
</Tooltip>
</div>
<div className={classes.wrapper}>
- <div className={classNames(classes.leftPanel, path.length > 1 ? classes.leftPanelVisible : classes.leftPanelHidden)} data-cy="collection-files-left-panel">
+ <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([...path.slice(0, path.length -1)])}>
+ <IconButton onClick={() => setPath((state) => ([...state.slice(0, state.length -1)]))}>
<BackIcon />
</IconButton>
</Tooltip>
return !!filtered.length
? <FixedSizeList height={height} itemCount={filtered.length}
itemSize={35} width={width}>{ ({ index, style }) => {
- console.log("Left Data ROW: ", filtered[index]);
const { id, type, name } = filtered[index];
return <div data-id={id} style={style} data-item="true"
data-type={type} data-parent-path={name}
: <div className={classes.rowEmpty}>No directories available</div>
}}
</AutoSizer>
- : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div> }
+ : <div data-cy="collection-loader" className={classes.row}><CircularProgress className={classes.loader} size={30} /></div> }
</div>
</div>
- <div className={classes.rightPanel}>
+ <div className={classes.rightPanel} data-cy="collection-files-right-panel">
<div className={classes.searchWrapper}>
<SearchInput selfClearProp={rightKey} label="Search" value={rightSearch} onSearch={setRightSearch} />
</div>
<div className={classes.dataWrapper}>{ rightData && !isLoading
? <AutoSizer defaultHeight={500}>{({ height, width }) => {
const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
- console.log("Right Data: ", filtered);
return !!filtered.length
? <FixedSizeList height={height} itemCount={filtered.length}
itemSize={35} width={width}>{ ({ index, style }) => {
- console.log("Right Data ROW: ", filtered[index]);
const { id, type, name, size } = filtered[index];
return <div style={style} data-id={id} data-item="true"
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>
projects / arvados-workbench2.git / blobdiff