fix(webapp): Make sure integrations list is in sync with connections (#…

…3006)

## Describe your changes

Previously we weren't revalidating data relating to integrations in SWR
when connections were added and deleted, which made the integrations
list feel stale. This fixes that.

Additionally it adds a 15 second refresh on the integrations data in SWR
so that connections that are created outside of the dashboard will still
appear in time and give the customers a better feeling that things are
happening.

In the future it would probably be ideal to trigger this with a
websocket instead of an interval, but this works for now!

## Issue ticket number and link


https://linear.app/nango/issue/NAN-1310/caching-is-too-aggressive-on-the-app

## Checklist before requesting a review (skip if just adding/editing
APIs & templates)
- [ ] I added tests, otherwise the reason is: 
- [ ] I added observability, otherwise the reason is:
- [ ] I added analytics, otherwise the reason is:

packages/webapp/src/hooks/useIntegration.tsx

@@ -4,8 +4,12 @@ import type { SWRError } from '../utils/api';
 import { apiFetch, swrFetcher } from '../utils/api';
 import type { DeleteIntegration, GetIntegration, GetIntegrationFlows, PatchIntegration, PostIntegration } from '@nangohq/types';
 
+function integrationsPath(env: string) {
+    return `/api/v1/integrations?env=${env}`;
+}
+
 export function useListIntegration(env: string) {
-    const { data, error, mutate } = useSWR<ListIntegration>(`/api/v1/integrations?env=${env}`, swrFetcher);
+    const { data, error, mutate } = useSWR<ListIntegration>(integrationsPath(env), swrFetcher, { refreshInterval: 15000 });
 
     const loading = !data && !error;
 

packages/webapp/src/pages/Connection/List.tsx

@@ -114,7 +114,7 @@ export const ConnectionList: React.FC = () => {
     const hasConnected = useRef<AuthResult | undefined>();
 
     const { environmentAndAccount } = useEnvironment(env);
-    const { list: listIntegration } = useListIntegration(env);
+    const { list: listIntegration, mutate: listIntegrationMutate } = useListIntegration(env);
     const { data: connectionsCount } = useConnectionsCount(env);
 
     const [selectedIntegration, setSelectedIntegration] = useState<string[]>(defaultFilter);
@@ -154,11 +154,13 @@ export const ConnectionList: React.FC = () => {
         (event) => {
             if (event.type === 'close') {
                 void mutate();
+                void listIntegrationMutate();
                 if (hasConnected.current) {
                     toast.toast({ title: `Connected to ${hasConnected.current.providerConfigKey}`, variant: 'success' });
                 }
             } else if (event.type === 'connect') {
                 void mutate();
+                void listIntegrationMutate();
                 hasConnected.current = event.payload;
             }
         },

packages/webapp/src/pages/Connection/Show.tsx

@@ -26,6 +26,7 @@ import { ErrorPageComponent } from '../../components/ErrorComponent';
 import { AvatarOrganization } from '../../components/AvatarCustom';
 import { IconTrash } from '@tabler/icons-react';
 import { useToast } from '../../hooks/useToast';
+import { useListIntegration } from '../../hooks/useIntegration';
 
 export enum Tabs {
     Syncs,
@@ -49,6 +50,7 @@ export const ConnectionShow: React.FC = () => {
     const [slackIsConnected, setSlackIsConnected] = useState(true);
     const { data: connection, error, loading } = useConnection({ env, provider_config_key: providerConfigKey! }, { connectionId: connectionId! });
     const { data: syncs, error: errorSyncs, loading: loadingSyncs } = useSyncs({ env, provider_config_key: providerConfigKey!, connection_id: connectionId! });
+    const { mutate: listIntegrationMutate } = useListIntegration(env);
 
     // Modal delete
     const [open, setOpen] = useState(false);
@@ -78,6 +80,8 @@ export const ConnectionShow: React.FC = () => {
         const res = await apiDeleteConnection({ connectionId }, { provider_config_key: providerConfigKey, env });
         setLoadingDelete(false);
 
+        void listIntegrationMutate();
+
         if (res.res.status === 200) {
             toast({ title: `Connection deleted!`, variant: 'success' });