chore(shared,ui): Remove deprecated hideSlug prop from organization AIOs (#7283)

Author: LauraBeatris

.changeset/ninety-days-dream.md

@@ -0,0 +1,8 @@
+---
+'@clerk/shared': major
+'@clerk/ui': major
+---
+
+Remove deprecated `hideSlug` in favor of `organizationSettings.slug.disabled` setting
+
+Slugs can now be enabled directly from the Organization Settings page in the Clerk Dashboard

packages/shared/src/types/clerk.ts

@@ -1664,12 +1664,6 @@ export type CreateOrganizationProps = RoutingOptions & {
    * prop of ClerkProvider (if one is provided)
    */
   appearance?: CreateOrganizationTheme;
-  /**
-   * @deprecated
-   * This prop will be removed in a future version.
-   * Configure whether organization slug is enabled via the Clerk Dashboard under Organization Settings.
-   */
-  hideSlug?: boolean;
 };
 
 export type CreateOrganizationModalProps = WithoutRouting<CreateOrganizationProps>;
@@ -1837,12 +1831,6 @@ export type OrganizationSwitcherProps = CreateOrganizationMode &
      * the number of max allowed members is equal to 1
      */
     skipInvitationScreen?: boolean;
-    /**
-     * @deprecated
-     * This prop will be removed in a future version.
-     * Configure whether organization slug is enabled via the Clerk Dashboard under Organization Settings.
-     */
-    hideSlug?: boolean;
     /**
      * Customisation options to fully match the Clerk components to your own brand.
      * These options serve as overrides and will be merged with the global `appearance`
@@ -1903,12 +1891,6 @@ export type OrganizationListProps = {
    * @default undefined`
    */
   afterSelectPersonalUrl?: ((user: UserResource) => string) | LooseExtractedParams<PrimitiveKeys<UserResource>>;
-  /**
-   * @deprecated
-   * This prop will be removed in a future version.
-   * Configure whether organization slug is enabled via the Clerk Dashboard under Organization Settings.
-   */
-  hideSlug?: boolean;
 };
 
 export type WaitlistProps = {

packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx

@@ -34,12 +34,6 @@ type CreateOrganizationFormProps = {
     headerTitle?: LocalizationKey;
     headerSubtitle?: LocalizationKey;
   };
-  /**
-   * @deprecated
-   * This prop will be removed in a future version.
-   * Configure whether organization slug is enabled via the Clerk Dashboard under Organization Settings.
-   */
-  hideSlug?: boolean;
 };
 
 export const CreateOrganizationForm = withCardStateProvider((props: CreateOrganizationFormProps) => {
@@ -70,7 +64,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
   const canSubmit = dataChanged;
 
   // Environment setting takes precedence over prop
-  const organizationSlugEnabled = !organizationSettings.slug.disabled && !props.hideSlug;
+  const organizationSlugEnabled = !organizationSettings.slug.disabled;
 
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();

packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx

@@ -11,7 +11,7 @@ import { CreateOrganizationForm } from './CreateOrganizationForm';
 export const CreateOrganizationPage = withCardStateProvider(() => {
   const { closeCreateOrganization } = useClerk();
 
-  const { mode, navigateAfterCreateOrganization, skipInvitationScreen, hideSlug } = useCreateOrganizationContext();
+  const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
   const card = useCardState();
   const { showDevModeNotice } = useDevMode();
 
@@ -33,7 +33,6 @@ export const CreateOrganizationPage = withCardStateProvider(() => {
               closeCreateOrganization();
             }
           }}
-          hideSlug={hideSlug}
         />
       </Card.Content>
       <Card.Footer />

packages/ui/src/components/CreateOrganization/__tests__/CreateOrganization.test.tsx

@@ -80,40 +80,6 @@ describe('CreateOrganization', () => {
     expect(getByRole('heading', { name: 'Create organization', level: 1 })).toBeInTheDocument();
   });
 
-  describe('with `hideSlug` prop', () => {
-    it('renders component without slug field', async () => {
-      const { wrapper, fixtures, props } = await createFixtures(f => {
-        f.withOrganizations();
-        f.withUser({
-          email_addresses: ['test@clerk.com'],
-        });
-      });
-
-      fixtures.clerk.createOrganization.mockReturnValue(
-        Promise.resolve(
-          getCreatedOrg({
-            maxAllowedMemberships: 1,
-            slug: 'new-org-1722578361',
-          }),
-        ),
-      );
-
-      props.setProps({ hideSlug: true });
-      const { userEvent, getByRole, queryByText, queryByLabelText, getByLabelText } = render(<CreateOrganization />, {
-        wrapper,
-      });
-
-      expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
-
-      await userEvent.type(getByLabelText(/Name/i), 'new org');
-      await userEvent.click(getByRole('button', { name: /create organization/i }));
-
-      await waitFor(() => {
-        expect(queryByText(/Invite new members/i)).toBeInTheDocument();
-      });
-    });
-  });
-
   describe('with organization slug configured on environment', () => {
     it('when disabled, renders component without slug field', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
@@ -178,72 +144,6 @@ describe('CreateOrganization', () => {
         expect(queryByText(/Invite new members/i)).toBeInTheDocument();
       });
     });
-
-    it('when enabled and `hideSlug` prop is passed, renders component without slug field', async () => {
-      const { wrapper, fixtures, props } = await createFixtures(f => {
-        f.withOrganizations();
-        f.withOrganizationSlug(true);
-        f.withUser({
-          email_addresses: ['test@clerk.com'],
-        });
-      });
-
-      fixtures.clerk.createOrganization.mockReturnValue(
-        Promise.resolve(
-          getCreatedOrg({
-            maxAllowedMemberships: 1,
-            slug: 'new-org-1722578361',
-          }),
-        ),
-      );
-
-      props.setProps({ hideSlug: true });
-      const { userEvent, getByRole, queryByText, queryByLabelText, getByLabelText } = render(<CreateOrganization />, {
-        wrapper,
-      });
-
-      expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
-
-      await userEvent.type(getByLabelText(/Name/i), 'new org');
-      await userEvent.click(getByRole('button', { name: /create organization/i }));
-
-      await waitFor(() => {
-        expect(queryByText(/Invite new members/i)).toBeInTheDocument();
-      });
-    });
-
-    it('when disabled and `hideSlug` prop is passed, renders component without slug field', async () => {
-      const { wrapper, fixtures, props } = await createFixtures(f => {
-        f.withOrganizations();
-        f.withOrganizationSlug(false); // Environment disables slug
-        f.withUser({
-          email_addresses: ['test@clerk.com'],
-        });
-      });
-
-      fixtures.clerk.createOrganization.mockReturnValue(
-        Promise.resolve(
-          getCreatedOrg({
-            maxAllowedMemberships: 1,
-            slug: 'new-org-1722578361',
-          }),
-        ),
-      );
-
-      props.setProps({ hideSlug: true });
-      const { userEvent, getByRole, queryByText, queryByLabelText, getByLabelText } = render(<CreateOrganization />, {
-        wrapper,
-      });
-
-      expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
-
-      await userEvent.type(getByLabelText(/Name/i), 'new org');
-      await userEvent.click(getByRole('button', { name: /create organization/i }));
-
-      await waitFor(() => {
-        expect(queryByText(/Invite new members/i)).toBeInTheDocument();
-      });
-    });
   });
 
   it('skips invitation screen', async () => {

packages/ui/src/components/OrganizationList/OrganizationListPage.tsx

@@ -85,7 +85,7 @@ export const OrganizationListPage = withCardStateProvider(() => {
 
 const OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {
   const card = useCardState();
-  const { navigateAfterCreateOrganization, skipInvitationScreen, hideSlug } = useOrganizationListContext();
+  const { navigateAfterCreateOrganization, skipInvitationScreen } = useOrganizationListContext();
   const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);
   return (
     <>
@@ -112,7 +112,6 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole
               onCancel={
                 showListInitially && isCreateOrganizationFlow ? () => setCreateOrganizationFlow(false) : undefined
               }
-              hideSlug={hideSlug}
             />
           </Box>
         </>

packages/ui/src/components/OrganizationList/__tests__/OrganizationList.test.tsx

@@ -3,12 +3,12 @@ import { describe, expect, it, vi } from 'vitest';
 import { bindCreateFixtures } from '@/test/create-fixtures';
 import { render, waitFor } from '@/test/utils';
 
+import { OrganizationList } from '../';
 import { createFakeOrganization } from '../../CreateOrganization/__tests__/CreateOrganization.test';
 import {
   createFakeUserOrganizationInvitation,
   createFakeUserOrganizationMembership,
 } from '../../OrganizationSwitcher/__tests__/test-utils';
-import { OrganizationList } from '../';
 
 const { createFixtures } = bindCreateFixtures('OrganizationList');
 
@@ -277,16 +277,16 @@ describe('OrganizationList', () => {
       });
     });
 
-    it('displays CreateOrganization without slug field', async () => {
-      const { wrapper, props } = await createFixtures(f => {
+    it("does not display slug field if it's disabled on environment", async () => {
+      const { wrapper } = await createFixtures(f => {
         f.withOrganizations();
+        f.withOrganizationSlug(false);
         f.withUser({
           email_addresses: ['test@clerk.com'],
           create_organization_enabled: true,
         });
       });
 
-      props.setProps({ hideSlug: true });
       const { findByRole, getByRole, userEvent, queryByLabelText } = render(<OrganizationList />, { wrapper });
 
       await waitFor(async () =>
@@ -297,6 +297,26 @@ describe('OrganizationList', () => {
       expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
     });
 
+    it("display slug field if it's enabled on environment", async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withOrganizationSlug(true);
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          create_organization_enabled: true,
+        });
+      });
+
+      const { findByRole, getByRole, userEvent, queryByLabelText } = render(<OrganizationList />, { wrapper });
+
+      await waitFor(async () =>
+        expect(await findByRole('menuitem', { name: 'Create organization' })).toBeInTheDocument(),
+      );
+      await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+      expect(queryByLabelText(/Name/i)).toBeInTheDocument();
+      expect(queryByLabelText(/Slug/i)).toBeInTheDocument();
+    });
+
     it('does not display CreateOrganization within OrganizationList when disabled', async () => {
       const { wrapper } = await createFixtures(f => {
         f.withOrganizations();

packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

@@ -49,7 +49,6 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
 
       organizationProfileProps,
       skipInvitationScreen,
-      hideSlug,
     } = useOrganizationSwitcherContext();
 
     const { user } = useUser();
@@ -86,7 +85,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       if (createOrganizationMode === 'navigation') {
         return navigateCreateOrganization();
       }
-      return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen, hideSlug });
+      return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen });
     };
 
     const handleItemClick = () => {

packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx

@@ -305,15 +305,15 @@ describe('OrganizationSwitcher', () => {
     });
 
     it('opens create organization without slug field', async () => {
-      const { wrapper, fixtures, props } = await createFixtures(f => {
+      const { wrapper, fixtures } = await createFixtures(f => {
         f.withOrganizations();
+        f.withOrganizationSlug(false);
         f.withUser({
           email_addresses: ['test@clerk.com'],
           create_organization_enabled: true,
         });
       });
 
-      props.setProps({ hideSlug: true });
       const { getByRole, queryByLabelText, userEvent } = render(<OrganizationSwitcher />, { wrapper });
       await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
       await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));

packages/ui/src/contexts/components/CreateOrganization.ts

@@ -38,7 +38,6 @@ export const useCreateOrganizationContext = () => {
   return {
     ...ctx,
     skipInvitationScreen: ctx.skipInvitationScreen || false,
-    hideSlug: ctx.hideSlug || false,
     navigateAfterCreateOrganization,
     componentName,
   };