Convert CopyButton component to JSX (#7513)

Co-Authored-By: Mark Stacey <markjstacey@gmail.com>

ui/app/components/ui/copyButton.js

@@ -1,66 +1,66 @@
-const Component = require('react').Component
+import React, { Component } from 'react'
-const PropTypes = require('prop-types')
+import PropTypes from 'prop-types'
-const h = require('react-hyperscript')
+import { connect } from 'react-redux'
-const inherits = require('util').inherits
-const copyToClipboard = require('copy-to-clipboard')
-const connect = require('react-redux').connect
 
+const copyToClipboard = require('copy-to-clipboard')
 const Tooltip = require('./tooltip')
 
-CopyButton.contextTypes = {
+class CopyButton extends Component {
+  static contextTypes = {
     t: PropTypes.func,
   }
 
-module.exports = connect()(CopyButton)
+  static defaultProps = {
+    title: null,
+  }
+
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    title: PropTypes.string,
+  }
 
+  state = {}
 
-inherits(CopyButton, Component)
+  debounceRestore = () => {
-function CopyButton () {
+    this.setState({ copied: true })
-  Component.call(this)
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.setState({ copied: false })
+    }, 850)
   }
 
-// As parameters, accepts:
+  render () {
-// "value", which is the value to copy (mandatory)
+    const state = this.state
-// "title", which is the text to show on hover (optional, defaults to 'Copy')
-CopyButton.prototype.render = function () {
     const props = this.props
-  const state = this.state || {}
-
     const value = props.value
     const copied = state.copied
-
     const message = copied ? this.context.t('copiedButton') : props.title || this.context.t('copyButton')
 
-  return h('.copy-button', {
+    return (
-    style: {
+      <div
+        className="copy-button"
+        style={{
           display: 'flex',
           alignItems: 'center',
-    },
+        }}
-  }, [
+      >
-
+        <Tooltip title={message}>
-    h(Tooltip, {
+          <i
-      title: message,
+            className="fa fa-clipboard cursor-pointer color-orange"
-    }, [
+            style={{
-      h('i.fa.fa-clipboard.cursor-pointer.color-orange', {
-        style: {
               margin: '5px',
-        },
+            }}
-        onClick: (event) => {
+            onClick={(event) => {
               event.preventDefault()
               event.stopPropagation()
               copyToClipboard(value)
               this.debounceRestore()
-        },
+            }}
-      }),
+          />
-    ]),
+        </Tooltip>
-
+      </div>
-  ])
+    )
   }
-
-CopyButton.prototype.debounceRestore = function () {
-  this.setState({ copied: true })
-  clearTimeout(this.timeout)
-  this.timeout = setTimeout(() => {
-    this.setState({ copied: false })
-  }, 850)
 }
+
+module.exports = connect()(CopyButton)