Fix copy to clipboard when clicking server address

closes #4187

package.json

@@ -18,6 +18,7 @@
         "chart.js": "^3.8.0",
         "classnames": "^2.3.1",
         "codemirror": "^5.57.0",
+        "copy-to-clipboard": "^3.3.1",
         "date-fns": "^2.28.0",
         "debounce": "^1.2.0",
         "deepmerge-ts": "^4.2.1",
@@ -31,7 +32,6 @@
         "qrcode.react": "^1.0.1",
         "react": "^16.14.0",
         "react-chartjs-2": "^4.2.0",
-        "react-copy-to-clipboard": "^5.0.2",
         "react-dom": "npm:@hot-loader/react-dom",
         "react-fast-compare": "^3.2.0",
         "react-hot-loader": "^4.12.21",

resources/scripts/components/elements/CopyOnClick.tsx

@@ -1,25 +1,10 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import tw from 'twin.macro';
-import styled, { keyframes } from 'styled-components/macro';
 import Fade from '@/components/elements/Fade';
-import { SwitchTransition } from 'react-transition-group';
+import Portal from '@/components/elements/Portal';
+import copy from 'copy-to-clipboard';
+import classNames from 'classnames';
 
-const fade = keyframes`
+const CopyOnClick: React.FC<{ text: any; disabled?: boolean }> = ({ text, disabled, children }) => {
-    from { opacity: 0 }
-    to { opacity: 1 }
-`;
-
-const Toast = styled.div`
-    ${tw`fixed z-50 bottom-0 left-0 mb-4 w-full flex justify-end pr-4`};
-    animation: ${fade} 250ms linear;
-
-    & > div {
-        ${tw`rounded px-4 py-2 text-white bg-neutral-900 border border-black opacity-75`};
-    }
-`;
-
-const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
     const [copied, setCopied] = useState(false);
 
     useEffect(() => {
@@ -34,28 +19,37 @@ const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
         };
     }, [copied]);
 
-    const onCopy = useCallback(() => {
+    if (!React.isValidElement(children)) {
-        setCopied(true);
+        throw new Error('Component passed to <CopyOnClick/> must be a valid React element.');
-    }, []);
+    }
+
+    const child = disabled
+        ? React.Children.only(children)
+        : React.cloneElement(React.Children.only(children), {
+              className: classNames(children.props.className || '', 'cursor-pointer'),
+              onClick: (e: React.MouseEvent<HTMLElement>) => {
+                  copy(text);
+                  setCopied(true);
+                  if (typeof children.props.onClick === 'function') {
+                      children.props.onClick(e);
+                  }
+              },
+          });
 
     return (
         <>
-            <SwitchTransition>
+            {copied && (
-                <Fade timeout={250} key={copied ? 'visible' : 'invisible'}>
+                <Portal>
-                    {copied ? (
+                    <Fade in appear timeout={250} key={copied ? 'visible' : 'invisible'}>
-                        <Toast>
+                        <div className={'fixed z-50 bottom-0 right-0 m-4'}>
-                            <div>
+                            <div className={'rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow'}>
                                 <p>Copied &quot;{text}&quot; to clipboard.</p>
                             </div>
-                        </Toast>
+                        </div>
-                    ) : (
+                    </Fade>
-                        <></>
+                </Portal>
-                    )}
+            )}
-                </Fade>
+            {child}
-            </SwitchTransition>
-            <CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }} css={tw`cursor-pointer`}>
-                {children}
-            </CopyToClipboard>
         </>
     );
 };

resources/scripts/components/server/console/ServerDetailsBlock.tsx

@@ -72,7 +72,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
 
     return (
         <div className={classNames('grid grid-cols-6 gap-2 md:gap-4', className)}>
-            <StatBlock icon={faWifi} title={'Address'}>
+            <StatBlock icon={faWifi} title={'Address'} copyOnClick={allocation}>
                 {allocation}
             </StatBlock>
             <StatBlock

resources/scripts/components/server/console/StatBlock.tsx

@@ -5,9 +5,11 @@ import classNames from 'classnames';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import styles from './style.module.css';
 import useFitText from 'use-fit-text';
+import CopyOnClick from '@/components/elements/CopyOnClick';
 
 interface StatBlockProps {
     title: string;
+    copyOnClick?: string;
     description?: string;
     color?: string | undefined;
     icon: IconDefinition;
@@ -15,33 +17,35 @@ interface StatBlockProps {
     className?: string;
 }
 
-export default ({ title, icon, color, description, className, children }: StatBlockProps) => {
+export default ({ title, copyOnClick, icon, color, description, className, children }: StatBlockProps) => {
     const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 });
 
     return (
         <Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
-            <div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
+            <CopyOnClick text={copyOnClick} disabled={!copyOnClick}>
-                <div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
+                <div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
-                <div className={classNames(styles.icon, color || 'bg-gray-700')}>
+                    <div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
-                    <Icon
+                    <div className={classNames(styles.icon, color || 'bg-gray-700')}>
-                        icon={icon}
+                        <Icon
-                        className={classNames({
+                            icon={icon}
-                            'text-gray-100': !color || color === 'bg-gray-700',
+                            className={classNames({
-                            'text-gray-50': color && color !== 'bg-gray-700',
+                                'text-gray-100': !color || color === 'bg-gray-700',
-                        })}
+                                'text-gray-50': color && color !== 'bg-gray-700',
-                    />
+                            })}
-                </div>
+                        />
-                <div className={'flex flex-col justify-center overflow-hidden w-full'}>
+                    </div>
-                    <p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
+                    <div className={'flex flex-col justify-center overflow-hidden w-full'}>
-                    <div
+                        <p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
-                        ref={ref}
+                        <div
-                        className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
+                            ref={ref}
-                        style={{ fontSize }}
+                            className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
-                    >
+                            style={{ fontSize }}
-                        {children}
+                        >
+                            {children}
+                        </div>
                     </div>
                 </div>
-            </div>
+            </CopyOnClick>
         </Tooltip>
     );
 };

yarn.lock

@@ -3136,7 +3136,7 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
-copy-to-clipboard@^3:
+copy-to-clipboard@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
   integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
@@ -7308,7 +7308,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7468,14 +7468,6 @@ react-chartjs-2@^4.2.0:
   resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.2.0.tgz#bc5693a8b161f125301cf28ab0fe980d7dce54aa"
   integrity sha512-9Vm9Sg9XAKiR579/FnBkesofjW9goaaFLfS7XlGTzUJlWFZGSE6A/pBI6+i/bP3pobKZoFcWJdFnjShytToqXw==
 
-react-copy-to-clipboard@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
-  integrity sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==
-  dependencies:
-    copy-to-clipboard "^3"
-    prop-types "^15.5.8"
-
 "react-dom@npm:@hot-loader/react-dom":
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-16.11.0.tgz#c0b483923b289db5431516f56ee2a69448ebf9bd"
@@ -8836,7 +8828,7 @@ to-regex@^3.0.1, to-regex@^3.0.2:
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
 
 toidentifier@1.0.0:
   version "1.0.0"