Copy URL button

ui/package.json

@@ -14,6 +14,7 @@
     "data_explorer_service": "file:src/api",
     "lodash.debounce": "^4.0.8",
     "react": "^16.3.0",
+    "react-copy-to-clipboard": "5.0.1",
     "react-dom": "^16.3.0",
     "react-scripts": "^2.0.0",
     "react-select": "^2.0.0",

ui/src/components/CopyUrlButton.js

@@ -0,0 +1,47 @@
+import React from "react";
+import "@clr/icons/clr-icons.css";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { PrimaryButton, TerraTooltip } from "libs/common";
+import { withStyles } from "@material-ui/core/styles";
+
+const styles = {
+  button: {
+    color: "#7f8fa4",
+    marginLeft: 16
+  }
+};
+
+class CopyUrlButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      buttonText: "Copy URL to clipboard"
+    };
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+  }
+
+  handleButtonClick() {
+    // Just change the button text for a second
+    this.setState({ buttonText: "Copied!" });
+    setTimeout(
+      () => this.setState({ buttonText: "Copy URL to clipboard" }),
+      1000
+    );
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div onClick={this.handleButtonClick} className={classes.button}>
+        <TerraTooltip title={this.state.buttonText}>
+          <CopyToClipboard text={window.location.href}>
+            <clr-icon shape="copy-to-clipboard" size="16" />
+          </CopyToClipboard>
+        </TerraTooltip>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(CopyUrlButton);

ui/src/components/DeHeader.js

@@ -9,6 +9,7 @@ import Toolbar from "@material-ui/core/Toolbar";
 import { withStyles } from "@material-ui/core/styles";
 
 import colors from "libs/colors";
+import CopyUrlButton from "components/CopyUrlButton";
 import SaveButton from "components/SaveButton";
 import Search from "components/Search";
 
@@ -140,6 +141,7 @@ class DeHeader extends React.Component {
             facets={this.props.facets}
             loadOptions={this.props.handleSearchBoxTyping}
           />
+          <CopyUrlButton />
           <div className={classes.totalCount}>
             {this.props.totalCount} Participants
           </div>