[ARVADOS-WORKBENCH2] updated: 1.3.1-472-gda4bec76
Git user
git at public.curoverse.com
Mon May 20 18:08:57 UTC 2019
Summary of changes:
.../details-attribute/details-attribute.tsx | 81 ++++++++++++++--------
src/models/resource.ts | 1 -
src/routes/routes.ts | 1 -
src/store/navigation/navigation-action.ts | 2 -
.../details-panel/details-panel.tsx | 2 +-
.../details-panel/process-details.tsx | 2 +-
src/views/collection-panel/collection-panel.tsx | 38 ++--------
7 files changed, 61 insertions(+), 66 deletions(-)
via da4bec7681a503f4a0dbb258cdef5be9e6762299 (commit)
from 215016dc53873f311b5eb3e7e86f2d967ec447fe (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit da4bec7681a503f4a0dbb258cdef5be9e6762299
Author: Peter Amstutz <pamstutz at veritasgenetics.com>
Date: Mon May 20 14:04:48 2019 -0400
15230: Refactor copy to clipboard, applies to all DetailsAttribute
All fields using linkToUuid now have a "copy to clipboard" button.
Process owner uuid is linked.
Tweaked styling of details panel to use of space better.
Cleaned up some debug logging.
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <pamstutz at veritasgenetics.com>
diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx
index aa177882..8f470858 100644
--- a/src/components/details-attribute/details-attribute.tsx
+++ b/src/components/details-attribute/details-attribute.tsx
@@ -3,16 +3,20 @@
// 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: {
@@ -28,7 +32,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
value: {
boxSizing: 'border-box',
width: '60%',
- display: 'flex',
alignItems: 'flex-start'
},
lowercaseValue: {
@@ -40,6 +43,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
textDecoration: 'none',
overflowWrap: 'break-word',
cursor: 'pointer'
+ },
+ copyIcon: {
+ marginLeft: theme.spacing.unit,
+ fontSize: '1.125rem',
+ color: theme.palette.grey["500"],
+ cursor: 'pointer'
}
});
@@ -55,7 +64,7 @@ interface DetailsAttributeDataProps {
linkToUuid?: string;
}
-type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules> & FederationConfig;
+type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules> & FederationConfig & DispatchProp;
const mapStateToProps = ({ auth }: RootState): FederationConfig => ({
localCluster: auth.localCluster,
@@ -64,31 +73,49 @@ const mapStateToProps = ({ auth }: RootState): FederationConfig => ({
});
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>;
}
));
diff --git a/src/models/resource.ts b/src/models/resource.ts
index 2af51ecb..239a67cc 100644
--- a/src/models/resource.ts
+++ b/src/models/resource.ts
@@ -104,7 +104,6 @@ export const extractUuidKind = (uuid: string = '') => {
return ResourceKind.LINK;
default:
const match = COLLECTION_PDH_REGEX.exec(uuid);
- console.log("matching " + match);
return match ? ResourceKind.COLLECTION : undefined;
}
};
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index ae418b80..37c7a816 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -49,7 +49,6 @@ export const Routes = {
export const getResourceUrl = (uuid: string) => {
const kind = extractUuidKind(uuid);
- console.log(`for ${uuid} the kind is ${kind}`);
switch (kind) {
case ResourceKind.PROJECT:
return getProjectUrl(uuid);
diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index b5d769e7..f7eeae57 100644
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -48,7 +48,6 @@ export const navigateToWorkflows = push(Routes.WORKFLOWS);
export const pushOrGoto = (url: string): AnyAction => {
if (url === "") {
- console.log("url should not be empty");
return { type: "noop" };
} else if (url[0] === '/') {
return push(url);
@@ -63,7 +62,6 @@ export const navigateToProcessLogs = compose(push, getProcessLogUrl);
export const navigateToRootProject = (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
const rootProjectUuid = services.authService.getUuid();
- console.log("rootProjectUuid " + rootProjectUuid);
if (rootProjectUuid) {
dispatch<any>(navigateTo(rootProjectUuid));
}
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 9ce84867..f4aaa843 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -56,7 +56,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
tabContainer: {
overflow: 'auto',
- padding: theme.spacing.unit * 3,
+ padding: theme.spacing.unit * 1,
},
});
diff --git a/src/views-components/details-panel/process-details.tsx b/src/views-components/details-panel/process-details.tsx
index b6fdaa6f..2fbdd313 100644
--- a/src/views-components/details-panel/process-details.tsx
+++ b/src/views-components/details-panel/process-details.tsx
@@ -21,7 +21,7 @@ export class ProcessDetails extends DetailsData<ProcessResource> {
return <div>
<DetailsAttribute label='Type' value={resourceLabel(ResourceKind.PROCESS)} />
<DetailsAttribute label='Size' value='---' />
- <DetailsAttribute label='Owner' value={this.item.ownerUuid} lowercaseValue={true} />
+ <DetailsAttribute label='Owner' linkToUuid={this.item.ownerUuid} value={this.item.ownerUuid} />
{/* Missing attr */}
<DetailsAttribute label='Status' value={this.item.state} />
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index f1e93783..5d799f0b 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -15,7 +15,6 @@ import { MoreOptionsIcon, CollectionIcon, CopyIcon } from '~/components/icon/ico
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';
@@ -27,7 +26,7 @@ import { getResourceData } from "~/store/resources-data/resources-data";
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: {
@@ -41,12 +40,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
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'
},
@@ -105,32 +98,19 @@ export const CollectionPanel = withStyles(styles)(
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' />
@@ -186,14 +166,6 @@ export const CollectionPanel = withStyles(styles)(
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) {
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list