feat(clerk-js,clerk-react,types): Introduce `TaskChooseOrganization` #6446

LauraBeatris · 2025-07-30T21:18:06Z

Description

Renames TaskSelectOrganization in favor of TaskChooseOrganization
Refactor UI to make the experience similar to the previous SignIn and SignUp steps

Reminder: This is not a breaking change - even tho we haven't prefixed the previous component with __experimental, it wasn't released GA yet and after-auth is only enabled in staging.

Context

It was previously rendering OrganizationList with a SessionTasksContext, however, the styles were much different from SignIn or SignUp, especially when it comes to spacing.

Developers should be able to target TaskChooseOrganization and apply different styles to it and it shouldn't impact OrganizationList - the same apply to the new localizations keys.

The inner part of TaskChooseOrganization is still similar in terms of design to OrganizationList, so we've extracted some components to a shared module, allowing us to provide different descriptors and IDs.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

New Features
- Introduced the TaskChooseOrganization component, replacing the deprecated TaskSelectOrganization, to streamline organization selection and creation during onboarding.
- Added dedicated screens for choosing, creating, and previewing organizations with improved UI, loading states, and navigation.
- Enhanced localization support with new organization-related UI text entries.
Refactor
- Replaced all references to TaskSelectOrganization with TaskChooseOrganization across UI components, contexts, hooks, types, and exports.
- Consolidated organization preview UI components for consistent styling and simplified code.
- Updated theming, appearance keys, and type definitions to align with the new component.
Bug Fixes
- Improved handling and caching of organization invitations and suggestions.
- Enhanced error handling and loading indicators during organization-related actions.
Tests
- Added comprehensive tests covering TaskChooseOrganization component behavior and user flows.

changeset-bot · 2025-07-30T21:18:10Z

🦋 Changeset detected

Latest commit: 9497c2c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages

Name	Type
@clerk/tanstack-react-start	Patch
@clerk/localizations	Patch
@clerk/react-router	Patch
@clerk/clerk-js	Patch
@clerk/testing	Patch
@clerk/nextjs	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/types	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/elements	Patch
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/nuxt	Patch
@clerk/shared	Patch
@clerk/themes	Patch
@clerk/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-07-30T21:18:11Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 6, 2025 7:09pm

coderabbitai

Actionable comments posted: 3

🔭 Outside diff range comments (1)

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx (1)

222-223: Add test coverage for critical user flows

The test suite is missing coverage for several important scenarios:

Error handling during organization creation

Successful organization creation flow

Organization selection and activation

Loading states while fetching organizations

Handling of organization invitations and suggestions

Would you like me to generate additional test cases to cover these scenarios?

🧹 Nitpick comments (4)

.changeset/brown-garlics-boil.md (1)

13-15: Consider adding migration guide for the deprecated component

Since this changeset deprecates TaskSelectOrganization in favor of TaskChooseOrganization, consider adding migration instructions or a link to migration documentation to help developers transition smoothly.
 Introduce `TaskChooseOrganization` component
 
-It deprecates `TaskSelectOrganization`, and also introduces a new UI that make the experience similar to the previous `SignIn` and `SignUp` steps
+It deprecates `TaskSelectOrganization`, and also introduces a new UI that makes the experience similar to the previous `SignIn` and `SignUp` steps.
+
+## Migration
+Replace all instances of `TaskSelectOrganization` with `TaskChooseOrganization`. The API remains the same.

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx (1)

81-99: Extract duplicate mock data to reduce code duplication

The mock organization membership data is duplicated between tests. Consider extracting it to a shared constant or helper function.

Add at the top of the file after imports:

const mockOrganizationMembership = createFakeUserOrganizationMembership({
  id: '1',
  organization: {
    id: '1',
    name: 'Existing Org',
    slug: 'org1',
    membersCount: 1,
    adminDeleteEnabled: false,
    maxAllowedMemberships: 1,
    pendingInvitationsCount: 1,
  },
});

