improvement(search): simplify personal integrations and source setup

Author: TheodoreSpeaks

apps/sim/app/api/credential-groups/enrollment-redirect.ts

@@ -1,4 +1,5 @@
 import { NextResponse } from 'next/server'
+import type { CredentialGroupOAuthFailure } from '@/lib/credential-groups/oauth-completion'
 
 const NO_STORE_REDIRECT_HEADERS = {
   'Cache-Control': 'no-store',
@@ -20,23 +21,17 @@ export function createCredentialGroupEnrollmentRedirect(
   })
 }
 
-export type CredentialGroupOAuthFailure =
-  | 'expired'
-  | 'denied'
-  | 'account_mismatch'
-  | 'permissions_required'
-  | 'configuration_changed'
-  | 'rate_limited'
-  | 'unavailable'
-  | 'failed'
-
 export function createCredentialGroupCompletionRedirect(
-  oauth?: CredentialGroupOAuthFailure
+  oauth?: CredentialGroupOAuthFailure,
+  completionId?: string
 ): NextResponse {
+  const query = new URLSearchParams()
+  if (oauth) query.set('oauth', oauth)
+  if (completionId) query.set('completionId', completionId)
   return new NextResponse(null, {
     status: 303,
     headers: {
-      Location: `/credential-groups/complete${oauth ? `?oauth=${oauth}` : ''}`,
+      Location: `/credential-groups/complete${query.size ? `?${query}` : ''}`,
       ...NO_STORE_REDIRECT_HEADERS,
     },
   })

apps/sim/app/api/credential-groups/oauth-callback.ts

@@ -5,14 +5,14 @@ import type { CredentialGroupOAuthCallbackQuery } from '@/lib/api/contracts/cred
 import { credentialGroupOAuthAttemptPrincipal } from '@/lib/credential-groups/application/enrollment-auth'
 import { completePublicCredentialGroupOAuth } from '@/lib/credential-groups/application/public-enrollment'
 import { CredentialGroupOAuthStateVersionError } from '@/lib/credential-groups/oauth-attempt-version'
+import type { CredentialGroupOAuthFailure } from '@/lib/credential-groups/oauth-completion'
 import { consumeCredentialGroupOAuthAttempt } from '@/lib/credential-groups/oauth-state'
 import {
   CredentialGroupInvitationUnavailableError,
   CredentialGroupOAuthError,
 } from '@/lib/credential-groups/provider-adapter'
 import type { CredentialGroupProvider } from '@/lib/credential-groups/providers'
 import {
-  type CredentialGroupOAuthFailure,
   createCredentialGroupCompletionRedirect,
   createCredentialGroupEnrollmentRedirect,
 } from '@/app/api/credential-groups/enrollment-redirect'
@@ -54,7 +54,7 @@ export async function handleCredentialGroupOAuthCallback({
     : {}
   const failureRedirect = (oauth: CredentialGroupOAuthFailure) =>
     attempt.completionRedirect
-      ? createCredentialGroupCompletionRedirect(oauth)
+      ? createCredentialGroupCompletionRedirect(oauth, attempt.completionId)
       : createCredentialGroupEnrollmentRedirect(attempt.invitationToken, { ...focus, oauth })
   if (limited) {
     return failureRedirect('rate_limited')
@@ -74,7 +74,7 @@ export async function handleCredentialGroupOAuthCallback({
       request,
     })
     return attempt.completionRedirect
-      ? createCredentialGroupCompletionRedirect()
+      ? createCredentialGroupCompletionRedirect(undefined, attempt.completionId)
       : createCredentialGroupEnrollmentRedirect(attempt.invitationToken, {
           ...focus,
           connected: attempt.optionId,

apps/sim/app/api/credential-groups/oauth/[provider]/callback/route.test.ts

@@ -56,6 +56,22 @@ function request(query: string) {
 }
 
 describe('credential group OAuth callback', () => {
+  it.each([
+    ['code=code-1', undefined],
+    ['error=access_denied', 'denied'],
+  ])(
+    'correlates direct OAuth completion without returning to enrollment: %s',
+    async (query, failure) => {
+      const completionId = '550e8400-e29b-41d4-a716-446655440000'
+      mocks.consumeAttempt.mockResolvedValue({ ...attempt, completionRedirect: true, completionId })
+      const response = await GET(request(`state=state-1&${query}`), context)
+      const location = new URL(response.headers.get('location')!, 'https://sim.test')
+      expect(response.status).toBe(303)
+      expect(location.pathname).toBe('/credential-groups/complete')
+      expect(location.searchParams.get('completionId')).toBe(completionId)
+      expect(location.searchParams.get('oauth')).toBe(failure ?? null)
+    }
+  )
   beforeEach(() => {
     vi.clearAllMocks()
     mocks.rateLimit.mockResolvedValue(null)

apps/sim/app/api/knowledge/[id]/connectors/[connectorId]/enroll/route.ts

@@ -16,10 +16,11 @@ export const POST = defineInternalJsonRoute({
     reason:
       'A member connecting their own account by hand; each call only re-issues their own invitation',
   }),
-  errorPolicy: internalKnowledgeErrorPolicies.connectors,
-  mapInput: ({ params }) => ({
+  errorPolicy: internalKnowledgeErrorPolicies.connectAccount,
+  mapInput: ({ params, query }) => ({
     connectorId: params.connectorId,
     knowledgeBaseId: params.id,
+    oauthCompletionId: query.oauthCompletionId,
   }),
   useCase: startKnowledgeConnectorMemberEnrollment,
   present: ({ url }) => ({ success: true as const, data: { url } }),

apps/sim/app/api/knowledge/sim-search/connect/route.ts

@@ -13,7 +13,7 @@ export const POST = defineInternalJsonRoute({
   auth: internalSessionAuth,
   operation: knowledgeOperations.simSearchConnect,
   rateLimit: internalRateLimits.none({ reason: 'One click per source; mints a single-use link' }),
-  errorPolicy: internalKnowledgeErrorPolicies.connectors,
+  errorPolicy: internalKnowledgeErrorPolicies.connectAccount,
   mapInput: ({ body }) => body,
   useCase: connectSimSearchConnector,
   present: (result) => ({ success: true as const, data: result }),

apps/sim/app/credential-groups/complete/completion-handoff.test.tsx

@@ -0,0 +1,49 @@
+/** @vitest-environment jsdom */
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { CredentialGroupCompletionHandoff } from '@/app/credential-groups/complete/completion-handoff'
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+})
+
+describe('credential group OAuth completion', () => {
+  it.each([undefined, 'denied', 'configuration_changed'] as const)(
+    'publishes %s to only its initiating tab and closes',
+    (failure) => {
+      const postMessage = vi.fn()
+      const closeChannel = vi.fn()
+      const names: string[] = []
+      vi.stubGlobal(
+        'BroadcastChannel',
+        class {
+          postMessage = postMessage
+          close = closeChannel
+          constructor(name: string) {
+            names.push(name)
+          }
+        }
+      )
+      const closeWindow = vi.spyOn(window, 'close').mockImplementation(() => {})
+      ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+      const container = document.createElement('div')
+      const root = createRoot(container)
+      const completionId = '550e8400-e29b-41d4-a716-446655440000'
+      try {
+        act(() =>
+          root.render(
+            <CredentialGroupCompletionHandoff completionId={completionId} failure={failure} />
+          )
+        )
+        expect(names).toEqual([`sim:credential-group-oauth:${completionId}`])
+        expect(postMessage).toHaveBeenCalledExactlyOnceWith(failure ?? 'connected')
+        expect(closeChannel).toHaveBeenCalledOnce()
+        expect(closeWindow).toHaveBeenCalledOnce()
+      } finally {
+        act(() => root.unmount())
+      }
+    }
+  )
+})

apps/sim/app/credential-groups/complete/completion-handoff.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect } from 'react'
+import {
+  type CredentialGroupOAuthFailure,
+  credentialGroupOAuthCompletionChannel,
+} from '@/lib/credential-groups/oauth-completion'
+
+interface CredentialGroupCompletionHandoffProps {
+  completionId: string
+  failure?: CredentialGroupOAuthFailure
+}
+
+/** Notifies the originating tab even when provider navigation has removed window.opener. */
+export function CredentialGroupCompletionHandoff({
+  completionId,
+  failure,
+}: CredentialGroupCompletionHandoffProps) {
+  useEffect(() => {
+    const channel = new BroadcastChannel(credentialGroupOAuthCompletionChannel(completionId))
+    channel.postMessage(failure ?? 'connected')
+    channel.close()
+    window.close()
+  }, [completionId, failure])
+  return null
+}

apps/sim/app/credential-groups/complete/page.tsx

@@ -1,36 +1,33 @@
 import { ChipLink } from '@sim/emcn'
+import { isValidUuid } from '@sim/utils/id'
 import type { Metadata } from 'next'
+import {
+  CREDENTIAL_GROUP_OAUTH_FAILURE_MESSAGES,
+  isCredentialGroupOAuthFailure,
+} from '@/lib/credential-groups/oauth-completion'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { AuthHeader, AuthShell } from '@/app/(auth)/components'
+import { CredentialGroupCompletionHandoff } from '@/app/credential-groups/complete/completion-handoff'
 
 export const metadata: Metadata = {
   title: 'Accounts connected',
   robots: { index: false, follow: false },
 }
 
-const OAUTH_FAILURE_MESSAGES = {
-  expired: 'This connection attempt expired. Open Sim and start connecting your account again.',
-  denied: 'Authorization was canceled. Open Sim to try again.',
-  account_mismatch: 'Choose the account matching your Sim email address.',
-  permissions_required: 'All requested permissions are required to connect this account.',
-  configuration_changed: 'The connection settings changed. Open Sim to try again.',
-  rate_limited: 'Too many authorization attempts. Wait a few minutes and try again.',
-  unavailable: 'This connection is unavailable. Open Sim to try again.',
-  failed: 'Account authorization did not complete. Open Sim to try again.',
-} as const
-
 export default async function CredentialGroupCompletePage({
   searchParams,
 }: {
-  searchParams: Promise<{ oauth?: string | string[] }>
+  searchParams: Promise<{ oauth?: string | string[]; completionId?: string | string[] }>
 }) {
-  const { oauth } = await searchParams
-  const error =
-    typeof oauth === 'string' && Object.hasOwn(OAUTH_FAILURE_MESSAGES, oauth)
-      ? OAUTH_FAILURE_MESSAGES[oauth as keyof typeof OAUTH_FAILURE_MESSAGES]
-      : undefined
+  const { oauth, completionId } = await searchParams
+  const failure =
+    oauth === undefined ? undefined : isCredentialGroupOAuthFailure(oauth) ? oauth : 'failed'
+  const error = failure ? CREDENTIAL_GROUP_OAUTH_FAILURE_MESSAGES[failure] : undefined
   return (
     <AuthShell>
+      {typeof completionId === 'string' && isValidUuid(completionId) && (
+        <CredentialGroupCompletionHandoff completionId={completionId} failure={failure} />
+      )}
       <AuthHeader
         title={error ? 'Account not connected' : 'Accounts connected'}
         description={error ?? 'Your accounts are ready to use — you can close this tab.'}

apps/sim/app/o/[organizationId]/components/organization-page/organization-page.tsx

@@ -34,6 +34,9 @@ interface OrganizationPageProps {
   tabs?: readonly OrganizationPageTab[]
   /** The page's primary action, a chip. Omit for a page without one. */
   action?: ReactNode
+  /** Keep the search field visible on pages whose main content is a searchable list. */
+  searchMode?: 'collapsible' | 'expanded'
+  searchPlaceholder?: string
   children?: ReactNode
 }
 
@@ -53,6 +56,8 @@ export function OrganizationPage({
   description,
   tabs,
   action,
+  searchMode = 'collapsible',
+  searchPlaceholder = 'Search',
   children,
 }: OrganizationPageProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
@@ -71,7 +76,7 @@ export function OrganizationPage({
    * viewer opened and has not dismissed.
    */
   const [searchOpened, setSearchOpened] = useState(false)
-  const searchOpen = searchOpened || search.length > 0
+  const searchOpen = searchMode === 'expanded' || searchOpened || search.length > 0
 
   const closeSearch = () => {
     setSearch('')
@@ -99,7 +104,8 @@ export function OrganizationPage({
             ref={tabsRef}
             className={cn(
               scrollFadeXClass,
-              'flex min-w-0 flex-1 items-center gap-[1px] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+              'flex min-w-0 flex-1 items-center gap-[1px] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+              searchMode === 'expanded' && !tabs?.length && 'hidden'
             )}
             {...scrollFadeAttributes(tabEdges)}
           >
@@ -119,32 +125,39 @@ export function OrganizationPage({
               )
             })}
           </div>
-          <div className='flex shrink-0 items-center gap-1.5'>
+          <div
+            className={cn(
+              'flex items-center gap-1.5',
+              searchMode === 'expanded' ? 'min-w-0 flex-1' : 'shrink-0'
+            )}
+          >
             {searchOpen ? (
               <ChipInput
-                autoFocus
+                autoFocus={searchMode === 'collapsible'}
                 icon={Search}
                 value={search}
-                placeholder='Search'
+                placeholder={searchPlaceholder}
                 aria-label='Search'
                 spellCheck={false}
                 autoComplete='off'
-                className='w-[240px]'
+                className={searchMode === 'expanded' ? 'w-full' : 'w-[240px]'}
                 onChange={(event) => setSearch(event.target.value)}
                 onKeyDown={(event) => {
                   if (event.key === 'Escape') closeSearch()
                 }}
                 endAdornment={
-                  <Button
-                    type='button'
-                    variant='quiet'
-                    size='icon'
-                    className='-mr-1 shrink-0'
-                    aria-label='Close search'
-                    onClick={closeSearch}
-                  >
-                    <X className='size-[14px]' />
-                  </Button>
+                  (searchMode === 'collapsible' || search.length > 0) && (
+                    <Button
+                      type='button'
+                      variant='quiet'
+                      size='icon'
+                      className='-mr-1 shrink-0'
+                      aria-label={searchMode === 'expanded' ? 'Clear search' : 'Close search'}
+                      onClick={closeSearch}
+                    >
+                      <X className='size-[14px]' />
+                    </Button>
+                  )
                 }
               />
             ) : (