const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
attribute: {
- display: 'flex',
- alignItems: 'flex-start',
- marginBottom: theme.spacing.unit
+ marginBottom: ".6 rem"
},
label: {
boxSizing: 'border-box',
color: theme.palette.grey["500"],
- width: '40%'
+ width: '100%'
},
value: {
boxSizing: 'border-box',
- width: '60%',
alignItems: 'flex-start'
},
lowercaseValue: {
textTransform: 'lowercase'
},
link: {
- width: '60%',
color: theme.palette.primary.main,
textDecoration: 'none',
overflowWrap: 'break-word',
},
copyIcon: {
marginLeft: theme.spacing.unit,
- fontSize: '1.125rem',
color: theme.palette.grey["500"],
- cursor: 'pointer'
+ cursor: 'pointer',
+ display: 'inline',
+ '& svg': {
+ fontSize: '1rem'
+ }
}
});
children?: React.ReactNode;
onValueClick?: () => void;
linkToUuid?: string;
+ copyValue?: string;
+ uuidEnhancer?: Function;
}
type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules> & FederationConfig & DispatchProp;
}
render() {
- const { label, link, value, children, classes, classLabel,
+ const { uuidEnhancer, label, link, value, children, classes, classLabel,
classValue, lowercaseValue, onValueClick, linkToUuid,
- localCluster, remoteHostsConfig, sessions } = this.props;
+ localCluster, remoteHostsConfig, sessions, copyValue } = this.props;
let valueNode: React.ReactNode;
if (linkToUuid) {
+ const uuid = uuidEnhancer ? uuidEnhancer(linkToUuid) : linkToUuid;
const linkUrl = getNavUrl(linkToUuid || "", { localCluster, remoteHostsConfig, sessions });
if (linkUrl[0] === '/') {
- valueNode = <Link to={linkUrl} className={classes.link}>{linkToUuid}</Link>;
+ valueNode = <Link to={linkUrl} className={classes.link}>{uuid}</Link>;
} else {
- valueNode = <a href={linkUrl} className={classes.link} target='_blank'>{linkToUuid}</a>;
+ valueNode = <a href={linkUrl} className={classes.link} target='_blank'>{uuid}</a>;
}
} else if (link) {
valueNode = <a href={link} className={classes.link} target='_blank'>{value}</a>;
} else {
valueNode = value;
}
+
return <Typography component="div" className={classes.attribute}>
- <Typography component="span" className={classnames([classes.label, classLabel])}>{label}</Typography>
+ <Typography component="div" className={classnames([classes.label, classLabel])}>{label}</Typography>
<Typography
onClick={onValueClick}
- component="span"
+ component="div"
className={classnames([classes.value, classValue, { [classes.lowercaseValue]: lowercaseValue }])}>
{valueNode}
{children}
- {linkToUuid && <Tooltip title="Copy">
- <CopyToClipboard text={linkToUuid || ""} onCopy={() => this.onCopy("Copied")}>
- <CopyIcon className={classes.copyIcon} />
- </CopyToClipboard>
+ {(linkToUuid || copyValue) && <Tooltip title="Copy to clipboard">
+ <span className={classes.copyIcon}>
+ <CopyToClipboard text={linkToUuid || copyValue || ""} onCopy={() => this.onCopy("Copied")}>
+ <CopyIcon />
+ </CopyToClipboard>
+ </span>
</Tooltip>}
</Typography>
</Typography>;