fix rendering of credential set name

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -371,8 +371,7 @@ const SubBlockRow = ({
   const { displayName: credentialName } = useCredentialName(
     credentialSourceId,
     credentialProviderId,
-    workflowId,
-    workspaceId
+    workflowId
   )
 
   const credentialId = dependencyValues.credential

apps/sim/hooks/queries/credential-sets.ts

@@ -78,6 +78,25 @@ export function useCredentialSets(organizationId?: string, enabled = true) {
   })
 }
 
+interface CredentialSetDetailResponse {
+  credentialSet?: CredentialSet
+}
+
+export async function fetchCredentialSetById(id: string): Promise<CredentialSet | null> {
+  if (!id) return null
+  const data = await fetchJson<CredentialSetDetailResponse>(`/api/credential-sets/${id}`)
+  return data.credentialSet ?? null
+}
+
+export function useCredentialSetDetail(id?: string, enabled = true) {
+  return useQuery<CredentialSet | null>({
+    queryKey: credentialSetKeys.detail(id),
+    queryFn: () => fetchCredentialSetById(id ?? ''),
+    enabled: Boolean(id) && enabled,
+    staleTime: 60 * 1000,
+  })
+}
+
 export function useCredentialSetMemberships() {
   return useQuery<CredentialSetMembership[]>({
     queryKey: credentialSetKeys.memberships(),

apps/sim/hooks/queries/oauth-credentials.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import type { Credential } from '@/lib/oauth'
 import { CREDENTIAL_SET } from '@/executor/constants'
-import { useCredentialSetMemberships, useCredentialSets } from '@/hooks/queries/credential-sets'
+import { useCredentialSetDetail } from '@/hooks/queries/credential-sets'
 import { fetchJson } from '@/hooks/selectors/helpers'
 
 interface CredentialListResponse {
@@ -62,25 +62,17 @@ export function useOAuthCredentialDetail(
   })
 }
 
-export function useCredentialName(
-  credentialId?: string,
-  providerId?: string,
-  workflowId?: string,
-  workspaceId?: string
-) {
+export function useCredentialName(credentialId?: string, providerId?: string, workflowId?: string) {
   // Check if this is a credential set value
   const isCredentialSet = credentialId?.startsWith(CREDENTIAL_SET.PREFIX) ?? false
   const credentialSetId = isCredentialSet
     ? credentialId?.slice(CREDENTIAL_SET.PREFIX.length)
     : undefined
 
-  // Fetch credential set memberships if this is a credential set
-  const { data: memberships = [], isFetching: membershipsLoading } = useCredentialSetMemberships()
-
-  // Also fetch owned credential sets to check there
-  const { data: ownedSets = [], isFetching: ownedSetsLoading } = useCredentialSets(
-    workspaceId,
-    isCredentialSet && Boolean(workspaceId)
+  // Fetch credential set by ID directly
+  const { data: credentialSetData, isFetching: credentialSetLoading } = useCredentialSetDetail(
+    credentialSetId,
+    isCredentialSet
   )
 
   const { data: credentials = [], isFetching: credentialsLoading } = useOAuthCredentials(
@@ -102,23 +94,14 @@ export function useCredentialName(
 
   const hasForeignMeta = foreignCredentials.length > 0
 
-  // For credential sets, find the matching membership or owned set and use its name
-  const credentialSetName = credentialSetId
-    ? (memberships.find((m) => m.credentialSetId === credentialSetId)?.credentialSetName ??
-      ownedSets.find((s) => s.id === credentialSetId)?.name)
-    : undefined
-
   const displayName =
-    credentialSetName ??
+    credentialSetData?.name ??
     selectedCredential?.name ??
     (hasForeignMeta ? 'Saved by collaborator' : null)
 
   return {
     displayName,
-    isLoading:
-      credentialsLoading ||
-      foreignLoading ||
-      (isCredentialSet && (membershipsLoading || ownedSetsLoading)),
+    isLoading: credentialsLoading || foreignLoading || (isCredentialSet && credentialSetLoading),
     hasForeignMeta,
   }
 }