diff --git a/web/src/pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx b/web/src/pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx index ffedb5fed3..82120ad3b8 100644 --- a/web/src/pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx +++ b/web/src/pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx @@ -1,4 +1,3 @@ -import { useQueryClient } from '@tanstack/react-query'; import { useNavigate } from '@tanstack/react-router'; import { m } from '../../../paraglide/messages'; import { ActionCard } from '../../../shared/components/ActionCard/ActionCard'; @@ -12,14 +11,12 @@ import { useEdgeWizardStore } from '../useEdgeWizardStore'; export const SetupConfirmationStep = () => { const navigate = useNavigate(); - const queryClient = useQueryClient(); const handleBack = () => { useEdgeWizardStore.getState().reset(); }; const handleFinish = () => { - queryClient.invalidateQueries({ queryKey: ['edge'] }); navigate({ to: '/edges', replace: true }).then(() => { setTimeout(() => { useEdgeWizardStore.getState().reset(); diff --git a/web/src/pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx b/web/src/pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx index 66d998f133..39e5e824d0 100644 --- a/web/src/pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx +++ b/web/src/pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx @@ -1,3 +1,4 @@ +import { useQueryClient } from '@tanstack/react-query'; import { useCallback, useEffect, useMemo } from 'react'; import { m } from '../../../paraglide/messages'; import { Controls } from '../../../shared/components/Controls/Controls'; @@ -14,6 +15,7 @@ import { useEdgeWizardStore } from '../useEdgeWizardStore'; import type { SetupEvent, SetupStep, SetupStepId } from './types'; export const SetupEdgeAdoptionStep = () => { + const queryClient = useQueryClient(); const setActiveStep = useEdgeWizardStore((s) => s.setActiveStep); const edgeComponentWizardStore = useEdgeWizardStore((s) => s); const edgeAdoptionState = useEdgeWizardStore((s) => s.edgeAdoptionState); @@ -32,8 +34,12 @@ export const SetupEdgeAdoptionStep = () => { : null, proxyLogs: event.logs && event.logs.length > 0 ? [...event.logs] : [], }); + + if (event.step === 'Done') { + void queryClient.invalidateQueries({ queryKey: ['edge'] }); + } }, - [setEdgeAdoptionState], + [queryClient, setEdgeAdoptionState], ); const sse = useSSEController( diff --git a/web/src/pages/EditGatewayPage/EditGatewayPage.tsx b/web/src/pages/EditGatewayPage/EditGatewayPage.tsx index 584bf542d6..a39e8fb9ab 100644 --- a/web/src/pages/EditGatewayPage/EditGatewayPage.tsx +++ b/web/src/pages/EditGatewayPage/EditGatewayPage.tsx @@ -73,7 +73,7 @@ const EditGatewayForm = ({ gateway }: { gateway: Gateway }) => { const { mutate: deleteGateway, isPending: deletePending } = useMutation({ mutationFn: () => api.gateway.deleteGateway(gateway.id), meta: { - invalidate: ['gateway'], + invalidate: [['gateway'], ['network']], }, onSuccess: () => { navigate({ diff --git a/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx b/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx index d287d6a8be..c0d2883166 100644 --- a/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx +++ b/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx @@ -18,12 +18,11 @@ export const SetupConfirmationStep = () => { useGatewayWizardStore.getState().start({ network_id: networkId }); }; - const handleFinish = () => { - navigate({ to: '/locations', replace: true }).then(() => { - setTimeout(() => { - useGatewayWizardStore.getState().reset(); - }, 100); - }); + const handleFinish = async () => { + await navigate({ to: '/locations', replace: true }); + setTimeout(() => { + useGatewayWizardStore.getState().reset(); + }, 100); }; return ( diff --git a/web/src/pages/GatewaySetupPage/steps/SetupGatewayAdaptationStep.tsx b/web/src/pages/GatewaySetupPage/steps/SetupGatewayAdaptationStep.tsx index bf6da47da1..e967b5004f 100644 --- a/web/src/pages/GatewaySetupPage/steps/SetupGatewayAdaptationStep.tsx +++ b/web/src/pages/GatewaySetupPage/steps/SetupGatewayAdaptationStep.tsx @@ -1,3 +1,4 @@ +import { useQueryClient } from '@tanstack/react-query'; import { useCallback, useEffect, useMemo } from 'react'; import { m } from '../../../paraglide/messages'; import { Controls } from '../../../shared/components/Controls/Controls'; @@ -14,6 +15,7 @@ import { useGatewayWizardStore } from '../useGatewayWizardStore'; import type { SetupEvent, SetupStep, SetupStepId } from './types'; export const SetupGatewayAdoptionStep = () => { + const queryClient = useQueryClient(); const setActiveStep = useGatewayWizardStore((s) => s.setActiveStep); const gatewayComponentWizardStore = useGatewayWizardStore((s) => s); const gatewayAdoptionState = useGatewayWizardStore((s) => s.gatewayAdoptionState); @@ -34,8 +36,15 @@ export const SetupGatewayAdoptionStep = () => { : null, gatewayLogs: event.logs && event.logs.length > 0 ? [...event.logs] : [], }); + + if (event.step === 'Done') { + void Promise.all([ + queryClient.invalidateQueries({ queryKey: ['gateway'] }), + queryClient.invalidateQueries({ queryKey: ['network'] }), + ]); + } }, - [setGatewayAdoptionState], + [queryClient, setGatewayAdoptionState], ); const sse = useSSEController( diff --git a/web/src/pages/LocationsPage/modals/DeleteGatewayModal/DeleteGatewayModal.tsx b/web/src/pages/LocationsPage/modals/DeleteGatewayModal/DeleteGatewayModal.tsx index fa3fca16bf..2b7474aab2 100644 --- a/web/src/pages/LocationsPage/modals/DeleteGatewayModal/DeleteGatewayModal.tsx +++ b/web/src/pages/LocationsPage/modals/DeleteGatewayModal/DeleteGatewayModal.tsx @@ -25,7 +25,7 @@ export const DeleteGatewayModal = () => { const { mutateAsync: deleteGateway, isPending } = useMutation({ mutationFn: api.gateway.deleteGateway, meta: { - invalidate: ['gateway'], + invalidate: [['gateway'], ['network']], }, }); diff --git a/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx b/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx index 73f4066d6b..06583439fd 100644 --- a/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx +++ b/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx @@ -153,7 +153,7 @@ const FloatingMenu = ({ const { mutate: removeGw } = useMutation({ mutationFn: api.gateway.deleteGateway, meta: { - invalidate: ['network', locationId, 'gateways'], + invalidate: [['gateway'], ['network']], }, });