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;
66 type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules> & FederationConfig & DispatchProp;
68 const mapStateToProps = ({ auth }: RootState): FederationConfig => ({
69 localCluster: auth.localCluster,
70 remoteHostsConfig: auth.remoteHostsConfig,
71 sessions: auth.sessions
74 export const DetailsAttribute = connect(mapStateToProps)(withStyles(styles)(
75 class extends React.Component<DetailsAttributeProps> {
77 onCopy = (message: string) => {
78 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
81 kind: SnackbarKind.SUCCESS
86 const { label, link, value, children, classes, classLabel,
87 classValue, lowercaseValue, onValueClick, linkToUuid,
88 localCluster, remoteHostsConfig, sessions } = this.props;
89 let valueNode: React.ReactNode;
92 const linkUrl = getNavUrl(linkToUuid || "", { localCluster, remoteHostsConfig, sessions });
93 if (linkUrl[0] === '/') {
94 valueNode = <Link to={linkUrl} className={classes.link}>{linkToUuid}</Link>;
96 valueNode = <a href={linkUrl} className={classes.link} target='_blank'>{linkToUuid}</a>;
99 valueNode = <a href={link} className={classes.link} target='_blank'>{value}</a>;
103 return <Typography component="div" className={classes.attribute}>
104 <Typography component="div" className={classnames([classes.label, classLabel])}>{label}</Typography>
106 onClick={onValueClick}
108 className={classnames([classes.value, classValue, { [classes.lowercaseValue]: lowercaseValue }])}>
111 {linkToUuid && <Tooltip title="Copy">
112 <span className={classes.copyIcon}>
113 <CopyToClipboard text={linkToUuid || ""} onCopy={() => this.onCopy("Copied")}>