diff --git a/client/components/CopyableTooltip.jsx b/client/components/CopyableTooltip.jsx
new file mode 100644
index 0000000000..ddb9343d12
--- /dev/null
+++ b/client/components/CopyableTooltip.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+/**
+ * CopyableTooltip: A reusable tooltip component with the ability
+ * to copy text to the clipboard when triggered.
+ */
+const CopyableTooltip = ({ className, label, copyText, children }) => {
+ const [isCopied, setIsCopied] = useState(false);
+
+ const handleCopyClick = () => {
+ navigator.clipboard.writeText(copyText);
+ setIsCopied(true);
+ };
+
+ // Add click handler to element with the "copy-trigger" class
+ const processChildren = (childElements) =>
+ React.Children.map(childElements, (child) => {
+ if (React.isValidElement(child)) {
+ const childClassNames = child.props.className || '';
+
+ if (childClassNames.includes('copy-trigger')) {
+ return React.cloneElement(child, { onClick: handleCopyClick });
+ }
+
+ if (child.props.children) {
+ const newChildren = processChildren(child.props.children);
+ return React.cloneElement(child, { children: newChildren });
+ }
+ }
+
+ return child;
+ });
+
+ const childrenWithClickHandler = processChildren(children);
+
+ return (
+ setIsCopied(false)}
+ >
+ {childrenWithClickHandler}
+
+ );
+};
+
+CopyableTooltip.propTypes = {
+ className: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ copyText: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired
+};
+
+export default CopyableTooltip;
diff --git a/client/images/copy.svg b/client/images/copy.svg
new file mode 100644
index 0000000000..987ea172df
--- /dev/null
+++ b/client/images/copy.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/client/modules/IDE/components/CopyableInput.jsx b/client/modules/IDE/components/CopyableInput.jsx
index 1fa9f6bec3..6d7ee501aa 100644
--- a/client/modules/IDE/components/CopyableInput.jsx
+++ b/client/modules/IDE/components/CopyableInput.jsx
@@ -1,95 +1,73 @@
import PropTypes from 'prop-types';
-import React from 'react';
-import Clipboard from 'clipboard';
+import React, { useRef } from 'react';
import classNames from 'classnames';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
-import ShareIcon from '../../../images/share.svg';
-
-class CopyableInput extends React.Component {
- constructor(props) {
- super(props);
- this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
- }
+import CopyableTooltip from '../../../components/CopyableTooltip';
- componentDidMount() {
- this.clipboard = new Clipboard(this.input, {
- target: () => this.input
- });
+import ShareIcon from '../../../images/share.svg';
- this.clipboard.on('success', (e) => {
- this.tooltip.classList.add('tooltipped');
- this.tooltip.classList.add('tooltipped-n');
- });
- }
+const CopyableInput = ({ label, value, hasPreviewLink }) => {
+ const { t } = useTranslation();
+ const inputRef = useRef(null);
- componentWillUnmount() {
- this.clipboard.destroy();
- }
+ const handleInputFocus = () => {
+ if (!inputRef?.current) return;
+ inputRef.current.select();
+ };
- onMouseLeaveHandler() {
- this.tooltip.classList.remove('tooltipped');
- this.tooltip.classList.remove('tooltipped-n');
- }
+ return (
+
+
+
+
- render() {
- const { label, value, hasPreviewLink } = this.props;
- const copyableInputClass = classNames({
- 'copyable-input': true,
- 'copyable-input--with-preview': hasPreviewLink
- });
- return (
-
-
- {hasPreviewLink && (
-
-
-
- )}
-
- );
- }
-}
+
+
+ )}
+