X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/172ba18e43743d90b8a1110d62209be2ab7627d1..edb0ce16ee7ccef6cec38c9787ba0dadde5da697:/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 e78b1f3d..79cf07bf 100644 --- a/src/views/collection-panel/collection-panel.tsx +++ b/src/views/collection-panel/collection-panel.tsx @@ -4,20 +4,24 @@ 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 { 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 { CollectionTagForm } from './collection-tag-form'; -import { deleteCollectionTag, 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"; @@ -28,14 +32,16 @@ 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 { 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'; type CssRules = 'root' | 'button' + | 'infoCard' + | 'propertiesCard' | 'filesCard' | 'iconHeader' | 'tag' @@ -45,31 +51,37 @@ type CssRules = 'root' | 'centeredLabel' | 'warningLabel' | 'collectionName' - | 'readOnlyIcon'; + | 'readOnlyIcon' + | 'header' + | 'title' + | 'avatar' + | 'content'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { - display: 'flex', - flexFlow: 'column', - height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs) + width: '100%', }, button: { cursor: 'pointer' }, + infoCard: { + }, + propertiesCard: { + padding: 0, + }, filesCard: { - marginBottom: theme.spacing.unit * 2, - flex: 1, + padding: 0, }, iconHeader: { fontSize: '1.875rem', - color: theme.customs.colors.yellow700 + color: theme.customs.colors.greyL }, tag: { - marginRight: theme.spacing.unit, - marginBottom: theme.spacing.unit + marginRight: theme.spacing.unit / 2, + marginBottom: theme.spacing.unit / 2 }, label: { - fontSize: '0.875rem' + fontSize: '0.875rem', }, centeredLabel: { fontSize: '0.875rem', @@ -95,6 +107,26 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ 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, + } } }); @@ -103,14 +135,12 @@ interface CollectionPanelDataProps { isWritable: boolean; isOldVersion: boolean; isLoadingFiles: boolean; - tooManyFiles: boolean; } -type CollectionPanelProps = CollectionPanelDataProps & DispatchProp - & WithStyles & RouteComponentProps<{ id: string }>; +type CollectionPanelProps = CollectionPanelDataProps & DispatchProp & WithStyles -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(props.match.params.id)(state.resources); let isWritable = false; @@ -125,119 +155,86 @@ export const CollectionPanel = withStyles(styles)( } } } - 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 { 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" }, + ]; return item - ?
- - }> - - - - {isOldVersion - ? - : } - - + ? + + + + {isOldVersion + ? + : } + } + title={ + {item.name} {isWritable || - - } + } - - + } + action={ - + - - - - - - - - {item.description} + } + /> + + + {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(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. - - } - - - - - - - }> - {"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, v) - : 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, storageClassesDesired } = this.props.item; + const { uuid, ownerUuid, name, description, + kind, storageClassesDesired, properties } = this.props.item; const menuKind = this.props.dispatch(resourceUuidToContextMenuKind(uuid)); const resource = { uuid, @@ -247,6 +244,7 @@ export const CollectionPanel = withStyles(styles)( storageClassesDesired, kind, menuKind, + properties, }; // Avoid expanding/collapsing the panel event.stopPropagation(); @@ -260,10 +258,6 @@ export const CollectionPanel = withStyles(styles)( kind: SnackbarKind.SUCCESS })) - handleDelete = (key: string, value: string) => () => { - this.props.dispatch(deleteCollectionTag(key, value)); - } - openCollectionDetails = (e: React.MouseEvent) => { const { item } = this.props; if (item) { @@ -280,9 +274,16 @@ export const CollectionPanel = withStyles(styles)( ) ); -export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record, showVersionBrowser?: () => void }) => { +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: '' }; + 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; @@ -301,7 +302,7 @@ export const CollectionDetailsAttributes = (props: { item: CollectionResource, t } /> + uuidEnhancer={(uuid: string) => } />
@@ -336,7 +337,7 @@ export const CollectionDetailsAttributes = (props: { item: CollectionResource, t + label='Number of files' value={{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
} + ; };