1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { connect, DispatchProp } from 'react-redux';
7 import Typography from '@material-ui/core/Typography';
8 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
9 import { Tooltip } from '@material-ui/core';
10 import { CopyIcon } from '~/components/icon/icon';
11 import * as CopyToClipboard from 'react-copy-to-clipboard';
12 import { ArvadosTheme } from '~/common/custom-theme';
13 import * as classnames from "classnames";
14 import { Link } from 'react-router-dom';
15 import { RootState } from "~/store/store";
16 import { FederationConfig, getNavUrl } from "~/routes/routes";
17 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
19 type CssRules = 'attribute' | 'label' | 'value' | 'lowercaseValue' | 'link' | 'copyIcon';
21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
23 marginBottom: ".6 rem"
26 boxSizing: 'border-box',
27 color: theme.palette.grey["500"],
31 boxSizing: 'border-box',
32 alignItems: 'flex-start'
35 textTransform: 'lowercase'
38 color: theme.palette.primary.main,
39 textDecoration: 'none',
40 overflowWrap: 'break-word',
44 marginLeft: theme.spacing.unit,
45 color: theme.palette.grey["500"],
54 interface DetailsAttributeDataProps {
57 value?: React.ReactNode;
59 lowercaseValue?: boolean;
61 children?: React.ReactNode;
62 onValueClick?: () => void;
65 uuidEnhancer?: Function;
68 type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules> & FederationConfig & DispatchProp;
70 const mapStateToProps = ({ auth }: RootState): FederationConfig => ({
71 localCluster: auth.localCluster,
72 remoteHostsConfig: auth.remoteHostsConfig,
73 sessions: auth.sessions
76 export const DetailsAttribute = connect(mapStateToProps)(withStyles(styles)(
77 class extends React.Component<DetailsAttributeProps> {
79 onCopy = (message: string) => {
80 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
83 kind: SnackbarKind.SUCCESS
88 const { uuidEnhancer, label, link, value, children, classes, classLabel,
89 classValue, lowercaseValue, onValueClick, linkToUuid,
90 localCluster, remoteHostsConfig, sessions, copyValue } = this.props;
91 let valueNode: React.ReactNode;
94 const uuid = uuidEnhancer ? uuidEnhancer(linkToUuid) : linkToUuid;
95 const linkUrl = getNavUrl(linkToUuid || "", { localCluster, remoteHostsConfig, sessions });
96 if (linkUrl[0] === '/') {
97 valueNode = <Link to={linkUrl} className={classes.link}>{uuid}</Link>;
99 valueNode = <a href={linkUrl} className={classes.link} target='_blank'>{uuid}</a>;
102 valueNode = <a href={link} className={classes.link} target='_blank'>{value}</a>;
107 return <Typography component="div" className={classes.attribute}>
108 <Typography component="div" className={classnames([classes.label, classLabel])}>{label}</Typography>
110 onClick={onValueClick}
112 className={classnames([classes.value, classValue, { [classes.lowercaseValue]: lowercaseValue }])}>
115 {(linkToUuid || copyValue) && <Tooltip title="Copy to clipboard">
116 <span className={classes.copyIcon}>
117 <CopyToClipboard text={linkToUuid || copyValue || ""} onCopy={() => this.onCopy("Copied")}>