fix(org): fail mutations fast offline so a pending dialog can be cancelled

A mutation started offline paused until reconnect: the confirm dialog stayed pending with nothing
dismissing it, and the action ran on reconnect regardless. Mutations now fail fast app-wide, and
the retention re-read that gates a write does too.

Author: waleedlatif1

apps/sim/app/_shell/providers/get-query-client.ts

@@ -29,6 +29,12 @@ export function makeQueryClient() {
       },
       mutations: {
         retry: false,
+        /**
+         * The default pauses a mutation started offline until reconnect. Nothing here persists or
+         * shows that queue: the caller just waits, holding a pending dialog open, and the action
+         * then runs long after the person gave up on it. Failing fast lets them see it and decide.
+         */
+        networkMode: 'always',
       },
     },
   })

apps/sim/ee/data-retention/hooks/data-retention.ts

@@ -37,6 +37,8 @@ export function useOrganizationRetention(orgId: string | undefined) {
     queryFn: ({ signal }) => fetchDataRetention(orgId as string, signal),
     enabled: Boolean(orgId),
     staleTime: DATA_RETENTION_STALE_TIME,
+    // A save re-reads this first: offline, that read must fail rather than wait and write on reconnect.
+    networkMode: 'always',
   })
 }
 

apps/sim/platform/app/(shell)/settings/_components/sections/data-retention/data-retention-section.round-trip.test.tsx

@@ -8,7 +8,7 @@ import {
 } from '@sim/testing/mocks/api-client-request.mock'
 import { stubResizeObserver } from '@sim/testing/mocks/browser-apis.mock'
 import { emcnMock, emcnMockFns } from '@sim/testing/mocks/emcn.mock'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { onlineManager, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
@@ -161,6 +161,7 @@ describe('DataRetentionSection across saves', () => {
   })
 
   afterEach(() => {
+    onlineManager.setOnline(true)
     act(() => root.unmount())
     container.remove()
     queryClient.clear()
@@ -232,6 +233,18 @@ describe('DataRetentionSection across saves', () => {
       )
     })
 
+    it('stops at once while offline instead of waiting to write on reconnect', async () => {
+      await click('Organization')
+      await click('keep logs 7 days')
+      onlineManager.setOnline(false)
+      await failNextReads(() => click('Save'))
+
+      expect(emcnMockFns.mockToast.error).toHaveBeenCalledWith(
+        'Could not confirm the latest retention settings. Nothing was saved.'
+      )
+      expect(server.writes).toEqual([])
+    })
+
     it('removes nothing over the document from before the failure', async () => {
       await click('Organization')
       await failNextReads(() => click('Remove'))

apps/sim/platform/design-system/components/modal/confirm-dialog.test.tsx

@@ -0,0 +1,74 @@
+/** @vitest-environment jsdom */
+
+import { act } from 'react'
+import { flushMacrotask } from '@sim/testing/helpers/async'
+import { stubDialogMethods, stubResizeObserver } from '@sim/testing/mocks/browser-apis.mock'
+import { onlineManager, QueryClientProvider, useMutation } from '@tanstack/react-query'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { makeQueryClient } from '@/app/_shell/providers/get-query-client'
+import { ConfirmDialog } from '@/platform/design-system/components/modal/confirm-dialog'
+
+const send = vi.fn()
+const onClose = vi.fn()
+
+function RemoveDialog() {
+  const remove = useMutation({ mutationFn: send })
+  return (
+    <ConfirmDialog
+      target
+      onClose={onClose}
+      title='Remove'
+      confirmLabel='Remove it'
+      pendingLabel='Removing…'
+      onConfirm={() => remove.mutateAsync(undefined)}
+    />
+  )
+}
+
+describe('ConfirmDialog while the browser is offline', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  const button = (name: string) =>
+    Array.from(container.querySelectorAll('button')).find((node) => node.textContent === name)
+
+  beforeEach(async () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    stubResizeObserver()
+    stubDialogMethods()
+    send.mockReset().mockRejectedValue(new TypeError('Failed to fetch'))
+    onlineManager.setOnline(false)
+    container = window.document.createElement('div')
+    window.document.body.appendChild(container)
+    root = createRoot(container)
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={makeQueryClient()}>
+          <RemoveDialog />
+        </QueryClientProvider>
+      )
+    })
+  })
+
+  afterEach(() => {
+    onlineManager.setOnline(true)
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('reports the failed action and can still be cancelled', async () => {
+    await act(async () => {
+      button('Remove it')?.click()
+      await flushMacrotask()
+    })
+
+    expect(send).toHaveBeenCalledOnce()
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe('Failed to fetch')
+
+    await act(async () => {
+      button('Cancel')?.click()
+    })
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+})