fix tunnel events

new-ui/src/shared/components/WindowHeader/components/ConnectionWatcher/ConnectionsWatcher.tsx

@@ -14,7 +14,8 @@ import {
 } from '@floating-ui/react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { Snackbar } from '../../../../providers/snackbar/snackbar';
 import { api } from '../../../../rust-api/api';
 import { Direction, ThemeSpacing, ThemeVariable } from '../../../../types';
 import { isPresent } from '../../../../utils/isPresent';
@@ -28,7 +29,10 @@ type Props = {
 
 export const ConnectionWatcher = ({ placement = 'bottom-start' }: Props) => {
   const { mutate: disconnect } = useMutation({
-    mutationFn: api.disconnectLocations,
+    mutationFn: api.disconnect,
+    onError: () => {
+      Snackbar.error('Failed to disconnect.');
+    },
   });
 
   const { data: connections } = useQuery({
@@ -41,6 +45,25 @@ export const ConnectionWatcher = ({ placement = 'bottom-start' }: Props) => {
 
   const [floatingOpen, setFloatingOpen] = useState(false);
 
+  const disconnectAllPromise = useMemo(() => {
+    return () =>
+      Promise.all(
+        (connections ?? []).map((connection) =>
+          api.disconnect({
+            locationId: connection.id,
+            connectionType: connection.connection_type,
+          }),
+        ),
+      );
+  }, [connections]);
+
+  const { mutate: disconnectAll } = useMutation({
+    mutationFn: disconnectAllPromise,
+    onError: () => {
+      Snackbar.error('Failed to disconnect all locations.');
+    },
+  });
+
   useEffect(() => {
     if (!connected) {
       setFloatingOpen(false);
@@ -114,7 +137,10 @@ export const ConnectionWatcher = ({ placement = 'bottom-start' }: Props) => {
                 className="connection"
                 key={con.id}
                 onClick={() => {
-                  disconnect([con.id]);
+                  disconnect({
+                    locationId: con.id,
+                    connectionType: con.connection_type,
+                  });
                 }}
               >
                 <svg
@@ -133,10 +159,7 @@ export const ConnectionWatcher = ({ placement = 'bottom-start' }: Props) => {
             <button
               className="disconnect"
               onClick={() => {
-                const ids = connections?.map((c) => c.id);
-                if (ids) {
-                  disconnect(ids);
-                }
+                void disconnectAll();
               }}
             >
               <Icon size={16} icon="disconnect-all" />

new-ui/src/shared/providers/TauriEventProvider.tsx

@@ -94,6 +94,8 @@ export const TauriEventProvider = ({ children }: PropsWithChildren) => {
         void queryClient.invalidateQueries({ queryKey: ['instances'] });
         void queryClient.invalidateQueries({ queryKey: ['location-details'] });
         void queryClient.invalidateQueries({ queryKey: ['last-connection'] });
+        void queryClient.invalidateQueries({ queryKey: ['tunnels'] });
+        void queryClient.invalidateQueries({ queryKey: ['tunnel-details'] });
       }),
 
       listen(TauriEvent.InstanceUpdate, (event) => {