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