[ARVADOS-WORKBENCH2] updated: 1.4.1-374-g9a637098

Git user git at public.arvados.org
Tue Jun 30 20:21:53 UTC 2020


Summary of changes:
 .../collection-panel-files.tsx                     | 38 +++++++++---------
 src/components/file-tree/file-tree.tsx             |  3 +-
 src/components/tree/virtual-tree.tsx               | 11 ++----
 .../collection-files-item-action-set.ts            | 19 ++++-----
 src/views/collection-panel/collection-panel.tsx    | 46 ++++++++++++++++++----
 5 files changed, 72 insertions(+), 45 deletions(-)

       via  9a63709896ad2b3beaed1d5e5b959351dc4d2701 (commit)
       via  44c5f86e438c3651904a1d5c9ccf6cd4089f5f86 (commit)
       via  9ab0347489bd312c986c3ff2f9489a83545f213f (commit)
      from  159c84a15b7739c02dc4bc0d9626b515e8426b92 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit 9a63709896ad2b3beaed1d5e5b959351dc4d2701
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date:   Tue Jun 30 17:19:01 2020 -0300

    15610: Replaces the 'loading files...' string with a circular spinner.
    
    Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index c8875f70..c7db48c4 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { TreeItem, TreeItemStatus } from '~/components/tree/tree';
 import { FileTreeData } from '~/components/file-tree/file-tree-data';
 import { FileTree } from '~/components/file-tree/file-tree';
-import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip, CircularProgress } from '@material-ui/core';
 import { CustomizeTableIcon } from '~/components/icon/icon';
 import { DownloadIcon } from '~/components/icon/icon';
 
@@ -99,7 +99,7 @@ export const CollectionPanelFiles =
                         </Typography>
                     </Grid>
                     { isLoading
-                    ? <div className={classes.centeredLabel}>(loading files...)</div>
+                    ? <div className={classes.centeredLabel}><CircularProgress /></div>
                     : <div style={{height: 'calc(100% - 60px)'}}><FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /></div> }
                 </>
                 }

commit 44c5f86e438c3651904a1d5c9ccf6cd4089f5f86
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date:   Tue Jun 30 17:11:45 2020 -0300

    15610: Temporarily disables file renaming menu item, until it's fixed.
    
    Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>

diff --git a/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts b/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
index 4c6874c6..2ded3736 100644
--- a/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
@@ -3,9 +3,9 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { ContextMenuActionSet } from "../context-menu-action-set";
-import { RenameIcon, RemoveIcon } from "~/components/icon/icon";
+import { RemoveIcon } from "~/components/icon/icon";
 import { DownloadCollectionFileAction } from "../actions/download-collection-file-action";
-import { openFileRemoveDialog, openRenameFileDialog } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
+import { openFileRemoveDialog } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
 import { CollectionFileViewerAction } from '~/views-components/context-menu/actions/collection-file-viewer-action';
 
 
