fix: invalidate app connections upon reconnecting a connection

packages/web/src/components/AppConnectionContextMenu/index.jsx

@@ -7,6 +7,7 @@ import MenuItem from '@mui/material/MenuItem';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { ConnectionPropType } from 'propTypes/propTypes';
+import { useQueryClient } from '@tanstack/react-query';
 
 function ContextMenu(props) {
   const {
@@ -18,15 +19,24 @@ function ContextMenu(props) {
     disableReconnection,
   } = props;
   const formatMessage = useFormatMessage();
+  const queryClient = useQueryClient();
+
   const createActionHandler = React.useCallback(
     (action) => {
-      return function clickHandler(event) {
+      return async function clickHandler(event) {
         onMenuItemClick(event, action);
+
+        if (['test', 'reconnect', 'delete'].includes(action.type)) {
+          await queryClient.invalidateQueries({
+            queryKey: ['apps', appKey, 'connections'],
+          });
+        }
         onClose();
       };
     },
-    [onMenuItemClick, onClose],
+    [onMenuItemClick, onClose, queryClient],
   );
+
   return (
     <Menu
       open={true}

packages/web/src/config/urls.js

@@ -17,13 +17,13 @@ export const APP_ADD_CONNECTION = (appKey, shared = false) =>
   `/app/${appKey}/connections/add?shared=${shared}`;
 export const APP_ADD_CONNECTION_WITH_AUTH_CLIENT_ID = (
   appKey,
-  appAuthClientId
+  appAuthClientId,
 ) => `/app/${appKey}/connections/add?appAuthClientId=${appAuthClientId}`;
 export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
 export const APP_RECONNECT_CONNECTION = (
   appKey,
   connectionId,
-  appAuthClientId
+  appAuthClientId,
 ) => {
   const path = `/app/${appKey}/connections/${connectionId}/reconnect`;
   if (appAuthClientId) {