Support deleting an allocation for a server

resources/scripts/components/elements/ConfirmationModal.tsx

@@ -20,7 +20,7 @@ const ConfirmationModal = ({ title, children, buttonText, onConfirmed }: Props)
             <h2 css={tw`text-2xl mb-6`}>{title}</h2>
             <p css={tw`text-sm`}>{children}</p>
             <div css={tw`flex flex-wrap items-center justify-end mt-8`}>
-                <Button isSecondary onClick={() => dismiss()} css={tw`w-full sm:w-auto`}>
+                <Button isSecondary onClick={() => dismiss()} css={tw`w-full sm:w-auto border-transparent`}>
                     Cancel
                 </Button>
                 <Button color={'red'} css={tw`w-full sm:w-auto mt-4 sm:mt-0 sm:ml-4`} onClick={() => onConfirmed()}>

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

@@ -15,6 +15,7 @@ import setServerAllocationNotes from '@/api/server/network/setServerAllocationNo
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import CopyOnClick from '@/components/elements/CopyOnClick';
+import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
 
 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`}`;
@@ -44,10 +45,11 @@ 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`}>
-                    {allocation.alias ? <CopyOnClick text={allocation.alias}><Code css={tw`w-40 truncate`}>{allocation.alias}</Code></CopyOnClick> :
+                    {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>
@@ -66,20 +68,25 @@ const AllocationRow = ({ allocation, onSetPrimary, onNotesChanged }: Props) => {
                     />
                 </InputSpinner>
             </div>
-            <div css={tw`w-full md:flex-none md:w-32 md:text-center mt-4 md:mt-0 text-right ml-4`}>
+            <div css={tw`w-full md:flex-none md:w-40 md:text-center mt-4 md:mt-0 ml-4 flex items-center justify-end`}>
                 {allocation.isDefault ?
                     <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>Primary</span>
                     :
-                    <Can action={'allocations.update'}>
-                        <Button
-                            isSecondary
-                            size={'xsmall'}
-                            color={'primary'}
-                            onClick={() => onSetPrimary(allocation.id)}
-                        >
-                            Make Primary
-                        </Button>
-                    </Can>
+                    <>
+                        <Can action={'allocations.delete'}>
+                            <DeleteAllocationButton allocation={allocation.id}/>
+                        </Can>
+                        <Can action={'allocations.update'}>
+                            <Button
+                                isSecondary
+                                size={'xsmall'}
+                                color={'primary'}
+                                onClick={() => onSetPrimary(allocation.id)}
+                            >
+                                Make Primary
+                            </Button>
+                        </Can>
+                    </>
                 }
             </div>
         </GreyRowBox>

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import tw from 'twin.macro';
+import Icon from '@/components/elements/Icon';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import { ServerContext } from '@/state/server';
+import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
+import getServerAllocations from '@/api/swr/getServerAllocations';
+import useFlash from '@/plugins/useFlash';
+
+interface Props {
+    allocation: number;
+}
+
+const DeleteAllocationButton = ({ allocation }: Props) => {
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const [ confirm, setConfirm ] = useState(false);
+    const { mutate } = getServerAllocations();
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const deleteAllocation = () => {
+        clearFlashes('server:network');
+
+        mutate(data => data?.filter(a => a.id !== allocation), false);
+        deleteServerAllocation(uuid, allocation)
+            .catch(error => clearAndAddHttpError({ key: 'server:network', error }));
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={confirm}
+                title={'Remove this allocation?'}
+                buttonText={'Delete'}
+                onConfirmed={deleteAllocation}
+                onModalDismissed={() => setConfirm(false)}
+            >
+                This allocation will be immediately removed from your server. Are you sure you want to continue?
+            </ConfirmationModal>
+            <button
+                css={tw`text-neutral-400 px-2 py-1 mr-2 transition-colors duration-150 hover:text-red-400`}
+                type={'button'}
+                onClick={() => setConfirm(true)}
+            >
+                <Icon icon={faTrashAlt} css={tw`w-3 h-auto`}/>
+            </button>
+        </>
+    );
+};
+
+export default DeleteAllocationButton;

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

@@ -1,7 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import useSWR from 'swr';
-import getServerAllocations from '@/api/server/network/getServerAllocations';
-import { Allocation } from '@/api/server/getServer';
 import Spinner from '@/components/elements/Spinner';
 import useFlash from '@/plugins/useFlash';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
@@ -14,6 +11,7 @@ import createServerAllocation from '@/api/server/network/createServerAllocation'
 import tw from 'twin.macro';
 import Can from '@/components/elements/Can';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import getServerAllocations from '@/api/swr/getServerAllocations';
 
 const NetworkContainer = () => {
     const [ loading, setLoading ] = useState(false);
@@ -22,10 +20,7 @@ const NetworkContainer = () => {
     const allocations = useDeepMemoize(ServerContext.useStoreState(state => state.server.data!.allocations));
 
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { data, error, mutate } = useSWR<Allocation[]>(uuid, key => getServerAllocations(key), {
-        initialData: allocations,
-        revalidateOnFocus: false,
-    });
+    const { data, error, mutate } = getServerAllocations(allocations);
 
     useEffect(() => {
         if (error) {