Network tab changes

Allows address feild to be copied to the clipboard when clicked
If alias is used changes it to hostname instead of ip address ( might just make it say address as that would cover both? )
Fixed overflow for allocations with a long alias

resources/scripts/components/elements/CopyOnClick.tsx

@@ -0,0 +1,63 @@
+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 Fade from '@/components/elements/Fade';
+import { SwitchTransition } from 'react-transition-group';
+
+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-800 border border-neutral-900`};
+    }
+`;
+
+const CopyOnClick: React.FC<{ text: string }> = ({ text, children }) => {
+    const [ copied, setCopied ] = useState(false);
+
+    useEffect(() => {
+        if (!copied) return;
+
+        const timeout = setTimeout(() => {
+            setCopied(false);
+        }, 2500);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [ copied ]);
+
+    const onCopy = useCallback(() => {
+        setCopied(true);
+    }, []);
+
+    return (
+        <>
+            <SwitchTransition>
+                <Fade timeout={250} key={copied ? 'visible' : 'invisible'}>
+                    {copied ?
+                        <Toast>
+                            <div>
+                                <p>Copied &quot;{text}&quot; to clipboard.</p>
+                            </div>
+                        </Toast>
+                        :
+                        <></>
+                    }
+                </Fade>
+            </SwitchTransition>
+            <CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }}>
+                {children}
+            </CopyToClipboard>
+        </>
+    );
+};
+
+export default CopyOnClick;

resources/scripts/components/server/network/AllocationRow.tsx

@@ -14,6 +14,7 @@ import { debounce } from 'debounce';
 import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
+import CopyOnClick from '@/components/elements/CopyOnClick';
 
 const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`;
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
@@ -43,11 +44,12 @@ const AllocationRow = ({ allocation, onSetPrimary, onNotesChanged }: Props) => {
         <GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-no-wrap mt-2`}>
             <div css={tw`flex items-center w-full md:w-auto`}>
                 <div css={tw`pl-4 pr-6 text-neutral-400`}>
-                    <FontAwesomeIcon icon={faNetworkWired}/>
+                    <FontAwesomeIcon icon={faNetworkWired} />
                 </div>
                 <div css={tw`mr-4 flex-1 md:w-40`}>
-                    <Code>{allocation.alias || allocation.ip}</Code>
-                    <Label>IP Address</Label>
+                    {allocation.alias ? <CopyOnClick text={allocation.alias}><Code css={tw`w-40 truncate`}>{allocation.alias}</Code></CopyOnClick> :
+                        <CopyOnClick text={allocation.ip}><Code>{allocation.ip}</Code></CopyOnClick>}
+                    <Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
                 </div>
                 <div css={tw`w-16 md:w-24 overflow-hidden`}>
                     <Code>{allocation.port}</Code>