});
// Test context menus
cy.get('[data-cy=collection-files-panel]')
- .contains(fileName).rightclick({ force: true });
+ .contains(fileName).rightclick();
cy.get('[data-cy=context-menu]')
.should('contain', 'Download')
.and('not.contain', 'Open in new tab')
.and(`${isWritable ? '' : 'not.'}contain`, 'Remove');
cy.get('body').click(); // Collapse the menu
cy.get('[data-cy=collection-files-panel]')
- .contains(subDirName).rightclick({ force: true });
+ .contains(subDirName).rightclick();
cy.get('[data-cy=context-menu]')
.should('not.contain', 'Download')
.and('not.contain', 'Open in new tab')
['subdir', 'G%C3%BCnter\'s%20file', 'table%&?*2'].forEach((subdir) => {
cy.get('[data-cy=collection-files-panel]')
- .contains('bar').rightclick({force: true});
+ .contains('bar').rightclick();
cy.get('[data-cy=context-menu]')
.contains('Rename')
.click();
cy.get('[data-cy=collection-files-panel]')
.should('not.contain', 'bar')
.and('contain', subdir);
- cy.wait(1000);
cy.get('[data-cy=collection-files-panel]').contains(subdir).click();
- // Rename 'subdir/foo' to 'foo'
+
+ // Rename 'subdir/foo' to 'bar'
cy.wait(1000);
cy.get('[data-cy=collection-files-panel]')
.contains('foo').rightclick();
});
cy.get('[data-cy=form-submit-btn]').click();
- cy.wait(1000);
cy.get('[data-cy=collection-files-panel]')
.contains('Home')
.click();
cy.goToPath(`/collections/${testCollection1.uuid}`);
+ // Confirm initial collection state.
+ cy.get('[data-cy=collection-files-panel]')
+ .contains('bar').should('exist');
+ cy.get('[data-cy=collection-files-panel]')
+ .contains('5mb_a.bin').should('not.exist');
+ cy.get('[data-cy=collection-files-panel]')
+ .contains('5mb_b.bin').should('not.exist');
+
cy.get('[data-cy=upload-button]').click();
cy.fixture('files/5mb.bin', 'base64').then(content => {
cy.get('[data-cy=form-submit-btn]').click();
cy.get('button[aria-label=Remove]').should('exist');
- cy.get('button[aria-label=Remove]').click({ multiple: true, force: true });
+ cy.get('button[aria-label=Remove]')
+ .click({ multiple: true, force: true });
cy.get('[data-cy=form-submit-btn]').should('not.exist');
+
+ // Confirm final collection state.
+ cy.get('[data-cy=collection-files-panel]')
+ .contains('bar').should('exist');
+ // The following fails, but doesn't seem to happen
+ // in the real world. Maybe there's a race between
+ // the PUT request finishing and the 'Remove' button
+ // dissapearing, because sometimes just one of the 2
+ // files gets uploaded.
+ // Maybe this will be needed to simulate a slow network:
+ // https://docs.cypress.io/api/commands/intercept#Convenience-functions-1
+ // cy.get('[data-cy=collection-files-panel]')
+ // .contains('5mb_a.bin').should('not.exist');
+ // cy.get('[data-cy=collection-files-panel]')
+ // .contains('5mb_b.bin').should('not.exist');
});
});
});
cy.loginAs(activeUser);
cy.goToPath(`/collections/${testSourceCollection.uuid}`);
cy.get('[data-cy=collection-files-panel]').contains('bar');
- cy.get('[data-cy=collection-files-panel]').find('input[type=checkbox]').click({ force: true });
+ cy.get('[data-cy=collection-files-panel]').find('input[type=checkbox]').click();
cy.get('[data-cy=collection-files-panel-options-btn]').click();
cy.get('[data-cy=context-menu]')
.contains('Copy selected into the collection').click();
import servicesProvider from 'common/service-provider';
import { CustomizeTableIcon, DownloadIcon } from 'components/icon/icon';
import { SearchInput } from 'components/search-input/search-input';
-import { ListItemIcon, StyleRulesCallback, Theme, WithStyles, withStyles, Tooltip, IconButton, Checkbox, CircularProgress, Button } from '@material-ui/core';
+import {
+ ListItemIcon,
+ StyleRulesCallback,
+ Theme,
+ WithStyles,
+ withStyles,
+ Tooltip,
+ IconButton,
+ Checkbox,
+ CircularProgress,
+ Button,
+} from '@material-ui/core';
import { FileTreeData } from '../file-tree/file-tree-data';
import { TreeItem, TreeItemStatus } from '../tree/tree';
import { RootState } from 'store/store';
import { WebDAV, WebDAVRequestConfig } from 'common/webdav';
import { AuthState } from 'store/auth/auth-reducer';
import { extractFilesData } from 'services/collection-service/collection-service-files-response';
-import { DefaultIcon, DirectoryIcon, FileIcon, BackIcon, SidePanelRightArrowIcon } from 'components/icon/icon';
+import {
+ DefaultIcon,
+ DirectoryIcon,
+ FileIcon,
+ BackIcon,
+ SidePanelRightArrowIcon
+} from 'components/icon/icon';
import { setCollectionFiles } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
import { sortBy } from 'lodash';
import { formatFileSize } from 'common/formatters';
import { getInlineFileUrl, sanitizeToken } from 'views-components/context-menu/actions/helpers';
export interface CollectionPanelFilesProps {
- items: any;
isWritable: boolean;
- isLoading: boolean;
- tooManyFiles: boolean;
onUploadDataClick: (targetLocation?: string) => void;
onSearchChange: (searchValue: string) => void;
onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, 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: any;
dispatch: Function;
collectionPanelFiles: any;
collectionPanel: any;
}
-type CssRules = "backButton" | "backButtonHidden" | "pathPanelPathWrapper" | "uploadButton" | "uploadIcon" | "loader" | "wrapper" | "dataWrapper" | "row" | "rowEmpty" | "leftPanel" | "rightPanel" | "pathPanel" | "pathPanelItem" | "rowName" | "listItemIcon" | "rowActive" | "pathPanelMenu" | "rowSelection" | "leftPanelHidden" | "leftPanelVisible" | "searchWrapper" | "searchWrapperHidden";
+type CssRules = "backButton"
+ | "backButtonHidden"
+ | "pathPanelPathWrapper"
+ | "uploadButton"
+ | "uploadIcon"
+ | "loader"
+ | "wrapper"
+ | "dataWrapper"
+ | "row"
+ | "rowEmpty"
+ | "leftPanel"
+ | "rightPanel"
+ | "pathPanel"
+ | "pathPanelItem"
+ | "rowName"
+ | "listItemIcon"
+ | "rowActive"
+ | "pathPanelMenu"
+ | "rowSelection"
+ | "leftPanelHidden"
+ | "leftPanelVisible"
+ | "searchWrapper"
+ | "searchWrapperHidden";
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
wrapper: {
};
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('');
const fetchData = (keys, ignoreCache = false) => {
const keyArray = Array.isArray(keys) ? keys : [keys];
- Promise.all(keyArray
+ Promise.all(keyArray.filter(key => !!key)
.map((key) => {
const dataExists = !!pathData[key];
const runningRequest = pathPromise[key];
- if ((!dataExists || ignoreCache) && (!runningRequest || ignoreCache)) {
+ if (ignoreCache || (!dataExists && !runningRequest)) {
if (!isLoading) {
setIsLoading(true);
}
})
.filter((promise) => !!promise)
)
- .then((requests) => {
- const newState = requests.map((request, index) => {
- if (request && request.responseXML != null) {
- const key = keyArray[index];
- const result: any = extractFilesData(request.responseXML);
- const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
- if (n1.type === 'directory' && n2.type !== 'directory') {
- return -1;
- }
- if (n1.type !== 'directory' && n2.type === 'directory') {
- return 1;
- }
- return 0;
- });
-
- return { [key]: sortedResult };
- }
- return {};
- }).reduce((prev, next) => {
- return { ...next, ...prev };
- }, {});
+ .then((requests) => {
+ const newState = requests.map((request, index) => {
+ if (request && request.responseXML != null) {
+ const key = keyArray[index];
+ const result: any = extractFilesData(request.responseXML);
+ const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
+ if (n1.type === 'directory' && n2.type !== 'directory') {
+ return -1;
+ }
+ if (n1.type !== 'directory' && n2.type === 'directory') {
+ return 1;
+ }
+ return 0;
+ });
- setPathData({ ...pathData, ...newState });
- })
- .finally(() => {
- setIsLoading(false);
- keyArray.forEach(key => delete pathPromise[key]);
- });
+ return { [key]: sortedResult };
+ }
+ return {};
+ }).reduce((prev, next) => {
+ return { ...next, ...prev };
+ }, {});
+
+ setPathData({ ...pathData, ...newState });
+ })
+ .finally(() => {
+ setIsLoading(false);
+ keyArray.forEach(key => delete pathPromise[key]);
+ });
};
React.useEffect(() => {
const currentPDH = (collectionPanel.item || {}).portableDataHash;
React.useEffect(() => {
if (currentPDH) {
- fetchData([leftKey, rightKey], true);
+ // Avoid fetching the same content level twice
+ if (leftKey !== rightKey) {
+ fetchData([leftKey, rightKey], true);
+ } else {
+ fetchData(rightKey, true);
+ }
}
}, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
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) {
+ if (parentRef?.current) {
node = parentRef.current;
(node as any).addEventListener('contextmenu', handleRightClick);
}
[props.onOptionsMenuOpen] // eslint-disable-line react-hooks/exhaustive-deps
);
- return (
- <div data-cy="collection-files-panel" onClick={handleClick} ref={parentRef}>
- <div className={classes.pathPanel}>
- <div className={classes.pathPanelPathWrapper}>
- {
- path
- .map((p: string, index: number) => <span
- key={`${index}-${p}`}
- data-item="true"
- className={classes.pathPanelItem}
- data-breadcrumb-path={p}
- >
- <span className={classes.rowActive}>{index === 0 ? 'Home' : p}</span> <b>/</b>
- </span>)
- }
- </div>
- <Tooltip className={classes.pathPanelMenu} title="More options" disableFocusListener>
- <IconButton
- data-cy='collection-files-panel-options-btn'
- onClick={(ev) => {
- onOptionsMenuOpen(ev, isWritable);
- }}>
- <CustomizeTableIcon />
+ return <div data-cy="collection-files-panel" onClick={handleClick} ref={parentRef}>
+ <div className={classes.pathPanel}>
+ <div className={classes.pathPanelPathWrapper}>
+ { path.map( (p: string, index: number) =>
+ <span key={`${index}-${p}`} data-item="true"
+ className={classes.pathPanelItem} data-breadcrumb-path={p}>
+ <span className={classes.rowActive}>{index === 0 ? 'Home' : p}</span> <b>/</b>
+ </span>)
+ }
+ </div>
+ <Tooltip className={classes.pathPanelMenu} title="More options" disableFocusListener>
+ <IconButton data-cy='collection-files-panel-options-btn'
+ onClick={(ev) => {
+ onOptionsMenuOpen(ev, isWritable);
+ }}>
+ <CustomizeTableIcon />
+ </IconButton>
+ </Tooltip>
+ </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([...path.slice(0, path.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 className={classes.row}><CircularProgress className={classes.loader} size={30} /></div> }
+ </div>
</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([...path.slice(0, path.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 className={classes.row}><CircularProgress className={classes.loader} size={30} /></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>
- <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>
- </div>
- }
- }
- </FixedSizeList> : <div className={classes.rowEmpty}>This collection is empty</div>
- }}
- </AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
- }
- </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>
+ </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>
</div>
- );
-}));
+ </div>}));
// SPDX-License-Identifier: AGPL-3.0
import { Dispatch } from "redux";
-import {
- COLLECTION_PANEL_LOAD_FILES_THRESHOLD
-} from "./collection-panel-files/collection-panel-files-actions";
import { CollectionResource } from 'models/collection';
import { RootState } from "store/store";
import { ServiceRepository } from "services/services";
export const collectionPanelActions = unionize({
SET_COLLECTION: ofType<CollectionResource>(),
- LOAD_COLLECTION_SUCCESS: ofType<{ item: CollectionResource }>(),
- LOAD_BIG_COLLECTIONS: ofType<boolean>(),
});
export type CollectionPanelAction = UnionOf<typeof collectionPanelActions>;
export const loadCollectionPanel = (uuid: string, forceReload = false) =>
async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
const { collectionPanel: { item } } = getState();
- const collection = (item && item.uuid === uuid && !forceReload)
- ? item
- : await services.collectionService.get(uuid);
- dispatch<any>(loadDetailsPanel(collection.uuid));
- dispatch(collectionPanelActions.LOAD_COLLECTION_SUCCESS({ item: collection }));
- dispatch(resourcesActions.SET_RESOURCES([collection]));
- if (collection.fileCount <= COLLECTION_PANEL_LOAD_FILES_THRESHOLD &&
- !getState().collectionPanel.loadBigCollections) {
+ let collection: CollectionResource | null = null;
+ if (!item || item.uuid !== uuid || forceReload) {
+ collection = await services.collectionService.get(uuid);
+ dispatch(collectionPanelActions.SET_COLLECTION(collection));
+ dispatch(resourcesActions.SET_RESOURCES([collection]));
+ } else {
+ collection = item;
}
+ dispatch<any>(loadDetailsPanel(collection.uuid));
return collection;
};
import { startSubmit, stopSubmit, initialize, FormErrors } from 'redux-form';
import { getDialog } from "store/dialog/dialog-reducer";
import { getFileFullPath, sortFilesTree } from "services/collection-service/collection-service-files-response";
-import { progressIndicatorActions } from "store/progress-indicator/progress-indicator-actions";
-import { loadCollectionPanel } from "../collection-panel-action";
export const collectionPanelFilesAction = unionize({
SET_COLLECTION_FILES: ofType<CollectionFilesTree>(),
export type CollectionPanelFilesAction = UnionOf<typeof collectionPanelFilesAction>;
export const COLLECTION_PANEL_LOAD_FILES = 'collectionPanelLoadFiles';
-export const COLLECTION_PANEL_LOAD_FILES_THRESHOLD = 40000;
export const setCollectionFiles = (files, joinParents = true) => (dispatch: any) => {
const tree = createCollectionFilesTree(files, joinParents);
dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES(mapped));
};
-export const loadCollectionFiles = (uuid: string) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- dispatch(progressIndicatorActions.START_WORKING(COLLECTION_PANEL_LOAD_FILES));
- services.collectionService.files(uuid).then(files => {
- // Given the array of directories and files, create the appropriate tree nodes,
- // sort them, and add the complete url to each.
- const tree = createCollectionFilesTree(files);
- const sorted = sortFilesTree(tree);
- const mapped = mapTreeValues(services.collectionService.extendFileURL)(sorted);
- dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES(mapped));
- dispatch(progressIndicatorActions.STOP_WORKING(COLLECTION_PANEL_LOAD_FILES));
- }).catch(() => {
- dispatch(progressIndicatorActions.STOP_WORKING(COLLECTION_PANEL_LOAD_FILES));
- dispatch(snackbarActions.OPEN_SNACKBAR({
- message: `Error getting file list`,
- hideDuration: 2000,
- kind: SnackbarKind.ERROR
- }));
- });
- };
-
export const removeCollectionFiles = (filePaths: string[]) =>
(dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
const currentCollection = getState().collectionPanel.item;
if (currentCollection) {
services.collectionService.deleteFiles(currentCollection.uuid, filePaths).then(() => {
- dispatch<any>(loadCollectionPanel(currentCollection.uuid, true));
dispatch(snackbarActions.OPEN_SNACKBAR({
message: 'Removed.',
hideDuration: 2000,
const oldPath = getFileFullPath(file);
const newPath = newFullPath;
services.collectionService.moveFile(currentCollection.uuid, oldPath, newPath).then(() => {
- dispatch<any>(loadCollectionPanel(currentCollection.uuid, true));
dispatch(dialogActions.CLOSE_DIALOG({ id: RENAME_FILE_DIALOG }));
dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'File name changed.', hideDuration: 2000 }));
}).catch(e => {
export interface CollectionPanelState {
item: CollectionResource | null;
- loadBigCollections: boolean;
}
const initialState = {
item: null,
- loadBigCollections: false,
};
export const collectionPanelReducer = (state: CollectionPanelState = initialState, action: CollectionPanelAction) =>
SET_COLLECTION: (item) => ({
...state,
item,
- loadBigCollections: false,
}),
- LOAD_COLLECTION_SUCCESS: ({ item }) => ({ ...state, item }),
- LOAD_BIG_COLLECTIONS: (loadBigCollections) => ({ ...state, loadBigCollections}),
});
properties: collection.properties }
).then(updatedCollection => {
updatedCollection = {...cachedCollection, ...updatedCollection};
- dispatch(collectionPanelActions.LOAD_COLLECTION_SUCCESS({ item: updatedCollection as CollectionResource }));
+ dispatch(collectionPanelActions.SET_COLLECTION(updatedCollection));
dispatch(dialogActions.CLOSE_DIALOG({ id: COLLECTION_UPDATE_FORM_NAME }));
dispatch(progressIndicatorActions.STOP_WORKING(COLLECTION_UPDATE_FORM_NAME));
dispatch(snackbarActions.OPEN_SNACKBAR({
import { RootState } from 'store/store';
import { ServiceRepository } from 'services/services';
import { dialogActions } from 'store/dialog/dialog-actions';
-import { loadCollectionFiles } from '../collection-panel/collection-panel-files/collection-panel-files-actions';
import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
import { fileUploaderActions } from 'store/file-uploader/file-uploader-actions';
import { reset, startSubmit, stopSubmit } from 'redux-form';
import { progressIndicatorActions } from "store/progress-indicator/progress-indicator-actions";
-import { collectionPanelFilesAction } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
-import { createTree } from 'models/tree';
-import { loadCollectionPanel } from '../collection-panel/collection-panel-action';
import * as WorkbenchActions from 'store/workbench/workbench-actions';
export const uploadCollectionFiles = (collectionUuid: string, targetLocation?: string) =>
try {
dispatch(progressIndicatorActions.START_WORKING(COLLECTION_UPLOAD_FILES_DIALOG));
dispatch(startSubmit(COLLECTION_UPLOAD_FILES_DIALOG));
- await dispatch<any>(uploadCollectionFiles(currentCollection.uuid, targetLocation))
- .then(() => dispatch<any>(collectionPanelFilesAction.SET_COLLECTION_FILES({ files: createTree() })));
- dispatch<any>(loadCollectionFiles(currentCollection.uuid));
- dispatch<any>(loadCollectionPanel(currentCollection.uuid));
+ await dispatch<any>(uploadCollectionFiles(currentCollection.uuid, targetLocation));
dispatch(closeUploadCollectionFilesDialog());
dispatch(snackbarActions.OPEN_SNACKBAR({
message: 'Data has been uploaded.',
import { subprocessPanelColumns } from 'views/subprocess-panel/subprocess-panel-root';
import { loadAllProcessesPanel, allProcessesPanelActions } from '../all-processes-panel/all-processes-panel-action';
import { allProcessesPanelColumns } from 'views/all-processes-panel/all-processes-panel';
-import { collectionPanelFilesAction } from '../collection-panel/collection-panel-files/collection-panel-files-actions';
-import { createTree } from 'models/tree';
import { AdminMenuIcon } from 'components/icon/icon';
import { userProfileGroupsColumns } from 'views/user-profile-panel/user-profile-panel-root';
async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
const userUuid = getUserUuid(getState());
if (userUuid) {
- // Clear collection files panel
- dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES({ files: createTree() }));
const match = await loadGroupContentsResource({ uuid, userUuid, services });
match({
- OWNED: async collection => {
+ OWNED: collection => {
dispatch(collectionPanelActions.SET_COLLECTION(collection as CollectionResource));
dispatch(updateResources([collection]));
dispatch(activateSidePanelTreeItem(collection.ownerUuid));
import { propertiesActions } from 'store/properties/properties-actions';
import { getProperty } from 'store/properties/properties';
import { navigateToRunProcess } from 'store/navigation/navigation-action';
-import { goToStep, runProcessPanelActions, loadPresets, getWorkflowRunnerSettings } from 'store/run-process-panel/run-process-panel-actions';
+import {
+ goToStep,
+ runProcessPanelActions,
+ loadPresets,
+ getWorkflowRunnerSettings
+} from 'store/run-process-panel/run-process-panel-actions';
import { snackbarActions } from 'store/snackbar/snackbar-actions';
import { initialize } from 'redux-form';
import { RUN_PROCESS_BASIC_FORM } from 'views/run-process-panel/run-process-basic-form';
import { RUN_PROCESS_INPUTS_FORM } from 'views/run-process-panel/run-process-inputs-form';
import { RUN_PROCESS_ADVANCED_FORM } from 'views/run-process-panel/run-process-advanced-form';
-import { getResource, ResourcesState } from 'store/resources/resources';
+import { getResource } from 'store/resources/resources';
import { ProjectResource } from 'models/project';
import { UserResource } from 'models/user';
import { getUserUuid } from "common/getuser";
CollectionPanelFilesProps
} from "components/collection-panel-files/collection-panel-files";
import { RootState } from "store/store";
-import { TreeItemStatus } from "components/tree/tree";
-import { VirtualTreeItem as TreeItem } from "components/tree/virtual-tree";
-import {
- CollectionPanelDirectory,
- CollectionPanelFile,
- CollectionPanelFilesState
-} from "store/collection-panel/collection-panel-files/collection-panel-files-state";
-import { FileTreeData } from "components/file-tree/file-tree-data";
import { Dispatch } from "redux";
import { collectionPanelFilesAction } from "store/collection-panel/collection-panel-files/collection-panel-files-actions";
import { ContextMenuKind } from "../context-menu/context-menu";
-import { getNode, getNodeChildrenIds, Tree, TreeNode, initTreeNode } from "models/tree";
-import { CollectionFileType, createCollectionDirectory } from "models/collection-file";
import { openContextMenu, openCollectionFilesContextMenu } from 'store/context-menu/context-menu-actions';
import { openUploadCollectionFilesDialog } from 'store/collections/collection-upload-actions';
import { ResourceKind } from "models/resource";
import { openDetailsPanel } from 'store/details-panel/details-panel-action';
-const memoizedMapStateToProps = () => {
- let prevState: CollectionPanelFilesState;
- let prevTree: Array<TreeItem<FileTreeData>>;
-
- return (state: RootState): Pick<CollectionPanelFilesProps, "items" | "currentItemUuid"> => {
- if (prevState !== state.collectionPanelFiles) {
- prevState = state.collectionPanelFiles;
- prevTree = [].concat.apply(
- [], getNodeChildrenIds('')(state.collectionPanelFiles)
- .map(collectionItemToList(0)(state.collectionPanelFiles)));
- }
- return {
- items: prevTree,
- currentItemUuid: state.detailsPanel.resourceUuid
- };
- };
-};
+const mapStateToProps = (state: RootState): Pick<CollectionPanelFilesProps, "currentItemUuid"> => ({
+ currentItemUuid: state.detailsPanel.resourceUuid
+});
const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onSearchChange' | 'onFileClick' | 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
onUploadDataClick: (targetLocation?: string) => {
},
});
-export const CollectionPanelFiles = connect(memoizedMapStateToProps(), mapDispatchToProps)(Component);
-
-const collectionItemToList = (level: number) => (tree: Tree<CollectionPanelDirectory | CollectionPanelFile>) =>
- (id: string): TreeItem<FileTreeData>[] => {
- const node: TreeNode<CollectionPanelDirectory | CollectionPanelFile> = getNode(id)(tree) || initTreeNode({
- id: '',
- parent: '',
- value: {
- ...createCollectionDirectory({ name: 'Invalid file' }),
- selected: false,
- collapsed: true
- }
- });
-
- const treeItem = {
- active: false,
- data: {
- name: node.value.name,
- size: node.value.type === CollectionFileType.FILE ? node.value.size : undefined,
- type: node.value.type,
- url: node.value.url,
- },
- id: node.id,
- items: [], // Not used in this case as we're converting a tree to a list.
- itemCount: node.children.length,
- open: node.value.type === CollectionFileType.DIRECTORY ? !node.value.collapsed : false,
- selected: node.value.selected,
- status: TreeItemStatus.LOADED,
- level,
- };
-
- const treeItemChilds = treeItem.open
- ? [].concat.apply([], node.children.map(collectionItemToList(level+1)(tree)))
- : [];
-
- return [
- treeItem,
- ...treeItemChilds,
- ];
- };
+export const CollectionPanelFiles = connect(mapStateToProps, mapDispatchToProps)(Component);
// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
-import { DefaultIcon, WorkflowIcon } from 'components/icon/icon';
+import { WorkflowIcon } from 'components/icon/icon';
import { WorkflowResource } from 'models/workflow';
import { DetailsData } from "./details-data";
-import { DefaultView } from 'components/default-view/default-view';
import { DetailsAttribute } from 'components/details-attribute/details-attribute';
import { ResourceWithName } from 'views-components/data-explorer/renderers';
import { formatDate } from "common/formatters";
import { DetailsAttribute } from 'components/details-attribute/details-attribute';
import { CollectionResource, getCollectionUrl } from 'models/collection';
import { CollectionPanelFiles } from 'views-components/collection-panel-files/collection-panel-files';
-import { navigateToProcess, collectionPanelActions } from 'store/collection-panel/collection-panel-action';
+import { navigateToProcess } from 'store/collection-panel/collection-panel-action';
import { getResource } from 'store/resources/resources';
import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
import { formatDate, formatFileSize } from "common/formatters";
import { GroupResource } from 'models/group';
import { UserResource } from 'models/user';
import { getUserUuid } from 'common/getuser';
-import { getProgressIndicator } from 'store/progress-indicator/progress-indicator-reducer';
-import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
import { Link } from 'react-router-dom';
import { Link as ButtonLink } from '@material-ui/core';
import { ResourceWithName, ResponsiblePerson } from 'views-components/data-explorer/renderers';
isWritable: boolean;
isOldVersion: boolean;
isLoadingFiles: boolean;
- tooManyFiles: boolean;
}
-type CollectionPanelProps = CollectionPanelDataProps & DispatchProp
- & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
+type CollectionPanelProps = CollectionPanelDataProps & DispatchProp & WithStyles<CssRules>
-export const CollectionPanel = withStyles(styles)(
- connect((state: RootState, props: RouteComponentProps<{ id: string }>) => {
+export const CollectionPanel = withStyles(styles)(connect(
+ (state: RootState, props: RouteComponentProps<{ id: string }>) => {
const currentUserUUID = getUserUuid(state);
const item = getResource<CollectionResource>(props.match.params.id)(state.resources);
let isWritable = false;
}
}
}
- const loadingFilesIndicator = getProgressIndicator(COLLECTION_PANEL_LOAD_FILES)(state.progressIndicator);
- const isLoadingFiles = (loadingFilesIndicator && loadingFilesIndicator!.working) || false;
- const tooManyFiles = (!state.collectionPanel.loadBigCollections && item && item.fileCount > COLLECTION_PANEL_LOAD_FILES_THRESHOLD) || false;
- return { item, isWritable, isOldVersion, isLoadingFiles, tooManyFiles };
+ return { item, isWritable, isOldVersion };
})(
class extends React.Component<CollectionPanelProps> {
render() {
- const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
+ const { classes, item, dispatch, isWritable, isOldVersion } = this.props;
const panelsData: MPVPanelState[] = [
{ name: "Details" },
{ name: "Files" },
</MPVPanelContent>
<MPVPanelContent xs>
<Card className={classes.filesCard}>
- <CollectionPanelFiles
- isWritable={isWritable}
- isLoading={isLoadingFiles}
- tooManyFiles={tooManyFiles}
- loadFilesFunc={() => {
- dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
- dispatch<any>(loadCollectionFiles(this.props.item.uuid));
- }
- } />
+ <CollectionPanelFiles isWritable={isWritable} />
</Card>
</MPVPanelContent>
</MPVContainer>
projects / arvados-workbench2.git / commitdiff