fix(access-requests): align settings and state with shared patterns

Author: waleedlatif1

apps/sim/app/access-requests/page.test.tsx

@@ -0,0 +1,68 @@
+/** @vitest-environment node */
+import { authMockFns } from '@sim/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { redirect } = vi.hoisted(() => ({ redirect: vi.fn() }))
+vi.mock('next/navigation', () => ({ redirect }))
+vi.mock('@/components/access-requests/my-access-requests', () => ({ MyAccessRequests: () => null }))
+vi.mock('@/components/access-requests/organization-access-requests', () => ({
+  OrganizationAccessRequests: () => null,
+}))
+
+import AccessRequestsPage from '@/app/access-requests/page'
+
+describe('access request sign-in redirect', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    authMockFns.mockGetSession.mockResolvedValue(null)
+    redirect.mockImplementation(() => {
+      throw new Error('Redirect')
+    })
+  })
+
+  it.each([
+    {
+      organizationId: 'organization',
+      view: 'catalog',
+      requestId: 'request',
+      search: 'Slack & Notion',
+      page: '3',
+    },
+    {
+      organizationId: 'organization',
+      view: 'admin',
+      requestId: 'request',
+      'request-status': 'declined',
+      'request-page': '2',
+    },
+  ])('preserves the supported $view state through sign-in', async (params) => {
+    await expect(AccessRequestsPage({ searchParams: Promise.resolve(params) })).rejects.toThrow(
+      'Redirect'
+    )
+    const loginUrl = new URL(redirect.mock.calls[0][0], 'https://example.com')
+    expect(loginUrl.pathname).toBe('/login')
+    const callback = new URL(loginUrl.searchParams.get('callbackUrl')!, loginUrl.origin)
+    expect(callback.pathname).toBe('/access-requests')
+    expect(Object.fromEntries(callback.searchParams)).toEqual(params)
+  })
+
+  it('drops invalid and unsupported state instead of forwarding raw query parameters', async () => {
+    await expect(
+      AccessRequestsPage({
+        searchParams: Promise.resolve({
+          organizationId: 'organization',
+          view: 'invalid',
+          page: '40001',
+          search: 'x'.repeat(201),
+          requestId: 'x'.repeat(129),
+          'request-page': '-1',
+          'request-status': 'invalid',
+          callbackUrl: 'https://example.com/untrusted',
+        }),
+      })
+    ).rejects.toThrow('Redirect')
+    expect(redirect).toHaveBeenCalledWith(
+      `/login?callbackUrl=${encodeURIComponent('/access-requests?organizationId=organization')}`
+    )
+  })
+})

apps/sim/app/access-requests/page.tsx

@@ -2,7 +2,7 @@ import { Suspense } from 'react'
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
 import { redirect } from 'next/navigation'
-import { createSearchParamsCache } from 'nuqs/server'
+import { createSearchParamsCache, createSerializer } from 'nuqs/server'
 import { AccessRequestsLoading } from '@/components/access-requests/access-requests-loading'
 import { MyAccessRequests } from '@/components/access-requests/my-access-requests'
 import { OrganizationAccessRequests } from '@/components/access-requests/organization-access-requests'
@@ -22,19 +22,16 @@ interface AccessRequestsPageProps {
 }
 
 const entrySearchParams = createSearchParamsCache(accessRequestEntrySearchParams)
+const serializeEntrySearchParams = createSerializer(accessRequestEntrySearchParams)
 
 /** Session-only entry so access requests remain reachable outside the organization Search rollout. */
 export default async function AccessRequestsPage({ searchParams }: AccessRequestsPageProps) {
   const [rawParams, session] = await Promise.all([searchParams, getSession()])
   const params = entrySearchParams.parse(rawParams)
-  const query = new URLSearchParams()
-  if (params.organizationId) query.set('organizationId', params.organizationId)
-  if (params.view !== 'requests') query.set('view', params.view)
-  if (params.requestId) query.set('requestId', params.requestId)
   if (!session?.user) {
     redirect(
       buildAuthCrossLink('/login', {
-        callbackUrl: `/access-requests?${query}`,
+        callbackUrl: serializeEntrySearchParams('/access-requests', params),
         isInviteFlow: false,
       })
     )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.test.tsx

@@ -204,4 +204,21 @@ describe('toolbar access requests', () => {
     expect(container.textContent).not.toContain('Access required')
     expect(container.textContent).not.toContain('Locked')
   })
+
+  it('does not reopen a request after requests are disabled and re-enabled', () => {
+    act(() => root.render(<Toolbar />))
+    act(() =>
+      container
+        .querySelector<HTMLButtonElement>('[aria-label="Request access to Locked tool"]')
+        ?.click()
+    )
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull()
+    discovery.mockReturnValue({ data: { enabled: false } })
+    act(() => root.render(<Toolbar isActive={false} />))
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+    discovery.mockReturnValue({ data: { enabled: true } })
+    act(() => root.render(<Toolbar isActive />))
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+    expect(container.querySelector('[aria-label="Request access to Locked tool"]')).not.toBeNull()
+  })
 })

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx

