diff --git a/ui/package.json b/ui/package.json index ac7af05da..f4373fc91 100644 --- a/ui/package.json +++ b/ui/package.json @@ -140,6 +140,7 @@ "react": "^16.3.1", "react-addons-shallow-compare": "^15.0.2", "react-codemirror2": "^4.2.1", + "react-copy-to-clipboard": "^5.0.1", "react-custom-scrollbars": "^4.1.1", "react-dimensions": "^1.2.0", "react-dnd": "^2.6.0", diff --git a/ui/src/flux/components/DatabaseListItem.tsx b/ui/src/flux/components/DatabaseListItem.tsx index b7d784aa8..934c8573b 100644 --- a/ui/src/flux/components/DatabaseListItem.tsx +++ b/ui/src/flux/components/DatabaseListItem.tsx @@ -1,6 +1,7 @@ import React, {PureComponent, ChangeEvent, MouseEvent} from 'react' import classnames from 'classnames' +import {CopyToClipboard} from 'react-copy-to-clipboard' import {tagKeys as fetchTagKeys} from 'src/shared/apis/flux/metaQueries' import parseValuesColumn from 'src/shared/parsing/flux/values' import TagList from 'src/flux/components/TagList' @@ -15,6 +16,8 @@ interface State { isOpen: boolean tags: string[] searchTerm: string + isCopied: boolean + copiedText: string } class DatabaseListItem extends PureComponent { @@ -24,6 +27,8 @@ class DatabaseListItem extends PureComponent { isOpen: false, tags: [], searchTerm: '', + isCopied: false, + copiedText: '', } } @@ -49,6 +54,13 @@ class DatabaseListItem extends PureComponent {
{db} Bucket + + +
{this.state.isOpen && ( <> @@ -83,6 +95,10 @@ class DatabaseListItem extends PureComponent { }) } + private handleCopy = (copiedText: string): void => { + this.setState({isCopied: true, copiedText}) + } + private onSearch = (e: ChangeEvent) => { this.setState({ searchTerm: e.target.value,