diff --git a/.changeset/frank-spoons-stick.md b/.changeset/frank-spoons-stick.md new file mode 100644 index 00000000000..327b99bfb08 --- /dev/null +++ b/.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 diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts index 3fafa4fca48..d98d6349b75 100644 --- a/packages/localizations/src/bg-BG.ts +++ b/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', }, }, diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index a60df798890..84f4721e63c 100644 --- a/packages/localizations/src/en-US.ts +++ b/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', }, }, diff --git a/packages/localizations/src/uk-UA.ts b/packages/localizations/src/uk-UA.ts index e981b3644c5..8e91330ca7f 100644 --- a/packages/localizations/src/uk-UA.ts +++ b/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', }, }, diff --git a/packages/localizations/src/utils/enUS_v4.ts b/packages/localizations/src/utils/enUS_v4.ts index 39441e435f1..ab01682207c 100644 --- a/packages/localizations/src/utils/enUS_v4.ts +++ b/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: { diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx index 43e30fed3d4..c9682e18069 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx +++ b/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 ( { }); 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(, { 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(, { 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(); diff --git a/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx b/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx index dd4a86cc5f2..6b3f60e3400 100644 --- a/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx +++ b/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx @@ -158,7 +158,10 @@ const ConnectedAccount = ({ account }: { account: ExternalAccountResource }) => return ( - ({ overflow: 'hidden', gap: t.space.$2 })}> + ({ overflow: 'hidden', gap: t.space.$2 })} + > - ({ overflow: 'hidden', gap: t.space.$1 })}> + ({ overflow: 'hidden', gap: t.space.$1, alignItems: 'center' })}> ({ color: t.colors.$colorForeground })} truncate diff --git a/packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx index 8e5f7bd8e4f..ff4598bc222 100644 --- a/packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx +++ b/packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx @@ -138,7 +138,6 @@ export const EnterpriseAccountsSection = withCardStateProvider(() => { {card.error} - ({ overflow: 'hidden', gap: t.space.$2 })}> + ({ overflow: 'hidden', gap: t.space.$2 })} + > ); };