From 31b5226e2d0d5db1bf24802ba51d4baae264cab6 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas@di-pentima.com.ar>
Date: Tue, 7 Jul 2020 18:37:08 -0300
Subject: [PATCH] 15610: Makes the 2 top cards collapsable on collection panel.

The bottom card (file listing) will fill the available space making it easier
to browse files.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>
---
 .../collection-panel/collection-panel.tsx     | 76 +++++++++++++++----
 1 file changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index ea69b0df..5771a736 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -7,11 +7,14 @@ import {
     StyleRulesCallback, WithStyles, withStyles, Card,
     CardHeader, IconButton, CardContent, Grid, Tooltip
 } from '@material-ui/core';
+import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
+import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import { connect, DispatchProp } from "react-redux";
 import { RouteComponentProps } from 'react-router';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { RootState } from '~/store/store';
-import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon } from '~/components/icon/icon';
+import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, ExpandIcon } 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';
@@ -44,6 +47,36 @@ type CssRules = 'root'
     | 'centeredLabel'
     | 'readOnlyIcon';
 
+const ExpansionPanel = withStyles({
+    root: {
+        margin: 0,
+        padding: 0,
+    }
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+    root: {
+        margin: 0,
+        padding: 0,
+    },
+    content: {
+        '&$expanded': {
+            margin: 0,
+            padding: 0,
+        },
+        margin: 0,
+        padding: 0,
+    },
+    expanded: {},
+})(MuiExpansionPanelSummary);
+
+const ExpansionPanelDetails = withStyles({
+    root: {
+        margin: 0,
+        padding: 0,
+    }
+})(MuiExpansionPanelDetails);
+
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         display: 'flex',
@@ -62,6 +95,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         flex: 1,
     },
     cardContent: {
+        width: '100%',
         paddingTop: 0,
         paddingBottom: theme.spacing.unit,
         '&:last-child': {
@@ -134,6 +168,8 @@ export const CollectionPanel = withStyles(styles)(
                 return item
                     ? <div className={classes.root}>
                         <Card data-cy='collection-info-panel' className={classes.card}>
+                        <ExpansionPanel defaultExpanded>
+                        <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
                             <CardHeader
                                 className={classes.cardHeader}
                                 avatar={
@@ -141,16 +177,6 @@ export const CollectionPanel = withStyles(styles)(
                                         <CollectionIcon className={classes.iconHeader} />
                                     </IconButton>
                                 }
-                                action={
-                                    <Tooltip title="More options" disableFocusListener>
-                                        <IconButton
-                                            data-cy='collection-panel-options-btn'
-                                            aria-label="More options"
-                                            onClick={this.handleContextMenu}>
-                                            <MoreOptionsIcon />
-                                        </IconButton>
-                                    </Tooltip>
-                                }
                                 title={
                                     <span>
                                         <IllegalNamingWarning name={item.name}/>
@@ -165,9 +191,11 @@ export const CollectionPanel = withStyles(styles)(
                                 titleTypographyProps={this.titleProps}
                                 subheader={item.description}
                                 subheaderTypographyProps={this.titleProps} />
+                            </ExpansionPanelSummary>
+                            <ExpansionPanelDetails>
                             <CardContent className={classes.cardContent}>
-                                <Grid container direction="column">
-                                    <Grid item xs={10}>
+                                <Grid container justify="space-between">
+                                    <Grid item xs={11}>
                                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                                             label='Collection UUID'
                                             linkToUuid={item.uuid} />
@@ -186,13 +214,28 @@ export const CollectionPanel = withStyles(styles)(
                                             </span>
                                         }
                                     </Grid>
+                                    <Grid item xs={1} style={{textAlign: "right"}}>
+                                        <Tooltip title="More options" disableFocusListener>
+                                            <IconButton
+                                                data-cy='collection-panel-options-btn'
+                                                aria-label="More options"
+                                                onClick={this.handleContextMenu}>
+                                                <MoreOptionsIcon />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </Grid>
                                 </Grid>
                             </CardContent>
+                            </ExpansionPanelDetails>
+                        </ExpansionPanel>
                         </Card>
 
                         <Card data-cy='collection-properties-panel' className={classes.card}>
-                            <CardHeader title="Properties" />
-                            <CardContent className={classes.cardContent}>
+                        <ExpansionPanel defaultExpanded>
+                            <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
+                                <CardHeader title="Properties" />
+                            </ExpansionPanelSummary>
+                            <ExpansionPanelDetails><CardContent className={classes.cardContent}>
                                 <Grid container direction="column">
                                     {isWritable && <Grid item xs={12}>
                                         <CollectionTagForm />
@@ -219,7 +262,8 @@ export const CollectionPanel = withStyles(styles)(
                                     }
                                     </Grid>
                                 </Grid>
-                            </CardContent>
+                            </CardContent></ExpansionPanelDetails>
+                        </ExpansionPanel>
                         </Card>
                         <div className={classes.filesCard}>
                             <CollectionPanelFiles
-- 
2.30.2