extract shared code

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx

@@ -24,6 +24,7 @@ import { useCredentialSets } from '@/hooks/queries/credential-sets'
 import { useOAuthCredentials } from '@/hooks/queries/oauth-credentials'
 import { useOrganizations } from '@/hooks/queries/organization'
 import { useSubscriptionData } from '@/hooks/queries/subscription'
+import { useCredentialRefreshTriggers } from '@/hooks/use-credential-refresh-triggers'
 import { getMissingRequiredScopes } from '@/hooks/use-oauth-scope-status'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
@@ -122,6 +123,8 @@ export function CredentialSelector({
       return
     }
 
+    setInaccessibleCredentialName(null)
+
     let cancelled = false
     ;(async () => {
       try {
@@ -412,52 +415,3 @@ export function CredentialSelector({
     </div>
   )
 }
-
-function useCredentialRefreshTriggers(
-  refetchCredentials: () => Promise<unknown>,
-  providerId: string,
-  workspaceId: string
-) {
-  useEffect(() => {
-    const refresh = () => {
-      void refetchCredentials()
-    }
-
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        refresh()
-      }
-    }
-
-    const handlePageShow = (event: Event) => {
-      if ('persisted' in event && (event as PageTransitionEvent).persisted) {
-        refresh()
-      }
-    }
-
-    const handleCredentialsUpdated = (
-      event: CustomEvent<{ providerId?: string; workspaceId?: string }>
-    ) => {
-      if (event.detail?.providerId && event.detail.providerId !== providerId) {
-        return
-      }
-      if (event.detail?.workspaceId && workspaceId && event.detail.workspaceId !== workspaceId) {
-        return
-      }
-      refresh()
-    }
-
-    document.addEventListener('visibilitychange', handleVisibilityChange)
-    window.addEventListener('pageshow', handlePageShow)
-    window.addEventListener('oauth-credentials-updated', handleCredentialsUpdated as EventListener)
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange)
-      window.removeEventListener('pageshow', handlePageShow)
-      window.removeEventListener(
-        'oauth-credentials-updated',
-        handleCredentialsUpdated as EventListener
-      )
-    }
-  }, [providerId, workspaceId, refetchCredentials])
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx

@@ -14,6 +14,7 @@ import {
 } from '@/lib/oauth'
 import { OAuthRequiredModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal'
 import { useOAuthCredentials } from '@/hooks/queries/oauth-credentials'
+import { useCredentialRefreshTriggers } from '@/hooks/use-credential-refresh-triggers'
 import { getMissingRequiredScopes } from '@/hooks/use-oauth-scope-status'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
@@ -100,6 +101,8 @@ export function ToolCredentialSelector({
       return
     }
 
+    setInaccessibleCredentialName(null)
+
     let cancelled = false
     ;(async () => {
       try {
@@ -271,52 +274,3 @@ export function ToolCredentialSelector({
     </div>
   )
 }
-
-function useCredentialRefreshTriggers(
-  refetchCredentials: () => Promise<unknown>,
-  providerId: string,
-  workspaceId: string
-) {
-  useEffect(() => {
-    const refresh = () => {
-      void refetchCredentials()
-    }
-
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        refresh()
-      }
-    }
-
-    const handlePageShow = (event: Event) => {
-      if ('persisted' in event && (event as PageTransitionEvent).persisted) {
-        refresh()
-      }
-    }
-
-    const handleCredentialsUpdated = (
-      event: CustomEvent<{ providerId?: string; workspaceId?: string }>
-    ) => {
-      if (event.detail?.providerId && event.detail.providerId !== providerId) {
-        return
-      }
-      if (event.detail?.workspaceId && workspaceId && event.detail.workspaceId !== workspaceId) {
-        return
-      }
-      refresh()
-    }
-
-    document.addEventListener('visibilitychange', handleVisibilityChange)
-    window.addEventListener('pageshow', handlePageShow)
-    window.addEventListener('oauth-credentials-updated', handleCredentialsUpdated as EventListener)
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange)
-      window.removeEventListener('pageshow', handlePageShow)
-      window.removeEventListener(
-        'oauth-credentials-updated',
-        handleCredentialsUpdated as EventListener
-      )
-    }
-  }, [providerId, workspaceId, refetchCredentials])
-}

apps/sim/hooks/use-credential-refresh-triggers.ts

@@ -0,0 +1,52 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function useCredentialRefreshTriggers(
+  refetchCredentials: () => Promise<unknown>,
+  providerId: string,
+  workspaceId: string
+) {
+  useEffect(() => {
+    const refresh = () => {
+      void refetchCredentials()
+    }
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        refresh()
+      }
+    }
+
+    const handlePageShow = (event: Event) => {
+      if ('persisted' in event && (event as PageTransitionEvent).persisted) {
+        refresh()
+      }
+    }
+
+    const handleCredentialsUpdated = (
+      event: CustomEvent<{ providerId?: string; workspaceId?: string }>
+    ) => {
+      if (event.detail?.providerId && event.detail.providerId !== providerId) {
+        return
+      }
+      if (event.detail?.workspaceId && workspaceId && event.detail.workspaceId !== workspaceId) {
+        return
+      }
+      refresh()
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    window.addEventListener('pageshow', handlePageShow)
+    window.addEventListener('oauth-credentials-updated', handleCredentialsUpdated as EventListener)
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+      window.removeEventListener('pageshow', handlePageShow)
+      window.removeEventListener(
+        'oauth-credentials-updated',
+        handleCredentialsUpdated as EventListener
+      )
+    }
+  }, [providerId, workspaceId, refetchCredentials])
+}