X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/31b5226e2d0d5db1bf24802ba51d4baae264cab6..efb6e397a2d9ec98c8a9fa1f47bea66d8651bb81:/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 5771a736..dce8ef8f 100644 --- a/src/views/collection-panel/collection-panel.tsx +++ b/src/views/collection-panel/collection-panel.tsx @@ -2,113 +2,83 @@ // // SPDX-License-Identifier: AGPL-3.0 -import * as React from 'react'; +import React from 'react'; import { - StyleRulesCallback, WithStyles, withStyles, Card, - CardHeader, IconButton, CardContent, Grid, Tooltip + StyleRulesCallback, + WithStyles, + withStyles, + IconButton, + Grid, + Tooltip, + Typography, + Card } 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, 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'; -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 { 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 { ArvadosTheme } from 'common/custom-theme'; +import { RootState } from 'store/store'; +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'; +import { navigateToProcess, collectionPanelActions } 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 { 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'; +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' - | 'card' - | 'cardHeader' + | 'button' + | 'infoCard' + | 'propertiesCard' | 'filesCard' - | 'cardContent' | 'iconHeader' | 'tag' | 'label' | 'value' | 'link' | 'centeredLabel' + | 'warningLabel' + | 'collectionName' | '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 = (theme: ArvadosTheme) => ({ root: { - display: 'flex', - flexFlow: 'column', - height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs) + width: '100%', }, - card: { - marginBottom: theme.spacing.unit * 2, + button: { + cursor: 'pointer' }, - cardHeader: { - paddingTop: theme.spacing.unit, - paddingBottom: 0, + infoCard: { + paddingLeft: theme.spacing.unit * 2, + paddingRight: theme.spacing.unit * 2, + paddingBottom: theme.spacing.unit * 2, }, - filesCard: { - marginBottom: theme.spacing.unit * 2, - flex: 1, + propertiesCard: { + padding: 0, }, - cardContent: { - width: '100%', - paddingTop: 0, - paddingBottom: theme.spacing.unit, - '&:last-child': { - paddingBottom: theme.spacing.unit, - } + filesCard: { + padding: 0, }, iconHeader: { fontSize: '1.875rem', color: theme.customs.colors.yellow700 }, tag: { - marginRight: theme.spacing.unit, - marginBottom: theme.spacing.unit + marginRight: theme.spacing.unit / 2, + marginBottom: theme.spacing.unit / 2 }, label: { fontSize: '0.875rem' @@ -117,6 +87,12 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ fontSize: '0.875rem', textAlign: 'center' }, + warningLabel: { + fontStyle: 'italic' + }, + collectionName: { + flexDirection: 'column', + }, value: { textTransform: 'none', fontSize: '0.875rem' @@ -137,6 +113,7 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ interface CollectionPanelDataProps { item: CollectionResource; isWritable: boolean; + isOldVersion: boolean; isLoadingFiles: boolean; tooManyFiles: boolean; } @@ -149,152 +126,114 @@ export const CollectionPanel = withStyles(styles)( const currentUserUUID = getUserUuid(state); const item = getResource(props.match.params.id)(state.resources); let isWritable = false; - if (item && item.ownerUuid === currentUserUUID) { - isWritable = true; - } else if (item) { - const itemOwner = getResource(item.ownerUuid)(state.resources); - if (itemOwner) { - isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0; + 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 && itemOwner.writableBy) { + 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, isLoadingFiles, tooManyFiles }; + 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, dispatch, isWritable, isLoadingFiles, tooManyFiles } = this.props; + const { classes, item, dispatch, isWritable, isOldVersion, isLoadingFiles, tooManyFiles } = this.props; + const panelsData: MPVPanelState[] = [ + {name: "Details"}, + {name: "Files"}, + ]; return item - ?
- - - }> - - - - } - title={ - - - {item.name} - {isWritable || - - - - } - - } - titleTypographyProps={this.titleProps} - subheader={item.description} - subheaderTypographyProps={this.titleProps} /> - - - + ? + + - - - - - - - {(item.properties.container_request || item.properties.containerRequest) && - dispatch(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}> - - - } - - - + + + {isOldVersion + ? + : } + + + + {item.name} + {isWritable || + + + + } + + + + - - - - - - - - }> - - - - - {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.
- } + + {item.description} + + dispatch(openDetailsPanel(item.uuid, 1))} /> + {(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. + + } - - - -
- { - dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true)); - dispatch(loadCollectionFiles(this.props.item.uuid)); - } - } /> -
-
+ + + + + { + 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 { uuid, ownerUuid, name, description, + kind, storageClassesDesired, properties } = this.props.item; + const menuKind = this.props.dispatch(resourceUuidToContextMenuKind(uuid)); const resource = { uuid, ownerUuid, name, description, + storageClassesDesired, kind, - menuKind: isWritable - ? isTrashed - ? ContextMenuKind.TRASHED_COLLECTION - : ContextMenuKind.COLLECTION - : ContextMenuKind.READONLY_COLLECTION + menuKind, + properties, }; + // Avoid expanding/collapsing the panel + event.stopPropagation(); this.props.dispatch(openContextMenu(event, resource)); } @@ -305,14 +244,11 @@ export const CollectionPanel = withStyles(styles)( kind: SnackbarKind.SUCCESS })) - handleDelete = (key: string, value: string) => () => { - this.props.dispatch(deleteCollectionTag(key, value)); - } - - openCollectionDetails = () => { + openCollectionDetails = (e: React.MouseEvent) => { const { item } = this.props; if (item) { - this.props.dispatch(openDetailsPanel(item.uuid)); + e.stopPropagation(); + this.props.dispatch(openDetailsPanel(item.uuid)); } } @@ -323,3 +259,95 @@ export const CollectionPanel = withStyles(styles)( } ) ); + +interface CollectionDetailsProps { + item: CollectionResource; + classes?: any; + twoCol?: boolean; + showVersionBrowser?: () => void; +} + +export const CollectionDetailsAttributes = (props: CollectionDetailsProps) => { + const item = props.item; + const classes = props.classes || { label: '', value: '', button: '', tag: '' }; + const isOldVersion = item && item.currentVersionUuid !== item.uuid; + const mdSize = props.twoCol ? 6 : 12; + const showVersionBrowser = props.showVersionBrowser; + const responsiblePersonRef = React.useRef(null); + return + + + + + + + + } /> + +
+ + } /> + +
+ + + + + showVersionBrowser()}> + {{item.version}} + + : item.version + } + /> + + + + + + + + + {item.fileCount}} /> + + + + + + + + + {/* + NOTE: The property list should be kept at the bottom, because it spans + the entire available width, without regards of the twoCol prop. + */} + + + { 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, undefined, classes.tag)) + : getPropertyChip(k, item.properties[k], undefined, classes.tag)) + :
No properties
} + + ; +};