Grid,
Tooltip,
Typography,
- Card
+ 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, CollectionOldVersionIcon } from 'components/icon/icon';
+import { MoreVerticalIcon, 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';
import { ResourceWithName, ResponsiblePerson } from 'views-components/data-explorer/renderers';
import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
import { resourceIsFrozen } from 'common/frozen-resources';
+import { DefaultView } from "components/default-view/default-view";
type CssRules = 'root'
| 'button'
| 'centeredLabel'
| 'warningLabel'
| 'collectionName'
- | 'readOnlyIcon';
+ | 'readOnlyIcon'
+ | 'header'
+ | 'title'
+ | 'avatar'
+ | 'content';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
cursor: 'pointer'
},
infoCard: {
- paddingLeft: theme.spacing.unit * 2,
- paddingRight: theme.spacing.unit * 2,
- paddingBottom: theme.spacing.unit * 2,
},
propertiesCard: {
padding: 0,
readOnlyIcon: {
marginLeft: theme.spacing.unit,
fontSize: 'small',
+ },
+ header: {
+ paddingTop: theme.spacing.unit,
+ paddingBottom: theme.spacing.unit,
+ },
+ title: {
+ overflow: 'hidden',
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.customs.colors.green700,
+ },
+ avatar: {
+ alignSelf: 'flex-start',
+ paddingTop: theme.spacing.unit * 0.5
+ },
+ content: {
+ padding: theme.spacing.unit * 1.0,
+ paddingTop: theme.spacing.unit * 0.5,
+ '&:last-child': {
+ paddingBottom: theme.spacing.unit * 1,
+ }
}
});
isWritable = true;
} else {
const itemOwner = getResource<GroupResource | UserResource>(item.ownerUuid)(state.resources);
- if (itemOwner && itemOwner.writableBy) {
- isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0;
+ if (itemOwner) {
+ isWritable = itemOwner.canWrite;
}
}
}
? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
<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}>
- {isOldVersion
- ? <CollectionOldVersionIcon className={classes.iconHeader} />
- : <CollectionIcon className={classes.iconHeader} />}
- </IconButton>
- <IllegalNamingWarning name={item.name} />
+ <CardHeader
+ className={classes.header}
+ classes={{
+ content: classes.title,
+ avatar: classes.avatar,
+ }}
+ avatar={<IconButton onClick={this.openCollectionDetails}>
+ {isOldVersion
+ ? <CollectionOldVersionIcon className={classes.iconHeader} />
+ : <CollectionIcon className={classes.iconHeader} />}
+ </IconButton>}
+ title={
<span>
+ <IllegalNamingWarning name={item.name} />
{item.name}
{isWritable ||
<Tooltip title="Read-only">
<ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
- </Tooltip>
- }
+ </Tooltip>}
</span>
- </span></Grid>
- <Grid item xs={1} style={{ textAlign: "right" }}>
+ }
+ action={
<Tooltip title="Actions" disableFocusListener>
<IconButton
data-cy='collection-panel-options-btn'
aria-label="Actions"
onClick={this.handleContextMenu}>
- <MoreOptionsIcon />
+ <MoreVerticalIcon />
</IconButton>
</Tooltip>
- </Grid>
- </Grid>
- <Grid container justify="space-between">
- <Grid item xs={12}>
- <Typography variant="caption">
- {item.description}
+ }
+ />
+ <CardContent className={classes.content}>
+ <Typography variant="caption">
+ {item.description}
+ </Typography>
+ <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} showVersionBrowser={() => dispatch<any>(openDetailsPanel(item.uuid, 1))} />
+ {(item.properties.container_request || item.properties.containerRequest) &&
+ <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
+ <DetailsAttribute classLabel={classes.link} label='Link to process' />
+ </span>
+ }
+ {isOldVersion &&
+ <Typography className={classes.warningLabel} variant="caption">
+ This is an old version. Make a copy to make changes. Go to the <Link to={getCollectionUrl(item.currentVersionUuid)}>head version</Link> for sharing options.
</Typography>
- <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} showVersionBrowser={() => dispatch<any>(openDetailsPanel(item.uuid, 1))} />
- {(item.properties.container_request || item.properties.containerRequest) &&
- <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
- <DetailsAttribute classLabel={classes.link} label='Link to process' />
- </span>
- }
- {isOldVersion &&
- <Typography className={classes.warningLabel} variant="caption">
- This is an old version. Make a copy to make changes. Go to the <Link to={getCollectionUrl(item.currentVersionUuid)}>head version</Link> for sharing options.
- </Typography>
- }
- </Grid>
- </Grid>
+ }
+ </CardContent>
</Card>
</MPVPanelContent>
<MPVPanelContent xs>
<CollectionPanelFiles isWritable={isWritable} />
</Card>
</MPVPanelContent>
- </MPVContainer>
- : null;
+ </MPVContainer >
+ : <Grid
+ container
+ alignItems="center"
+ justify="center"
+ style={{ minHeight: "100%" }}>
+ <DefaultView
+ icon={CollectionIcon}
+ messages={["Collection not found"]}
+ />
+ </Grid>
+ ;
}
handleContextMenu = (event: React.MouseEvent<any>) => {
{/*
NOTE: The property list should be kept at the bottom, because it spans
the entire available width, without regards of the twoCol prop.
- */}
+ */}
<Grid item xs={12} md={12}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Properties' />
projects / arvados-workbench2.git / blobdiff