remove old tag from collection panel

[arvados.git] / 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 d22dd0de289122cdf088504a614f1042c6254161..0b264b6bab4593a454b5e9220c51274c9c44c392 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -16,12 +16,11 @@ import { DetailsAttribute } from '~/components/details-attribute/details-attribu
 import { CollectionResource } from '~/models/collection';
 import { CollectionPanelFiles } from '~/views-components/collection-panel-files/collection-panel-files';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { TagResource } from '~/models/tag';
 import { CollectionTagForm } from './collection-tag-form';
 import { deleteCollectionTag } from '~/store/collection-panel/collection-panel-action';
 import { snackbarActions } from '~/store/snackbar/snackbar-actions';
 import { getResource } from '~/store/resources/resources';
-import { contextMenuActions } from '~/store/context-menu/context-menu-actions';
+import { openContextMenu } from '~/store/context-menu/context-menu-actions';
 import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
 
 type CssRules = 'card' | 'iconHeader' | 'tag' | 'copyIcon' | 'label' | 'value';
@@ -55,7 +54,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 interface CollectionPanelDataProps {
     item: CollectionResource;
-    tags: TagResource[];
 }
 
 type CollectionPanelProps = CollectionPanelDataProps & DispatchProp
@@ -66,24 +64,24 @@ export const CollectionPanel = withStyles(styles)(
     connect((state: RootState, props: RouteComponentProps<{ id: string }>) => {
         const collection = getResource(props.match.params.id)(state.resources);
         return {
-            item: collection,
-            tags: state.collectionPanel.tags
+            item: collection
         };
     })(
         class extends React.Component<CollectionPanelProps> {
-
             render() {
-                const { classes, item, tags } = this.props;
+                const { classes, item } = this.props;
                 return <div>
                     <Card className={classes.card}>
                         <CardHeader
                             avatar={<CollectionIcon className={classes.iconHeader} />}
                             action={
-                                <IconButton
-                                    aria-label="More options"
-                                    onClick={this.handleContextMenu}>
-                                    <MoreOptionsIcon />
-                                </IconButton>
+                                <Tooltip title="More options">
+                                    <IconButton
+                                        aria-label="More options"
+                                        onClick={this.handleContextMenu}>
+                                        <MoreOptionsIcon />
+                                    </IconButton>
+                                </Tooltip>
                             }
                             title={item && item.name}
                             subheader={item && item.description} />
@@ -117,10 +115,10 @@ export const CollectionPanel = withStyles(styles)(
                                 <Grid item xs={12}><CollectionTagForm /></Grid>
                                 <Grid item xs={12}>
                                     {
-                                        tags.map(tag => {
-                                            return <Chip key={tag.etag} className={classes.tag}
-                                                onDelete={this.handleDelete(tag.uuid)}
-                                                label={renderTagLabel(tag)} />;
+                                        Object.keys(item.properties).map( key => {
+                                            return <Chip key={key} className={classes.tag}
+                                                onDelete={this.handleDelete(key)}
+                                                label={`${key}: ${item.properties[key]}`} />;
                                         })
                                     }
                                 </Grid>
@@ -134,24 +132,20 @@ export const CollectionPanel = withStyles(styles)(
             }
 
             handleContextMenu = (event: React.MouseEvent<any>) => {
-                event.preventDefault();
-                const { uuid, name, description } = this.props.item;
+                const { uuid, ownerUuid, name, description, kind } = this.props.item;
                 const resource = {
                     uuid,
+                    ownerUuid,
                     name,
                     description,
-                    kind: ContextMenuKind.COLLECTION
+                    kind,
+                    menuKind: ContextMenuKind.COLLECTION
                 };
-                this.props.dispatch(
-                    contextMenuActions.OPEN_CONTEXT_MENU({
-                        position: { x: event.clientX, y: event.clientY },
-                        resource
-                    })
-                );
+                this.props.dispatch<any>(openContextMenu(event, resource));
             }
 
-            handleDelete = (uuid: string) => () => {
-                this.props.dispatch<any>(deleteCollectionTag(uuid));
+            handleDelete = (key: string) => () => {
+                this.props.dispatch<any>(deleteCollectionTag(key));
             }
 
             onCopy = () => {
@@ -160,12 +154,6 @@ export const CollectionPanel = withStyles(styles)(
                     hideDuration: 2000
                 }));
             }
-
         }
     )
 );
-
-const renderTagLabel = (tag: TagResource) => {
-    const { properties } = tag;
-    return `${properties.key}: ${properties.value}`;
-};