// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { connect } from 'react-redux';
+import { connect, DispatchProp } from 'react-redux';
import Typography from '@material-ui/core/Typography';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { Tooltip } from '@material-ui/core';
+import { CopyIcon } from '~/components/icon/icon';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
import { ArvadosTheme } from '~/common/custom-theme';
import * as classnames from "classnames";
import { Link } from 'react-router-dom';
import { RootState } from "~/store/store";
import { FederationConfig, getNavUrl } from "~/routes/routes";
+import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
-type CssRules = 'attribute' | 'label' | 'value' | 'lowercaseValue' | 'link';
+type CssRules = 'attribute' | 'label' | 'value' | 'lowercaseValue' | 'link' | 'copyIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
attribute: {
value: {
boxSizing: 'border-box',
width: '60%',
- display: 'flex',
alignItems: 'flex-start'
},
lowercaseValue: {
textDecoration: 'none',
overflowWrap: 'break-word',
cursor: 'pointer'
+ },
+ copyIcon: {
+ marginLeft: theme.spacing.unit,
+ fontSize: '1.125rem',
+ color: theme.palette.grey["500"],
+ cursor: 'pointer'
}
});
linkToUuid?: string;
}
-type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules> & FederationConfig;
+type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules> & FederationConfig & DispatchProp;
const mapStateToProps = ({ auth }: RootState): FederationConfig => ({
localCluster: auth.localCluster,
});
export const DetailsAttribute = connect(mapStateToProps)(withStyles(styles)(
- ({ label, link, value, children, classes, classLabel,
- classValue, lowercaseValue, onValueClick, linkToUuid,
- localCluster, remoteHostsConfig, sessions }: DetailsAttributeProps) => {
- let insertLink: React.ReactNode;
- if (linkToUuid) {
- const linkUrl = getNavUrl(linkToUuid || "", { localCluster, remoteHostsConfig, sessions });
- if (linkUrl[0] === '/') {
- insertLink = <Link to={linkUrl} className={classes.link}>{value}</Link>;
+ class extends React.Component<DetailsAttributeProps> {
+
+ onCopy = (message: string) => {
+ this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
+ message,
+ hideDuration: 2000,
+ kind: SnackbarKind.SUCCESS
+ }));
+ }
+
+ render() {
+ const { label, link, value, children, classes, classLabel,
+ classValue, lowercaseValue, onValueClick, linkToUuid,
+ localCluster, remoteHostsConfig, sessions } = this.props;
+ let valueNode: React.ReactNode;
+
+ if (linkToUuid) {
+ const linkUrl = getNavUrl(linkToUuid || "", { localCluster, remoteHostsConfig, sessions });
+ if (linkUrl[0] === '/') {
+ valueNode = <Link to={linkUrl} className={classes.link}>{linkToUuid}</Link>;
+ } else {
+ valueNode = <a href={linkUrl} className={classes.link} target='_blank'>{linkToUuid}</a>;
+ }
+ } else if (link) {
+ valueNode = <a href={link} className={classes.link} target='_blank'>{value}</a>;
} else {
- insertLink = <a href={linkUrl} className={classes.link} target='_blank'>{value}</a>;
+ valueNode = value;
}
- } else if (link) {
- insertLink = <a href={link} className={classes.link} target='_blank'>{value}</a>;
+ return <Typography component="div" className={classes.attribute}>
+ <Typography component="span" className={classnames([classes.label, classLabel])}>{label}</Typography>
+ <Typography
+ onClick={onValueClick}
+ component="span"
+ 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>
+ </Tooltip>}
+ </Typography>
+ </Typography>;
}
- return <Typography component="div" className={classes.attribute}>
- <Typography component="span" className={classnames([classes.label, classLabel])}>{label}</Typography>
- {insertLink}
- {!insertLink && <Typography
- onClick={onValueClick}
- component="span"
- className={classnames([classes.value, classValue, { [classes.lowercaseValue]: lowercaseValue }])}>
- {value}
- {children}
- </Typography>
- }
- </Typography>;
}
));
import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
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 { CollectionTagForm } from './collection-tag-form';
import { deleteCollectionTag, navigateToProcess } from '~/store/collection-panel/collection-panel-action';
import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
import { ResourceData } from "~/store/resources-data/resources-data-reducer";
import { openDetailsPanel } from '~/store/details-panel/details-panel-action';
-type CssRules = 'card' | 'iconHeader' | 'tag' | 'copyIcon' | 'label' | 'value' | 'link';
+type CssRules = 'card' | 'iconHeader' | 'tag' | 'label' | 'value' | 'link';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
marginRight: theme.spacing.unit,
marginBottom: theme.spacing.unit
},
- copyIcon: {
- marginLeft: theme.spacing.unit,
- fontSize: '1.125rem',
- color: theme.palette.grey["500"],
- cursor: 'pointer'
- },
label: {
fontSize: '0.875rem'
},
subheaderTypographyProps={this.titleProps} />
<CardContent>
<Grid container direction="column">
- <Grid item xs={6}>
+ <Grid item xs={10}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Collection UUID'
- value={item && item.uuid}>
- <Tooltip title="Copy uuid">
- <CopyToClipboard text={item && item.uuid} onCopy={() => this.onCopy("UUID has been copied")}>
- <CopyIcon className={classes.copyIcon} />
- </CopyToClipboard>
- </Tooltip>
- </DetailsAttribute>
+ linkToUuid={item && item.uuid} />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Portable data hash'
- linkToUuid={item && item.portableDataHash}
- value={item && item.portableDataHash}>
- <Tooltip title="Copy pdh">
- <CopyToClipboard text={item && item.portableDataHash} onCopy={() => this.onCopy("PDH has been copied")}>
- <CopyIcon className={classes.copyIcon} />
- </CopyToClipboard>
- </Tooltip>
- </DetailsAttribute>
+ linkToUuid={item && item.portableDataHash} />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Number of files' value={data && data.fileCount} />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Content size' value={data && formatFileSize(data.fileSize)} />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Owner' linkToUuid={item && item.ownerUuid} value={item && item.ownerUuid} />
+ label='Owner' linkToUuid={item && item.ownerUuid} />
{(item.properties.container_request || item.properties.containerRequest) &&
<span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
<DetailsAttribute classLabel={classes.link} label='Link to process' />
this.props.dispatch<any>(deleteCollectionTag(key));
}
- onCopy = (message: string) => {
- this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
- message,
- hideDuration: 2000,
- kind: SnackbarKind.SUCCESS
- }));
- }
-
openCollectionDetails = () => {
const { item } = this.props;
if (item) {