Show ipv6 with correct in-url syntax (#3776)

resources/scripts/components/dashboard/ServerRow.tsx

@@ -4,7 +4,7 @@ import { faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome
 import { Link } from 'react-router-dom';
 import { Server } from '@/api/server/getServer';
 import getServerResourceUsage, { ServerPowerState, ServerStats } from '@/api/server/getServerResourceUsage';
-import { bytesToHuman, megabytesToHuman } from '@/helpers';
+import { bytesToHuman, megabytesToHuman, formatIp } from '@/helpers';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import Spinner from '@/components/elements/Spinner';
@@ -97,7 +97,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
                     {
                         server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
                             <React.Fragment key={allocation.ip + allocation.port.toString()}>
-                                {allocation.alias || allocation.ip}:{allocation.port}
+                                {allocation.alias || formatIp(allocation.ip)}:{allocation.port}
                             </React.Fragment>
                         ))
                     }

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -13,7 +13,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
-
+import { formatIp } from '@/helpers';
 type Props = RequiredModalProps;
 
 interface Values {
@@ -109,7 +109,7 @@ export default ({ ...props }: Props) => {
                                         <p css={tw`mt-1 text-xs text-neutral-400`}>
                                             {
                                                 server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
-                                                    <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
+                                                    <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || formatIp(allocation.ip)}:{allocation.port}</span>
                                                 ))
                                             }
                                         </p>

resources/scripts/components/server/ServerDetailsBlock.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import tw, { TwStyle } from 'twin.macro';
 import { faCircle, faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { bytesToHuman, megabytesToHuman } from '@/helpers';
+import { bytesToHuman, megabytesToHuman, formatIp } from '@/helpers';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { ServerContext } from '@/state/server';
 import CopyOnClick from '@/components/elements/CopyOnClick';
@@ -72,7 +72,7 @@ const ServerDetailsBlock = () => {
     const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
     const limits = ServerContext.useStoreState(state => state.server.data!.limits);
     const primaryAllocation = ServerContext.useStoreState(state => state.server.data!.allocations.filter(alloc => alloc.isDefault).map(
-        allocation => (allocation.alias || allocation.ip) + ':' + allocation.port,
+        allocation => (allocation.alias || formatIp(allocation.ip)) + ':' + allocation.port,
     )).toString();
 
     const diskLimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';

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

@@ -18,6 +18,7 @@ import CopyOnClick from '@/components/elements/CopyOnClick';
 import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
 import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
 import getServerAllocations from '@/api/swr/getServerAllocations';
+import { formatIp } from '@/helpers';
 
 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`}`;
@@ -66,7 +67,7 @@ const AllocationRow = ({ allocation }: Props) => {
                 <div css={tw`mr-4 flex-1 md:w-40`}>
                     {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>}
+                        <CopyOnClick text={formatIp(allocation.ip)}><Code>{formatIp(allocation.ip)}</Code></CopyOnClick>}
                     <Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
                 </div>
                 <div css={tw`w-16 md:w-24 overflow-hidden`}>

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -13,6 +13,7 @@ import { LinkButton } from '@/components/elements/Button';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import isEqual from 'react-fast-compare';
 import CopyOnClick from '@/components/elements/CopyOnClick';
+import { formatIp } from '@/helpers';
 
 export default () => {
     const username = useStoreState(state => state.user.data!.username);
@@ -30,10 +31,10 @@ export default () => {
                         <TitledGreyBox title={'SFTP Details'} css={tw`mb-6 md:mb-10`}>
                             <div>
                                 <Label>Server Address</Label>
-                                <CopyOnClick text={`sftp://${sftp.ip}:${sftp.port}`}>
+                                <CopyOnClick text={`sftp://${formatIp(sftp.ip)}:${sftp.port}`}>
                                     <Input
                                         type={'text'}
-                                        value={`sftp://${sftp.ip}:${sftp.port}`}
+                                        value={`sftp://${formatIp(sftp.ip)}:${sftp.port}`}
                                         readOnly
                                     />
                                 </CopyOnClick>
@@ -59,7 +60,7 @@ export default () => {
                                 <div css={tw`ml-4`}>
                                     <LinkButton
                                         isSecondary
-                                        href={`sftp://${username}.${id}@${sftp.ip}:${sftp.port}`}
+                                        href={`sftp://${username}.${id}@${formatIp(sftp.ip)}:${sftp.port}`}
                                     >
                                         Launch SFTP
                                     </LinkButton>

resources/scripts/helpers.ts

@@ -63,3 +63,7 @@ export function encodePathSegments (path: string): string {
 export function hashToPath (hash: string): string {
     return hash.length > 0 ? decodeURIComponent(hash.substr(1)) : '/';
 }
+
+export function formatIp (ip: string): string {
+    return /([a-f0-9:]+:+)+[a-f0-9]+/.test(ip) ? `[${ip}]` : ip;
+}