Merge branch 'add-copy-to-path-104' into 'master'

Add a "Copy Path" button to copy path to clipboard

Closes #104

See merge request !47

conda/js/src/components/EntityDetail.jsx

@@ -12,6 +12,7 @@ import {
 	Input,
 	InputGroupAddon,
 	InputGroup,
+	Button,
 } from 'reactstrap';
 
 import { connect } from 'react-redux';
@@ -100,7 +101,7 @@ export class EntityDetail extends React.Component<Props, State> {
 			const usern = segs.shift();
 			const expn = segs.pop();
 			const tcn = segs.join('/');
-			expName = <span>{ usern }/<Link to={`/toolchain/${ tcn }`}>{ tcn }</Link>/{ expn }</span>
+			expName = <span>{ usern }/<Link to={`/toolchain/${ tcn }`}>{ tcn }</Link>/{ expn }</span>;
 		}
 		return (
 			<Container>
@@ -121,10 +122,26 @@ export class EntityDetail extends React.Component<Props, State> {
 						<InputGroup>
 							<InputGroupAddon addonType='prepend'>Path:</InputGroupAddon>
 							<Input
+								id='objectPath'
 								readOnly
 								width='80'
 								value={`${ this.props.prefix }/${ pluralize(this.props.entity) }/${ name }`}
 							/>
+							<InputGroupAddon addonType='append'>
+								<Button
+									outline
+									color='secondary'
+									title={`Copy the object's path to the clipboard`}
+									onClick={(e) => {
+										const toCopy = document.querySelector('#objectPath');
+										toCopy.select();
+										document.execCommand('copy');
+									}}
+								>
+									{/*UTF8 char for the clipboard: 📋*/}
+									Copy Path
+								</Button>
+							</InputGroupAddon>
 						</InputGroup>
 					</Col>
 				</Row>