Add proper copy to clipboard

app/src/components/Sidebar/Sidebar.tsx

@@ -10,6 +10,7 @@ import NodeStats from './NodeStats'
 import Topic from './Topic'
 import { Typography } from '@material-ui/core'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+import Copy from '../Copy'
 
 interface Props {
   node?: q.TreeNode | undefined,
@@ -70,15 +71,15 @@ class Sidebar extends React.Component<Props, State> {
   }
 
   private renderNode() {
-    const { classes } = this.props
-    if (!this.state.node) {
-      return null
-    }
+    const { classes, node } = this.props
+
+    const copyTopic = node ? <Copy value={node.path()} /> : null
+    const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
 
     return <div>
       <ExpansionPanel key="topic" defaultExpanded={true}>
         <ExpansionPanelSummary expandIcon={<ExpandMore />}>
-          <Typography className={classes.heading}>Topic</Typography>
+          <Typography className={classes.heading}>Topic {copyTopic}</Typography>
         </ExpansionPanelSummary>
         <ExpansionPanelDetails>
           <Topic node={this.props.node} didSelectNode={this.updateNode} />
@@ -86,7 +87,7 @@ class Sidebar extends React.Component<Props, State> {
       </ExpansionPanel>
       <ExpansionPanel key="value" defaultExpanded={true}>
         <ExpansionPanelSummary expandIcon={<ExpandMore />}>
-          <Typography className={classes.heading}>Value</Typography>
+          <Typography className={classes.heading}>Value {copyValue}</Typography>
         </ExpansionPanelSummary>
         <ExpansionPanelDetails>
           <ValueRenderer node={this.state.node} />

app/src/components/Sidebar/Topic.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
-const copy = require('copy-text-to-clipboard')
 
 interface Props {
   classes: any
@@ -51,10 +50,7 @@ class Topic extends React.Component<Props, {}> {
       prev.concat([<span key={key += 1}>/</span>]).concat(current),
     )
 
-    return <span style={{ lineHeight: '2.2em' }}>
-      <a onClick={() => copy(this.props.node && this.props.node.path())}>📋</a>
-      {joinedBreadCrumps}
-    </span>
+    return <span style={{ lineHeight: '2.2em' }}>{joinedBreadCrumps}</span>
   }
 }