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 adec50f651a9d307cdf3bd29d1d79cc79f76fd91..05b493636da7aad97474cc3d61b3fafdfe97e0f3 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -17,7 +17,7 @@ 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 } 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';
@@ -28,7 +28,7 @@ export interface CollectionPanelFilesProps {
     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;
@@ -48,7 +48,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     wrapper: {
         display: 'flex',
         minHeight: '600px',
-        marginBottom: '1rem',
         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 [collectionAutofetchEnabled, setCollectionAutofetchEnabled] = React.useState(false);
     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
 
+    const currentPDH = (collectionPanel.item || {}).portableDataHash;
     React.useEffect(() => {
-        const hash = (collectionPanel.item || {}).portableDataHash;
-
-        if (hash && collectionAutofetchEnabled) {
+        if (currentPDH) {
             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) {
@@ -316,10 +313,6 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
 
             if (id) {
                 onItemMenuOpen(event, item, isWritable);
-
-                if (!collectionAutofetchEnabled) {
-                    setCollectionAutofetchEnabled(true);
-                }
             }
         },
         [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) => {
-                            if (!collectionAutofetchEnabled) {
-                                setCollectionAutofetchEnabled(true);
-                            }
                             onOptionsMenuOpen(ev, isWritable);
                         }}>
                         <CustomizeTableIcon />
@@ -456,14 +446,14 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
                 </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}>
-                        <SearchInput label="Search" value={leftSearch} onSearch={setLeftSearch} />
+                        <SearchInput selfClearProp={leftKey} label="Search" value={leftSearch} onSearch={setLeftSearch} />
                     </div>
                     <div className={classes.dataWrapper}>
                         {
@@ -489,7 +479,15 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
                                                         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>
+                                                        key={id}>
+                                                            {getItemIcon(type, getActiveClass(name))}
+                                                            <div className={classes.rowName}>
+                                                                {name}
+                                                            </div>
+                                                            {
+                                                                getActiveClass(name) ? <SidePanelRightArrowIcon
+                                                                    style={{ display: 'inline', marginTop: '5px', marginLeft: '5px' }} /> : null
+                                                            }
                                                     </div>;
                                                 }
                                             }
@@ -500,16 +498,18 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
 
                     </div>
                 </div>
-                <div className={classes.rightPanel}>
+                <div className={classes.rightPanel} data-cy="collection-files-right-panel">
                     <div className={classes.searchWrapper}>
-                        <SearchInput label="Search" value={rightSearch} onSearch={setRightSearch} />
+                        <SearchInput selfClearProp={rightKey} label="Search" value={rightSearch} onSearch={setRightSearch} />
                     </div>
                     {
                         isWritable &&
                         <Button
                             className={classes.uploadButton}
                             data-cy='upload-button'
-                            onClick={onUploadDataClick}
+                            onClick={() => {
+                                onUploadDataClick(rightKey === leftKey ? undefined : rightKey);
+                            }}
                             variant='contained'
                             color='primary'
                             size='small'>
@@ -555,7 +555,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
                                                     </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>
                         }