From 90268c57c0e2f43333d22a98803fd6dc4e7aab88 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Fri, 29 Sep 2023 12:32:59 -0400 Subject: [PATCH 1/2] add delete functionality --- .../LoadBalancerDetail/LoadBalancerRoutes.tsx | 36 +++++++++---- .../Routes/DeleteRouteDialog.tsx | 52 +++++++++++++++++++ packages/manager/src/queries/aglb/routes.ts | 24 ++++++++- 3 files changed, 101 insertions(+), 11 deletions(-) create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/DeleteRouteDialog.tsx diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx index e394fd4d80a..394041c02ea 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx @@ -24,9 +24,10 @@ import { useOrder } from 'src/hooks/useOrder'; import { usePagination } from 'src/hooks/usePagination'; import { useLoadBalancerRoutesQuery } from 'src/queries/aglb/routes'; +import { DeleteRouteDialog } from './Routes/DeleteRouteDialog'; import { RulesTable } from './RulesTable'; -import type { Filter } from '@linode/api-v4'; +import type { Filter, Route } from '@linode/api-v4'; const PREFERENCE_KEY = 'loadbalancer-routes'; @@ -34,6 +35,8 @@ export const LoadBalancerRoutes = () => { const { loadbalancerId } = useParams<{ loadbalancerId: string }>(); const [query, setQuery] = useState(); + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); + const [selectedRouteId, setSelectedRouteId] = useState(); const pagination = usePagination(1, PREFERENCE_KEY); @@ -64,6 +67,15 @@ export const LoadBalancerRoutes = () => { filter ); + const selectedRoute = routes?.data.find( + (route) => route.id === selectedRouteId + ); + + const onDeleteRoute = (route: Route) => { + setIsDeleteDialogOpen(true); + setSelectedRouteId(route.id); + }; + if (isLoading) { return ; } @@ -72,14 +84,14 @@ export const LoadBalancerRoutes = () => { if (!routes) { return []; } - return routes.data?.map(({ id, label, protocol, rules }) => { + return routes.data?.map((route) => { const OuterTableCells = ( <> - {rules?.length} + {route.rules.length} - {protocol?.toLocaleUpperCase()}{' '} + {route.protocol.toLocaleUpperCase()}{' '} {/** @@ -93,21 +105,21 @@ export const LoadBalancerRoutes = () => { actionsList={[ { onClick: () => null, title: 'Edit' }, { onClick: () => null, title: 'Clone Route' }, - { onClick: () => null, title: 'Delete' }, + { onClick: () => onDeleteRoute(route), title: 'Delete' }, ]} - ariaLabel={`Action Menu for Route ${label}`} + ariaLabel={`Action Menu for Route ${route.label}`} /> ); - const InnerTable = ; + const InnerTable = ; return { InnerTable, OuterTableCells, - id, - label, + id: route.id, + label: route.label, }; }); }; @@ -192,6 +204,12 @@ export const LoadBalancerRoutes = () => { page={pagination.page} pageSize={pagination.pageSize} /> + setIsDeleteDialogOpen(false)} + open={isDeleteDialogOpen} + route={selectedRoute} + /> ); }; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/DeleteRouteDialog.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/DeleteRouteDialog.tsx new file mode 100644 index 00000000000..179cd523002 --- /dev/null +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/DeleteRouteDialog.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; +import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; +import { useLoadBalancerRouteDeleteMutation } from 'src/queries/aglb/routes'; + +import type { Route } from '@linode/api-v4'; + +interface Props { + loadbalancerId: number; + onClose: () => void; + open: boolean; + route: Route | undefined; +} + +export const DeleteRouteDialog = (props: Props) => { + const { loadbalancerId, onClose, open, route } = props; + + const { error, isLoading, mutateAsync } = useLoadBalancerRouteDeleteMutation( + loadbalancerId, + route?.id ?? -1 + ); + + const onDelete = async () => { + await mutateAsync(); + onClose(); + }; + + return ( + + } + error={error?.[0]?.reason} + onClose={onClose} + open={open} + title={`Delete Route ${route?.label}?`} + > + Are you sure you want to delete this route? + + ); +}; diff --git a/packages/manager/src/queries/aglb/routes.ts b/packages/manager/src/queries/aglb/routes.ts index bf4dc9d4371..0338bb40731 100644 --- a/packages/manager/src/queries/aglb/routes.ts +++ b/packages/manager/src/queries/aglb/routes.ts @@ -1,5 +1,5 @@ -import { getLoadbalancerRoutes } from '@linode/api-v4'; -import { useQuery } from 'react-query'; +import { deleteLoadbalancerRoute, getLoadbalancerRoutes } from '@linode/api-v4'; +import { useMutation, useQuery, useQueryClient } from 'react-query'; import { QUERY_KEY } from './loadbalancers'; @@ -22,3 +22,23 @@ export const useLoadBalancerRoutesQuery = ( { keepPreviousData: true } ); }; + +export const useLoadBalancerRouteDeleteMutation = ( + loadbalancerId: number, + routeId: number +) => { + const queryClient = useQueryClient(); + return useMutation<{}, APIError[]>( + () => deleteLoadbalancerRoute(loadbalancerId, routeId), + { + onSuccess() { + queryClient.invalidateQueries([ + QUERY_KEY, + 'loadbalancer', + loadbalancerId, + 'routes', + ]); + }, + } + ); +}; From 0a5372319b118eaee454b7e2c165b12d53af0338 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Mon, 2 Oct 2023 12:54:02 -0400 Subject: [PATCH 2/2] Added changeset: Add AGLB Route Delete Dialog --- .../.changeset/pr-9735-upcoming-features-1696265642529.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-9735-upcoming-features-1696265642529.md diff --git a/packages/manager/.changeset/pr-9735-upcoming-features-1696265642529.md b/packages/manager/.changeset/pr-9735-upcoming-features-1696265642529.md new file mode 100644 index 00000000000..96277596230 --- /dev/null +++ b/packages/manager/.changeset/pr-9735-upcoming-features-1696265642529.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Add AGLB Route Delete Dialog ([#9735](https://github.com/linode/manager/pull/9735))