Rename TaskSelectOrganization to TaskChooseOrganization

Author: LauraBeatris

integration/tests/session-tasks-eject-flow.test.ts

@@ -52,11 +52,11 @@ return (
       .addFile(
         'src/app/onboarding/select-organization/page.tsx',
         () => `
-import { TaskSelectOrganization } from '@clerk/nextjs';
+import { TaskChooseOrganization } from '@clerk/nextjs';
 
 export default function Page() {
 return (
-  <TaskSelectOrganization redirectUrlComplete='/'/>
+  <TaskChooseOrganization redirectUrlComplete='/'/>
 );
 }`,
       )

packages/clerk-js/sandbox/app.ts

@@ -1,5 +1,5 @@
-import * as l from '../../localizations';
 import type { Clerk as ClerkType } from '../';
+import * as l from '../../localizations';
 
 const AVAILABLE_LOCALES = Object.keys(l) as (keyof typeof l)[];
 
@@ -35,7 +35,7 @@ const AVAILABLE_COMPONENTS = [
   'pricingTable',
   'apiKeys',
   'oauthConsent',
-  'taskSelectOrganization',
+  'taskChooseOrganization',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -96,7 +96,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
   pricingTable: buildComponentControls('pricingTable'),
   apiKeys: buildComponentControls('apiKeys'),
   oauthConsent: buildComponentControls('oauthConsent'),
-  taskSelectOrganization: buildComponentControls('taskSelectOrganization'),
+  taskChooseOrganization: buildComponentControls('taskChooseOrganization'),
 };
 
 declare global {
@@ -337,10 +337,10 @@ void (async () => {
         },
       );
     },
-    '/task-select-organization': () => {
-      Clerk.mountTaskSelectOrganization(
+    '/task-choose-organization': () => {
+      Clerk.mountTaskChooseOrganization(
         app,
-        componentControls.taskSelectOrganization.getProps() ?? {
+        componentControls.taskChooseOrganization.getProps() ?? {
           redirectUrlComplete: '/user-profile',
         },
       );

packages/clerk-js/src/core/clerk.ts

@@ -30,9 +30,9 @@ import type {
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
-  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
+  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -76,7 +76,7 @@ import type {
   SignUpProps,
   SignUpRedirectOptions,
   SignUpResource,
-  TaskSelectOrganizationProps,
+  TaskChooseOrganizationProps,
   UnsubscribeCallback,
   UserButtonProps,
   UserProfileProps,
@@ -1163,31 +1163,31 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
   };
 
-  public mountTaskSelectOrganization = (node: HTMLDivElement, props?: TaskSelectOrganizationProps) => {
+  public mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps) => {
     this.assertComponentsReady(this.#componentControls);
 
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskSelectOrganization'), {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskChooseOrganization'), {
           code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
         });
       }
       return;
     }
 
-    void this.#componentControls.ensureMounted({ preloadHint: 'TaskSelectOrganization' }).then(controls =>
+    void this.#componentControls.ensureMounted({ preloadHint: 'TaskChooseOrganization' }).then(controls =>
       controls.mountComponent({
-        name: 'TaskSelectOrganization',
-        appearanceKey: 'taskSelectOrganization',
+        name: 'TaskChooseOrganization',
+        appearanceKey: 'taskChooseOrganization',
         node,
         props,
       }),
     );
 
-    this.telemetry?.record(eventPrebuiltComponentMounted('TaskSelectOrganization', props));
+    this.telemetry?.record(eventPrebuiltComponentMounted('TaskChooseOrganization', props));
   };
 
-  public unmountTaskSelectOrganization = (node: HTMLDivElement) => {
+  public unmountTaskChooseOrganization = (node: HTMLDivElement) => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
   };

packages/clerk-js/src/core/warnings.ts

@@ -10,7 +10,7 @@ const createMessageForDisabledOrganizations = (
     | 'OrganizationSwitcher'
     | 'OrganizationList'
     | 'CreateOrganization'
-    | 'TaskSelectOrganization',
+    | 'TaskChooseOrganization',
 ) => {
   return formatWarning(
     `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`,
@@ -29,7 +29,7 @@ const warnings = {
   cannotRenderSignUpComponentWhenTaskExists:
     'The <SignUp/> component cannot render when a user has a pending task, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the task instead.',
   cannotRenderComponentWhenTaskDoesNotExist:
-    '<TaskSelectOrganization/> cannot render unless a session task is pending. Clerk is redirecting to the value set in `redirectUrlComplete` instead.',
+    '<TaskChooseOrganization/> cannot render unless a session task is pending. Clerk is redirecting to the value set in `redirectUrlComplete` instead.',
   cannotRenderSignInComponentWhenSessionExists:
     'The <SignIn/> component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `afterSignIn` URL instead.',
   cannotRenderSignInComponentWhenTaskExists:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx

@@ -10,11 +10,11 @@ import { INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
 import { SignInContext, SignUpContext } from '../../../ui/contexts';
 import {
   SessionTasksContext,
-  TaskSelectOrganizationContext,
+  TaskChooseOrganizationContext,
   useSessionTasksContext,
 } from '../../contexts/components/SessionTasks';
 import { Route, Switch, useRouter } from '../../router';
-import { TaskSelectOrganization } from './tasks/TaskSelectOrganization';
+import { TaskChooseOrganization } from './tasks/TaskChooseOrganization';
 
 const SessionTasksStart = () => {
   const clerk = useClerk();
@@ -45,11 +45,11 @@ function SessionTaskRoutes(): JSX.Element {
   return (
     <Switch>
       <Route path={INTERNAL_SESSION_TASK_ROUTE_BY_KEY['select-organization']}>
-        <TaskSelectOrganizationContext.Provider
-          value={{ componentName: 'TaskSelectOrganization', redirectUrlComplete: ctx.redirectUrlComplete }}
+        <TaskChooseOrganizationContext.Provider
+          value={{ componentName: 'TaskChooseOrganization', redirectUrlComplete: ctx.redirectUrlComplete }}
         >
-          <TaskSelectOrganization />
-        </TaskSelectOrganizationContext.Provider>
+          <TaskChooseOrganization />
+        </TaskChooseOrganizationContext.Provider>
       </Route>
       <Route index>
         <SessionTasksStart />

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/SelectOrganizationScreen.tsx renamed to packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

@@ -25,12 +25,12 @@ import { useOrganizationListInView } from '@/ui/hooks/useOrganizationListInView'
 import { Add } from '@/ui/icons';
 import { handleError } from '@/ui/utils/errorHandler';
 
-type SelectOrganizationScreenProps = {
+type ChooseOrganizationScreenProps = {
   onCreateOrganizationClick: () => void;
 };
 
-export const SelectOrganizationScreen = withCardStateProvider(
-  ({ onCreateOrganizationClick }: SelectOrganizationScreenProps) => {
+export const ChooseOrganizationScreen = withCardStateProvider(
+  ({ onCreateOrganizationClick }: ChooseOrganizationScreenProps) => {
     const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
 
     const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
@@ -47,11 +47,11 @@ export const SelectOrganizationScreen = withCardStateProvider(
           showLogo
           sx={t => ({ padding: `${t.space.$none} ${t.space.$8}` })}
         >
-          <Header.Title localizationKey={localizationKeys('taskSelectOrganization.selectOrganization.title')} />
-          <Header.Subtitle localizationKey={localizationKeys('taskSelectOrganization.selectOrganization.subtitle')} />
+          <Header.Title localizationKey={localizationKeys('taskChooseOrganization.chooseOrganization.title')} />
+          <Header.Subtitle localizationKey={localizationKeys('taskChooseOrganization.chooseOrganization.subtitle')} />
         </Header.Root>
         <Col elementDescriptor={descriptors.main}>
-          <OrganizationPreviewListItems elementDescriptor={descriptors.taskSelectOrganizationPreviewItems}>
+          <OrganizationPreviewListItems elementDescriptor={descriptors.taskChooseOrganizationPreviewItems}>
             <Actions role='menu'>
               {(userMemberships.count || 0) > 0 &&
                 userMemberships.data?.map(inv => {
@@ -117,11 +117,11 @@ const MembershipPreview = withCardStateProvider((props: { organization: Organiza
 
   return (
     <OrganizationPreviewButton
-      elementDescriptor={descriptors.taskSelectOrganizationPreviewButton}
+      elementDescriptor={descriptors.taskChooseOrganizationPreviewButton}
       onClick={() => handleOrganizationClicked(props.organization)}
     >
       <OrganizationPreview
-        elementId='taskSelectOrganization'
+        elementId='taskChooseOrganization'
         mainIdentifierSx={sharedMainIdentifierSx}
         organization={props.organization}
       />
@@ -163,13 +163,13 @@ const InvitationPreview = withCardStateProvider((props: UserOrganizationInvitati
   return (
     <OrganizationPreviewListItem
       organizationData={props.publicOrganizationData}
-      elementId='taskSelectOrganization'
-      elementDescriptor={descriptors.taskSelectOrganizationPreviewItem}
+      elementId='taskChooseOrganization'
+      elementDescriptor={descriptors.taskChooseOrganizationPreviewItem}
     >
       <OrganizationPreviewListItemButton
         isLoading={card.isLoading}
         onClick={handleAccept}
-        localizationKey={localizationKeys('taskSelectOrganization.selectOrganization.action__invitationAccept')}
+        localizationKey={localizationKeys('taskChooseOrganization.chooseOrganization.action__invitationAccept')}
       />
     </OrganizationPreviewListItem>
   );
@@ -195,21 +195,21 @@ const SuggestionPreview = withCardStateProvider((props: OrganizationSuggestionRe
     return (
       <Text
         colorScheme='secondary'
-        localizationKey={localizationKeys('taskSelectOrganization.selectOrganization.suggestionsAcceptedLabel')}
+        localizationKey={localizationKeys('taskChooseOrganization.chooseOrganization.suggestionsAcceptedLabel')}
       />
     );
   }
 
   return (
     <OrganizationPreviewListItem
       organizationData={props.publicOrganizationData}
-      elementId='taskSelectOrganization'
-      elementDescriptor={descriptors.taskSelectOrganizationPreviewItem}
+      elementId='taskChooseOrganization'
+      elementDescriptor={descriptors.taskChooseOrganizationPreviewItem}
     >
       <OrganizationPreviewListItemButton
         onClick={handleAccept}
         isLoading={card.isLoading}
-        localizationKey={localizationKeys('taskSelectOrganization.selectOrganization.action__suggestionsAccept')}
+        localizationKey={localizationKeys('taskChooseOrganization.chooseOrganization.action__suggestionsAccept')}
       />
     </OrganizationPreviewListItem>
   );
@@ -228,9 +228,9 @@ const CreateOrganizationButton = ({
 
   return (
     <Action
-      elementDescriptor={descriptors.taskSelectOrganizationCreateOrganizationActionButton}
+      elementDescriptor={descriptors.taskChooseOrganizationCreateOrganizationActionButton}
       icon={Add}
-      label={localizationKeys('taskSelectOrganization.selectOrganization.action__createOrganization')}
+      label={localizationKeys('taskChooseOrganization.chooseOrganization.action__createOrganization')}
       onClick={onCreateOrganizationClick}
       sx={t => ({
         borderTopWidth: t.borderWidths.$normal,

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/CreateOrganizationScreen.tsx renamed to packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx

@@ -71,8 +71,8 @@ export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrga
         showLogo
         sx={t => ({ padding: `${t.space.$none} ${t.space.$8}` })}
       >
-        <Header.Title localizationKey={localizationKeys('taskSelectOrganization.createOrganization.title')} />
-        <Header.Subtitle localizationKey={localizationKeys('taskSelectOrganization.createOrganization.subtitle')} />
+        <Header.Title localizationKey={localizationKeys('taskChooseOrganization.createOrganization.title')} />
+        <Header.Subtitle localizationKey={localizationKeys('taskChooseOrganization.createOrganization.subtitle')} />
       </Header.Root>
       <FormContainer>
         <Form.Root
@@ -102,11 +102,11 @@ export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrga
             <Form.SubmitButton
               block
               isDisabled={isSubmitButtonDisabled}
-              localizationKey={localizationKeys('taskSelectOrganization.createOrganization.formButtonSubmit')}
+              localizationKey={localizationKeys('taskChooseOrganization.createOrganization.formButtonSubmit')}
             />
             {props.onCancel && (
               <Form.ResetButton
-                localizationKey={localizationKeys('taskSelectOrganization.createOrganization.formButtonReset')}
+                localizationKey={localizationKeys('taskChooseOrganization.createOrganization.formButtonReset')}
                 onClick={props.onCancel}
               />
             )}

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/__tests__/TaskSelectOrganization.test.tsx renamed to packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx

@@ -4,11 +4,11 @@ import userEvent from '@testing-library/user-event';
 import { bindCreateFixtures, render, waitFor } from '@/testUtils';
 import { createFakeUserOrganizationMembership } from '@/ui/components/OrganizationSwitcher/__tests__/utlis';
 
-import { TaskSelectOrganization } from '../';
+import { TaskChooseOrganization } from '..';
 
-const { createFixtures } = bindCreateFixtures('TaskSelectOrganization');
+const { createFixtures } = bindCreateFixtures('TaskChooseOrganization');
 
-describe('TaskSelectOrganization', () => {
+describe('TaskChooseOrganization', () => {
   it('does not render component without existing session task', async () => {
     const { wrapper } = await createFixtures(f => {
       f.withOrganizations();
@@ -19,7 +19,7 @@ describe('TaskSelectOrganization', () => {
       });
     });
 
-    const { queryByText, queryByRole } = render(<TaskSelectOrganization />, { wrapper });
+    const { queryByText, queryByRole } = render(<TaskChooseOrganization />, { wrapper });
 
     await waitFor(() => {
       expect(queryByText('Setup your account')).not.toBeInTheDocument();
@@ -39,7 +39,7 @@ describe('TaskSelectOrganization', () => {
       });
     });
 
-    const { getByText, getByRole } = render(<TaskSelectOrganization />, { wrapper });
+    const { getByText, getByRole } = render(<TaskChooseOrganization />, { wrapper });
 
     await waitFor(() => {
       expect(getByText('Setup your account')).toBeInTheDocument();
@@ -59,7 +59,7 @@ describe('TaskSelectOrganization', () => {
       });
     });
 
-    const { getByRole, getByText } = render(<TaskSelectOrganization />, { wrapper });
+    const { getByRole, getByText } = render(<TaskChooseOrganization />, { wrapper });
 
     await waitFor(() => {
       expect(getByRole('textbox', { name: /name/i })).toBeInTheDocument();
@@ -98,7 +98,7 @@ describe('TaskSelectOrganization', () => {
       }),
     );
 
-    const { getByText, queryByRole } = render(<TaskSelectOrganization />, { wrapper });
+    const { getByText, queryByRole } = render(<TaskChooseOrganization />, { wrapper });
 
     await waitFor(() => {
       expect(getByText('Existing Org')).toBeInTheDocument();
@@ -138,7 +138,7 @@ describe('TaskSelectOrganization', () => {
       }),
     );
 
-    const { getByText, getByRole, queryByRole, queryByText } = render(<TaskSelectOrganization />, { wrapper });
+    const { getByText, getByRole, queryByRole, queryByText } = render(<TaskChooseOrganization />, { wrapper });
 
     await waitFor(() => {
       expect(getByText('Existing Org')).toBeInTheDocument();
@@ -177,7 +177,7 @@ describe('TaskSelectOrganization', () => {
       });
     });
 
-    const { getByText } = render(<TaskSelectOrganization />, { wrapper });
+    const { getByText } = render(<TaskChooseOrganization />, { wrapper });
 
     await waitFor(() => {
       expect(getByText(/user@test\.com/)).toBeInTheDocument();
@@ -196,7 +196,7 @@ describe('TaskSelectOrganization', () => {
       });
     });
 
-    const { getByRole } = render(<TaskSelectOrganization />, { wrapper });
+    const { getByRole } = render(<TaskChooseOrganization />, { wrapper });
     const signOutButton = getByRole('link', { name: /sign out/i });
 
     await userEvent.click(signOutButton);
@@ -215,7 +215,7 @@ describe('TaskSelectOrganization', () => {
       });
     });
 
-    const { getByText } = render(<TaskSelectOrganization />, { wrapper });
+    const { getByText } = render(<TaskChooseOrganization />, { wrapper });
 
     expect(getByText(/testuser/)).toBeInTheDocument();
   });