fix(navigation): refresh organization destination after creation

Author: TheodoreSpeaks

apps/sim/hooks/queries/organization.test.tsx

@@ -8,13 +8,25 @@ import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ApiClientError } from '@/lib/api/client/errors'
 
-const { mockGetFullOrganization, mockListOrganizations, mockRequestJson, featureFlags } =
-  vi.hoisted(() => ({
-    mockGetFullOrganization: vi.fn(),
-    mockListOrganizations: vi.fn(),
-    mockRequestJson: vi.fn(),
-    featureFlags: { organizations: true },
-  }))
+const {
+  mockGetFullOrganization,
+  mockListOrganizations,
+  mockSetActiveOrganization,
+  mockRefresh,
+  mockRequestJson,
+  featureFlags,
+} = vi.hoisted(() => ({
+  mockGetFullOrganization: vi.fn(),
+  mockListOrganizations: vi.fn(),
+  mockSetActiveOrganization: vi.fn(),
+  mockRefresh: vi.fn(),
+  mockRequestJson: vi.fn(),
+  featureFlags: { organizations: true },
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ refresh: mockRefresh }),
+}))
 
 vi.mock('@/lib/core/config/env-flags', () => ({
   get isOrganizationsEnabled() {
@@ -31,6 +43,7 @@ vi.mock('@/lib/auth/auth-client', () => ({
     organization: {
       getFullOrganization: mockGetFullOrganization,
       list: mockListOrganizations,
+      setActive: mockSetActiveOrganization,
     },
     subscription: {
       list: vi.fn(),
@@ -49,6 +62,7 @@ import {
 } from '@/lib/api/contracts/subscription'
 import {
   organizationKeys,
+  useCreateOrganization,
   useOrganization,
   useOrganizationBilling,
   useOrganizationList,
@@ -199,6 +213,48 @@ describe('organization identity transitions', () => {
     expect(signal).toBeInstanceOf(AbortSignal)
   })
 
+  it.each([true, false])(
+    'refreshes the server layout after organization activation settles (success=%s)',
+    async (success) => {
+      mockRequestJson.mockResolvedValue({ organizationId: 'new-organization' })
+      const activation = createDeferred<{ error: { message: string } | null }>()
+      mockSetActiveOrganization.mockReturnValue(activation.promise)
+      let mutation: ReturnType<typeof useCreateOrganization>
+      function CreationProbe() {
+        mutation = useCreateOrganization()
+        return null
+      }
+
+      await act(async () => {
+        root.render(
+          <QueryClientProvider client={queryClient}>
+            <CreationProbe />
+          </QueryClientProvider>
+        )
+      })
+      let pending: Promise<unknown>
+      await act(async () => {
+        pending = mutation.mutateAsync({ name: 'New organization' })
+      })
+      expect(mockSetActiveOrganization).toHaveBeenCalledWith({
+        organizationId: 'new-organization',
+      })
+      expect(mockRefresh).not.toHaveBeenCalled()
+
+      await act(async () => {
+        if (success) {
+          activation.resolve({ error: null })
+          await pending
+        } else {
+          const rejection = expect(pending).rejects.toThrow('Activation failed')
+          activation.resolve({ error: { message: 'Activation failed' } })
+          await rejection
+        }
+      })
+      expect(mockRefresh).toHaveBeenCalledOnce()
+    }
+  )
+
   it('does not call the organization plugin when organizations are disabled', async () => {
     featureFlags.organizations = false
     await act(async () =>

apps/sim/hooks/queries/organization.ts

@@ -7,6 +7,7 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
 import { ApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import type { ContractBodyInput } from '@/lib/api/contracts'
@@ -605,6 +606,7 @@ type CreateOrganizationParams = Pick<
 
 export function useCreateOrganization() {
   const queryClient = useQueryClient()
+  const router = useRouter()
 
   return useMutation({
     mutationFn: async ({ name, slug }: CreateOrganizationParams) => {
@@ -615,15 +617,17 @@ export function useCreateOrganization() {
         },
       })
 
-      await client.organization.setActive({
+      const { error } = await client.organization.setActive({
         organizationId: data.organizationId,
       })
+      if (error) throw new Error(error.message || 'Failed to activate organization')
 
       return data
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: organizationKeys.lists() })
       queryClient.invalidateQueries({ queryKey: workspaceKeys.lists() })
+      router.refresh()
     },
   })
 }