@@ -21,13 +21,14 @@ export const readOnlyCollectionFilesItemActionSet: ContextMenuActionSet = [[
 ]];
 
 export const collectionFilesItemActionSet: ContextMenuActionSet = readOnlyCollectionFilesItemActionSet.concat([[
-    {
-        name: "Rename",
-        icon: RenameIcon,
-        execute: (dispatch, resource) => {
-            dispatch<any>(openRenameFileDialog({ name: resource.name, id: resource.uuid }));
-        }
-    },
+    // FIXME: This isn't working. Maybe something related to WebDAV?
+    // {
+    //     name: "Rename",
+    //     icon: RenameIcon,
+    //     execute: (dispatch, resource) => {
+    //         dispatch<any>(openRenameFileDialog({ name: resource.name, id: resource.uuid }));
+    //     }
+    // },
     {
         name: "Remove",
         icon: RemoveIcon,

commit 9ab0347489bd312c986c3ff2f9489a83545f213f
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date:   Tue Jun 30 16:29:43 2020 -0300

    15610: Fixes layout issues with the collection panel file listing.
    
    * VirtualTree now just occupies all available space.
    * VirtualTree's root container expands so that it occupies the remaining
      height of the browser window.
    * Reduced vertical padding on many places to show more information on screen.
    * Moved file listing 'hamburger' button next to the 'upload button' to save
      vertical space.
    
    Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 4d7e9384..c8875f70 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -29,7 +29,8 @@ type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'up
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     root: {
-        paddingBottom: theme.spacing.unit
+        paddingBottom: theme.spacing.unit,
+        height: '100%'
     },
     cardSubheader: {
         paddingTop: 0,
@@ -61,9 +62,10 @@ export const CollectionPanelFiles =
             <Card data-cy='collection-files-panel' className={classes.root}>
                 <CardHeader
                     title="Files"
+                    className={classes.cardSubheader}
                     classes={{ action: classes.button }}
-                    action={
-                        isWritable &&
+                    action={<>
+                        {isWritable &&
                         <Button
                             data-cy='upload-button'
                             onClick={onUploadDataClick}
@@ -72,24 +74,22 @@ export const CollectionPanelFiles =
                             size='small'>
                             <DownloadIcon className={classes.uploadIcon} />
                             Upload data
-                        </Button>
-                    } />
+                        </Button>}
+                        {!tooManyFiles &&
+                        <Tooltip title="More options" disableFocusListener>
+                            <IconButton
+                                data-cy='collection-files-panel-options-btn'
+                                onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
+                                <CustomizeTableIcon />
+                            </IconButton>
+                        </Tooltip>}
+                    </>
+                } />
                 { tooManyFiles
                 ? <div className={classes.centeredLabel}>
                         File listing may take some time, please click to browse: <Button onClick={loadFilesFunc}><DownloadIcon/>Show files</Button>
                 </div>
                 : <>
-                    <CardHeader
-                        className={classes.cardSubheader}
-                        action={
-                            <Tooltip title="More options" disableFocusListener>
-                                <IconButton
-                                    data-cy='collection-files-panel-options-btn'
-                                    onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
-                                    <CustomizeTableIcon />
-                                </IconButton>
-                            </Tooltip>
-                        } />
                     <Grid container justify="space-between">
                         <Typography variant="caption" className={classes.nameHeader}>
                             Name
@@ -100,7 +100,7 @@ export const CollectionPanelFiles =
                     </Grid>
                     { isLoading
                     ? <div className={classes.centeredLabel}>(loading files...)</div>
-                    : <FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /> }
+                    : <div style={{height: 'calc(100% - 60px)'}}><FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /></div> }
                 </>
                 }
             </Card>);
diff --git a/src/components/file-tree/file-tree.tsx b/src/components/file-tree/file-tree.tsx
index d4b47be9..b5d98c08 100644
--- a/src/components/file-tree/file-tree.tsx
+++ b/src/components/file-tree/file-tree.tsx
@@ -4,7 +4,7 @@
 
 import * as React from "react";
 import { TreeItem, TreeItemStatus } from "../tree/tree";
-import { VirtualTree } from "../tree/virtual-tree";
+import { VirtualTree as Tree } from "../tree/virtual-tree";
 import { FileTreeData } from "./file-tree-data";
 import { FileTreeItem } from "./file-tree-item";
 
@@ -17,7 +17,6 @@ export interface FileTreeProps {
     currentItemUuid?: string;
 }
 
-const Tree = VirtualTree(20);
 export class FileTree extends React.Component<FileTreeProps> {
     render() {
         return <Tree
diff --git a/src/components/tree/virtual-tree.tsx b/src/components/tree/virtual-tree.tsx
index 9330fbe5..59fe34b1 100644
--- a/src/components/tree/virtual-tree.tsx
+++ b/src/components/tree/virtual-tree.tsx
@@ -13,7 +13,6 @@ import { ArvadosTheme } from '~/common/custom-theme';
 import { TreeItem, TreeProps, TreeItemStatus } from './tree';
 import { ListItem, Radio, Checkbox, CircularProgress, ListItemIcon } from '@material-ui/core';
 import { SidePanelRightArrowIcon } from '../icon/icon';
-import { min } from 'lodash';
 
 type CssRules = 'list'
     | 'listItem'
@@ -179,20 +178,16 @@ export const VirtualList = <T, _>(height: number, width: number, items: VirtualT
         {Row(items, render, treeProps)}
     </FixedSizeList>;
 
-export const VirtualTree = (maxElements: number) => withStyles(styles)(
+export const VirtualTree = withStyles(styles)(
     class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
         render(): ReactElement<any> {
             const { items, render } = this.props;
 
-            // Virtual list viewport's maximum height
-            const itemsQty = items && items.length || 0;
-            const viewportHeight = min([itemsQty, maxElements])! * itemSize;
-
-            return <div style={{height: viewportHeight}}><AutoSizer>
+            return <AutoSizer>
                 {({ height, width }) => {
                     return VirtualList(height, width, items || [], render, this.props);
                 }}
-            </AutoSizer></div>;
+            </AutoSizer>;
         }
     }
 );
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 1cfa48de..ea69b0df 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -31,11 +31,42 @@ 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';
 
-type CssRules = 'card' | 'iconHeader' | 'tag' | 'label' | 'value' | 'link' | 'centeredLabel' | 'readOnlyIcon';
+type CssRules = 'root'
+    | 'card'
+    | 'cardHeader'
+    | 'filesCard'
+    | 'cardContent'
+    | 'iconHeader'
+    | 'tag'
+    | 'label'
+    | 'value'
+    | 'link'
+    | 'centeredLabel'
+    | 'readOnlyIcon';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        display: 'flex',
+        flexFlow: 'column',
+        height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
+    },
     card: {
-        marginBottom: theme.spacing.unit * 2
+        marginBottom: theme.spacing.unit * 2,
+    },
+    cardHeader: {
+        paddingTop: theme.spacing.unit,
+        paddingBottom: 0,
+    },
+    filesCard: {
+        marginBottom: theme.spacing.unit * 2,
+        flex: 1,
+    },
+    cardContent: {
+        paddingTop: 0,
+        paddingBottom: theme.spacing.unit,
+        '&:last-child': {
+            paddingBottom: theme.spacing.unit,
+        }
     },
     iconHeader: {
         fontSize: '1.875rem',
@@ -101,9 +132,10 @@ export const CollectionPanel = withStyles(styles)(
             render() {
                 const { classes, item, dispatch, isWritable, isLoadingFiles, tooManyFiles } = this.props;
                 return item
-                    ? <>
+                    ? <div className={classes.root}>
                         <Card data-cy='collection-info-panel' className={classes.card}>
                             <CardHeader
+                                className={classes.cardHeader}
                                 avatar={
                                     <IconButton onClick={this.openCollectionDetails}>
                                         <CollectionIcon className={classes.iconHeader} />
@@ -133,7 +165,7 @@ export const CollectionPanel = withStyles(styles)(
                                 titleTypographyProps={this.titleProps}
                                 subheader={item.description}
                                 subheaderTypographyProps={this.titleProps} />
-                            <CardContent>
+                            <CardContent className={classes.cardContent}>
                                 <Grid container direction="column">
                                     <Grid item xs={10}>
                                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
@@ -160,7 +192,7 @@ export const CollectionPanel = withStyles(styles)(
 
                         <Card data-cy='collection-properties-panel' className={classes.card}>
                             <CardHeader title="Properties" />
-                            <CardContent>
+                            <CardContent className={classes.cardContent}>
                                 <Grid container direction="column">
                                     {isWritable && <Grid item xs={12}>
                                         <CollectionTagForm />
@@ -189,7 +221,7 @@ export const CollectionPanel = withStyles(styles)(
                                 </Grid>
                             </CardContent>
                         </Card>
-                        <div className={classes.card}>
+                        <div className={classes.filesCard}>
                             <CollectionPanelFiles
                                 isWritable={isWritable}
                                 isLoading={isLoadingFiles}
@@ -200,7 +232,7 @@ export const CollectionPanel = withStyles(styles)(
                                 }
                             } />
                         </div>
-                    </>
+                    </div>
                     : null;
             }
 

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list