Then use it in both tests:

-    fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
-      Promise.resolve({
-        data: [
-          createFakeUserOrganizationMembership({
-            id: '1',
-            organization: {
-              id: '1',
-              name: 'Existing Org',
-              slug: 'org1',
-              membersCount: 1,
-              adminDeleteEnabled: false,
-              maxAllowedMemberships: 1,
-              pendingInvitationsCount: 1,
-            },
-          }),
-        ],
-        total_count: 1,
-      }),
-    );
+    fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
+      Promise.resolve({
+        data: [mockOrganizationMembership],
+        total_count: 1,
+      }),
+    );

Also applies to: 121-138

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx (1)

57-64: Consider debouncing slug auto-generation for better performance

The slug is updated on every keystroke when typing the organization name, which could cause performance issues with rapid typing.

import { useMemo } from 'react';
import { debounce } from '@/ui/utils/debounce'; // or lodash.debounce

// Inside component:
const debouncedUpdateSlug = useMemo(
  () => debounce((value: string) => {
    slugField.setValue(createSlug(value));
  }, 300),
  [slugField]
);

const onChangeName = (event: React.ChangeEvent<HTMLInputElement>) => {
  nameField.setValue(event.target.value);
  debouncedUpdateSlug(event.target.value);
};

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx (1)

40-42: Add defensive checks for data filtering

While filtering falsy values is good, consider adding type guards to ensure the data structure is as expected.

-    const userInvitationsData = userInvitations.data?.filter(a => !!a);
-    const userSuggestionsData = userSuggestions.data?.filter(a => !!a);
+    const userInvitationsData = userInvitations.data?.filter((a): a is UserOrganizationInvitationResource => !!a);
+    const userSuggestionsData = userSuggestions.data?.filter((a): a is OrganizationSuggestionResource => !!a);

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 031e6ee and 54de71d.

⛔ Files ignored due to path filters (3)

packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap is excluded by !**/*.snap
packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap is excluded by !**/*.snap
packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (39)