@@ -500,6 +500,13 @@ export const Toolbar = memo(
         allTools.find((item) => item.type === requestedBlockType))
       : undefined
 
+    if (
+      requestedBlockType !== null &&
+      (!requestedBlock || !workspaceId || !accessRequestsEnabled)
+    ) {
+      setRequestedBlockType(null)
+    }
+
     // Published custom blocks are their own section. Exclude disabled blocks (still
     // resolvable so placed instances survive, but not offered for new placement) and
     // the block bound to the CURRENT workflow — adding a workflow's own block recurses.

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -227,6 +227,10 @@ export const Panel = memo(function Panel() {
       ? memberLimitRequest.data.entries.find((entry) => entry.state === 'requestable')
       : undefined
 
+  if (showLimitRequest && !memberLimitTarget) {
+    setShowLimitRequest(false)
+  }
+
   // Workflow execution hook
   const { handleRunWorkflow, handleCancelExecution, isExecuting } = useWorkflowExecution()
 

apps/sim/components/access-requests/my-access-requests.test.tsx

@@ -105,4 +105,24 @@ describe('compact requester history', () => {
       true
     )
   })
+
+  it('exposes the selected view and resets pagination when switching views through nuqs', async () => {
+    render('?view=catalog&search=slack&page=2')
+    const views = container.querySelector('[role="radiogroup"][aria-label="Access request views"]')
+    expect(views?.querySelector('[role="radio"][aria-checked="true"]')?.textContent).toBe(
+      'Browse access'
+    )
+    const history = views?.querySelector<HTMLButtonElement>('[role="radio"][value="requests"]')
+    expect(history).not.toBeNull()
+    await act(async () => history?.click())
+    expect(views?.querySelector('[role="radio"][aria-checked="true"]')?.textContent).toBe(
+      'My requests'
+    )
+    await vi.waitFor(() =>
+      expect(mocks.url).toHaveBeenLastCalledWith(
+        expect.objectContaining({ queryString: '?search=slack' })
+      )
+    )
+    expect(mocks.mine).toHaveBeenLastCalledWith(scope, 0, undefined, true)
+  })
 })

apps/sim/components/access-requests/my-access-requests.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Chip, ChipInput, ChipLink, ChipTag } from '@sim/emcn'
+import { Chip, ChipInput, ChipLink, ChipSwitch, ChipTag } from '@sim/emcn'
 import { Lock, Search } from '@sim/emcn/icons'
 import { useQueryStates } from 'nuqs'
 import { MyAccessRequestDetails } from '@/components/access-requests/my-access-request-details'
@@ -66,20 +66,15 @@ export function MyAccessRequests({ scope }: MyAccessRequestsProps) {
             <ChipLink href={WORKSPACES_PATH}>Your workspaces</ChipLink>
           )}
         </div>
