[ARVADOS-WORKBENCH2] updated: 2.2.1-126-gf6513f9d
Git user
git at public.arvados.org
Wed Oct 20 19:26:38 UTC 2021
Summary of changes:
.../collection-panel-files.tsx | 3 +-
src/views/collection-panel/collection-panel.tsx | 91 +++++++++++++---------
src/views/process-panel/process-panel-root.tsx | 7 +-
3 files changed, 55 insertions(+), 46 deletions(-)
via f6513f9d295b39ff11c17c82d96d96d10ae18edb (commit)
via 94bedbc84dd58155d8adc1e53d3ad061c8e6453d (commit)
via 7ca28d41857fef609936cc48c863bc7422048fea (commit)
from 0efdf1ed28b92c0574d261ed6f96b4c3f77fe273 (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 f6513f9d295b39ff11c17c82d96d96d10ae18edb
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Oct 20 16:24:39 2021 -0300
18128: Improves collection's view different panels layout.
There's additional work to be done here, specially with the file browser
that doesn't seem to behave correctly when trying to make it occupy all
the available vertical space.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 97cbc8ce..2a7c29cc 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -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',
@@ -490,7 +489,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
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>
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index de436562..c0d399e2 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -4,15 +4,20 @@
import React from 'react';
import {
- StyleRulesCallback, WithStyles, withStyles,
- IconButton, Grid, Tooltip, Typography, ExpansionPanel,
- ExpansionPanelSummary, ExpansionPanelDetails
+ StyleRulesCallback,
+ WithStyles,
+ withStyles,
+ IconButton,
+ Grid,
+ Tooltip,
+ Typography,
+ Card, CardHeader, CardContent,
} from '@material-ui/core';
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, ExpandIcon, CollectionOldVersionIcon } from 'components/icon/icon';
+import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, CollectionOldVersionIcon } from 'components/icon/icon';
import { DetailsAttribute } from 'components/details-attribute/details-attribute';
import { CollectionResource, getCollectionUrl } from 'models/collection';
import { CollectionPanelFiles } from 'views-components/collection-panel-files/collection-panel-files';
@@ -37,6 +42,8 @@ import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-p
type CssRules = 'root'
| 'button'
+ | 'infoCard'
+ | 'propertiesCard'
| 'filesCard'
| 'iconHeader'
| 'tag'
@@ -55,9 +62,16 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
button: {
cursor: 'pointer'
},
+ infoCard: {
+ paddingLeft: theme.spacing.unit * 2,
+ paddingRight: theme.spacing.unit * 2,
+ paddingBottom: theme.spacing.unit * 2,
+ },
+ propertiesCard: {
+ padding: 0,
+ },
filesCard: {
- marginBottom: theme.spacing.unit * 2,
- flex: 1,
+ padding: 0,
},
iconHeader: {
fontSize: '1.875rem',
@@ -139,8 +153,8 @@ export const CollectionPanel = withStyles(styles)(
];
return item
? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
- <MPVPanelContent xs="auto"><ExpansionPanel data-cy='collection-info-panel' defaultExpanded>
- <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
+ <MPVPanelContent xs="auto" data-cy='collection-info-panel'>
+ <Card className={classes.infoCard}>
<Grid container justify="space-between">
<Grid item xs={11}><span>
<IconButton onClick={this.openCollectionDetails}>
@@ -169,8 +183,6 @@ export const CollectionPanel = withStyles(styles)(
</Tooltip>
</Grid>
</Grid>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
<Grid container justify="space-between">
<Grid item xs={12}>
<Typography variant="caption">
@@ -189,15 +201,12 @@ export const CollectionPanel = withStyles(styles)(
}
</Grid>
</Grid>
- </ExpansionPanelDetails>
- </ExpansionPanel></MPVPanelContent>
-
- <MPVPanelContent xs="auto"><ExpansionPanel data-cy='collection-properties-panel' defaultExpanded>
- <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
- {"Properties"}
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <Grid container>
+ </Card>
+ </MPVPanelContent>
+ <MPVPanelContent xs="auto" data-cy='collection-properties-panel'>
+ <Card className={classes.propertiesCard}>
+ <CardHeader title="Properties" />
+ <CardContent><Grid container>
{isWritable && <Grid item xs={12}>
<CollectionTagForm />
</Grid>}
@@ -222,19 +231,21 @@ export const CollectionPanel = withStyles(styles)(
: <div className={classes.centeredLabel}>No properties set on this collection.</div>
}
</Grid>
- </Grid>
- </ExpansionPanelDetails>
- </ExpansionPanel></MPVPanelContent>
- <MPVPanelContent xs className={classes.filesCard}>
- <CollectionPanelFiles
- isWritable={isWritable}
- isLoading={isLoadingFiles}
- tooManyFiles={tooManyFiles}
- loadFilesFunc={() => {
- dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
- dispatch<any>(loadCollectionFiles(this.props.item.uuid));
- }
- } />
+ </Grid></CardContent>
+ </Card>
+ </MPVPanelContent>
+ <MPVPanelContent xs>
+ <Card className={classes.filesCard}>
+ <CollectionPanelFiles
+ isWritable={isWritable}
+ isLoading={isLoadingFiles}
+ tooManyFiles={tooManyFiles}
+ loadFilesFunc={() => {
+ dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
+ dispatch<any>(loadCollectionFiles(this.props.item.uuid));
+ }
+ } />
+ </Card>
</MPVPanelContent>
</MPVContainer>
: null;
commit 94bedbc84dd58155d8adc1e53d3ad061c8e6453d
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Oct 20 14:16:35 2021 -0300
18128: Adds Multi-View Panel to collection's view.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 4270cbbd..de436562 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -33,6 +33,7 @@ import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD
import { Link } from 'react-router-dom';
import { Link as ButtonLink } from '@material-ui/core';
import { ResourceOwnerWithName, ResponsiblePerson } from 'views-components/data-explorer/renderers';
+import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
type CssRules = 'root'
| 'button'
@@ -49,9 +50,7 @@ type CssRules = 'root'
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- display: 'flex',
- flexFlow: 'column',
- height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
+ width: '100%',
},
button: {
cursor: 'pointer'
@@ -133,9 +132,14 @@ export const CollectionPanel = withStyles(styles)(
class extends React.Component<CollectionPanelProps> {
render() {
const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
+ const panelsData: MPVPanelState[] = [
+ {name: "Details"},
+ {name: "Properties", visible: false},
+ {name: "Files"},
+ ];
return item
- ? <div className={classes.root}>
- <ExpansionPanel data-cy='collection-info-panel' defaultExpanded>
+ ? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
+ <MPVPanelContent xs="auto"><ExpansionPanel data-cy='collection-info-panel' defaultExpanded>
<ExpansionPanelSummary expandIcon={<ExpandIcon />}>
<Grid container justify="space-between">
<Grid item xs={11}><span>
@@ -186,9 +190,9 @@ export const CollectionPanel = withStyles(styles)(
</Grid>
</Grid>
</ExpansionPanelDetails>
- </ExpansionPanel>
+ </ExpansionPanel></MPVPanelContent>
- <ExpansionPanel data-cy='collection-properties-panel' defaultExpanded>
+ <MPVPanelContent xs="auto"><ExpansionPanel data-cy='collection-properties-panel' defaultExpanded>
<ExpansionPanelSummary expandIcon={<ExpandIcon />}>
{"Properties"}
</ExpansionPanelSummary>
@@ -220,8 +224,8 @@ export const CollectionPanel = withStyles(styles)(
</Grid>
</Grid>
</ExpansionPanelDetails>
- </ExpansionPanel>
- <div className={classes.filesCard}>
+ </ExpansionPanel></MPVPanelContent>
+ <MPVPanelContent xs className={classes.filesCard}>
<CollectionPanelFiles
isWritable={isWritable}
isLoading={isLoadingFiles}
@@ -231,8 +235,8 @@ export const CollectionPanel = withStyles(styles)(
dispatch<any>(loadCollectionFiles(this.props.item.uuid));
}
} />
- </div>
- </div>
+ </MPVPanelContent>
+ </MPVContainer>
: null;
}
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 6879d997..deb5f1b0 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -12,7 +12,6 @@ import { SubprocessPanel } from 'views/subprocess-panel/subprocess-panel';
import { SubprocessFilterDataProps } from 'components/subprocess-filter/subprocess-filter';
import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
import { ArvadosTheme } from 'common/custom-theme';
-import { ProcessLogPanel } from 'views/process-log-panel/process-log-panel';
import { ProcessDetailsCard } from './process-details-card';
type CssRules = 'root';
commit 7ca28d41857fef609936cc48c863bc7422048fea
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Oct 20 14:05:02 2021 -0300
18128: Removes WIP logs panel & hides details panel on process view.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index f30ebf70..6879d997 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -42,8 +42,7 @@ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRoot
const panelsData: MPVPanelState[] = [
{name: "Info"},
- {name: "Details"},
- {name: "Logs", visible: false},
+ {name: "Details", visible: false},
{name: "Subprocesses"},
];
@@ -63,9 +62,6 @@ export const ProcessPanelRoot = withStyles(styles)(({ process, ...props }: Proce
<MPVPanelContent xs="auto">
<ProcessDetailsCard process={process} />
</MPVPanelContent>
- <MPVPanelContent xs="auto">
- <ProcessLogPanel />
- </MPVPanelContent>
<MPVPanelContent xs>
<SubprocessPanel />
</MPVPanelContent>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list