.changeset/brown-garlics-boil.md (1 hunks)
integration/tests/session-tasks-eject-flow.test.ts (1 hunks)
packages/clerk-js/bundlewatch.config.json (1 hunks)
packages/clerk-js/sandbox/app.ts (4 hunks)
packages/clerk-js/sandbox/template.html (1 hunks)
packages/clerk-js/src/core/__tests__/clerk.test.ts (4 hunks)
packages/clerk-js/src/core/clerk.ts (5 hunks)
packages/clerk-js/src/core/warnings.ts (2 hunks)
packages/clerk-js/src/ui/common/organizations/OrganizationPreview.tsx (1 hunks)
packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx (1 hunks)
packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx (3 hunks)
packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx (1 hunks)
packages/clerk-js/src/ui/components/OrganizationList/shared.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (2 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization.tsx (0 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts (1 hunks)
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx (3 hunks)
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (2 hunks)
packages/clerk-js/src/ui/customizables/elementDescriptors.ts (1 hunks)
packages/clerk-js/src/ui/elements/contexts/index.tsx (1 hunks)
packages/clerk-js/src/ui/hooks/useOrganizationListInView.ts (1 hunks)
packages/clerk-js/src/ui/lazyModules/components.ts (3 hunks)
packages/clerk-js/src/ui/types.ts (4 hunks)
packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts (3 hunks)
packages/localizations/src/en-US.ts (1 hunks)
packages/nextjs/src/client-boundary/uiComponents.tsx (1 hunks)
packages/nextjs/src/index.ts (1 hunks)
packages/react/src/components/index.ts (1 hunks)
packages/react/src/components/uiComponents.tsx (4 hunks)
packages/react/src/isomorphicClerk.ts (4 hunks)
packages/testing/src/playwright/unstable/page-objects/sessionTask.ts (1 hunks)
packages/types/src/appearance.ts (3 hunks)
packages/types/src/clerk.ts (3 hunks)
packages/types/src/elementIds.ts (1 hunks)
packages/types/src/localization.ts (1 hunks)

💤 Files with no reviewable changes (1)

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization.tsx

✅ Files skipped from review due to trivial changes (15)

packages/clerk-js/src/ui/elements/contexts/index.tsx
packages/clerk-js/src/ui/lazyModules/components.ts
integration/tests/session-tasks-eject-flow.test.ts
packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/nextjs/src/index.ts
packages/nextjs/src/client-boundary/uiComponents.tsx
packages/react/src/components/index.ts
packages/types/src/elementIds.ts
packages/clerk-js/src/core/warnings.ts
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts
packages/clerk-js/src/ui/types.ts
packages/react/src/isomorphicClerk.ts
packages/types/src/clerk.ts

🚧 Files skipped from review as they are similar to previous changes (18)

packages/clerk-js/bundlewatch.config.json
packages/localizations/src/en-US.ts
packages/clerk-js/sandbox/template.html
packages/testing/src/playwright/unstable/page-objects/sessionTask.ts
packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts
packages/clerk-js/src/core/tests/clerk.test.ts
packages/clerk-js/src/ui/customizables/elementDescriptors.ts
packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx
packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
packages/types/src/appearance.ts
packages/types/src/localization.ts
packages/clerk-js/src/ui/hooks/useOrganizationListInView.ts
packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
packages/clerk-js/sandbox/app.ts
packages/clerk-js/src/ui/common/organizations/OrganizationPreview.tsx
packages/clerk-js/src/core/clerk.ts

🧰 Additional context used

📓 Path-based instructions (15)

.changeset/**

📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)

Automated releases must use Changesets.

Files:

.changeset/brown-garlics-boil.md

packages/clerk-js/src/ui/**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/clerk-js-ui.mdc)

packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

Use Prettier for consistent code formatting

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

packages/**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

TypeScript is required for all packages

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

packages/**/*.{ts,tsx,d.ts}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

Packages should export TypeScript types alongside runtime code

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

Use proper TypeScript error types

**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoid any type - prefer unknown when type is uncertain, then narrow with type guards
Use interface for object shapes that might be extended
Use type for unions, primitives, and computed types
Prefer readonly properties for immutable data structures
Use private for internal implementation details
Use protected for inheritance hierarchies
Use public explicitly for clarity in public APIs
Prefer readonly for properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Use const assertions for literal types: as const
Use satisfies operator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports: import type { ... } from ...
No any types without justification
Proper error handling with typed errors
Consistent use of readonly for immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

**/*.{jsx,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components

**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components: UserProfile, NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

packages/**/*.{test,spec}.{js,jsx,ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)

Unit tests should use Jest or Vitest as the test runner.

Files:

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

packages/{clerk-js,elements,themes}/**/*.{test,spec}.{js,jsx,ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)

Visual regression testing should be performed for UI components.

Files:

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

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)

Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

**/*.tsx

📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)

**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

**/*.test.{jsx,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)

**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure

Files:

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

**/__tests__/**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)

**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces

Files:

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

**/*

⚙️ CodeRabbit Configuration File

If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.

Files:

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (23)

GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
GitHub Check: Integration Tests (nextjs, chrome, 14)
GitHub Check: Integration Tests (react-router, chrome)
GitHub Check: Integration Tests (expo-web, chrome)
GitHub Check: Integration Tests (nextjs, chrome, 15)
GitHub Check: Integration Tests (astro, chrome)
GitHub Check: Integration Tests (billing, chrome)
GitHub Check: Integration Tests (sessions, chrome)
GitHub Check: Integration Tests (vue, chrome)
GitHub Check: Integration Tests (elements, chrome)
GitHub Check: Integration Tests (tanstack-react-router, chrome)
GitHub Check: Integration Tests (generic, chrome)
GitHub Check: Integration Tests (localhost, chrome)
GitHub Check: Integration Tests (nuxt, chrome)
GitHub Check: Integration Tests (ap-flows, chrome)
GitHub Check: Integration Tests (quickstart, chrome)
GitHub Check: Integration Tests (tanstack-react-start, chrome)
GitHub Check: Integration Tests (express, chrome)
GitHub Check: Publish with pkg-pr-new
GitHub Check: Static analysis
GitHub Check: Unit Tests (22, **)
GitHub Check: semgrep-cloud-platform/scan
GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (2)

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx (1)

87-103: Well-structured flow management

The TaskChooseOrganizationFlows component cleanly manages the state transitions between create and choose flows with appropriate conditional rendering.

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx (1)

32-96: Well-structured component with clear separation of concerns

The ChooseOrganizationScreen component is well-organized with:

Clean separation between different organization states (memberships, invitations, suggestions)

Proper infinite scrolling implementation

Good use of composition patterns

...-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

...-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx

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

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (3)

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx (1)

1-222: LGTM: Comprehensive test coverage with minor suggestions

Excellent test suite that thoroughly covers the TaskChooseOrganization component:

✅ Strengths:

Tests component behavior rather than implementation

Covers all major user flows (choose/create organization, sign out)

Proper use of React Testing Library and test fixtures

Good edge case coverage (missing session tasks, different user states)

Tests user interactions with proper event simulation

💡 Minor suggestions for future improvements:

Consider extracting common fixture setup into helper functions to reduce repetition

Some assertions could be more specific (e.g., checking form validation states)

The current implementation provides solid test coverage and follows testing best practices.
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx (1)
96-96: Consider more user-friendly slug validation

The current regex pattern ^(?=.*[a-z0-9])[a-z0-9\-]+$ is quite restrictive. Consider:

Providing clearer validation messages to users

Making the pattern more permissive if business requirements allow

Adding client-side validation feedback
<Form.PlainInput
  {...slugField.props}
  onChange={event => updateSlugField(event.target.value)}
  isRequired
  pattern='^(?=.*[a-z0-9])[a-z0-9\-]+$'
+ title="Organization slug must contain only lowercase letters, numbers, and hyphens"
  ignorePasswordManager
/>
packages/clerk-js/sandbox/app.ts (1)
1-2: Fix import sorting order.

The static analysis tool flagged an import sorting issue. Please run the autofix to sort these imports according to the project's ESLint configuration.
-import type { Clerk as ClerkType } from '../';
-import * as l from '../../localizations';
+import * as l from '../../localizations';
+import type { Clerk as ClerkType } from '../';

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 031e6ee and 54de71d.

⛔ Files ignored due to path filters (3)

packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap is excluded by !**/*.snap
packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap is excluded by !**/*.snap
packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (39)

.changeset/brown-garlics-boil.md (1 hunks)
integration/tests/session-tasks-eject-flow.test.ts (1 hunks)
packages/clerk-js/bundlewatch.config.json (1 hunks)
packages/clerk-js/sandbox/app.ts (4 hunks)
packages/clerk-js/sandbox/template.html (1 hunks)
packages/clerk-js/src/core/__tests__/clerk.test.ts (4 hunks)
packages/clerk-js/src/core/clerk.ts (5 hunks)
packages/clerk-js/src/core/warnings.ts (2 hunks)
packages/clerk-js/src/ui/common/organizations/OrganizationPreview.tsx (1 hunks)
packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx (1 hunks)
packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx (3 hunks)
packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx (1 hunks)
packages/clerk-js/src/ui/components/OrganizationList/shared.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (2 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx (1 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization.tsx (0 hunks)
packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts (1 hunks)
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx (3 hunks)
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (2 hunks)
packages/clerk-js/src/ui/customizables/elementDescriptors.ts (1 hunks)
packages/clerk-js/src/ui/elements/contexts/index.tsx (1 hunks)
packages/clerk-js/src/ui/hooks/useOrganizationListInView.ts (1 hunks)
packages/clerk-js/src/ui/lazyModules/components.ts (3 hunks)
packages/clerk-js/src/ui/types.ts (4 hunks)
packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts (3 hunks)
packages/localizations/src/en-US.ts (1 hunks)
packages/nextjs/src/client-boundary/uiComponents.tsx (1 hunks)
packages/nextjs/src/index.ts (1 hunks)
packages/react/src/components/index.ts (1 hunks)
packages/react/src/components/uiComponents.tsx (4 hunks)
packages/react/src/isomorphicClerk.ts (4 hunks)
packages/testing/src/playwright/unstable/page-objects/sessionTask.ts (1 hunks)
packages/types/src/appearance.ts (3 hunks)
packages/types/src/clerk.ts (3 hunks)
packages/types/src/elementIds.ts (1 hunks)
packages/types/src/localization.ts (1 hunks)

💤 Files with no reviewable changes (1)

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization.tsx

✅ Files skipped from review due to trivial changes (13)

integration/tests/session-tasks-eject-flow.test.ts
packages/nextjs/src/client-boundary/uiComponents.tsx
packages/nextjs/src/index.ts
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
packages/react/src/components/index.ts
packages/clerk-js/src/core/warnings.ts
packages/clerk-js/src/ui/lazyModules/components.ts
packages/clerk-js/src/ui/elements/contexts/index.tsx
packages/types/src/elementIds.ts
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts
packages/clerk-js/src/ui/types.ts
packages/types/src/clerk.ts
packages/react/src/isomorphicClerk.ts

🚧 Files skipped from review as they are similar to previous changes (17)

packages/clerk-js/bundlewatch.config.json
packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts
packages/clerk-js/src/ui/customizables/elementDescriptors.ts
packages/testing/src/playwright/unstable/page-objects/sessionTask.ts
packages/clerk-js/src/ui/hooks/useOrganizationListInView.ts
packages/clerk-js/src/core/tests/clerk.test.ts
packages/clerk-js/sandbox/template.html
packages/localizations/src/en-US.ts
packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx
packages/types/src/localization.ts
packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
packages/types/src/appearance.ts
packages/clerk-js/src/ui/common/organizations/OrganizationPreview.tsx
packages/clerk-js/src/core/clerk.ts

🧰 Additional context used

📓 Path-based instructions (15)

packages/clerk-js/src/ui/**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/clerk-js-ui.mdc)

packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/sandbox/app.ts

**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

Use Prettier for consistent code formatting

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/sandbox/app.ts

packages/**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

TypeScript is required for all packages

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/sandbox/app.ts

packages/**/*.{ts,tsx,d.ts}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

Packages should export TypeScript types alongside runtime code

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/sandbox/app.ts

**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

Use proper TypeScript error types

**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoid any type - prefer unknown when type is uncertain, then narrow with type guards
Use interface for object shapes that might be extended
Use type for unions, primitives, and computed types
Prefer readonly properties for immutable data structures
Use private for internal implementation details
Use protected for inheritance hierarchies
Use public explicitly for clarity in public APIs
Prefer readonly for properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Use const assertions for literal types: as const
Use satisfies operator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports: import type { ... } from ...
No any types without justification
Proper error handling with typed errors
Consistent use of readonly for immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/sandbox/app.ts

**/*.{jsx,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)

**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components

**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components: UserProfile, NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)

Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/sandbox/app.ts

**/*.tsx

📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)

**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx

**/*

⚙️ CodeRabbit Configuration File

If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.

Files:

packages/clerk-js/src/ui/components/SessionTasks/index.tsx
packages/react/src/components/uiComponents.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
packages/clerk-js/sandbox/app.ts

.changeset/**

📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)

Automated releases must use Changesets.

Files:

.changeset/brown-garlics-boil.md

packages/**/*.{test,spec}.{js,jsx,ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)

Unit tests should use Jest or Vitest as the test runner.

Files:

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

packages/{clerk-js,elements,themes}/**/*.{test,spec}.{js,jsx,ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)

Visual regression testing should be performed for UI components.

Files:

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

**/*.test.{jsx,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)

**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure

Files:

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

**/__tests__/**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)

**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces

Files:

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

🧬 Code Graph Analysis (2)

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

packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)

TaskChooseOrganizationContext (17-17)

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx (1)

TaskChooseOrganization (105-107)

packages/react/src/components/uiComponents.tsx (1)

TaskChooseOrganization (638-664)

packages/react/src/components/uiComponents.tsx (4)

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx (1)

TaskChooseOrganization (105-107)

packages/clerk-js/src/ui/lazyModules/components.ts (1)

TaskChooseOrganization (108-110)

packages/react/src/components/withClerk.tsx (1)

withClerk (7-37)

packages/types/src/clerk.ts (1)

TaskChooseOrganizationProps (2055-2061)

🪛 ESLint

packages/clerk-js/sandbox/app.ts

[error] 1-2: Run autofix to sort these imports!

(simple-import-sort/imports)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: Integration Tests (nextjs, chrome, 14)
GitHub Check: Integration Tests (nextjs, chrome, 15)
GitHub Check: Integration Tests (billing, chrome)
GitHub Check: Integration Tests (generic, chrome)

🔇 Additional comments (20)

packages/react/src/components/uiComponents.tsx (2)

12-12: LGTM: Proper type import update

The import has been correctly updated to use TaskChooseOrganizationProps instead of the deprecated type.

638-664: LGTM: Consistent component migration

The component has been properly migrated from TaskSelectOrganization to TaskChooseOrganization with all necessary updates:

Component name and props type updated

Mount/unmount method names aligned with the new component name

Component registration metadata updated consistently

The implementation follows the same pattern as other UI components in this file.

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

13-13: LGTM: Proper import updates

The imports have been correctly updated to use the new TaskChooseOrganizationContext and TaskChooseOrganization component.

Also applies to: 17-17

47-53: LGTM: Consistent routing migration

The route configuration has been properly updated:

Uses the new TaskChooseOrganizationContext provider

Renders the new TaskChooseOrganization component

Maintains the same route path for backward compatibility

Component name in context value matches the new component name

.changeset/brown-garlics-boil.md (1)

1-15: LGTM: Comprehensive changeset documentation

The changeset properly documents this feature introduction:

All affected packages are correctly listed with appropriate patch version bumps

Clear description of the component migration and UI improvements

Proper deprecation notice for the old component

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx (4)

1-27: LGTM: Proper imports and hook usage

Good use of Clerk hooks and UI utilities:

Proper TypeScript imports

Correct hook usage for organization management

Appropriate context and state management imports

28-37: LGTM: Well-structured form controls

Form field setup follows established patterns:

Proper use of useFormControl for state management

Consistent localization key usage

Appropriate field types and labels

39-55: LGTM: Robust form submission handling

Excellent error handling and API integration:

Prevents default form submission

Proper loading state checks

Good error handling with field-specific error display

Correct navigation flow after successful organization creation

107-112: LGTM: Conditional cancel button rendering

Good conditional rendering pattern for the optional cancel functionality.

packages/clerk-js/sandbox/app.ts (3)

38-38: LGTM: Component addition follows established pattern.

The addition of taskChooseOrganization to the available components list is consistent with the existing pattern and aligns with the PR objective of introducing the new component.

99-99: LGTM: Control registration is consistent.

The component control registration follows the established pattern used by other components in the sandbox.

340-347: LGTM: Route implementation follows established pattern.

The new route implementation is consistent with other component routes. The redirectUrlComplete prop is appropriately configured to redirect to the user profile after completion.

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx (5)

32-96: LGTM: Well-structured main component with proper loading states.

The main ChooseOrganizationScreen component is well-implemented with:

Proper loading state management combining multiple async operations

Defensive filtering to handle SWR race conditions (lines 41-42)

Conditional rendering based on pagination states

Consistent use of element descriptors for theming

The comment explaining the filtering logic for race conditions shows good developer experience awareness.

98-130: LGTM: Membership selection with proper async handling.

The MembershipPreview component correctly:

Uses card.runAsync for proper loading state management

Calls setActive to switch organizations

Navigates to the next task using the internal navigation API

Follows the established pattern for organization selection

132-176: LGTM: Invitation handling with optimistic UI updates.

The InvitationPreview component implements sophisticated invitation handling:

Optimistic cache updates without triggering revalidation to prevent layout shifts

Proper error handling with handleError

State transition to membership preview after acceptance

Uses the populateCacheUpdateItem utility for consistent cache management

The approach to avoid layout shifts during acceptance is particularly thoughtful.

178-216: LGTM: Suggestion handling with status-aware rendering.

The SuggestionPreview component properly:

Handles different suggestion states (accepted vs pending)

Updates cache in-place without unnecessary revalidations

Uses appropriate localization keys for different states

Implements proper error handling

218-247: LGTM: Create button with proper permission checks.

The CreateOrganizationButton component correctly:

Checks user permissions before rendering

Uses proper element descriptors for theming

Applies consistent styling with theme tokens

Follows accessibility practices with proper event handlers

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx (3)

15-85: LGTM: Well-structured main component with comprehensive functionality.

The TaskChooseOrganizationInternal component is excellently implemented with:

Proper multi-session sign-out handling (lines 23-29) that respects different session contexts

Loading state management that combines multiple async operations

Smart initial flow determination based on existing resources (line 56)

User identifier fallback logic using email or username

Consistent UI structure with Flow.Root and Card components

Proper spacing and layout using theme tokens

The sign-out logic correctly handles both single and multi-session scenarios.

87-103: LGTM: Clean flow management with proper state transitions.

The TaskChooseOrganizationFlows component provides clean flow management:

Simple state management for switching between create and choose flows

Proper conditional rendering based on current flow

Intelligent cancel button logic that only shows when user has existing resources

Uses card state provider for consistent loading/error states

105-107: LGTM: Proper HOC composition for guards and providers.

The export composition correctly applies:

Session switch guard to handle session-related constraints

Task guard for task-specific logic

Card state provider for UI state management

The order of HOC application follows established patterns in the codebase.

LauraBeatris self-assigned this Jul 30, 2025

clerk-cookie added the clerk-js label Jul 30, 2025

vercel bot deployed to Preview July 30, 2025 21:18 View deployment

clerk-cookie added types localizations labels Jul 30, 2025

vercel bot deployed to Preview July 30, 2025 22:12 View deployment

vercel bot deployed to Preview July 30, 2025 23:31 View deployment

LauraBeatris force-pushed the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch from b3614ba to e349b20 Compare July 30, 2025 23:31

vercel bot deployed to Preview July 30, 2025 23:33 View deployment

vercel bot deployed to Preview July 31, 2025 13:01 View deployment

vercel bot deployed to Preview July 31, 2025 13:51 View deployment

vercel bot deployed to Preview July 31, 2025 16:59 View deployment

LauraBeatris force-pushed the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch from 1f91214 to a5af7fc Compare July 31, 2025 17:30

vercel bot deployed to Preview July 31, 2025 17:32 View deployment

vercel bot deployed to Preview July 31, 2025 17:33 View deployment

vercel bot deployed to Preview July 31, 2025 18:46 View deployment

iagodahlem force-pushed the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch from abafaaa to 29d55e2 Compare July 31, 2025 18:58

vercel bot deployed to Preview July 31, 2025 18:59 View deployment

vercel bot deployed to Preview July 31, 2025 19:19 View deployment

vercel bot deployed to Preview July 31, 2025 19:35 View deployment

vercel bot deployed to Preview July 31, 2025 19:52 View deployment

vercel bot deployed to Preview July 31, 2025 21:25 View deployment

vercel bot deployed to Preview July 31, 2025 21:31 View deployment

vercel bot deployed to Preview July 31, 2025 21:44 View deployment

vercel bot deployed to Preview July 31, 2025 22:00 View deployment

LauraBeatris force-pushed the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch from 02c4157 to e5b71e5 Compare July 31, 2025 22:00

vercel bot deployed to Preview July 31, 2025 22:01 View deployment

vercel bot deployed to Preview July 31, 2025 22:05 View deployment

LauraBeatris added 4 commits August 6, 2025 15:48

Introduce different headings per screen

1fc4022

Update copy per feedback

bac7a96

Rollback unused changes

0b5fac0

Rename TaskSelectOrganization to TaskChooseOrganization

caac240

LauraBeatris force-pushed the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch from 58a90f2 to caac240 Compare August 6, 2025 18:48

clerk-cookie added nextjs react remix integration tanstack react-router labels Aug 6, 2025

LauraBeatris changed the title ~~feat(clerk-js): Introduce TaskChooseOrganization~~ feat(clerk-js,react,types): Introduce TaskChooseOrganization Aug 6, 2025

vercel bot deployed to Preview August 6, 2025 18:50 View deployment

vercel bot deployed to Preview August 6, 2025 18:52 View deployment

LauraBeatris force-pushed the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch 2 times, most recently from 6bc24fe to 54de71d Compare August 6, 2025 18:55

vercel bot deployed to Preview August 6, 2025 18:56 View deployment

coderabbitai bot reviewed Aug 6, 2025

View reviewed changes

LauraBeatris changed the title ~~feat(clerk-js,react,types): Introduce TaskChooseOrganization~~ feat(clerk-js,clerk-react,types): Introduce `TaskChooseOrganization Aug 6, 2025

LauraBeatris force-pushed the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch from 54de71d to 3d7218e Compare August 6, 2025 19:05

vercel bot deployed to Preview August 6, 2025 19:06 View deployment

Introduce new changeset

9497c2c

LauraBeatris force-pushed the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch from 3d7218e to 9497c2c Compare August 6, 2025 19:07

vercel bot deployed to Preview August 6, 2025 19:09 View deployment

LauraBeatris requested a review from iagodahlem August 6, 2025 19:21

LauraBeatris changed the title ~~feat(clerk-js,clerk-react,types): Introduce `TaskChooseOrganization~~ feat(clerk-js,clerk-react,types): Introduce TaskChooseOrganization Aug 6, 2025

LauraBeatris merged commit 1ad16da into main Aug 6, 2025
38 checks passed

LauraBeatris deleted the laura/orgs-764-introduce-new-ui-for-taskselectorganization-component-2 branch August 6, 2025 19:49

clerk-cookie mentioned this pull request Aug 6, 2025

ci(repo): Version packages #6481

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(clerk-js,clerk-react,types): Introduce `TaskChooseOrganization` #6446

feat(clerk-js,clerk-react,types): Introduce `TaskChooseOrganization` #6446

Uh oh!

LauraBeatris commented Jul 30, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Jul 30, 2025 •

edited

Loading

Uh oh!

vercel bot commented Jul 30, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

feat(clerk-js,clerk-react,types): Introduce TaskChooseOrganization #6446

feat(clerk-js,clerk-react,types): Introduce TaskChooseOrganization #6446

Uh oh!

Conversation

LauraBeatris commented Jul 30, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Context

Checklist

Type of change

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

feat(clerk-js,clerk-react,types): Introduce `TaskChooseOrganization` #6446

feat(clerk-js,clerk-react,types): Introduce `TaskChooseOrganization` #6446

LauraBeatris commented Jul 30, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Jul 30, 2025 •

edited

Loading

vercel bot commented Jul 30, 2025 •

edited

Loading