X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/787e604aba41d4e75716bf99507c02df9fa8cf4d..9ee35a64c605f116aec71f78c65b54730d6e1076:/src/views/collection-panel/collection-panel.tsx diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx index 43423a62..4cdd8c55 100644 --- a/src/views/collection-panel/collection-panel.tsx +++ b/src/views/collection-panel/collection-panel.tsx @@ -4,110 +4,324 @@ import * as React from 'react'; import { - StyleRulesCallback, WithStyles, withStyles, Card, - CardHeader, IconButton, CardContent, Grid, Chip + StyleRulesCallback, WithStyles, withStyles, + IconButton, Grid, Tooltip, Typography, ExpansionPanel, + ExpansionPanelSummary, ExpansionPanelDetails } from '@material-ui/core'; -import { connect } from 'react-redux'; +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, CopyIcon } 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'; -import * as CopyToClipboard from 'react-copy-to-clipboard'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { RootState } from '~/store/store'; +import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, ExpandIcon, 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 { CollectionTagForm } from './collection-tag-form'; +import { deleteCollectionTag, navigateToProcess, collectionPanelActions } from '~/store/collection-panel/collection-panel-action'; +import { getResource } from '~/store/resources/resources'; +import { openContextMenu } from '~/store/context-menu/context-menu-actions'; +import { ContextMenuKind } from '~/views-components/context-menu/context-menu'; +import { formatDate, formatFileSize } from "~/common/formatters"; +import { openDetailsPanel } from '~/store/details-panel/details-panel-action'; +import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions'; +import { getPropertyChip } from '~/views-components/resource-properties-form/property-chip'; +import { IllegalNamingWarning } from '~/components/warning/warning'; +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'; -type CssRules = 'card' | 'iconHeader' | 'tag' | 'copyIcon'; +type CssRules = 'root' + | 'filesCard' + | 'iconHeader' + | 'tag' + | 'label' + | 'value' + | 'link' + | 'centeredLabel' + | 'warningLabel' + | 'collectionName' + | 'readOnlyIcon'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ - card: { - marginBottom: '20px' + root: { + display: 'flex', + flexFlow: 'column', + height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs) + }, + filesCard: { + marginBottom: theme.spacing.unit * 2, + flex: 1, }, iconHeader: { fontSize: '1.875rem', color: theme.customs.colors.yellow700 }, tag: { - marginRight: theme.spacing.unit + marginRight: theme.spacing.unit, + marginBottom: theme.spacing.unit + }, + label: { + fontSize: '0.875rem' + }, + centeredLabel: { + fontSize: '0.875rem', + textAlign: 'center' + }, + warningLabel: { + fontStyle: 'italic' + }, + collectionName: { + flexDirection: 'column', + }, + value: { + textTransform: 'none', + fontSize: '0.875rem' + }, + link: { + fontSize: '0.875rem', + color: theme.palette.primary.main, + '&:hover': { + cursor: 'pointer' + } }, - copyIcon: { + readOnlyIcon: { marginLeft: theme.spacing.unit, - fontSize: '1.125rem', - cursor: 'pointer' + fontSize: 'small', } }); interface CollectionPanelDataProps { item: CollectionResource; + isWritable: boolean; + isOldVersion: boolean; + isLoadingFiles: boolean; + tooManyFiles: boolean; } -interface CollectionPanelActionProps { - onItemRouteChange: (collectionId: string) => void; - onContextMenu: (event: React.MouseEvent, item: CollectionResource) => void; -} - -type CollectionPanelProps = CollectionPanelDataProps & CollectionPanelActionProps - & WithStyles & RouteComponentProps<{ id: string }>; - +type CollectionPanelProps = CollectionPanelDataProps & DispatchProp + & WithStyles & RouteComponentProps<{ id: string }>; export const CollectionPanel = withStyles(styles)( - connect((state: RootState) => ({ item: state.collectionPanel.item! }))( + connect((state: RootState, props: RouteComponentProps<{ id: string }>) => { + const currentUserUUID = getUserUuid(state); + const item = getResource(props.match.params.id)(state.resources); + let isWritable = false; + const isOldVersion = item && item.currentVersionUuid !== item.uuid; + if (item && !isOldVersion) { + if (item.ownerUuid === currentUserUUID) { + isWritable = true; + } else { + const itemOwner = getResource(item.ownerUuid)(state.resources); + if (itemOwner) { + isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0; + } + } + } + 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 }; + })( class extends React.Component { - render() { - const { classes, item, onContextMenu } = this.props; - return
- - } - action={ - onContextMenu(event, item)}> - - - } - title={item && item.name } - subheader={item && item.description} /> - - - - - - - - - - + const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props; + return item + ?
+ + }> + + + + {isOldVersion + ? + : } + + + + {item.name} + {isWritable || + + + + } + + + + + + + + + + + + + + + + {item.description} + + + {(item.properties.container_request || item.properties.containerRequest) && + dispatch(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}> + + + } + {isOldVersion && + + This is an old version. Make a copy to make changes. Go to the head version for sharing options. + + } - - + + - - - - - - - - + + }> + {"Properties"} + + + + {isWritable && + + } + + {Object.keys(item.properties).length > 0 + ? Object.keys(item.properties).map(k => + Array.isArray(item.properties[k]) + ? item.properties[k].map((v: string) => + getPropertyChip( + k, v, + isWritable + ? this.handleDelete(k, item.properties[k]) + : undefined, + classes.tag)) + : getPropertyChip( + k, item.properties[k], + isWritable + ? this.handleDelete(k, item.properties[k]) + : undefined, + classes.tag) + ) + :
No properties set on this collection.
+ } - - -
- + + +
+ { + dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true)); + dispatch(loadCollectionFiles(this.props.item.uuid)); + } + } />
-
; +
+ : null; + } + + handleContextMenu = (event: React.MouseEvent) => { + const { uuid, ownerUuid, name, description, kind, isTrashed } = this.props.item; + const { isWritable } = this.props; + const resource = { + uuid, + ownerUuid, + name, + description, + kind, + menuKind: isWritable + ? isTrashed + ? ContextMenuKind.TRASHED_COLLECTION + : ContextMenuKind.COLLECTION + : ContextMenuKind.READONLY_COLLECTION + }; + // Avoid expanding/collapsing the panel + event.stopPropagation(); + this.props.dispatch(openContextMenu(event, resource)); } - componentWillReceiveProps({ match, item, onItemRouteChange }: CollectionPanelProps) { - if (!item || match.params.id !== item.uuid) { - onItemRouteChange(match.params.id); + onCopy = (message: string) => + this.props.dispatch(snackbarActions.OPEN_SNACKBAR({ + message, + hideDuration: 2000, + kind: SnackbarKind.SUCCESS + })) + + handleDelete = (key: string, value: string) => () => { + this.props.dispatch(deleteCollectionTag(key, value)); + } + + openCollectionDetails = () => { + const { item } = this.props; + if (item) { + this.props.dispatch(openDetailsPanel(item.uuid)); } } + titleProps = { + onClick: this.openCollectionDetails + }; + } ) ); + +export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record }) => { + const item = props.item; + const classes = props.classes || { label: '', value: '' }; + const isOldVersion = item && item.currentVersionUuid !== item.uuid; + const mdSize = props.twoCol ? 6 : 12; + return + + + + + + + + + + + {isOldVersion && + + + + } + + + + + + + + + + + + + + + + ; +};