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 { navigateToProcess, collectionPanelActions } from 'store/collection-panel/collection-panel-action';
+import { navigateToProcess } from 'store/collection-panel/collection-panel-action';
import { getResource } from 'store/resources/resources';
import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
import { formatDate, formatFileSize } from "common/formatters";
import { GroupResource } from 'models/group';
import { UserResource } from 'models/user';
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';
import { Link } from 'react-router-dom';
import { Link as ButtonLink } from '@material-ui/core';
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,
},
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.yellow700
+ color: theme.customs.colors.greyL
},
tag: {
marginRight: theme.spacing.unit / 2,
marginBottom: theme.spacing.unit / 2
},
label: {
- fontSize: '0.875rem'
+ fontSize: '0.875rem',
},
centeredLabel: {
fontSize: '0.875rem',
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: boolean;
isOldVersion: boolean;
isLoadingFiles: boolean;
- tooManyFiles: boolean;
}
-type CollectionPanelProps = CollectionPanelDataProps & DispatchProp
- & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
+type CollectionPanelProps = CollectionPanelDataProps & DispatchProp & WithStyles<CssRules>
-export const CollectionPanel = withStyles(styles)(
- connect((state: RootState, props: RouteComponentProps<{ id: string }>) => {
+export const CollectionPanel = withStyles(styles)(connect(
+ (state: RootState, props: RouteComponentProps<{ id: string }>) => {
const currentUserUUID = getUserUuid(state);
const item = getResource<CollectionResource>(props.match.params.id)(state.resources);
let isWritable = false;
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;
}
}
}
- const loadingFilesIndicator = getProgressIndicator(COLLECTION_PANEL_LOAD_FILES)(state.progressIndicator);
- const isLoadingFiles = (loadingFilesIndicator && loadingFilesIndicator!.working) || false;
- const tooManyFiles = (!state.collectionPanel.loadBigCollections && item && item.fileCount > COLLECTION_PANEL_LOAD_FILES_THRESHOLD) || false;
- return { item, isWritable, isOldVersion, isLoadingFiles, tooManyFiles };
+
+ if (item && isWritable) {
+ isWritable = !resourceIsFrozen(item, state.resources);
+ }
+
+ return { item, isWritable, isOldVersion };
})(
class extends React.Component<CollectionPanelProps> {
render() {
- const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props;
+ const { classes, item, dispatch, isWritable, isOldVersion } = this.props;
const panelsData: MPVPanelState[] = [
{ name: "Details" },
{ name: "Files" },
? <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>
<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));
- }
- } />
+ <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