Do not render section for empty accounts

Author: LauraBeatris

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

@@ -67,6 +67,10 @@ export const ConnectedAccountsSection = withCardStateProvider(
       ...user.unverifiedExternalAccounts.filter(a => a.verification?.error),
     ];
 
+    if (accounts.length === 0) {
+      return null;
+    }
+
     return (
       <ProfileSection.Root
         title={localizationKeys('userProfile.start.connectedAccountsSection.title')}

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

@@ -5,6 +5,7 @@ import type {
   EnterpriseAccountConnectionResource,
   EnterpriseAccountResource,
   OAuthProvider,
+  SamlIdpSlug,
 } from '@clerk/shared/types';
 import { Fragment, useState } from 'react';
 
@@ -56,7 +57,10 @@ const EnterpriseConnectMenuButton = (props: { connection: EnterpriseAccountConne
       });
   };
 
-  const providerWithoutPrefix = connection?.name;
+  const providerWithoutPrefix = connection.provider.replace(/(oauth_|saml_)/, '').trim() as OAuthProvider;
+  const providerIconElementId = (connection.protocol === 'saml' ? connection.provider : providerWithoutPrefix) as
+    | OAuthProvider
+    | SamlIdpSlug;
 
   return (
     <ProfileSection.ActionMenuItem
@@ -84,7 +88,7 @@ const EnterpriseConnectMenuButton = (props: { connection: EnterpriseAccountConne
           isDisabled={card.isLoading}
           alt={`Connect ${connection.name} account`}
           elementDescriptor={descriptors.providerIcon}
-          elementId={descriptors.providerIcon.setId(providerWithoutPrefix)}
+          elementId={descriptors.providerIcon.setId(providerIconElementId)}
         />
       }
     />