projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
18834: Unit tests added
[arvados-workbench2.git]
/
src
/
components
/
collection-panel-files
/
collection-panel-files.tsx
diff --git
a/src/components/collection-panel-files/collection-panel-files.tsx
b/src/components/collection-panel-files/collection-panel-files.tsx
index a7001a61ac614e83f5dd6c8eb2e570a9902f55a6..05b493636da7aad97474cc3d61b3fafdfe97e0f3 100644
(file)
--- a/
src/components/collection-panel-files/collection-panel-files.tsx
+++ b/
src/components/collection-panel-files/collection-panel-files.tsx
@@
-28,7
+28,7
@@
export interface CollectionPanelFilesProps {
isWritable: boolean;
isLoading: boolean;
tooManyFiles: boolean;
isWritable: boolean;
isLoading: boolean;
tooManyFiles: boolean;
- onUploadDataClick: () => void;
+ onUploadDataClick: (
targetLocation?: string
) => void;
onSearchChange: (searchValue: string) => void;
onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, isWritable: boolean) => void;
onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>, isWritable: boolean) => void;
onSearchChange: (searchValue: string) => void;
onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, isWritable: boolean) => void;
onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>, isWritable: boolean) => void;
@@
-48,7
+48,6
@@
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
wrapper: {
display: 'flex',
minHeight: '600px',
wrapper: {
display: 'flex',
minHeight: '600px',
- marginBottom: '1rem',
color: 'rgba(0, 0, 0, 0.87)',
fontSize: '0.875rem',
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
color: 'rgba(0, 0, 0, 0.87)',
fontSize: '0.875rem',
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
@@
-202,7
+201,6
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
const [path, setPath]: any = React.useState([]);
const [pathData, setPathData]: any = React.useState({});
const [isLoading, setIsLoading] = React.useState(false);
const [path, setPath]: any = React.useState([]);
const [pathData, setPathData]: any = React.useState({});
const [isLoading, setIsLoading] = React.useState(false);
- const [collectionAutofetchEnabled, setCollectionAutofetchEnabled] = React.useState(false);
const [leftSearch, setLeftSearch] = React.useState('');
const [rightSearch, setRightSearch] = React.useState('');
const [leftSearch, setLeftSearch] = React.useState('');
const [rightSearch, setRightSearch] = React.useState('');
@@
-279,13
+277,12
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
}
}, [rightKey]); // eslint-disable-line react-hooks/exhaustive-deps
}
}, [rightKey]); // eslint-disable-line react-hooks/exhaustive-deps
+ const currentPDH = (collectionPanel.item || {}).portableDataHash;
React.useEffect(() => {
React.useEffect(() => {
- const hash = (collectionPanel.item || {}).portableDataHash;
-
- if (hash && collectionAutofetchEnabled) {
+ if (currentPDH) {
fetchData([leftKey, rightKey], true);
}
fetchData([leftKey, rightKey], true);
}
- }, [
(collectionPanel.item || {}).portableDataHash
]); // eslint-disable-line react-hooks/exhaustive-deps
+ }, [
currentPDH
]); // eslint-disable-line react-hooks/exhaustive-deps
React.useEffect(() => {
if (rightData) {
React.useEffect(() => {
if (rightData) {
@@
-316,10
+313,6
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
if (id) {
onItemMenuOpen(event, item, isWritable);
if (id) {
onItemMenuOpen(event, item, isWritable);
-
- if (!collectionAutofetchEnabled) {
- setCollectionAutofetchEnabled(true);
- }
}
},
[onItemMenuOpen, isWritable, rightData] // eslint-disable-line react-hooks/exhaustive-deps
}
},
[onItemMenuOpen, isWritable, rightData] // eslint-disable-line react-hooks/exhaustive-deps
@@
-446,9
+439,6
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
<IconButton
data-cy='collection-files-panel-options-btn'
onClick={(ev) => {
<IconButton
data-cy='collection-files-panel-options-btn'
onClick={(ev) => {
- if (!collectionAutofetchEnabled) {
- setCollectionAutofetchEnabled(true);
- }
onOptionsMenuOpen(ev, isWritable);
}}>
<CustomizeTableIcon />
onOptionsMenuOpen(ev, isWritable);
}}>
<CustomizeTableIcon />
@@
-456,14
+446,14
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
</Tooltip>
</div>
<div className={classes.wrapper}>
</Tooltip>
</div>
<div className={classes.wrapper}>
- <div className={classNames(classes.leftPanel, path.length > 1 ? classes.leftPanelVisible : classes.leftPanelHidden)}>
+ <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}>
<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 label="Search" value={leftSearch} onSearch={setLeftSearch} />
+ <SearchInput
selfClearProp={leftKey}
label="Search" value={leftSearch} onSearch={setLeftSearch} />
</div>
<div className={classes.dataWrapper}>
{
</div>
<div className={classes.dataWrapper}>
{
@@
-490,7
+480,7
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
data-parent-path={name}
className={classNames(classes.row, getActiveClass(name))}
key={id}>
data-parent-path={name}
className={classNames(classes.row, getActiveClass(name))}
key={id}>
- {getItemIcon(type, getActiveClass(name))}
+ {getItemIcon(type, getActiveClass(name))}
<div className={classes.rowName}>
{name}
</div>
<div className={classes.rowName}>
{name}
</div>
@@
-508,9
+498,9
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
</div>
</div>
</div>
</div>
- <div className={classes.rightPanel}>
+ <div className={classes.rightPanel}
data-cy="collection-files-right-panel"
>
<div className={classes.searchWrapper}>
<div className={classes.searchWrapper}>
- <SearchInput label="Search" value={rightSearch} onSearch={setRightSearch} />
+ <SearchInput
selfClearProp={rightKey}
label="Search" value={rightSearch} onSearch={setRightSearch} />
</div>
{
isWritable &&
</div>
{
isWritable &&
@@
-518,10
+508,7
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
className={classes.uploadButton}
data-cy='upload-button'
onClick={() => {
className={classes.uploadButton}
data-cy='upload-button'
onClick={() => {
- if (!collectionAutofetchEnabled) {
- setCollectionAutofetchEnabled(true);
- }
- onUploadDataClick();
+ onUploadDataClick(rightKey === leftKey ? undefined : rightKey);
}}
variant='contained'
color='primary'
}}
variant='contained'
color='primary'
@@
-568,7
+555,7
@@
export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
</div>
}
}
</div>
}
}
- </FixedSizeList> : <div className={classes.rowEmpty}>
No data available
</div>
+ </FixedSizeList> : <div className={classes.rowEmpty}>
This collection is empty
</div>
}}
</AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
}
}}
</AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
}