feat: M3-7106 - Add AGLB Service Target Delete Dialog

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/DeleteServiceTargetDialog.tsx

@@ -0,0 +1,55 @@
+import { ServiceTarget } from '@linode/api-v4';
+import React from 'react';
+
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
+import { useLoadBalancerServiceTargetDeleteMutation } from 'src/queries/aglb/serviceTargets';
+
+interface Props {
+  loadbalancerId: number;
+  onClose: () => void;
+  open: boolean;
+  serviceTarget: ServiceTarget | undefined;
+}
+
+export const DeleteServiceTargetDialog = (props: Props) => {
+  const { loadbalancerId, onClose, open, serviceTarget } = props;
+
+  const {
+    error,
+    isLoading,
+    mutateAsync,
+  } = useLoadBalancerServiceTargetDeleteMutation(
+    loadbalancerId,
+    serviceTarget?.id ?? -1
+  );
+
+  const onDelete = async () => {
+    await mutateAsync();
+    onClose();
+  };
+
+  return (
+    <ConfirmationDialog
+      actions={
+        <ActionsPanel
+          primaryButtonProps={{
+            label: 'Delete',
+            loading: isLoading,
+            onClick: onDelete,
+          }}
+          secondaryButtonProps={{
+            label: 'Cancel',
+            onClick: onClose,
+          }}
+        />
+      }
+      error={error?.[0]?.reason}
+      onClose={onClose}
+      open={open}
+      title={`Delete Service Target ${serviceTarget?.label}?`}
+    >
+      Are you sure you want to delete this Service Target?
+    </ConfirmationDialog>
+  );
+};

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx

@@ -1,3 +1,4 @@
+import { ServiceTarget } from '@linode/api-v4';
 import CloseIcon from '@mui/icons-material/Close';
 import { Hidden, IconButton } from '@mui/material';
 import Stack from '@mui/material/Stack';
@@ -26,6 +27,8 @@ import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
 import { useLoadBalancerServiceTargetsQuery } from 'src/queries/aglb/serviceTargets';
 
+import { DeleteServiceTargetDialog } from './DeleteServiceTargetDialog';
+
 import type { Filter } from '@linode/api-v4';
 
 const PREFERENCE_KEY = 'loadbalancer-service-targets';
@@ -34,6 +37,11 @@ export const LoadBalancerServiceTargets = () => {
   const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
 
   const [query, setQuery] = useState<string>();
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [
+    selectedServiceTarget,
+    setSelectedServiceTarget,
+  ] = useState<ServiceTarget>();
 
   const pagination = usePagination(1, PREFERENCE_KEY);
 
@@ -50,6 +58,11 @@ export const LoadBalancerServiceTargets = () => {
     ['+order_by']: orderBy,
   };
 
+  const handleDeleteServiceTarget = (serviceTarget: ServiceTarget) => {
+    setIsDeleteDialogOpen(true);
+    setSelectedServiceTarget(serviceTarget);
+  };
+
   // If the user types in a search query, filter results by label.
   if (query) {
     filter['label'] = { '+contains': query };
@@ -165,7 +178,10 @@ export const LoadBalancerServiceTargets = () => {
                   actionsList={[
                     { onClick: () => null, title: 'Edit' },
                     { onClick: () => null, title: 'Clone Service Target' },
-                    { onClick: () => null, title: 'Delete' },
+                    {
+                      onClick: () => handleDeleteServiceTarget(serviceTarget),
+                      title: 'Delete',
+                    },
                   ]}
                   ariaLabel={`Action Menu for service target ${serviceTarget.label}`}
                 />
@@ -181,6 +197,13 @@ export const LoadBalancerServiceTargets = () => {
         page={pagination.page}
         pageSize={pagination.pageSize}
       />
+
+      <DeleteServiceTargetDialog
+        loadbalancerId={Number(loadbalancerId)}
+        onClose={() => setIsDeleteDialogOpen(false)}
+        open={isDeleteDialogOpen}
+        serviceTarget={selectedServiceTarget}
+      />
     </>
   );
 };

packages/manager/src/queries/aglb/serviceTargets.ts

@@ -1,11 +1,15 @@
-import { ServiceTarget, getLoadbalancerServiceTargets } from '@linode/api-v4';
+import {
+  ServiceTarget,
+  deleteLoadbalancerServiceTarget,
+  getLoadbalancerServiceTargets,
+} from '@linode/api-v4';
 import {
   APIError,
   Filter,
   Params,
   ResourcePage,
 } from '@linode/api-v4/lib/types';
-import { useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 import { QUERY_KEY } from './loadbalancers';
 
@@ -20,3 +24,23 @@ export const useLoadBalancerServiceTargetsQuery = (
     { keepPreviousData: true }
   );
 };
+
+export const useLoadBalancerServiceTargetDeleteMutation = (
+  loadbalancerId: number,
+  serviceTargetId: number
+) => {
+  const queryClient = useQueryClient();
+  return useMutation<{}, APIError[]>(
+    () => deleteLoadbalancerServiceTarget(loadbalancerId, serviceTargetId),
+    {
+      onSuccess() {
+        queryClient.invalidateQueries([
+          QUERY_KEY,
+          'aglb',
+          loadbalancerId,
+          'service-targets',
+        ]);
+      },
+    }
+  );
+};