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 ( +
+ + + + + +
+ ); + } +} + +export default withStyles(styles)(CopyUrlButton); diff --git a/ui/src/components/DeHeader.js b/ui/src/components/DeHeader.js index f57d7eae..896eafb4 100644 --- a/ui/src/components/DeHeader.js +++ b/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} /> +
{this.props.totalCount} Participants