fix(clerk-js,ui,shared): Display enterprise connection icon on account linking dropdown (#8203)

Author: LauraBeatris

.changeset/cozy-lands-grow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Add `provider` and `logoPublicUrl` to `EnterpriseConnection` resource

.changeset/polite-camels-chew.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Display enterprise connection icon on account linking dropdown within `UserProfile`

packages/clerk-js/src/core/resources/EnterpriseConnection.ts

@@ -81,6 +81,8 @@ export class EnterpriseConnection extends BaseResource implements EnterpriseConn
   id!: string;
   name!: string;
   active!: boolean;
+  provider!: string;
+  logoPublicUrl: string | null = null;
   domains: string[] = [];
   organizationId: string | null = null;
   syncUserAttributes!: boolean;
@@ -105,6 +107,8 @@ export class EnterpriseConnection extends BaseResource implements EnterpriseConn
     this.id = data.id;
     this.name = data.name;
     this.active = data.active;
+    this.provider = data.provider;
+    this.logoPublicUrl = data.logo_public_url ?? null;
     this.domains = data.domains ?? [];
     this.organizationId = data.organization_id ?? null;
     this.syncUserAttributes = data.sync_user_attributes;
@@ -126,6 +130,8 @@ export class EnterpriseConnection extends BaseResource implements EnterpriseConn
       id: this.id,
       name: this.name,
       active: this.active,
+      provider: this.provider,
+      logo_public_url: this.logoPublicUrl,
       domains: this.domains,
       organization_id: this.organizationId,
       sync_user_attributes: this.syncUserAttributes,

packages/clerk-js/src/core/resources/__tests__/User.test.ts

@@ -1,4 +1,4 @@
-import type { UserJSON } from '@clerk/shared/types';
+import type { EnterpriseConnectionJSON, UserJSON } from '@clerk/shared/types';
 import { describe, expect, it, vi } from 'vitest';
 
 import { BaseResource } from '../internal';
@@ -80,22 +80,37 @@ describe('User', () => {
   });
 
   it('fetches enterprise connections', async () => {
-    const enterpriseConnectionsJSON = [
+    const enterpriseConnectionsJSON: EnterpriseConnectionJSON[] = [
       {
         id: 'ec_123',
-        object: 'enterprise_account_connection',
+        object: 'enterprise_connection',
         name: 'Acme Corp SSO',
         active: true,
         allow_organization_account_linking: true,
-        domain: 'acme.com',
-        protocol: 'saml',
         provider: 'saml_okta',
         logo_public_url: null,
+        domains: ['acme.com'],
+        organization_id: null,
         sync_user_attributes: true,
-        allow_subdomains: false,
-        allow_idp_initiated: false,
         disable_additional_identifications: false,
-        enterprise_connection_id: 'ec_123',
+        custom_attributes: [],
+        oauth_config: null,
+        saml_connection: {
+          id: 'saml_123',
+          name: 'Acme Corp SSO',
+          active: true,
+          idp_entity_id: 'https://idp.acme.com/entity',
+          idp_sso_url: 'https://idp.acme.com/sso',
+          idp_certificate: 'MIICertificatePlaceholder',
+          idp_metadata_url: 'https://idp.acme.com/metadata',
+          idp_metadata: '',
+          acs_url: 'https://clerk.example.com/v1/saml/acs',
+          sp_entity_id: 'https://clerk.example.com',
+          sp_metadata_url: 'https://clerk.example.com/v1/saml/metadata',
+          allow_subdomains: false,
+          allow_idp_initiated: false,
+          force_authn: false,
+        },
         created_at: 1234567890,
         updated_at: 1234567890,
       },

packages/shared/src/types/enterpriseConnection.ts

@@ -5,6 +5,8 @@ export interface EnterpriseConnectionJSON extends ClerkResourceJSON {
   object: 'enterprise_connection';
   name: string;
   active: boolean;
+  provider: string;
+  logo_public_url?: string | null;
   domains?: string[];
   organization_id?: string | null;
   sync_user_attributes: boolean;
@@ -23,6 +25,8 @@ export interface EnterpriseConnectionResource extends ClerkResource {
   id: string;
   name: string;
   active: boolean;
+  provider: string;
+  logoPublicUrl: string | null;
   domains: string[];
   organizationId: string | null;
   syncUserAttributes: boolean;

packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx

@@ -14,9 +14,6 @@ import { ProviderIcon } from '../../common';
 import { useUserProfileContext } from '../../contexts';
 import { Badge, Box, descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { Action } from '../../elements/Action';
-
-const GENERIC_ENTERPRISE_PROVIDER_ICON_ID = 'custom_enterprise' as OAuthProvider;
-
 const EnterpriseConnectMenuButton = (props: { connection: EnterpriseConnectionResource }) => {
   const { connection } = props;
   const card = useCardState();
@@ -54,7 +51,8 @@ const EnterpriseConnectMenuButton = (props: { connection: EnterpriseConnectionRe
       });
   };
 
-  const providerIconUrl = connection.oauthConfig?.logoPublicUrl?.trim() ?? '';
+  const providerIconId = connection.provider.replace(/(oauth_|saml_)/, '').trim() as OAuthProvider;
+  const providerIconUrl = connection.logoPublicUrl?.trim() || '';
 
   return (
     <ProfileSection.ActionMenuItem
@@ -75,15 +73,14 @@ const EnterpriseConnectMenuButton = (props: { connection: EnterpriseConnectionRe
       })}
       leftIcon={
         <ProviderIcon
-          // TODO - Use `provider` and `logo_public_url` once FAPI `EnterpriseConnection` resource gets updated
-          id={GENERIC_ENTERPRISE_PROVIDER_ICON_ID}
+          id={providerIconId}
           iconUrl={providerIconUrl || undefined}
           name={connection.name}
           isLoading={card.loadingMetadata === loadingKey}
           isDisabled={card.isLoading}
           alt={`Connect ${connection.name} account`}
           elementDescriptor={descriptors.providerIcon}
-          elementId={descriptors.providerIcon.setId(GENERIC_ENTERPRISE_PROVIDER_ICON_ID)}
+          elementId={descriptors.providerIcon.setId(providerIconId)}
         />
       }
     />