Move collection-panel-files to collection-panel

Feature #13855

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index fb1ee0513b23dcb44119380f3b19d6c6bbac97c7..27354db18a91187f73b501f932aa6a271fc40c00 100644 (file)
--- 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 '../tree/tree';
 import { FileTreeData } from '../file-tree/file-tree-data';
 import { FileTree } from '../file-tree/file-tree';
-import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, CardContent, Card } from '@material-ui/core';
 import { CustomizeTableIcon } from '../icon/icon';
 
 export interface CollectionPanelFilesProps {
@@ -17,9 +17,12 @@ export interface CollectionPanelFilesProps {
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
 }
 
-type CssRules = 'nameHeader' | 'fileSizeHeader';
+type CssRules = 'root' | 'nameHeader' | 'fileSizeHeader';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
+    root: {
+        paddingBottom: theme.spacing.unit
+    },
     nameHeader: {
         marginLeft: '75px'
     },
@@ -30,20 +33,22 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
 
 export const CollectionPanelFiles = withStyles(styles)(
     ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
-        <div>
-            <Grid container justify="flex-end">
-                <IconButton onClick={onOptionsMenuOpen}>
-                    <CustomizeTableIcon />
-                </IconButton>
-            </Grid>
+        <Card className={classes.root}>
+            <CardHeader
+                title="Files"
+                action={
+                    <IconButton onClick={onOptionsMenuOpen}>
+                        <CustomizeTableIcon />
+                    </IconButton>
+                } />
             <Grid container justify="space-between">
                 <Typography variant="caption" className={classes.nameHeader}>
                     Name
-                </Typography>
+                    </Typography>
                 <Typography variant="caption" className={classes.fileSizeHeader}>
                     File size
-            </Typography>
+                    </Typography>
             </Grid>
             <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
-        </div>);
+        </Card>);
 

diff --git a/src/components/file-tree/file-tree-item.tsx b/src/components/file-tree/file-tree-item.tsx
index bbea4434354989a8243bfdc9db720897fc7930d0..3a80e0f81968b4dd7e761af588f955de793a4731 100644 (file)
--- a/src/components/file-tree/file-tree-item.tsx
+++ b/src/components/file-tree/file-tree-item.tsx
@@ -26,7 +26,8 @@ const fileTreeItemStyle: StyleRulesCallback<CssRules> = theme => ({
     },
     button: {
         width: theme.spacing.unit * 3,
-        height: theme.spacing.unit * 3
+        height: theme.spacing.unit * 3,
+        marginRight: theme.spacing.unit
     }
 });
 

diff --git a/src/store/collection-panel/collection-panel-action.ts b/src/store/collection-panel/collection-panel-action.ts
index 3c6601657083296a056f40f711ad331f579a516c..aa9126b71a5d3fadac657e147da22c3643b1fc63 100644 (file)
--- a/src/store/collection-panel/collection-panel-action.ts
+++ b/src/store/collection-panel/collection-panel-action.ts
@@ -3,11 +3,12 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { unionize, ofType, UnionOf } from "unionize";
-import { CommonResourceService } from "../../common/api/common-resource-service";
-import { apiClient } from "../../common/api/server-api";
 import { Dispatch } from "redux";
 import { ResourceKind } from "../../models/resource";
 import { CollectionResource } from "../../models/collection";
+import { collectionService } from "../../services/services";
+import { collectionPanelFilesAction } from "./collection-panel-files/collection-panel-files-actions";
+import { parseKeepManifestText } from "../../models/keep-manifest";
 
 export const collectionPanelActions = unionize({
     LOAD_COLLECTION: ofType<{ uuid: string, kind: ResourceKind }>(),
@@ -19,10 +20,12 @@ export type CollectionPanelAction = UnionOf<typeof collectionPanelActions>;
 export const loadCollection = (uuid: string, kind: ResourceKind) =>
     (dispatch: Dispatch) => {
         dispatch(collectionPanelActions.LOAD_COLLECTION({ uuid, kind }));
-        return new CommonResourceService(apiClient, "collections")
+        return collectionService
             .get(uuid)
             .then(item => {
-                dispatch(collectionPanelActions.LOAD_COLLECTION_SUCCESS({ item: item as CollectionResource }));
+                dispatch(collectionPanelActions.LOAD_COLLECTION_SUCCESS({ item }));
+                const manifest = parseKeepManifestText(item.manifestText);
+                dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES({ manifest }));
             });
     };
 

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index b55e50c0b00e0deec4525c68e6a9f13dd2f6cacc..a7d2682ae61015403ed0b8a10b84f1127fae9c86 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -14,6 +14,7 @@ import { RootState } from '../../store/store';
 import { MoreOptionsIcon, CollectionIcon } from '../../components/icon/icon';
 import { DetailsAttribute } from '../../components/details-attribute/details-attribute';
 import { CollectionResource } from '../../models/collection';
+import { CollectionPanelFiles } from '../../views-components/collection-panel-files/collection-panel-files';
 
 type CssRules = 'card' | 'iconHeader';
 
@@ -78,17 +79,9 @@ export const CollectionPanel = withStyles(styles)(
                                 </Grid>
                             </CardContent>
                         </Card>
-
-                        <Card className={classes.card}>
-                            <CardHeader title="Files" />
-                            <CardContent>
-                                <Grid container direction="column">
-                                    <Grid item xs={4}>
-                                        Tags
-                                    </Grid>
-                                </Grid>
-                            </CardContent>
-                        </Card>
+                        <div className={classes.card}>
+                            <CollectionPanelFiles/>
+                        </div>
                     </div>;
             }
 

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 5a28413c7d0975b65056a12fe91e96a3f26d0cd5..160e12f84017e5a99e19c6e0084d3546dbdd59c9 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -37,7 +37,6 @@ import { FavoritePanel, FAVORITE_PANEL_ID } from "../favorite-panel/favorite-pan
 import { CurrentTokenDialog } from '../../views-components/current-token-dialog/current-token-dialog';
 import { dataExplorerActions } from '../../store/data-explorer/data-explorer-action';
 import { Snackbar } from '../../views-components/snackbar/snackbar';
-import { CollectionPanelFiles } from '../../views-components/collection-panel-files/collection-panel-files';
 import { CreateCollectionDialog } from '../../views-components/create-collection-dialog/create-collection-dialog';
 import { CollectionPanel } from '../collection-panel/collection-panel';
 import { loadCollection } from '../../store/collection-panel/collection-panel-action';
@@ -219,7 +218,6 @@ export const Workbench = withStyles(styles)(
                                     <Route path="/projects/:id" render={this.renderProjectPanel} />
                                     <Route path="/favorites" render={this.renderFavoritePanel} />
                                     <Route path="/collections/:id" render={this.renderCollectionPanel} />
-                                    <Route path="/" render={() => <CollectionPanelFiles />} />
                                 </Switch>
                             </div>
                             {user && <DetailsPanel />}