diff --git a/.changeset/quick-trams-sink.md b/.changeset/quick-trams-sink.md new file mode 100644 index 00000000000..1ee8a927fe2 --- /dev/null +++ b/.changeset/quick-trams-sink.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Hide slug field on `OrganizationProfile` based on environment settings diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx index 225c6f9af40..03f94ae7bf1 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx @@ -1,6 +1,8 @@ import { useOrganization } from '@clerk/shared/react'; +import type { UpdateOrganizationParams } from '@clerk/types'; import React from 'react'; +import { useEnvironment } from '@/ui/contexts'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { Form } from '@/ui/elements/Form'; import { FormButtons } from '@/ui/elements/FormButtons'; @@ -20,6 +22,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => { const title = localizationKeys('organizationProfile.profilePage.title'); const card = useCardState(); const { organization } = useOrganization(); + const { organizationSettings } = useEnvironment(); const nameField = useFormControl('name', organization?.name || '', { type: 'text', @@ -39,14 +42,20 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => { const dataChanged = organization.name !== nameField.value || organization.slug !== slugField.value; const canSubmit = dataChanged && slugField.feedbackType !== 'error'; + const organizationSlugEnabled = !organizationSettings.slug.disabled; const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); - return (canSubmit ? organization.update({ name: nameField.value, slug: slugField.value }) : Promise.resolve()) - .then(onSuccess) - .catch(err => { - handleError(err, [nameField, slugField], card.setError); - }); + + const updateOrgParams: UpdateOrganizationParams = { name: nameField.value }; + + if (organizationSlugEnabled) { + updateOrgParams.slug = slugField.value; + } + + return (canSubmit ? organization.update(updateOrgParams) : Promise.resolve()).then(onSuccess).catch(err => { + handleError(err, [nameField, slugField], card.setError); + }); }; const uploadAvatar = (file: File) => { @@ -92,13 +101,15 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => { ignorePasswordManager /> - - - + {organizationSlugEnabled && ( + + + + )} { it('open the profile section', async () => { const { wrapper } = await createFixtures(f => { f.withOrganizations(); + f.withOrganizationSlug(true); f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'Org1', slug: 'Org1' }], diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx index 1269f8445f5..62d1568fbe3 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/ProfileSettingsPage.test.tsx @@ -66,12 +66,13 @@ describe('OrganizationProfileScreen', () => { await userEvent.type(getByLabelText(/^name/i), '234'); expect(getByDisplayValue('Org1234')).toBeDefined(); await userEvent.click(getByRole('button', { name: /save/i })); - expect(fixtures.clerk.organization?.update).toHaveBeenCalledWith({ name: 'Org1234', slug: '' }); + expect(fixtures.clerk.organization?.update).toHaveBeenCalledWith({ name: 'Org1234' }); }); it('updates organization slug on clicking continue', async () => { const { wrapper, fixtures } = await createFixtures(f => { f.withOrganizations(); + f.withOrganizationSlug(true); f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'Org1', slug: '', role: 'admin' }], @@ -91,4 +92,27 @@ describe('OrganizationProfileScreen', () => { await userEvent.click(getByRole('button', { name: /save$/i })); expect(fixtures.clerk.organization?.update).toHaveBeenCalledWith({ name: 'Org1', slug: 'my-org' }); }); + + it("does not display slug field if it's disabled on environment", async () => { + const { wrapper, fixtures } = await createFixtures(f => { + f.withOrganizations(); + f.withOrganizationSlug(false); + f.withUser({ + email_addresses: ['test@clerk.com'], + organization_memberships: [{ name: 'Org1', role: 'admin' }], + }); + }); + + fixtures.clerk.organization?.update.mockResolvedValue({} as OrganizationResource); + const { queryByLabelText, userEvent, getByRole } = render( + , + { wrapper }, + ); + expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument(); + await userEvent.click(getByRole('button', { name: /save$/i })); + expect(fixtures.clerk.organization?.update).toHaveBeenCalledWith({ name: 'Org1' }); + }); });