diff --git a/ui/package.json b/ui/package.json index 581d776d..fdce7eaa 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/components/CopyUrlButton.js b/ui/src/components/CopyUrlButton.js new file mode 100644 index 00000000..eefd58ed --- /dev/null +++ b/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 ( +