16118: Shows only the readonly icon by the collection's name.

[arvados-workbench2.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 be2afc721bf7238135522dee01f23c708fd947ac..3662538774ea9d3116c42bcd878f8483d41b57f1 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import {
     StyleRulesCallback, WithStyles, withStyles, Card,
-    CardHeader, IconButton, CardContent, Grid, Tooltip, Chip
+    CardHeader, IconButton, CardContent, Grid, Tooltip
 } from '@material-ui/core';
 import { connect, DispatchProp } from "react-redux";
 import { RouteComponentProps } from 'react-router';
@@ -29,7 +29,7 @@ import { GroupResource } from '~/models/group';
 import { UserResource } from '~/models/user';
 import { getUserUuid } from '~/common/getuser';
 
-type CssRules = 'card' | 'iconHeader' | 'tag' | 'label' | 'value' | 'link' | 'centeredLabel';
+type CssRules = 'card' | 'iconHeader' | 'tag' | 'label' | 'value' | 'link' | 'centeredLabel' | 'readOnlyIcon';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
@@ -60,6 +60,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         '&:hover': {
             cursor: 'pointer'
         }
+    },
+    readOnlyIcon: {
+        marginLeft: theme.spacing.unit,
+        fontSize: 'small',
     }
 });
 
@@ -101,6 +105,7 @@ export const CollectionPanel = withStyles(styles)(
                                 action={
                                     <Tooltip title="More options" disableFocusListener>
                                         <IconButton
+                                            data-cy='collection-panel-options-btn'
                                             aria-label="More options"
                                             onClick={this.handleContextMenu}>
                                             <MoreOptionsIcon />
@@ -111,7 +116,11 @@ export const CollectionPanel = withStyles(styles)(
                                     <span>
                                         <IllegalNamingWarning name={item.name}/>
                                         {item.name}
-                                        {isWritable || <Chip variant="outlined" icon={<ReadOnlyIcon />} label="Read-only"/>}
+                                        {isWritable ||
+                                        <Tooltip title="Read-only">
+                                            <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
+                                        </Tooltip>
+                                        }
                                     </span>
                                 }
                                 titleTypographyProps={this.titleProps}
@@ -142,7 +151,7 @@ export const CollectionPanel = withStyles(styles)(
                             </CardContent>
                         </Card>
 
-                        <Card className={classes.card}>
+                        <Card data-cy='collection-properties-panel' className={classes.card}>
                             <CardHeader title="Properties" />
                             <CardContent>
                                 <Grid container direction="column">
@@ -173,7 +182,7 @@ export const CollectionPanel = withStyles(styles)(
                                 </Grid>
                             </CardContent>
                         </Card>
-                        <div className={classes.card} data-cy="collection-files-panel">
+                        <div className={classes.card}>
                             <CollectionPanelFiles isWritable={isWritable} />
                         </div>
                     </>