diff --git a/.changeset/cozy-lands-grow.md b/.changeset/cozy-lands-grow.md new file mode 100644 index 00000000000..120045e01ce --- /dev/null +++ b/.changeset/cozy-lands-grow.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/shared': patch +--- + +Add `provider` and `logoPublicUrl` to `EnterpriseConnection` resource diff --git a/.changeset/polite-camels-chew.md b/.changeset/polite-camels-chew.md new file mode 100644 index 00000000000..49b6150ef91 --- /dev/null +++ b/.changeset/polite-camels-chew.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Display enterprise connection icon on account linking dropdown within `UserProfile` diff --git a/packages/clerk-js/src/core/resources/EnterpriseConnection.ts b/packages/clerk-js/src/core/resources/EnterpriseConnection.ts index 4c20c560087..239f401822a 100644 --- a/packages/clerk-js/src/core/resources/EnterpriseConnection.ts +++ b/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, diff --git a/packages/shared/src/types/enterpriseConnection.ts b/packages/shared/src/types/enterpriseConnection.ts index c7a0bf83fbd..1acf0950167 100644 --- a/packages/shared/src/types/enterpriseConnection.ts +++ b/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; diff --git a/packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx index be96047c711..8e5f7bd8e4f 100644 --- a/packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx +++ b/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 ( } />