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,43 @@
+import React from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { PrimaryButton, TerraTooltip } from "libs/common";
+import "@clr/icons/clr-icons.css";
+
+const style = {
+  copyUrlButton: {
+    marginRight: "16px"
+  }
+};
+
+export default 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 { className } = this.props;
+
+    return (
+      <div onClick={this.handleButtonClick} style={style.copyUrlButton}>
+        <TerraTooltip title={this.state.buttonText}>
+          <CopyToClipboard text={window.location.href}>
+            <clr-icon shape="copy-to-clipboard" size="20" />
+          </CopyToClipboard>
+        </TerraTooltip>
+      </div>
+    );
+  }
+}

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";
 
@@ -148,6 +149,7 @@ class DeHeader extends React.Component {
             exportUrlApi={this.props.exportUrlApi}
             selectedFacetValues={this.props.selectedFacetValues}
           />
+          <CopyUrlButton />
         </Toolbar>
       </AppBar>
     );