fix(settings): preserve fresh snapshots and same-page history

Author: waleedlatif1

.agents/skills/add-settings-page/SKILL.md

@@ -66,7 +66,7 @@ Each grep lists candidates; review every match against the expected ones named b
    - Editable pages: confirm Save/Discard go through `saveDiscardActions()` and
      dirty is wired via `useSettingsUnsavedGuard` (called before early-return
      gates) — flag any hand-rolled Save button, `beforeunload`, or unsaved modal.
-     `git grep -n "beforeunload" -- 'apps/sim/**/settings/**' 'apps/sim/ee/' 'apps/sim/components/settings/'`
+     `git grep -n "beforeunload" -- 'apps/sim/**/settings/**' 'apps/sim/ee/' 'apps/sim/components/settings/' ':(exclude,glob)**/*.test.*'`
      should only hit the centralized `use-settings-browser-navigation.ts`.
 5. Fix each finding with the smallest structural change that satisfies the checklist;
    do not touch handlers, state, queries, or gate returns. A pixel-size fix swaps

.claude/rules/sim-settings-pages.md

@@ -355,8 +355,9 @@ shells. Reach for it before hand-rolling a `Chip`.
 - **Detail back controls** call `guard.guardBack(closeFn)`. Other destructive view
   transitions, such as switching an editor's direction or environment, also use
   the shared `requestLeave` action before resetting their draft.
-- **`navigationBlocked` covers pending saves and uploads.** The shared guard holds
-  navigation until they settle. Disable or preserve edits made during requests;
+- **`navigationBlocked` covers pending saves and uploads.** The shared guard blocks
+  navigation while requests are pending. Attempts are not queued; retry after they
+  settle. Disable or preserve edits made during requests;
   failed saves retain drafts, and successful saves only clear committed values.
 - **Call the hook unconditionally, before every early-return gate** (entitlement,
   loading, or empty-state return), so gated renders preserve hook order.

.cursor/rules/sim-settings-pages.mdc

@@ -352,8 +352,9 @@ shells. Reach for it before hand-rolling a `Chip`.
 - **Detail back controls** call `guard.guardBack(closeFn)`. Other destructive view
   transitions, such as switching an editor's direction or environment, also use
   the shared `requestLeave` action before resetting their draft.
-- **`navigationBlocked` covers pending saves and uploads.** The shared guard holds
-  navigation until they settle. Disable or preserve edits made during requests;
+- **`navigationBlocked` covers pending saves and uploads.** The shared guard blocks
+  navigation while requests are pending. Attempts are not queued; retry after they
+  settle. Disable or preserve edits made during requests;
   failed saves retain drafts, and successful saves only clear committed values.
 - **Call the hook unconditionally, before every early-return gate** (entitlement,
   loading, or empty-state return), so gated renders preserve hook order.

apps/sim/components/secrets/secrets-editor.test.tsx

@@ -250,6 +250,152 @@ describe('shared secrets editor', () => {
     expect(left).toBe(true)
   })
 
