fix(ui,clerk-js,localizations): General OrganizationProfile UI fixes

.changeset/frank-spoons-stick.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/ui': minor
+---
+
+Improve `OrganizationProfile` UI:
+- Hide the `Verified domains` section when there are no domains and the user lacks permission to add them
+- Rename the `Organization profile` section to `Profile` for consistency with `UserProfile`
+- Align the enterprise accounts section with the account data

packages/localizations/src/bg-BG.ts

@@ -501,7 +501,7 @@ export const bgBG: LocalizationResource = {
       headerTitle__members: 'Членове',
       profileSection: {
         primaryButton: undefined,
-        title: 'Organization Profile',
+        title: 'Profile',
         uploadAction__title: 'Logo',
       },
     },

packages/localizations/src/en-US.ts

@@ -1111,7 +1111,7 @@ export const enUS: LocalizationResource = {
       membershipSeatUsageLabel: '{{count}} of {{limit}} seats used',
       profileSection: {
         primaryButton: 'Update profile',
-        title: 'Organization Profile',
+        title: 'Profile',
         uploadAction__title: 'Logo',
       },
     },

packages/localizations/src/uk-UA.ts

@@ -500,7 +500,7 @@ export const ukUA: LocalizationResource = {
       headerTitle__members: 'Учасники',
       profileSection: {
         primaryButton: undefined,
-        title: 'Organization Profile',
+        title: 'Profile',
         uploadAction__title: 'Logo',
       },
     },

packages/localizations/src/utils/enUS_v4.ts

@@ -556,7 +556,7 @@ export const enUS_v4: any = {
       headerSubtitle__settings: 'Manage organization settings',
     },
     profilePage: {
-      title: 'Organization Profile',
+      title: 'Profile',
       subtitle: 'Manage organization profile',
       successMessage: 'The organization has been updated.',
       dangerSection: {

packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx

@@ -136,7 +136,8 @@ const OrganizationProfileSection = () => {
 
 const OrganizationDomainsSection = () => {
   const { organizationSettings } = useEnvironment();
-  const { organization } = useOrganization();
+  const { organization, domains } = useOrganization({ domains: { infinite: true } });
+  const canManageDomains = useProtect({ permission: 'org:sys_domains:manage' });
 
   if (!organizationSettings || !organization) {
     return null;
@@ -146,6 +147,12 @@ const OrganizationDomainsSection = () => {
     return null;
   }
 
+  // Hide the section when there are no domains to show and the user cannot add
+  // any
+  if (!domains?.data?.length && !canManageDomains) {
+    return null;
+  }
+
   return (
     <ProfileSection.Root
       title={localizationKeys('organizationProfile.profilePage.domainSection.title')}

packages/ui/src/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx

@@ -145,8 +145,8 @@ describe('OrganizationSettings', () => {
     });
     fixtures.clerk.organization?.getDomains.mockReturnValue(
       Promise.resolve({
-        data: [],
-        total_count: 0,
+        data: [createFakeDomain({ id: '1', organizationId: '1', name: 'clerk.com' })],
+        total_count: 1,
       }),
     );
     const { queryByText } = await act(() => render(<OrganizationGeneralPage />, { wrapper }));
@@ -157,7 +157,30 @@ describe('OrganizationSettings', () => {
     expect(fixtures.clerk.organization?.getDomains).toBeCalled();
   });
 
-  it('shows domains and shows the Add domain button when `org:sys_domains:manage` exists', async () => {
+  it('hides domains when the list is empty and the user cannot manage domains', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withOrganizationDomains();
+      f.withUser({
+        email_addresses: ['test@clerk.dev'],
+        organization_memberships: [{ name: 'Org1', permissions: ['org:sys_domains:read'] }],
+      });
+    });
+    fixtures.clerk.organization?.getDomains.mockReturnValue(
+      Promise.resolve({
+        data: [],
+        total_count: 0,
+      }),
+    );
+    const { queryByText } = await act(() => render(<OrganizationGeneralPage />, { wrapper }));
+
+    await waitFor(() => {
+      expect(queryByText('Verified domains')).not.toBeInTheDocument();
+      expect(queryByText('Add domain')).not.toBeInTheDocument();
+    });
+  });
+
+  it('shows domains and shows the Add domain button when `org:sys_domains:manage` exists even with an empty list', async () => {
     const { wrapper, fixtures } = await createFixtures(f => {
       f.withOrganizations();
       f.withOrganizationDomains();

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

@@ -158,7 +158,10 @@ const ConnectedAccount = ({ account }: { account: ExternalAccountResource }) =>
   return (
     <Fragment key={account.id}>
       <ProfileSection.Item id='connectedAccounts'>
-        <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}>
+        <Flex
+          align='center'
+          sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}
+        >
           <ProviderIcon
             id={account.provider}
             iconUrl={providerData?.iconUrl}

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

@@ -61,7 +61,7 @@ export const EmailsSection = ({
             return (
               <Fragment key={email.emailAddress}>
                 <ProfileSection.Item id='emailAddresses'>
-                  <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$1 })}>
+                  <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$1, alignItems: 'center' })}>
                     <Text
                       sx={t => ({ color: t.colors.$colorForeground })}
                       truncate

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

@@ -138,7 +138,6 @@ export const EnterpriseAccountsSection = withCardStateProvider(() => {
     <ProfileSection.Root
       title={localizationKeys('userProfile.start.enterpriseAccountsSection.title')}
       id='enterpriseAccounts'
-      centered={false}
     >
       <Card.Alert>{card.error}</Card.Alert>
       <Action.Root
@@ -174,7 +173,10 @@ const EnterpriseAccount = ({ account }: { account: EnterpriseAccountResource })
   return (
     <Fragment key={accountId}>
       <ProfileSection.Item id='enterpriseAccounts'>
-        <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}>
+        <Flex
+          align='center'
+          sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}
+        >
           <EnterpriseAccountProviderIcon account={account} />
           <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
             <Flex
@@ -222,6 +224,7 @@ const EnterpriseAccountProviderIcon = ({ account }: { account: EnterpriseAccount
       alt={`${connectionName}'s icon`}
       elementDescriptor={[descriptors.providerIcon]}
       elementId={descriptors.enterpriseButtonsProviderIcon.setId(account.provider)}
+      sx={{ flexShrink: 0 }}
     />
   );
 };