fix(clerk-js): Hide slug field on OrganizationProfile based on environment settings

.changeset/quick-trams-sink.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Hide slug field on `OrganizationProfile` based on environment settings

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
           />
         </Form.ControlRow>
-        <Form.ControlRow elementId={slugField.id}>
-          <Form.PlainInput
-            {...slugField.props}
-            onChange={onChangeSlug}
-            ignorePasswordManager
-          />
-        </Form.ControlRow>
+        {organizationSlugEnabled && (
+          <Form.ControlRow elementId={slugField.id}>
+            <Form.PlainInput
+              {...slugField.props}
+              onChange={onChangeSlug}
+              ignorePasswordManager
+            />
+          </Form.ControlRow>
+        )}
         <FormButtons
           isDisabled={!canSubmit}
           onReset={onReset}

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx

@@ -246,6 +246,7 @@ describe('OrganizationSettings', () => {
     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' }],

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(
+      <ProfileForm
+        onSuccess={vi.fn()}
+        onReset={vi.fn()}
+      />,
+      { wrapper },
+    );
+    expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
+    await userEvent.click(getByRole('button', { name: /save$/i }));
+    expect(fixtures.clerk.organization?.update).toHaveBeenCalledWith({ name: 'Org1' });
+  });
 });