-        <div className='flex flex-wrap items-center gap-2' aria-label='Access request views'>
-          <Chip
-            active={view === 'requests'}
-            onClick={() => void setParams({ view: 'requests', page: 0, requestId: null })}
-          >
-            My requests
-          </Chip>
-          <Chip
-            active={view === 'catalog'}
-            onClick={() => void setParams({ view: 'catalog', page: 0, requestId: null })}
-          >
-            Browse access
-          </Chip>
-        </div>
+        <ChipSwitch
+          aria-label='Access request views'
+          options={[
+            { value: 'requests', label: 'My requests' },
+            { value: 'catalog', label: 'Browse access' },
+          ]}
+          value={view}
+          onChange={(value) => void setParams({ view: value, page: 0, requestId: null })}
+        />
         {view === 'catalog' && (
           <ChipInput
             icon={Search}

apps/sim/components/access-requests/organization-access-requests.test.tsx

@@ -0,0 +1,145 @@
+/** @vitest-environment jsdom */
+import { act } from 'react'
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  settings: vi.fn(),
+  requests: vi.fn(),
+  update: vi.fn(),
+  mutate: vi.fn(),
+  refetch: vi.fn(),
+}))
+vi.mock('@/hooks/queries/access-requests', () => ({
+  ACCESS_REQUEST_PAGE_SIZE: 25,
+  useAccessRequestSettings: mocks.settings,
+  useOrganizationAccessRequests: mocks.requests,
+  useUpdateAccessRequestSettings: mocks.update,
+}))
+vi.mock('@/components/access-requests/access-request-review', () => ({
+  AccessRequestReview: () => null,
+}))
+
+import { OrganizationAccessRequests } from '@/components/access-requests/organization-access-requests'
+
+describe('organization access request settings', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    mocks.settings.mockReturnValue({
+      data: { allowRequests: true },
+      isSuccess: true,
+      isPending: false,
+      isError: false,
+    })
+    mocks.update.mockReturnValue({ mutate: mocks.mutate, isPending: false })
+    mocks.requests.mockReturnValue({
+      isPending: false,
+      isError: false,
+      data: {
+        requests: [
+          {
+            id: 'request',
+            targetLabel: 'Slack',
+            status: 'pending',
+            requester: { name: 'Member' },
+            createdAt: '2026-09-15T12:00:00Z',
+          },
+        ],
+        hasMore: false,
+      },
+    })
+  })
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  const render = () =>
+    act(() =>
+      root.render(
+        <NuqsTestingAdapter>
+          <OrganizationAccessRequests organizationId='organization' />
+        </NuqsTestingAdapter>
+      )
+    )
+
+  it('keeps history available without claiming requests are enabled while settings load', () => {
+    mocks.settings.mockReturnValue({ isPending: true })
+    render()
+    expect(container.textContent).toContain('Loading request settings...')
+    expect(container.textContent).toContain('Slack')
+    expect(container.textContent).not.toContain('Members can ask administrators')
+    expect(container.querySelector('[aria-label="Allow users to request permissions"]')).toBeNull()
+  })
+
+  it('allows settings failures to be retried independently of the request history', () => {
+    const failed = {
+      isPending: false,
+      isError: true,
+      error: new Error('Settings unavailable'),
+      refetch: mocks.refetch,
+    }
+    mocks.settings.mockReturnValue({ ...failed, isFetching: false })
+    render()
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe('Settings unavailable')
+    expect(container.textContent).toContain('Slack')
+    expect(container.querySelector('[aria-label="Allow users to request permissions"]')).toBeNull()
+    const retry = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Try again'
+    )
+    act(() => retry?.click())
+    expect(mocks.refetch).toHaveBeenCalledOnce()
+    mocks.settings.mockReturnValue({ ...failed, isFetching: true })
+    render()
+    expect(
+      Array.from(container.querySelectorAll('button')).find(
+        (button) => button.textContent === 'Retrying…'
+      )?.disabled
+    ).toBe(true)
+  })
+
+  it('uses the shared switch to pause requests and blocks repeat changes while saving', () => {
+    render()
+    const setting = container.querySelector(
+      '[role="radiogroup"][aria-label="Allow users to request permissions"]'
+    )
+    expect(setting?.querySelector('[role="radio"][aria-checked="true"]')?.textContent).toBe(
+      'Enabled'
+    )
+    const paused = setting?.querySelector<HTMLButtonElement>('[role="radio"][value="paused"]')
+    expect(paused).not.toBeNull()
+    act(() => paused?.click())
+    expect(mocks.mutate).toHaveBeenCalledWith(
+      false,
+      expect.objectContaining({ onError: expect.any(Function) })
+    )
+    mocks.update.mockReturnValue({ mutate: mocks.mutate, isPending: true })
+    render()
+    expect(
+      Array.from(setting!.querySelectorAll<HTMLButtonElement>('[role="radio"]')).every(
+        (button) => button.disabled
+      )
+    ).toBe(true)
+    act(() => paused?.click())
+    expect(mocks.mutate).toHaveBeenCalledOnce()
+    mocks.update.mockReturnValue({ mutate: mocks.mutate, isPending: false })
+    mocks.settings.mockReturnValue({
+      data: { allowRequests: false },
+      isPending: false,
+      isError: false,
+    })
+    render()
+    expect(setting?.querySelector('[role="radio"][aria-checked="true"]')?.textContent).toBe(
+      'Paused'
+    )
+    expect(container.textContent).toContain('New requests and approvals are paused.')
+  })
+})