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