autoselect provider when connecting from block

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createElement, useEffect, useMemo, useState } from 'react'
+import { createElement, useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { AlertTriangle, Check, Copy, Plus, RefreshCw, Search, Share2, Trash2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
@@ -25,6 +25,8 @@ import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import {
   clearPendingCredentialCreateRequest,
+  PENDING_CREDENTIAL_CREATE_REQUEST_EVENT,
+  type PendingCredentialCreateRequest,
   readPendingCredentialCreateRequest,
 } from '@/lib/credentials/client-state'
 import {
@@ -424,41 +426,69 @@ export function CredentialsManager() {
     setCreateError(null)
   }, [createOAuthProviderId])
 
+  const applyPendingCredentialCreateRequest = useCallback(
+    (request: PendingCredentialCreateRequest) => {
+      if (request.workspaceId !== workspaceId) {
+        return
+      }
+
+      if (Date.now() - request.requestedAt > 15 * 60 * 1000) {
+        clearPendingCredentialCreateRequest()
+        return
+      }
+
+      setShowCreateModal(true)
+      setShowCreateOAuthRequiredModal(false)
+      setCreateError(null)
+      setCreateDescription('')
+      setCreateEnvValue('')
+
+      if (request.type === 'oauth') {
+        setCreateType('oauth')
+        setCreateOAuthProviderId(request.providerId)
+        setCreateDisplayName(request.displayName)
+        setCreateEnvKey('')
+      } else {
+        setCreateType('secret')
+        setCreateSecretScope(request.type === 'env_workspace' ? 'workspace' : 'personal')
+        setCreateOAuthProviderId('')
+        setCreateDisplayName('')
+        setCreateEnvKey(request.envKey || '')
+      }
+
+      clearPendingCredentialCreateRequest()
+    },
+    [workspaceId]
+  )
+
   useEffect(() => {
     if (!workspaceId) return
     const request = readPendingCredentialCreateRequest()
     if (!request) return
+    applyPendingCredentialCreateRequest(request)
+  }, [workspaceId, applyPendingCredentialCreateRequest])
 
-    if (request.workspaceId !== workspaceId) {
-      return
-    }
+  useEffect(() => {
+    if (!workspaceId) return
 
-    if (Date.now() - request.requestedAt > 15 * 60 * 1000) {
-      clearPendingCredentialCreateRequest()
-      return
+    const handlePendingCreateRequest = (event: Event) => {
+      const request = (event as CustomEvent<PendingCredentialCreateRequest>).detail
+      if (!request) return
+      applyPendingCredentialCreateRequest(request)
     }
 
-    setShowCreateModal(true)
-    setShowCreateOAuthRequiredModal(false)
-    setCreateError(null)
-    setCreateDescription('')
-    setCreateEnvValue('')
+    window.addEventListener(
+      PENDING_CREDENTIAL_CREATE_REQUEST_EVENT,
+      handlePendingCreateRequest as EventListener
+    )
 
-    if (request.type === 'oauth') {
-      setCreateType('oauth')
-      setCreateOAuthProviderId(request.providerId)
-      setCreateDisplayName(request.displayName)
-      setCreateEnvKey('')
-    } else {
-      setCreateType('secret')
-      setCreateSecretScope(request.type === 'env_workspace' ? 'workspace' : 'personal')
-      setCreateOAuthProviderId('')
-      setCreateDisplayName('')
-      setCreateEnvKey(request.envKey || '')
+    return () => {
+      window.removeEventListener(
+        PENDING_CREDENTIAL_CREATE_REQUEST_EVENT,
+        handlePendingCreateRequest as EventListener
+      )
     }
-
-    clearPendingCredentialCreateRequest()
-  }, [workspaceId])
+  }, [workspaceId, applyPendingCredentialCreateRequest])
 
   useEffect(() => {
     if (!selectedCredential) {

apps/sim/lib/credentials/client-state.ts

@@ -2,6 +2,7 @@
 
 export const PENDING_OAUTH_CREDENTIAL_DRAFT_KEY = 'sim.pending-oauth-credential-draft'
 export const PENDING_CREDENTIAL_CREATE_REQUEST_KEY = 'sim.pending-credential-create-request'
+export const PENDING_CREDENTIAL_CREATE_REQUEST_EVENT = 'sim:pending-credential-create-request'
 
 export interface PendingOAuthCredentialDraft {
   workspaceId: string
@@ -69,6 +70,11 @@ export function readPendingCredentialCreateRequest(): PendingCredentialCreateReq
 export function writePendingCredentialCreateRequest(payload: PendingCredentialCreateRequest) {
   if (typeof window === 'undefined') return
   window.sessionStorage.setItem(PENDING_CREDENTIAL_CREATE_REQUEST_KEY, JSON.stringify(payload))
+  window.dispatchEvent(
+    new CustomEvent<PendingCredentialCreateRequest>(PENDING_CREDENTIAL_CREATE_REQUEST_EVENT, {
+      detail: payload,
+    })
+  )
 }
 
 export function clearPendingCredentialCreateRequest() {