Merge branch '14013-upload-collection-files-using-webdav' into 14014-create-collectio...
[arvados-workbench2.git] / src / views / collection-panel / collection-panel.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from 'react';
6 import {
7     StyleRulesCallback, WithStyles, withStyles, Card,
8     CardHeader, IconButton, CardContent, Grid, Chip
9 } from '@material-ui/core';
10 import { connect, DispatchProp } from "react-redux";
11 import { RouteComponentProps } from 'react-router';
12 import { ArvadosTheme } from '~/common/custom-theme';
13 import { RootState } from '~/store/store';
14 import { MoreOptionsIcon, CollectionIcon, CopyIcon } from '~/components/icon/icon';
15 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
16 import { CollectionResource } from '~/models/collection';
17 import { CollectionPanelFiles } from '~/views-components/collection-panel-files/collection-panel-files';
18 import * as CopyToClipboard from 'react-copy-to-clipboard';
19 import { TagResource } from '~/models/tag';
20 import { CollectionTagForm } from './collection-tag-form';
21 import { deleteCollectionTag } from '~/store/collection-panel/collection-panel-action';
22
23 type CssRules = 'card' | 'iconHeader' | 'tag' | 'copyIcon' | 'value';
24
25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
26     card: {
27         marginBottom: theme.spacing.unit * 2
28     },
29     iconHeader: {
30         fontSize: '1.875rem',
31         color: theme.customs.colors.yellow700
32     },
33     tag: {
34         marginRight: theme.spacing.unit,
35         marginBottom: theme.spacing.unit
36     },
37     copyIcon: {
38         marginLeft: theme.spacing.unit,
39         fontSize: '1.125rem',
40         color: theme.palette.grey["500"],
41         cursor: 'pointer'
42     },
43     value: {
44         textTransform: 'none'
45     }
46 });
47
48 interface CollectionPanelDataProps {
49     item: CollectionResource;
50     tags: TagResource[];
51 }
52
53 interface CollectionPanelActionProps {
54     onItemRouteChange: (collectionId: string) => void;
55     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: CollectionResource) => void;
56 }
57
58 type CollectionPanelProps = CollectionPanelDataProps & CollectionPanelActionProps & DispatchProp
59                             & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
60
61
62 export const CollectionPanel = withStyles(styles)(
63     connect((state: RootState) => ({
64         item: state.collectionPanel.item,
65         tags: state.collectionPanel.tags
66     }))(
67         class extends React.Component<CollectionPanelProps> {
68
69             render() {
70                 const { classes, item, tags, onContextMenu } = this.props;
71                 return <div>
72                         <Card className={classes.card}>
73                             <CardHeader
74                                 avatar={ <CollectionIcon className={classes.iconHeader} /> }
75                                 action={
76                                     <IconButton
77                                         aria-label="More options"
78                                         onClick={event => onContextMenu(event, item)}>
79                                         <MoreOptionsIcon />
80                                     </IconButton>
81                                 }
82                                 title={item && item.name }
83                                 subheader={item && item.description} />
84                             <CardContent>
85                                 <Grid container direction="column">
86                                     <Grid item xs={6}>
87                                     <DetailsAttribute classValue={classes.value}
88                                             label='Collection UUID'
89                                             value={item && item.uuid}>
90                                         <CopyToClipboard text={item && item.uuid}>
91                                             <CopyIcon className={classes.copyIcon} />
92                                         </CopyToClipboard>
93                                     </DetailsAttribute>
94                                     <DetailsAttribute label='Number of files' value='14' />
95                                     <DetailsAttribute label='Content size' value='54 MB' />
96                                     <DetailsAttribute classValue={classes.value} label='Owner' value={item && item.ownerUuid} />
97                                     </Grid>
98                                 </Grid>
99                             </CardContent>
100                         </Card>
101
102                         <Card className={classes.card}>
103                             <CardHeader title="Properties" />
104                             <CardContent>
105                                 <Grid container direction="column">
106                                     <Grid item xs={12}><CollectionTagForm /></Grid>
107                                     <Grid item xs={12}>
108                                         {
109                                             tags.map(tag => {
110                                                 return <Chip key={tag.etag} className={classes.tag}
111                                                     onDelete={this.handleDelete(tag.uuid)}
112                                                     label={renderTagLabel(tag)}  />;
113                                             })
114                                         }
115                                     </Grid>
116                                 </Grid>
117                             </CardContent>
118                         </Card>
119                         <div className={classes.card}>
120                             <CollectionPanelFiles/>
121                         </div>
122                     </div>;
123             }
124
125             handleDelete = (uuid: string) => () => {
126                 this.props.dispatch<any>(deleteCollectionTag(uuid));
127             }
128
129             componentWillReceiveProps({ match, item, onItemRouteChange }: CollectionPanelProps) {
130                 if (!item || match.params.id !== item.uuid) {
131                     onItemRouteChange(match.params.id);
132                 }
133             }
134
135         }
136     )
137 );
138
139 const renderTagLabel = (tag: TagResource) => {
140     const { properties } = tag;
141     return `${properties.key}: ${properties.value}`;
142 };