Fix copy to clipboard when clicking server address

closes #4187

resources/scripts/components/elements/CopyOnClick.tsx

@@ -1,25 +1,10 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import tw from 'twin.macro';
-import styled, { keyframes } from 'styled-components/macro';
+import React, { useEffect, useState } from 'react';
 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`
-    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 CopyOnClick: React.FC<{ text: any; disabled?: boolean }> = ({ text, disabled, children }) => {
     const [copied, setCopied] = useState(false);
 
     useEffect(() => {
@@ -34,28 +19,37 @@ const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
         };
     }, [copied]);
 
-    const onCopy = useCallback(() => {
-        setCopied(true);
-    }, []);
+    if (!React.isValidElement(children)) {
+        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>
-                <Fade timeout={250} key={copied ? 'visible' : 'invisible'}>
-                    {copied ? (
-                        <Toast>
-                            <div>
+            {copied && (
+                <Portal>
+                    <Fade in appear timeout={250} key={copied ? 'visible' : 'invisible'}>
+                        <div className={'fixed z-50 bottom-0 right-0 m-4'}>
+                            <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>
-                    ) : (
-                        <></>
-                    )}
-                </Fade>
-            </SwitchTransition>
-            <CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }} css={tw`cursor-pointer`}>
-                {children}
-            </CopyToClipboard>
+                        </div>
+                    </Fade>
+                </Portal>
+            )}
+            {child}
         </>
     );
 };

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)}>
-                <div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
-                <div className={classNames(styles.icon, color || 'bg-gray-700')}>
-                    <Icon
-                        icon={icon}
-                        className={classNames({
-                            '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'}>
-                    <p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
-                    <div
-                        ref={ref}
-                        className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
-                        style={{ fontSize }}
-                    >
-                        {children}
+            <CopyOnClick text={copyOnClick} disabled={!copyOnClick}>
+                <div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
+                    <div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
+                    <div className={classNames(styles.icon, color || 'bg-gray-700')}>
+                        <Icon
+                            icon={icon}
+                            className={classNames({
+                                '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'}>
+                        <p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
+                        <div
+                            ref={ref}
+                            className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
+                            style={{ fontSize }}
+                        >
+                            {children}
+                        </div>
                     </div>
                 </div>
-            </div>
+            </CopyOnClick>
         </Tooltip>
     );
 };