+  it.each(['personal', 'shared'])(
+    'resumes a skipped %s refresh after reverting the draft',
+    async (scope) => {
+      const original = { TOKEN: 'original' }
+      const refreshed = { TOKEN: 'remote', REMOTE: 'new' }
+      const props = (variables: Record<string, string>) =>
+        scope === 'shared'
+          ? { variables }
+          : {
+              personal: {
+                variables: Object.fromEntries(
+                  Object.entries(variables).map(([key, value]) => [key, { key, value }])
+                ),
+                save: mocks.save,
+              },
+            }
+      const selector =
+        scope === 'shared'
+          ? 'input[name^="workspace_env_value_TOKEN"]'
+          : 'input[name^="env_variable_value_"]'
+      await render(props(original))
+      const field = container.querySelector<HTMLInputElement>(selector)
+      if (!field) throw new Error('Missing secret value')
+      await change(field, 'draft')
+      await render(props(refreshed))
+      const retained = container.querySelector<HTMLInputElement>(selector)
+      if (!retained) throw new Error('Missing retained draft')
+      expect(retained.value).toBe('draft')
+      await change(retained, 'original')
+      const values = [...container.querySelectorAll<HTMLInputElement>('input[name*="value"]')].map(
+        (input) => input.value
+      )
+      expect(values).toContain('remote')
+      expect(values).toContain('new')
+      let left = false
+      act(() =>
+        useSettingsDirtyStore.getState().requestLeave(() => {
+          left = true
+        })
+      )
+      expect(left).toBe(true)
+    }
+  )
+
+  it.each(['personal', 'shared'])(
+    'consumes a fresh %s snapshot received before Save without hiding remote keys',
+    async (scope) => {
+      const empty = {}
+      const original = { TOKEN: 'original' }
+      const refreshed = { TOKEN: 'remote', REMOTE: 'new' }
+      const personalOriginal = { TOKEN: { key: 'TOKEN', value: 'original' } }
+      const personalRefreshed = {
+        TOKEN: { key: 'TOKEN', value: 'remote' },
+        REMOTE: { key: 'REMOTE', value: 'new' },
+      }
+      const props = (fresh: boolean) =>
+        scope === 'shared'
+          ? { variables: fresh ? refreshed : original }
+          : {
+              variables: empty,
+              personal: {
+                variables: fresh ? personalRefreshed : personalOriginal,
+                save: mocks.save,
+              },
+            }
+      const selector =
+        scope === 'shared'
+          ? 'input[name^="workspace_env_value_TOKEN"]'
+          : 'input[name^="env_variable_value_"]'
+      await render(props(false))
+      const field = container.querySelector<HTMLInputElement>(selector)
+      if (!field) throw new Error('Missing secret value')
+      await change(field, 'submitted')
+      await render(props(true))
+      await act(async () => button('Save').click())
+      expect(container.querySelector<HTMLInputElement>(selector)?.value).toBe('submitted')
+      const values = [...container.querySelectorAll<HTMLInputElement>('input[name*="value"]')].map(
+        (input) => input.value
+      )
+      expect(values).toContain('new')
+      let left = false
+      act(() =>
+        useSettingsDirtyStore.getState().requestLeave(() => {
+          left = true
+        })
+      )
+      expect(left).toBe(true)
+    }
+  )
+
+  it.each([
+    { scope: 'personal', refresh: 'during Save' },
+    { scope: 'shared', refresh: 'during Save' },
+    { scope: 'personal', refresh: 'after Save' },
+    { scope: 'shared', refresh: 'after Save' },
+  ])(
+    'acknowledges fresh $scope values received $refresh without rolling back the save',
+    async ({ scope, refresh }) => {
+      const request = createDeferred<void>()
+      const original = { TOKEN: 'original' }
+      const canonical = { TOKEN: 'submitted', REMOTE: 'canonical' }
+      const emptyShared = {}
+      const personalOriginal = { TOKEN: { key: 'TOKEN', value: 'original' } }
+      const personalCanonical = {
+        TOKEN: { key: 'TOKEN', value: 'submitted' },
+        REMOTE: { key: 'REMOTE', value: 'canonical' },
+      }
+      const props = (fresh: boolean, isSaving: boolean) =>
+        scope === 'shared'
+          ? { variables: fresh ? canonical : original, isSaving, save: () => request.promise }
+          : {
+              variables: emptyShared,
+              isSaving,
+              personal: {
+                variables: fresh ? personalCanonical : personalOriginal,
+                save: () => request.promise,
+              },
+            }
+      const selector =
+        scope === 'shared'
+          ? 'input[name^="workspace_env_value_TOKEN"]'
+          : 'input[name^="env_variable_value_"]'
+      await render(props(false, false))
+      const field = container.querySelector<HTMLInputElement>(selector)
+      if (!field) throw new Error('Missing secret value')
+      await change(field, 'submitted')
+      act(() => button('Save').click())
+      await render(props(refresh === 'during Save', true))
+      await act(async () => request.resolve())
+      await render(props(refresh === 'during Save', false))
+      expect(container.querySelector<HTMLInputElement>(selector)?.value).toBe('submitted')
+      if (refresh === 'after Save') await render(props(true, false))
+      const values = [...container.querySelectorAll<HTMLInputElement>('input[name*="value"]')].map(
+        (input) => input.value
+      )
+      expect(values).toContain('canonical')
+      let left = false
+      act(() =>
+        useSettingsDirtyStore.getState().requestLeave(() => {
+          left = true
+        })
+      )
+      expect(left).toBe(true)
+    }
+  )
+
   it('keeps an edited personal secret and its navigation protection through a refresh', async () => {
     const personal = { variables: { TOKEN: { key: 'TOKEN', value: 'original' } }, save: mocks.save }
     await render({ personal })

apps/sim/components/secrets/secrets-editor.tsx

@@ -400,9 +400,11 @@ export function SecretsEditor({
   const initialWorkspaceVarsRef = useRef<Record<string, string>>({})
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const initialVarsRef = useRef<UIEnvironmentVariable[]>([])
-  const hasChangesRef = useRef(false)
-  const hasSavedPersonalRef = useRef(false)
-  const hasSavedWorkspaceRef = useRef(false)
+  const acknowledgedPersonalRef = useRef<{
+    data: typeof personalEnvData
+    hasPersonal: boolean
+  } | null>(null)
+  const acknowledgedWorkspaceRef = useRef<typeof variables>(undefined)
 
   const filteredEnvVars = useMemo(() => {
     const mapped = envVars.map((envVar, index) => ({ envVar, originalIndex: index }))
@@ -496,20 +498,17 @@ export function SecretsEditor({
     return personalInvalid || workspaceInvalid
   }, [envVars, newWorkspaceRows])
 
-  hasChangesRef.current = hasChanges
-
   const guard = useSettingsUnsavedGuard({
     isDirty: hasChanges,
     navigationBlocked: isListSaving,
     onDiscard: () => resetToSaved(),
   })
 
   useEffect(() => {
-    if (hasChangesRef.current) return
-    if (hasSavedPersonalRef.current) {
-      hasSavedPersonalRef.current = false
-      return
-    }
+    if (hasChanges || isListSaving) return
+    const acknowledged = acknowledgedPersonalRef.current
+    if (acknowledged?.data === personalEnvData && acknowledged?.hasPersonal === hasPersonal) return
+    acknowledgedPersonalRef.current = { data: personalEnvData, hasPersonal }
 
     const existingVars = Object.values(personalEnvData || {})
     const initialVars = [
@@ -521,17 +520,15 @@ export function SecretsEditor({
     ]
     initialVarsRef.current = structuredClone(initialVars)
     setEnvVars(structuredClone(initialVars))
-  }, [personalEnvData, hasPersonal])
+  }, [personalEnvData, hasPersonal, hasChanges, isListSaving])
 
   useEffect(() => {
-    if (!variables || hasChangesRef.current) return
-    if (hasSavedWorkspaceRef.current) {
-      hasSavedWorkspaceRef.current = false
+    if (!variables || hasChanges || isListSaving || acknowledgedWorkspaceRef.current === variables)
       return
-    }
+    acknowledgedWorkspaceRef.current = variables
     setWorkspaceDraft((current) => ({ ...current, variables }))
     initialWorkspaceVarsRef.current = variables
-  }, [variables])
+  }, [variables, hasChanges, isListSaving])
 
   const scrollToBottom = useCallback(() => {
     requestAnimationFrame(() => {
@@ -821,15 +818,19 @@ export function SecretsEditor({
       mutations.push(save({ upsert: toUpsert, remove: toDelete }))
     }
 
-    hasSavedPersonalRef.current = personalChanged
-    hasSavedWorkspaceRef.current = Boolean(workspaceChanged)
-
     try {
       const results = await Promise.allSettled(mutations)
       const firstFailure = results.find((r): r is PromiseRejectedResult => r.status === 'rejected')
       if (firstFailure) throw firstFailure.reason
 
-      initialWorkspaceVarsRef.current = { ...mergedWorkspaceVars }
+      if (personalChanged) acknowledgedPersonalRef.current = { data: personalEnvData, hasPersonal }
+      if (workspaceChanged) acknowledgedWorkspaceRef.current = variables
+      const savedWorkspaceVars = applyVariableEdits(
+        before,
+        mergedWorkspaceVars,
+        variables ?? before
+      )
+      initialWorkspaceVarsRef.current = savedWorkspaceVars
       const savedPersonalRows = Object.entries(personalVariablesToSave).map(([key, value]) => ({
         key,
         value,
@@ -864,7 +865,7 @@ export function SecretsEditor({
         newWorkspaceRows.filter((row) => row.key && row.value).map((row) => [row.id, row])
       )
       setWorkspaceDraft((current) => {
-        const variables = { ...mergedWorkspaceVars }
+        const variables = { ...savedWorkspaceVars }
         for (const submitted of submittedRows.values()) {
           if (Object.hasOwn(workspaceVars, submitted.key))
             setRecordValue(variables, submitted.key, workspaceVars[submitted.key])
@@ -885,8 +886,6 @@ export function SecretsEditor({
         toast.success('Secrets saved')
       }
     } catch (error) {
-      hasSavedPersonalRef.current = false
-      hasSavedWorkspaceRef.current = false
       logger.error('Failed to save environment variables:', error)
       toast.error(getErrorMessage(error, 'Failed to save secrets'))
     }

apps/sim/components/settings/unsaved-changes-regression.test.tsx

@@ -630,7 +630,7 @@ it.each(['Source workflow ID', 'Target workspace ID'])(
   }
 )
 
-async function renderScim() {
+function seedScim() {
   const shape = getDeploymentShape()
   seedDeploymentShape({ ...shape, features: { ...shape.features, scim: true } })
   client.setQueryData(scimKeys.connection('org-a'), {
@@ -653,9 +653,91 @@ async function renderScim() {
   client.setQueryData(scimKeys.activity('org-a'), [])
   client.setQueryData(permissionGroupKeys.list('org-a'), [])
   client.setQueryData(permissionGroupKeys.orgWorkspaces('org-a'), [])
+}
+
+async function renderScim() {
+  seedScim()
   await render(<ScimSection organizationId='org-a' active onOpenDomains={() => {}} />)
 }
 
+it('preserves hidden SSO and SCIM drafts when provisioning is disabled and re-enabled', async () => {
+  seedScim()
+  client.setQueryData(ssoKeys.providerList('org-a'), { providers: [] })
+  client.setQueryData(domainKeys.list('org-a'), { domains: [] })
+  client.setQueryData(organizationKeys.billing('org-a'), {
+    data: { subscriptionPlan: 'enterprise' },
+  })
+  let persisted = client.getQueryData<{ connection: { status: string } }>(
+    scimKeys.connection('org-a')
+  )
+  vi.stubGlobal(
+    'fetch',
+    vi.fn((_url: string, init?: RequestInit) => {
+      if (init?.method === 'PUT' && persisted) {
+        const body = JSON.parse(String(init.body)) as { status: string }
+        persisted = { connection: { ...persisted.connection, status: body.status } }
+      }
+      return Promise.resolve(jsonResponse(persisted))
+    })
+  )
+  await render(<SSO organizationId='org-a' />, '?sso-tab=domains')
+  click('Domains')
+  edit('#sso-add-domain', 'draft.example.com')
+  click('Provisioning')
+  select('Token expiry', 'Expires in 90 days')
+  const toggle = container.querySelector<HTMLButtonElement>('#scim-enabled')
+  if (!toggle) throw new Error('Missing provisioning switch')
+  await act(async () => {
+    toggle.click()
+    await flushMicrotasks()
+    await vi.advanceTimersByTimeAsync(50)
+  })
+  expect(persisted?.connection.status).toBe('disabled')
+  expectLeave(false)
+  click('Domains')
+  expect(input('#sso-add-domain').value).toBe('draft.example.com')
+  click('Provisioning')
+  await act(async () => {
+    toggle.click()
+    await flushMicrotasks()
+    await vi.advanceTimersByTimeAsync(50)
+  })
+  expect(persisted?.connection.status).toBe('active')
+  expect(container.querySelector('button[aria-label="Token expiry"]')?.textContent).toContain(
+    'Expires in 90 days'
+  )
+  expectLeave(false)
+})
+
+it('blocks provisioning toggles while token issuance is pending', async () => {
+  await renderScim()
+  const request = createDeferred<Response>()
+  vi.stubGlobal(
+    'fetch',
+    vi.fn((_url: string, init?: RequestInit) =>
+      init?.method === 'POST'
+        ? request.promise
+        : Promise.resolve(jsonResponse(client.getQueryData(scimKeys.connection('org-a'))))
+    )
+  )
+  click('Issue token')
+  await act(async () => {
+    await flushMicrotasks()
+    await vi.advanceTimersByTimeAsync(1)
+  })
+  const toggle = container.querySelector<HTMLButtonElement>('#scim-enabled')
+  if (!toggle) throw new Error('Missing provisioning switch')
+  expect(toggle.disabled).toBe(true)
+  expectLeave(false)
+  await act(async () => {
+    request.resolve(jsonResponse({ error: 'Unavailable' }, 503))
+    await flushMicrotasks()
+    await vi.advanceTimersByTimeAsync(50)
+  })
+  expect(toggle.disabled).toBe(false)
+  expectLeave(true)
+})
+
 it('protects the only retrievable SCIM token until its modal is dismissed', async () => {
   await renderScim()
   vi.stubGlobal(