src/views-components/details-panel/collection-details.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { CollectionIcon, RenameIcon } from 'components/icon/icon';
   7 import { CollectionResource } from 'models/collection';
   8 import { DetailsData } from "./details-data";
   9 import { CollectionDetailsAttributes } from 'views/collection-panel/collection-panel';
  10 import { RootState } from 'store/store';
  11 import { filterResources, getResource } from 'store/resources/resources';
  12 import { connect } from 'react-redux';
  13 import { Button, Grid, ListItem, StyleRulesCallback, Typography, withStyles, WithStyles } from '@material-ui/core';
  14 import { formatDate, formatFileSize } from 'common/formatters';
  15 import { UserNameFromID } from '../data-explorer/renderers';
  16 import { Dispatch } from 'redux';
  17 import { navigateTo } from 'store/navigation/navigation-action';
  18 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
  19 import { openCollectionUpdateDialog } from 'store/collections/collection-update-actions';
  20
  21 export type CssRules = 'versionBrowserHeader'
  22     | 'versionBrowserItem'
  23     | 'versionBrowserField'
  24     | 'editButton'
  25     | 'editIcon'
  26     | 'tag';
  27
  28 const styles: StyleRulesCallback<CssRules> = theme => ({
  29     versionBrowserHeader: {
  30         textAlign: 'center',
  31         fontWeight: 'bold',
  32     },
  33     versionBrowserItem: {
  34         flexWrap: 'wrap',
  35     },
  36     versionBrowserField: {
  37         textAlign: 'center',
  38     },
  39     editIcon: {
  40         paddingRight: theme.spacing.unit/2,
  41         fontSize: '1.125rem',
  42     },
  43     editButton: {
  44         boxShadow: 'none',
  45         padding: '2px 10px 2px 5px',
  46         fontSize: '0.75rem'
  47     },
  48     tag: {
  49         marginRight: theme.spacing.unit / 2,
  50         marginBottom: theme.spacing.unit / 2
  51     },
  52 });
  53
  54 export class CollectionDetails extends DetailsData<CollectionResource> {
  55
  56     getIcon(className?: string) {
  57         return <CollectionIcon className={className} />;
  58     }
  59
  60     getTabLabels() {
  61         return ['Details', 'Versions'];
  62     }
  63
  64     getDetails({tabNr}) {
  65         switch (tabNr) {
  66             case 0:
  67                 return this.getCollectionInfo();
  68             case 1:
  69                 return this.getVersionBrowser();
  70             default:
  71                 return <div />;
  72         }
  73     }
  74
  75     private getCollectionInfo() {
  76         return <CollectionInfo />;
  77     }
  78
  79     private getVersionBrowser() {
  80         return <CollectionVersionBrowser />;
  81     }
  82 }
  83
  84 interface CollectionInfoDataProps {
  85     currentCollection: CollectionResource | undefined;
  86 }
  87
  88 interface CollectionInfoDispatchProps {
  89     editCollection: (collection: CollectionResource | undefined) => void;
  90 }
  91
  92 const ciMapStateToProps = (state: RootState): CollectionInfoDataProps => {
  93     return {
  94         currentCollection: getResource<CollectionResource>(state.detailsPanel.resourceUuid)(state.resources),
  95     };
  96 };
  97
  98 const ciMapDispatchToProps = (dispatch: Dispatch): CollectionInfoDispatchProps => ({
  99     editCollection: (collection: CollectionResource) =>
 100         dispatch<any>(openCollectionUpdateDialog({
 101             uuid: collection.uuid,
 102             name: collection.name,
 103             description: collection.description,
 104             properties: collection.properties,
 105             storageClassesDesired: collection.storageClassesDesired,
 106         })),
 107 });
 108
 109 type CollectionInfoProps = CollectionInfoDataProps & CollectionInfoDispatchProps & WithStyles<CssRules>;
 110
 111 const CollectionInfo = withStyles(styles)(
 112     connect(ciMapStateToProps, ciMapDispatchToProps)(
 113         ({ currentCollection, editCollection, classes }: CollectionInfoProps) =>
 114             currentCollection !== undefined
 115                 ? <div>
 116                     <Button
 117                         className={classes.editButton} variant='contained'
 118                         data-cy='details-panel-edit-btn' color='primary' size='small'
 119                         onClick={() => editCollection(currentCollection)}>
 120                         <RenameIcon className={classes.editIcon} /> Edit
 121                     </Button>
 122                     <CollectionDetailsAttributes classes={classes} twoCol={false} item={currentCollection} />
 123                 </div>
 124                 : <div />
 125     )
 126 );
 127
 128 interface CollectionVersionBrowserProps {
 129     currentCollection: CollectionResource | undefined;
 130     versions: CollectionResource[];
 131 }
 132
 133 interface CollectionVersionBrowserDispatchProps {
 134     showVersion: (c: CollectionResource) => void;
 135     handleContextMenu: (event: React.MouseEvent<HTMLElement>, collection: CollectionResource) => void;
 136 }
 137
 138 const vbMapStateToProps = (state: RootState): CollectionVersionBrowserProps => {
 139     const currentCollection = getResource<CollectionResource>(state.detailsPanel.resourceUuid)(state.resources);
 140     const versions = (currentCollection
 141         && filterResources(rsc =>
 142             (rsc as CollectionResource).currentVersionUuid === currentCollection.currentVersionUuid)(state.resources)
 143                 .sort((a: CollectionResource, b: CollectionResource) => b.version - a.version) as CollectionResource[])
 144         || [];
 145     return { currentCollection, versions };
 146 };
 147
 148 const vbMapDispatchToProps = () =>
 149     (dispatch: Dispatch): CollectionVersionBrowserDispatchProps => ({
 150         showVersion: (collection) => dispatch<any>(navigateTo(collection.uuid)),
 151         handleContextMenu: (event: React.MouseEvent<HTMLElement>, collection: CollectionResource) => {
 152             const menuKind = dispatch<any>(resourceUuidToContextMenuKind(collection.uuid));
 153             if (collection && menuKind) {
 154                 dispatch<any>(openContextMenu(event, {
 155                     name: collection.name,
 156                     uuid: collection.uuid,
 157                     description: collection.description,
 158                     storageClassesDesired: collection.storageClassesDesired,
 159                     ownerUuid: collection.ownerUuid,
 160                     isTrashed: collection.isTrashed,
 161                     kind: collection.kind,
 162                     menuKind
 163                 }));
 164             }
 165         },
 166     });
 167
 168 const CollectionVersionBrowser = withStyles(styles)(
 169     connect(vbMapStateToProps, vbMapDispatchToProps)(
 170         ({ currentCollection, versions, showVersion, handleContextMenu, classes }: CollectionVersionBrowserProps & CollectionVersionBrowserDispatchProps & WithStyles<CssRules>) => {
 171             return <div data-cy="collection-version-browser">
 172                 <Grid container>
 173                     <Grid item xs={2}>
 174                         <Typography variant="caption" className={classes.versionBrowserHeader}>
 175                             Nr
 176                         </Typography>
 177                     </Grid>
 178                     <Grid item xs={4}>
 179                         <Typography variant="caption" className={classes.versionBrowserHeader}>
 180                             Size
 181                         </Typography>
 182                     </Grid>
 183                     <Grid item xs={6}>
 184                         <Typography variant="caption" className={classes.versionBrowserHeader}>
 185                             Date
 186                         </Typography>
 187                     </Grid>
 188                 { versions.map(item => {
 189                     const isSelectedVersion = !!(currentCollection && currentCollection.uuid === item.uuid);
 190                     return (
 191                         <ListItem button style={{padding: '4px'}}
 192                             data-cy={`collection-version-browser-select-${item.version}`}
 193                             key={item.version}
 194                             onClick={e => showVersion(item)}
 195                             onContextMenu={event => handleContextMenu(event, item)}
 196                             selected={isSelectedVersion}
 197                             className={classes.versionBrowserItem}>
 198                             <Grid item xs={2}>
 199                                 <Typography variant="caption" className={classes.versionBrowserField}>
 200                                     {item.version}
 201                                 </Typography>
 202                             </Grid>
 203                             <Grid item xs={4}>
 204                                 <Typography variant="caption" className={classes.versionBrowserField}>
 205                                     {formatFileSize(item.fileSizeTotal)}
 206                                 </Typography>
 207                             </Grid>
 208                             <Grid item xs={6}>
 209                                 <Typography variant="caption" className={classes.versionBrowserField}>
 210                                     {formatDate(item.modifiedAt)}
 211                                 </Typography>
 212                             </Grid>
 213                             <Grid item xs={12}>
 214                                 <Typography variant="caption" className={classes.versionBrowserField}>
 215                                     Modified by: <UserNameFromID uuid={item.modifiedByUserUuid} />
 216                                 </Typography>
 217                             </Grid>
 218                         </ListItem>
 219                     );
 220                 })}
 221                 </Grid>
 222             </div>;
 223         }));