Support deleting an allocation for a server

app/Http/Controllers/Api/Client/Servers/NetworkAllocationController.php

@@ -138,18 +138,19 @@ class NetworkAllocationController extends ClientApiController
      * @return \Illuminate\Http\JsonResponse
      *
      * @throws \Pterodactyl\Exceptions\DisplayException
-     * @throws \Pterodactyl\Exceptions\Model\DataValidationException
-     * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
      */
     public function delete(DeleteAllocationRequest $request, Server $server, Allocation $allocation)
     {
         if ($allocation->id === $server->allocation_id) {
             throw new DisplayException(
-                'Cannot delete the primary allocation for a server.'
+                'You cannot delete the primary allocation for this server.'
             );
         }
 
-        $this->repository->update($allocation->id, ['server_id' => null, 'notes' => null]);
+        Allocation::query()->where('id', $allocation->id)->update([
+            'notes' => null,
+            'server_id' => null,
+        ]);
 
         return new JsonResponse([], JsonResponse::HTTP_NO_CONTENT);
     }

app/Services/Allocations/FindAssignableAllocationService.php

@@ -108,7 +108,6 @@ class FindAssignableAllocationService
             throw new NoAutoAllocationSpaceAvailableException;
         }
 
-        // dd($available, array_rand($available));
         // Pick a random port out of the remaining available ports.
         /** @var int $port */
         $port = $available[array_rand($available)];

resources/scripts/api/server/network/getServerAllocations.ts

@@ -1,9 +0,0 @@
-import http from '@/api/http';
-import { rawDataToServerAllocation } from '@/api/transformers';
-import { Allocation } from '@/api/server/getServer';
-
-export default async (uuid: string): Promise<Allocation[]> => {
-    const { data } = await http.get(`/api/client/servers/${uuid}/network/allocations`);
-
-    return (data.data || []).map(rawDataToServerAllocation);
-};

resources/scripts/api/swr/getServerAllocations.ts

@@ -0,0 +1,15 @@
+import { ServerContext } from '@/state/server';
+import useSWR from 'swr';
+import http from '@/api/http';
+import { rawDataToServerAllocation } from '@/api/transformers';
+import { Allocation } from '@/api/server/getServer';
+
+export default (initialData?: Allocation[]) => {
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+
+    return useSWR<Allocation[]>([ 'server:allocations', uuid ], async () => {
+        const { data } = await http.get(`/api/client/servers/${uuid}/network/allocations`);
+
+        return (data.data || []).map(rawDataToServerAllocation);
+    }, { initialData, revalidateOnFocus: false });
+};

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) {