Skip to content

chore(ui): Show created org membership in enable organizations prompt - #7581

Merged
LauraBeatris merged 2 commits into
mainfrom
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Jan 12, 2026
Merged

chore(ui): Show created org membership in enable organizations prompt#7581
LauraBeatris merged 2 commits into
mainfrom
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my

Conversation

@LauraBeatris

@LauraBeatrisLauraBeatris commented Jan 12, 2026•
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Description

This PR replaces the hardcoded "My organization" name on the prompt success message with the actual org membership name created by the /dev_tools FAPI endpoint based on organization_creation_defaults

CleanShot 2026-01-12 at 13 34 14
CleanShot.2026-01-12.at.13.33.33.mp4

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

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • New Features
    • The organization enable prompt success message now displays the actual organization membership name instead of generic text, providing users with personalized confirmation during the organization setup process.

✏️ Tip: You can customize this high-level summary in your review settings.

@LauraBeatrisLauraBeatris self-assigned this Jan 12, 2026
@changeset-bot

changeset-botBot commented Jan 12, 2026•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d1d14fe

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

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

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

vercelBot commented Jan 12, 2026•
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJan 12, 2026 4:41pm

@LauraBeatris
LauraBeatris requested a review from a teamJanuary 12, 2026 16:40
@LauraBeatris
LauraBeatrisforce-pushed the laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my branch from 2dc3f21 to d1d14feCompareJanuary 12, 2026 16:40
@coderabbitai

coderabbitaiBot commented Jan 12, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

This pull request updates the EnableOrganizationsPrompt component in @clerk/ui to display the actual organization membership name in the success message upon enabling organizations. The implementation introduces a new internal state variable to store the organization name, fetches the user's organization memberships after enabling the environment setting, derives the first organization name if available, and updates the confirmation message to interpolate this name. A changeset entry documents this patch release for the UI package.

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately describes the main change: displaying the actual created organization membership name in the enable organizations prompt, replacing the hardcoded text.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

📜 Recent review details

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 1e4074d and d1d14fe.

📒 Files selected for processing (2)
  • .changeset/eighty-mugs-eat.md
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

All code must pass ESLint checks with the project's configuration

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Use Prettier for consistent code formatting

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

TypeScript is required for all packages

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Follow established naming conventions (PascalCase for components, camelCase for variables)

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs
Use tree-shaking friendly exports
Validate all inputs and sanitize outputs
All public APIs must be documented with JSDoc
Use dynamic imports for optional features
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
Implement proper logging with different levels

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.ts?(x)

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Use proper TypeScript error types

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

**/*.tsx: Use error boundaries in React components
Minimize re-renders in React components

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

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{md,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Update documentation for API changes

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/react.mdc)

**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components (e.g., 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
Separate UI components from business logic components
Use useState for simple state management in React components
Use useReducer for complex state logic in React components
Implement proper state initialization in React components
Use proper state updates with callbacks in React components
Implement proper state cleanup in React components
Use Context API for theme/authentication state management
Implement proper state persistence in React applications
Use React.memo for expensive components
Implement proper useCallback for handlers in React components
Use proper useMemo for expensive computations in React components
Implement proper virtualization for lists in React components
Use proper code splitting with React.lazy in React applications
Implement proper cleanup in useEffect hooks
Use proper refs for DOM access in React components
Implement proper event listener cleanup in React components
Use proper abort controllers for fetch in React components
Implement proper subscription cleanup in React components
Use proper HTML elements for semantic HTML in React components
Implement proper ARIA attributes for accessibility in React components
Use proper heading hierarchy in React components
Implement proper form labels in React components
Use proper button types in React components
Implement proper focus management for keyboard navigation in React components
Use proper keyboard shortcuts in React components
Implement proper tab order in React components
Use proper ...

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)

**/*.{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
Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type
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 in classes
Use protected for inheritance hierarchies
Use public explicitly for clarity in public APIs
Use mixins for shared behavior across unrelated classes in TypeScript
Use generic constraints with bounded type parameters like <T extends { id: string }>
Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction
Use discriminated unions instead of boolean flags for state management and API responses
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation at the type level
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Document functions with JSDoc comments including @PARAM, @returns, @throws, and @example tags
Create custom error classes that extend Error for specific error types
Use the Result pattern for error handling instead of throwing exceptions
Use optional chaining (?.) and nullish coalescing (??) operators for safe property access
Let TypeScript infer obvious types to reduce verbosity
Use const assertions with as const for literal types
Use satisfies operator for type checking without widening types
Declare readonly arrays and objects for immutable data structures
Use spread operator and array spread for immutable updates instead of mutations
Use lazy loading for large types...

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Use ESLint with custom configurations tailored for different package types

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx,json,md,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Use Prettier for code formatting across all packages

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/ui/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/clerk-ui-theming.mdc)

packages/ui/src/**/*.{ts,tsx}: Use element descriptors for all themable elements by applying elementDescriptor prop to components and importing descriptors from packages/ui/src/customizables/elementDescriptors.ts
Use theme-aware functions in elements configuration to access design tokens (e.g., { theme } => ({ backgroundColor: theme.colors.$primary500 }))
Prefer CSS variables (e.g., --clerk-color-primary, --clerk-spacing) for runtime customization via the clerkCssVar utility
Automatically generate color scales using the color scale generation process rather than manually defining all lightness and alpha variations (25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950 shades)
Use the createVariants function from packages/ui/src/styledSystem/createVariants.ts for type-safe variant-based styling with base, variants, defaultVariants, and compoundVariants configuration
Wrap primitive components with makeCustomizable HOC from packages/ui/src/customizables/makeCustomizable.tsx to enable element descriptor support and theming
Apply the sx prop using either a theme-aware function (theme: InternalTheme) => StyleRule or static style object to components for theme-aware CSS
Use state props (isLoading, hasError, isOpen, isActive) to automatically generate state classes (cl-loading, cl-error, cl-open, cl-active) for styling
Use CSS light-dark() function via the lightDark utility from packages/ui/src/utils/lightDark.ts for automatic light/dark mode support with fallbacks
Use Emotion's css prop and ThemeProvider via InternalThemeProvider from packages/ui/src/styledSystem/InternalThemeProvider.tsx for styling and theme context
Use makeResponsive from packages/ui/src/customizables/makeResponsive.tsx with breakpoints defined in packages/ui/src/styledSystem/breakpoints.tsx for responsive design support
Use useDeepEqualMemo in AppearanceProvider to prevent unnecessary re-renders when appearance configuration changes

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/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.

**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.
Restrict feedback to errors, security risks, or functionality-breaking problems.
Do not post comments on code style, formatting, or non-critical improvements.
Keep reviews short: flag only issues that make the PR unsafe to merge.
Group similar issues into a single comment instead of posting multiple notes.
Skip repetition: if a pattern repeats, mention it once at a summary level only.
Do not add general suggestions, focus strictly on merge-blocking concerns.
If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.
Avoid line-by-line commentary unless it highlights a critical bug or security hole.
Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.
Ignore minor optimization opportunities, focus solely on correctness and safety.
Provide a top-level summary of critical blockers rather than detailed per-line notes.
Comment only when the issue must be resolved before merge, otherwise remain silent.
When in doubt, err on the side of fewer comments, brevity and blocking issues only.
Avoid posting any refactoring issues.

Files:

  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.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). (28)
  • GitHub Check: Unit Tests (shared, clerk-js, RQ)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (**)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (nextjs, chrome, 16)
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (sessions:staging, chrome)
  • GitHub Check: Integration Tests (machine, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (handshake, chrome)
  • GitHub Check: Integration Tests (billing, chrome, RQ)
  • GitHub Check: Integration Tests (custom, chrome)
  • GitHub Check: Integration Tests (quickstart, chrome, 15)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 16, RQ)
  • GitHub Check: Integration Tests (quickstart, chrome, 16)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (handshake:staging, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (machine, chrome, RQ)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
.changeset/eighty-mugs-eat.md (1)

1-5: LGTM!

Changeset properly documents the patch for the UI package.

packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx (2)

51-63: LGTM - Implementation handles the happy path correctly.

The async flow fetches organization memberships after enabling the setting, and the fallback message handles cases where clerk.user is null or no memberships exist.

Consider adding unit tests to cover:

  • Success path with organization name displayed
  • Fallback when clerk.user is null
  • Fallback when memberships array is empty

134-136: Conditional rendering looks good.

The ternary correctly checks both clerk.user and defaultOrganizationName before displaying the personalized message, with a clean fallback to the generic message.

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented Jan 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7581

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7581

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7581

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7581

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7581

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7581

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7581

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7581

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7581

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7581

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7581

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7581

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7581

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7581

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7581

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7581

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7581

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7581

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7581

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7581

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7581

commit: d1d14fe

@LauraBeatris
LauraBeatris merged commit 04c6245 into mainJan 12, 2026
101 of 104 checks passed
@LauraBeatris
LauraBeatris deleted the laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my branch January 12, 2026 17:11
@LauraBeatrisLauraBeatris mentioned this pull request Jan 12, 2026
Merged
9 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@NicolasLopes7NicolasLopes7NicolasLopes7 approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

core-3

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@NicolasLopes7
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
chore(ui): Show created org membership in enable organizations prompt by LauraBeatris · Pull Request #7581 · clerk/javascript · GitHub
Skip to content
chore(ui): Show created org membership in enable organizations prompt - #7581
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Jan 12, 2026
Merged
chore(ui): Show created org membership in enable organizations prompt#7581
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Jan 12, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Contributor
Description
This PR replaces the hardcoded "My organization" name on the prompt success message with the actual org membership name created by the /dev_tools FAPI endpoint based on organization_creation_defaults
CleanShot 2026-01-12 at 13 34 14
CleanShot.2026-01-12.at.13.33.33.mp4
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
  • New Features
    • The organization enable prompt success message now displays the actual organization membership name instead of generic text, providing users with personalized confirmation during the organization setup process.
✏️ Tip: You can customize this high-level summary in your review settings.
@LauraBeatrisLauraBeatris
self-assigned this
Jan 12, 2026
@changeset-bot
changeset-botBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: d1d14fe
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJan 12, 2026 4:41pm
@LauraBeatris
LauraBeatris
requested a review
from a teamJanuary 12, 2026 16:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
branch
from
2dc3f21 to
d1d14feCompareJanuary 12, 2026 16:40
@coderabbitai
coderabbitaiBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
📝 Walkthrough
Walkthrough
This pull request updates the EnableOrganizationsPrompt component in @clerk/ui to display the actual organization membership name in the success message upon enabling organizations. The implementation introduces a new internal state variable to store the organization name, fetches the user's organization memberships after enabling the environment setting, derives the first organization name if available, and updates the confirmation message to interpolate this name. A changeset entry documents this patch release for the UI package.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately describes the main change: displaying the actual created organization membership name in the enable organizations prompt, replacing the hardcoded text.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
📜 Recent review details
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
  • Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 1e4074d and d1d14fe.
📒 Files selected for processing (2)
  • .changeset/eighty-mugs-eat.md
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs

Use tree-shaking friendly exports

Validate all inputs and sanitize outputs

All public APIs must be documented with JSDoc

Use dynamic imports for optional features

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

Implement proper logging with different levels
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components

Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components

Leverage TypeScript's type inference where possible in React components

Use proper event types for handlers in React components

Implement proper generic types for reusable React components

Use proper type guards for conditional rendering in React components
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components

Follow PascalCase naming for components (e.g., 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

Separate UI components from business logic components

Use useState for simple state management in React components

Use useReducer for complex state logic in React components

Implement proper state initialization in React components

Use proper state updates with callbacks in React components

Implement proper state cleanup in React components

Use Context API for theme/authentication state management

Implement proper state persistence in React applications

Use React.memo for expensive components

Implement proper useCallback for handlers in React components

Use proper useMemo for expensive computations in React components

Implement proper virtualization for lists in React components

Use proper code splitting with React.lazy in React applications

Implement proper cleanup in useEffect hooks

Use proper refs for DOM access in React components

Implement proper event listener cleanup in React components

Use proper abort controllers for fetch in React components

Implement proper subscription cleanup in React components

Use proper HTML elements for semantic HTML in React components

Implement proper ARIA attributes for accessibility in React components

Use proper heading hierarchy in React components

Implement proper form labels in React components

Use proper button types in React components

Implement proper focus management for keyboard navigation in React components

Use proper keyboard shortcuts in React components

Implement proper tab order in React components

Use proper ...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{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

Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type

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 in classes

Use protected for inheritance hierarchies

Use public explicitly for clarity in public APIs

Use mixins for shared behavior across unrelated classes in TypeScript

Use generic constraints with bounded type parameters like <T extends { id: string }>

Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction

Use discriminated unions instead of boolean flags for state management and API responses

Use mapped types for transforming object types

Use conditional types for type-level logic

Leverage template literal types for string manipulation at the type level

Use ES6 imports/exports consistently

Use default exports sparingly, prefer named exports

Document functions with JSDoc comments including @PARAM, @returns, @throws, and @example tags

Create custom error classes that extend Error for specific error types

Use the Result pattern for error handling instead of throwing exceptions

Use optional chaining (?.) and nullish coalescing (??) operators for safe property access

Let TypeScript infer obvious types to reduce verbosity

Use const assertions with as const for literal types

Use satisfies operator for type checking without widening types

Declare readonly arrays and objects for immutable data structures

Use spread operator and array spread for immutable updates instead of mutations

Use lazy loading for large types...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use ESLint with custom configurations tailored for different package types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use Prettier for code formatting across all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-ui-theming.mdc)
packages/ui/src/**/*.{ts,tsx}: Use element descriptors for all themable elements by applying elementDescriptor prop to components and importing descriptors from packages/ui/src/customizables/elementDescriptors.ts

Use theme-aware functions in elements configuration to access design tokens (e.g., { theme } => ({ backgroundColor: theme.colors.$primary500 }))

Prefer CSS variables (e.g., --clerk-color-primary, --clerk-spacing) for runtime customization via the clerkCssVar utility

Automatically generate color scales using the color scale generation process rather than manually defining all lightness and alpha variations (25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950 shades)

Use the createVariants function from packages/ui/src/styledSystem/createVariants.ts for type-safe variant-based styling with base, variants, defaultVariants, and compoundVariants configuration

Wrap primitive components with makeCustomizable HOC from packages/ui/src/customizables/makeCustomizable.tsx to enable element descriptor support and theming

Apply the sx prop using either a theme-aware function (theme: InternalTheme) => StyleRule or static style object to components for theme-aware CSS

Use state props (isLoading, hasError, isOpen, isActive) to automatically generate state classes (cl-loading, cl-error, cl-open, cl-active) for styling

Use CSS light-dark() function via the lightDark utility from packages/ui/src/utils/lightDark.ts for automatic light/dark mode support with fallbacks

Use Emotion's css prop and ThemeProvider via InternalThemeProvider from packages/ui/src/styledSystem/InternalThemeProvider.tsx for styling and theme context

Use makeResponsive from packages/ui/src/customizables/makeResponsive.tsx with breakpoints defined in packages/ui/src/styledSystem/breakpoints.tsx for responsive design support

Use useDeepEqualMemo in AppearanceProvider to prevent unnecessary re-renders when appearance configuration changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/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.
**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition: if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions, focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities, focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge, otherwise remain silent.

When in doubt, err on the side of fewer comments, brevity and blocking issues only.

Avoid posting any refactoring issues.
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.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). (28)
  • GitHub Check: Unit Tests (shared, clerk-js, RQ)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (**)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (nextjs, chrome, 16)
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (sessions:staging, chrome)
  • GitHub Check: Integration Tests (machine, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (handshake, chrome)
  • GitHub Check: Integration Tests (billing, chrome, RQ)
  • GitHub Check: Integration Tests (custom, chrome)
  • GitHub Check: Integration Tests (quickstart, chrome, 15)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 16, RQ)
  • GitHub Check: Integration Tests (quickstart, chrome, 16)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (handshake:staging, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (machine, chrome, RQ)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
.changeset/eighty-mugs-eat.md (1)
1-5: LGTM!
Changeset properly documents the patch for the UI package.
packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx (2)
51-63: LGTM - Implementation handles the happy path correctly.
The async flow fetches organization memberships after enabling the setting, and the fallback message handles cases where clerk.user is null or no memberships exist.
Consider adding unit tests to cover:
  • Success path with organization name displayed
  • Fallback when clerk.user is null
  • Fallback when memberships array is empty
134-136: Conditional rendering looks good.
The ternary correctly checks both clerk.user and defaultOrganizationName before displaying the personalized message, with a clean fallback to the generic message.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
Jan 12, 2026

Copy link


Copy Markdown

Open in StackBlitz
@clerk/agent-toolkit
npm i https://pkg.pr.new/@clerk/agent-toolkit@7581

@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@7581

@clerk/backend
npm i https://pkg.pr.new/@clerk/backend@7581

@clerk/chrome-extension
npm i https://pkg.pr.new/@clerk/chrome-extension@7581

@clerk/clerk-js
npm i https://pkg.pr.new/@clerk/clerk-js@7581

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@7581

@clerk/expo
npm i https://pkg.pr.new/@clerk/expo@7581

@clerk/expo-passkeys
npm i https://pkg.pr.new/@clerk/expo-passkeys@7581

@clerk/express
npm i https://pkg.pr.new/@clerk/express@7581

@clerk/fastify
npm i https://pkg.pr.new/@clerk/fastify@7581

@clerk/localizations
npm i https://pkg.pr.new/@clerk/localizations@7581

@clerk/nextjs
npm i https://pkg.pr.new/@clerk/nextjs@7581

@clerk/nuxt
npm i https://pkg.pr.new/@clerk/nuxt@7581

@clerk/react
npm i https://pkg.pr.new/@clerk/react@7581

@clerk/react-router
npm i https://pkg.pr.new/@clerk/react-router@7581

@clerk/shared
npm i https://pkg.pr.new/@clerk/shared@7581

@clerk/tanstack-react-start
npm i https://pkg.pr.new/@clerk/tanstack-react-start@7581

@clerk/testing
npm i https://pkg.pr.new/@clerk/testing@7581

@clerk/ui
npm i https://pkg.pr.new/@clerk/ui@7581

@clerk/upgrade
npm i https://pkg.pr.new/@clerk/upgrade@7581

@clerk/vue
npm i https://pkg.pr.new/@clerk/vue@7581

commit: d1d14fe
@LauraBeatris
LauraBeatris
merged commit 04c6245
into
mainJan 12, 2026

101 of 104 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my

branch
January 12, 2026 17:11
@LauraBeatrisLauraBeatris
mentioned this pull request
Jan 12, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@NicolasLopes7NicolasLopes7NicolasLopes7 approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

core-3

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@NicolasLopes7

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(ui): Show created org membership in enable organizations prompt by LauraBeatris · Pull Request #7581 · clerk/javascript · GitHub
Skip to content
chore(ui): Show created org membership in enable organizations prompt - #7581
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Jan 12, 2026
Merged
chore(ui): Show created org membership in enable organizations prompt#7581
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Jan 12, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Contributor
Description
This PR replaces the hardcoded "My organization" name on the prompt success message with the actual org membership name created by the /dev_tools FAPI endpoint based on organization_creation_defaults
CleanShot 2026-01-12 at 13 34 14
CleanShot.2026-01-12.at.13.33.33.mp4
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
  • New Features
    • The organization enable prompt success message now displays the actual organization membership name instead of generic text, providing users with personalized confirmation during the organization setup process.
✏️ Tip: You can customize this high-level summary in your review settings.
@LauraBeatrisLauraBeatris
self-assigned this
Jan 12, 2026
@changeset-bot
changeset-botBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: d1d14fe
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJan 12, 2026 4:41pm
@LauraBeatris
LauraBeatris
requested a review
from a teamJanuary 12, 2026 16:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
branch
from
2dc3f21 to
d1d14feCompareJanuary 12, 2026 16:40
@coderabbitai
coderabbitaiBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
📝 Walkthrough
Walkthrough
This pull request updates the EnableOrganizationsPrompt component in @clerk/ui to display the actual organization membership name in the success message upon enabling organizations. The implementation introduces a new internal state variable to store the organization name, fetches the user's organization memberships after enabling the environment setting, derives the first organization name if available, and updates the confirmation message to interpolate this name. A changeset entry documents this patch release for the UI package.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately describes the main change: displaying the actual created organization membership name in the enable organizations prompt, replacing the hardcoded text.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
📜 Recent review details
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
  • Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 1e4074d and d1d14fe.
📒 Files selected for processing (2)
  • .changeset/eighty-mugs-eat.md
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs

Use tree-shaking friendly exports

Validate all inputs and sanitize outputs

All public APIs must be documented with JSDoc

Use dynamic imports for optional features

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

Implement proper logging with different levels
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components

Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components

Leverage TypeScript's type inference where possible in React components

Use proper event types for handlers in React components

Implement proper generic types for reusable React components

Use proper type guards for conditional rendering in React components
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components

Follow PascalCase naming for components (e.g., 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

Separate UI components from business logic components

Use useState for simple state management in React components

Use useReducer for complex state logic in React components

Implement proper state initialization in React components

Use proper state updates with callbacks in React components

Implement proper state cleanup in React components

Use Context API for theme/authentication state management

Implement proper state persistence in React applications

Use React.memo for expensive components

Implement proper useCallback for handlers in React components

Use proper useMemo for expensive computations in React components

Implement proper virtualization for lists in React components

Use proper code splitting with React.lazy in React applications

Implement proper cleanup in useEffect hooks

Use proper refs for DOM access in React components

Implement proper event listener cleanup in React components

Use proper abort controllers for fetch in React components

Implement proper subscription cleanup in React components

Use proper HTML elements for semantic HTML in React components

Implement proper ARIA attributes for accessibility in React components

Use proper heading hierarchy in React components

Implement proper form labels in React components

Use proper button types in React components

Implement proper focus management for keyboard navigation in React components

Use proper keyboard shortcuts in React components

Implement proper tab order in React components

Use proper ...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{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

Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type

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 in classes

Use protected for inheritance hierarchies

Use public explicitly for clarity in public APIs

Use mixins for shared behavior across unrelated classes in TypeScript

Use generic constraints with bounded type parameters like <T extends { id: string }>

Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction

Use discriminated unions instead of boolean flags for state management and API responses

Use mapped types for transforming object types

Use conditional types for type-level logic

Leverage template literal types for string manipulation at the type level

Use ES6 imports/exports consistently

Use default exports sparingly, prefer named exports

Document functions with JSDoc comments including @PARAM, @returns, @throws, and @example tags

Create custom error classes that extend Error for specific error types

Use the Result pattern for error handling instead of throwing exceptions

Use optional chaining (?.) and nullish coalescing (??) operators for safe property access

Let TypeScript infer obvious types to reduce verbosity

Use const assertions with as const for literal types

Use satisfies operator for type checking without widening types

Declare readonly arrays and objects for immutable data structures

Use spread operator and array spread for immutable updates instead of mutations

Use lazy loading for large types...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use ESLint with custom configurations tailored for different package types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use Prettier for code formatting across all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-ui-theming.mdc)
packages/ui/src/**/*.{ts,tsx}: Use element descriptors for all themable elements by applying elementDescriptor prop to components and importing descriptors from packages/ui/src/customizables/elementDescriptors.ts

Use theme-aware functions in elements configuration to access design tokens (e.g., { theme } => ({ backgroundColor: theme.colors.$primary500 }))

Prefer CSS variables (e.g., --clerk-color-primary, --clerk-spacing) for runtime customization via the clerkCssVar utility

Automatically generate color scales using the color scale generation process rather than manually defining all lightness and alpha variations (25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950 shades)

Use the createVariants function from packages/ui/src/styledSystem/createVariants.ts for type-safe variant-based styling with base, variants, defaultVariants, and compoundVariants configuration

Wrap primitive components with makeCustomizable HOC from packages/ui/src/customizables/makeCustomizable.tsx to enable element descriptor support and theming

Apply the sx prop using either a theme-aware function (theme: InternalTheme) => StyleRule or static style object to components for theme-aware CSS

Use state props (isLoading, hasError, isOpen, isActive) to automatically generate state classes (cl-loading, cl-error, cl-open, cl-active) for styling

Use CSS light-dark() function via the lightDark utility from packages/ui/src/utils/lightDark.ts for automatic light/dark mode support with fallbacks

Use Emotion's css prop and ThemeProvider via InternalThemeProvider from packages/ui/src/styledSystem/InternalThemeProvider.tsx for styling and theme context

Use makeResponsive from packages/ui/src/customizables/makeResponsive.tsx with breakpoints defined in packages/ui/src/styledSystem/breakpoints.tsx for responsive design support

Use useDeepEqualMemo in AppearanceProvider to prevent unnecessary re-renders when appearance configuration changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/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.
**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition: if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions, focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities, focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge, otherwise remain silent.

When in doubt, err on the side of fewer comments, brevity and blocking issues only.

Avoid posting any refactoring issues.
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.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). (28)
  • GitHub Check: Unit Tests (shared, clerk-js, RQ)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (**)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (nextjs, chrome, 16)
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (sessions:staging, chrome)
  • GitHub Check: Integration Tests (machine, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (handshake, chrome)
  • GitHub Check: Integration Tests (billing, chrome, RQ)
  • GitHub Check: Integration Tests (custom, chrome)
  • GitHub Check: Integration Tests (quickstart, chrome, 15)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 16, RQ)
  • GitHub Check: Integration Tests (quickstart, chrome, 16)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (handshake:staging, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (machine, chrome, RQ)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
.changeset/eighty-mugs-eat.md (1)
1-5: LGTM!
Changeset properly documents the patch for the UI package.
packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx (2)
51-63: LGTM - Implementation handles the happy path correctly.
The async flow fetches organization memberships after enabling the setting, and the fallback message handles cases where clerk.user is null or no memberships exist.
Consider adding unit tests to cover:
  • Success path with organization name displayed
  • Fallback when clerk.user is null
  • Fallback when memberships array is empty
134-136: Conditional rendering looks good.
The ternary correctly checks both clerk.user and defaultOrganizationName before displaying the personalized message, with a clean fallback to the generic message.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
Jan 12, 2026

Copy link


Copy Markdown

Open in StackBlitz
@clerk/agent-toolkit
npm i https://pkg.pr.new/@clerk/agent-toolkit@7581

@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@7581

@clerk/backend
npm i https://pkg.pr.new/@clerk/backend@7581

@clerk/chrome-extension
npm i https://pkg.pr.new/@clerk/chrome-extension@7581

@clerk/clerk-js
npm i https://pkg.pr.new/@clerk/clerk-js@7581

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@7581

@clerk/expo
npm i https://pkg.pr.new/@clerk/expo@7581

@clerk/expo-passkeys
npm i https://pkg.pr.new/@clerk/expo-passkeys@7581

@clerk/express
npm i https://pkg.pr.new/@clerk/express@7581

@clerk/fastify
npm i https://pkg.pr.new/@clerk/fastify@7581

@clerk/localizations
npm i https://pkg.pr.new/@clerk/localizations@7581

@clerk/nextjs
npm i https://pkg.pr.new/@clerk/nextjs@7581

@clerk/nuxt
npm i https://pkg.pr.new/@clerk/nuxt@7581

@clerk/react
npm i https://pkg.pr.new/@clerk/react@7581

@clerk/react-router
npm i https://pkg.pr.new/@clerk/react-router@7581

@clerk/shared
npm i https://pkg.pr.new/@clerk/shared@7581

@clerk/tanstack-react-start
npm i https://pkg.pr.new/@clerk/tanstack-react-start@7581

@clerk/testing
npm i https://pkg.pr.new/@clerk/testing@7581

@clerk/ui
npm i https://pkg.pr.new/@clerk/ui@7581

@clerk/upgrade
npm i https://pkg.pr.new/@clerk/upgrade@7581

@clerk/vue
npm i https://pkg.pr.new/@clerk/vue@7581

commit: d1d14fe
@LauraBeatris
LauraBeatris
merged commit 04c6245
into
mainJan 12, 2026

101 of 104 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my

branch
January 12, 2026 17:11
@LauraBeatrisLauraBeatris
mentioned this pull request
Jan 12, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@NicolasLopes7NicolasLopes7NicolasLopes7 approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

core-3

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@NicolasLopes7

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(ui): Show created org membership in enable organizations prompt by LauraBeatris · Pull Request #7581 · clerk/javascript · GitHub
Skip to content
chore(ui): Show created org membership in enable organizations prompt - #7581
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Jan 12, 2026
Merged
chore(ui): Show created org membership in enable organizations prompt#7581
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Jan 12, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Contributor
Description
This PR replaces the hardcoded "My organization" name on the prompt success message with the actual org membership name created by the /dev_tools FAPI endpoint based on organization_creation_defaults
CleanShot 2026-01-12 at 13 34 14
CleanShot.2026-01-12.at.13.33.33.mp4
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
  • New Features
    • The organization enable prompt success message now displays the actual organization membership name instead of generic text, providing users with personalized confirmation during the organization setup process.
✏️ Tip: You can customize this high-level summary in your review settings.
@LauraBeatrisLauraBeatris
self-assigned this
Jan 12, 2026
@changeset-bot
changeset-botBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: d1d14fe
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJan 12, 2026 4:41pm
@LauraBeatris
LauraBeatris
requested a review
from a teamJanuary 12, 2026 16:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
branch
from
2dc3f21 to
d1d14feCompareJanuary 12, 2026 16:40
@coderabbitai
coderabbitaiBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
📝 Walkthrough
Walkthrough
This pull request updates the EnableOrganizationsPrompt component in @clerk/ui to display the actual organization membership name in the success message upon enabling organizations. The implementation introduces a new internal state variable to store the organization name, fetches the user's organization memberships after enabling the environment setting, derives the first organization name if available, and updates the confirmation message to interpolate this name. A changeset entry documents this patch release for the UI package.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately describes the main change: displaying the actual created organization membership name in the enable organizations prompt, replacing the hardcoded text.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
📜 Recent review details
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
  • Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 1e4074d and d1d14fe.
📒 Files selected for processing (2)
  • .changeset/eighty-mugs-eat.md
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs

Use tree-shaking friendly exports

Validate all inputs and sanitize outputs

All public APIs must be documented with JSDoc

Use dynamic imports for optional features

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

Implement proper logging with different levels
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components

Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components

Leverage TypeScript's type inference where possible in React components

Use proper event types for handlers in React components

Implement proper generic types for reusable React components

Use proper type guards for conditional rendering in React components
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components

Follow PascalCase naming for components (e.g., 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

Separate UI components from business logic components

Use useState for simple state management in React components

Use useReducer for complex state logic in React components

Implement proper state initialization in React components

Use proper state updates with callbacks in React components

Implement proper state cleanup in React components

Use Context API for theme/authentication state management

Implement proper state persistence in React applications

Use React.memo for expensive components

Implement proper useCallback for handlers in React components

Use proper useMemo for expensive computations in React components

Implement proper virtualization for lists in React components

Use proper code splitting with React.lazy in React applications

Implement proper cleanup in useEffect hooks

Use proper refs for DOM access in React components

Implement proper event listener cleanup in React components

Use proper abort controllers for fetch in React components

Implement proper subscription cleanup in React components

Use proper HTML elements for semantic HTML in React components

Implement proper ARIA attributes for accessibility in React components

Use proper heading hierarchy in React components

Implement proper form labels in React components

Use proper button types in React components

Implement proper focus management for keyboard navigation in React components

Use proper keyboard shortcuts in React components

Implement proper tab order in React components

Use proper ...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{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

Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type

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 in classes

Use protected for inheritance hierarchies

Use public explicitly for clarity in public APIs

Use mixins for shared behavior across unrelated classes in TypeScript

Use generic constraints with bounded type parameters like <T extends { id: string }>

Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction

Use discriminated unions instead of boolean flags for state management and API responses

Use mapped types for transforming object types

Use conditional types for type-level logic

Leverage template literal types for string manipulation at the type level

Use ES6 imports/exports consistently

Use default exports sparingly, prefer named exports

Document functions with JSDoc comments including @PARAM, @returns, @throws, and @example tags

Create custom error classes that extend Error for specific error types

Use the Result pattern for error handling instead of throwing exceptions

Use optional chaining (?.) and nullish coalescing (??) operators for safe property access

Let TypeScript infer obvious types to reduce verbosity

Use const assertions with as const for literal types

Use satisfies operator for type checking without widening types

Declare readonly arrays and objects for immutable data structures

Use spread operator and array spread for immutable updates instead of mutations

Use lazy loading for large types...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use ESLint with custom configurations tailored for different package types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use Prettier for code formatting across all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-ui-theming.mdc)
packages/ui/src/**/*.{ts,tsx}: Use element descriptors for all themable elements by applying elementDescriptor prop to components and importing descriptors from packages/ui/src/customizables/elementDescriptors.ts

Use theme-aware functions in elements configuration to access design tokens (e.g., { theme } => ({ backgroundColor: theme.colors.$primary500 }))

Prefer CSS variables (e.g., --clerk-color-primary, --clerk-spacing) for runtime customization via the clerkCssVar utility

Automatically generate color scales using the color scale generation process rather than manually defining all lightness and alpha variations (25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950 shades)

Use the createVariants function from packages/ui/src/styledSystem/createVariants.ts for type-safe variant-based styling with base, variants, defaultVariants, and compoundVariants configuration

Wrap primitive components with makeCustomizable HOC from packages/ui/src/customizables/makeCustomizable.tsx to enable element descriptor support and theming

Apply the sx prop using either a theme-aware function (theme: InternalTheme) => StyleRule or static style object to components for theme-aware CSS

Use state props (isLoading, hasError, isOpen, isActive) to automatically generate state classes (cl-loading, cl-error, cl-open, cl-active) for styling

Use CSS light-dark() function via the lightDark utility from packages/ui/src/utils/lightDark.ts for automatic light/dark mode support with fallbacks

Use Emotion's css prop and ThemeProvider via InternalThemeProvider from packages/ui/src/styledSystem/InternalThemeProvider.tsx for styling and theme context

Use makeResponsive from packages/ui/src/customizables/makeResponsive.tsx with breakpoints defined in packages/ui/src/styledSystem/breakpoints.tsx for responsive design support

Use useDeepEqualMemo in AppearanceProvider to prevent unnecessary re-renders when appearance configuration changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/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.
**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition: if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions, focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities, focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge, otherwise remain silent.

When in doubt, err on the side of fewer comments, brevity and blocking issues only.

Avoid posting any refactoring issues.
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.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). (28)
  • GitHub Check: Unit Tests (shared, clerk-js, RQ)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (**)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (nextjs, chrome, 16)
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (sessions:staging, chrome)
  • GitHub Check: Integration Tests (machine, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (handshake, chrome)
  • GitHub Check: Integration Tests (billing, chrome, RQ)
  • GitHub Check: Integration Tests (custom, chrome)
  • GitHub Check: Integration Tests (quickstart, chrome, 15)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 16, RQ)
  • GitHub Check: Integration Tests (quickstart, chrome, 16)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (handshake:staging, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (machine, chrome, RQ)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
.changeset/eighty-mugs-eat.md (1)
1-5: LGTM!
Changeset properly documents the patch for the UI package.
packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx (2)
51-63: LGTM - Implementation handles the happy path correctly.
The async flow fetches organization memberships after enabling the setting, and the fallback message handles cases where clerk.user is null or no memberships exist.
Consider adding unit tests to cover:
  • Success path with organization name displayed
  • Fallback when clerk.user is null
  • Fallback when memberships array is empty
134-136: Conditional rendering looks good.
The ternary correctly checks both clerk.user and defaultOrganizationName before displaying the personalized message, with a clean fallback to the generic message.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
Jan 12, 2026

Copy link


Copy Markdown

Open in StackBlitz
@clerk/agent-toolkit
npm i https://pkg.pr.new/@clerk/agent-toolkit@7581

@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@7581

@clerk/backend
npm i https://pkg.pr.new/@clerk/backend@7581

@clerk/chrome-extension
npm i https://pkg.pr.new/@clerk/chrome-extension@7581

@clerk/clerk-js
npm i https://pkg.pr.new/@clerk/clerk-js@7581

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@7581

@clerk/expo
npm i https://pkg.pr.new/@clerk/expo@7581

@clerk/expo-passkeys
npm i https://pkg.pr.new/@clerk/expo-passkeys@7581

@clerk/express
npm i https://pkg.pr.new/@clerk/express@7581

@clerk/fastify
npm i https://pkg.pr.new/@clerk/fastify@7581

@clerk/localizations
npm i https://pkg.pr.new/@clerk/localizations@7581

@clerk/nextjs
npm i https://pkg.pr.new/@clerk/nextjs@7581

@clerk/nuxt
npm i https://pkg.pr.new/@clerk/nuxt@7581

@clerk/react
npm i https://pkg.pr.new/@clerk/react@7581

@clerk/react-router
npm i https://pkg.pr.new/@clerk/react-router@7581

@clerk/shared
npm i https://pkg.pr.new/@clerk/shared@7581

@clerk/tanstack-react-start
npm i https://pkg.pr.new/@clerk/tanstack-react-start@7581

@clerk/testing
npm i https://pkg.pr.new/@clerk/testing@7581

@clerk/ui
npm i https://pkg.pr.new/@clerk/ui@7581

@clerk/upgrade
npm i https://pkg.pr.new/@clerk/upgrade@7581

@clerk/vue
npm i https://pkg.pr.new/@clerk/vue@7581

commit: d1d14fe
@LauraBeatris
LauraBeatris
merged commit 04c6245
into
mainJan 12, 2026

101 of 104 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my

branch
January 12, 2026 17:11
@LauraBeatrisLauraBeatris
mentioned this pull request
Jan 12, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@NicolasLopes7NicolasLopes7NicolasLopes7 approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

core-3

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@NicolasLopes7

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
chore(ui): Show created org membership in enable organizations prompt by LauraBeatris · Pull Request #7581 · clerk/javascript · GitHub
Skip to content
chore(ui): Show created org membership in enable organizations prompt - #7581
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Jan 12, 2026
Merged
chore(ui): Show created org membership in enable organizations prompt#7581
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Jan 12, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Contributor
Description
This PR replaces the hardcoded "My organization" name on the prompt success message with the actual org membership name created by the /dev_tools FAPI endpoint based on organization_creation_defaults
CleanShot 2026-01-12 at 13 34 14
CleanShot.2026-01-12.at.13.33.33.mp4
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
  • New Features
    • The organization enable prompt success message now displays the actual organization membership name instead of generic text, providing users with personalized confirmation during the organization setup process.
✏️ Tip: You can customize this high-level summary in your review settings.
@LauraBeatrisLauraBeatris
self-assigned this
Jan 12, 2026
@changeset-bot
changeset-botBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: d1d14fe
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJan 12, 2026 4:41pm
@LauraBeatris
LauraBeatris
requested a review
from a teamJanuary 12, 2026 16:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
branch
from
2dc3f21 to
d1d14feCompareJanuary 12, 2026 16:40
@coderabbitai
coderabbitaiBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
📝 Walkthrough
Walkthrough
This pull request updates the EnableOrganizationsPrompt component in @clerk/ui to display the actual organization membership name in the success message upon enabling organizations. The implementation introduces a new internal state variable to store the organization name, fetches the user's organization memberships after enabling the environment setting, derives the first organization name if available, and updates the confirmation message to interpolate this name. A changeset entry documents this patch release for the UI package.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately describes the main change: displaying the actual created organization membership name in the enable organizations prompt, replacing the hardcoded text.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
📜 Recent review details
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
  • Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 1e4074d and d1d14fe.
📒 Files selected for processing (2)
  • .changeset/eighty-mugs-eat.md
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs

Use tree-shaking friendly exports

Validate all inputs and sanitize outputs

All public APIs must be documented with JSDoc

Use dynamic imports for optional features

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

Implement proper logging with different levels
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components

Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components

Leverage TypeScript's type inference where possible in React components

Use proper event types for handlers in React components

Implement proper generic types for reusable React components

Use proper type guards for conditional rendering in React components
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components

Follow PascalCase naming for components (e.g., 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

Separate UI components from business logic components

Use useState for simple state management in React components

Use useReducer for complex state logic in React components

Implement proper state initialization in React components

Use proper state updates with callbacks in React components

Implement proper state cleanup in React components

Use Context API for theme/authentication state management

Implement proper state persistence in React applications

Use React.memo for expensive components

Implement proper useCallback for handlers in React components

Use proper useMemo for expensive computations in React components

Implement proper virtualization for lists in React components

Use proper code splitting with React.lazy in React applications

Implement proper cleanup in useEffect hooks

Use proper refs for DOM access in React components

Implement proper event listener cleanup in React components

Use proper abort controllers for fetch in React components

Implement proper subscription cleanup in React components

Use proper HTML elements for semantic HTML in React components

Implement proper ARIA attributes for accessibility in React components

Use proper heading hierarchy in React components

Implement proper form labels in React components

Use proper button types in React components

Implement proper focus management for keyboard navigation in React components

Use proper keyboard shortcuts in React components

Implement proper tab order in React components

Use proper ...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{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

Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type

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 in classes

Use protected for inheritance hierarchies

Use public explicitly for clarity in public APIs

Use mixins for shared behavior across unrelated classes in TypeScript

Use generic constraints with bounded type parameters like <T extends { id: string }>

Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction

Use discriminated unions instead of boolean flags for state management and API responses

Use mapped types for transforming object types

Use conditional types for type-level logic

Leverage template literal types for string manipulation at the type level

Use ES6 imports/exports consistently

Use default exports sparingly, prefer named exports

Document functions with JSDoc comments including @PARAM, @returns, @throws, and @example tags

Create custom error classes that extend Error for specific error types

Use the Result pattern for error handling instead of throwing exceptions

Use optional chaining (?.) and nullish coalescing (??) operators for safe property access

Let TypeScript infer obvious types to reduce verbosity

Use const assertions with as const for literal types

Use satisfies operator for type checking without widening types

Declare readonly arrays and objects for immutable data structures

Use spread operator and array spread for immutable updates instead of mutations

Use lazy loading for large types...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use ESLint with custom configurations tailored for different package types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use Prettier for code formatting across all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-ui-theming.mdc)
packages/ui/src/**/*.{ts,tsx}: Use element descriptors for all themable elements by applying elementDescriptor prop to components and importing descriptors from packages/ui/src/customizables/elementDescriptors.ts

Use theme-aware functions in elements configuration to access design tokens (e.g., { theme } => ({ backgroundColor: theme.colors.$primary500 }))

Prefer CSS variables (e.g., --clerk-color-primary, --clerk-spacing) for runtime customization via the clerkCssVar utility

Automatically generate color scales using the color scale generation process rather than manually defining all lightness and alpha variations (25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950 shades)

Use the createVariants function from packages/ui/src/styledSystem/createVariants.ts for type-safe variant-based styling with base, variants, defaultVariants, and compoundVariants configuration

Wrap primitive components with makeCustomizable HOC from packages/ui/src/customizables/makeCustomizable.tsx to enable element descriptor support and theming

Apply the sx prop using either a theme-aware function (theme: InternalTheme) => StyleRule or static style object to components for theme-aware CSS

Use state props (isLoading, hasError, isOpen, isActive) to automatically generate state classes (cl-loading, cl-error, cl-open, cl-active) for styling

Use CSS light-dark() function via the lightDark utility from packages/ui/src/utils/lightDark.ts for automatic light/dark mode support with fallbacks

Use Emotion's css prop and ThemeProvider via InternalThemeProvider from packages/ui/src/styledSystem/InternalThemeProvider.tsx for styling and theme context

Use makeResponsive from packages/ui/src/customizables/makeResponsive.tsx with breakpoints defined in packages/ui/src/styledSystem/breakpoints.tsx for responsive design support

Use useDeepEqualMemo in AppearanceProvider to prevent unnecessary re-renders when appearance configuration changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/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.
**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition: if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions, focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities, focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge, otherwise remain silent.

When in doubt, err on the side of fewer comments, brevity and blocking issues only.

Avoid posting any refactoring issues.
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.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). (28)
  • GitHub Check: Unit Tests (shared, clerk-js, RQ)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (**)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (nextjs, chrome, 16)
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (sessions:staging, chrome)
  • GitHub Check: Integration Tests (machine, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (handshake, chrome)
  • GitHub Check: Integration Tests (billing, chrome, RQ)
  • GitHub Check: Integration Tests (custom, chrome)
  • GitHub Check: Integration Tests (quickstart, chrome, 15)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 16, RQ)
  • GitHub Check: Integration Tests (quickstart, chrome, 16)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (handshake:staging, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (machine, chrome, RQ)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
.changeset/eighty-mugs-eat.md (1)
1-5: LGTM!
Changeset properly documents the patch for the UI package.
packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx (2)
51-63: LGTM - Implementation handles the happy path correctly.
The async flow fetches organization memberships after enabling the setting, and the fallback message handles cases where clerk.user is null or no memberships exist.
Consider adding unit tests to cover:
  • Success path with organization name displayed
  • Fallback when clerk.user is null
  • Fallback when memberships array is empty
134-136: Conditional rendering looks good.
The ternary correctly checks both clerk.user and defaultOrganizationName before displaying the personalized message, with a clean fallback to the generic message.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
Jan 12, 2026

Copy link


Copy Markdown

Open in StackBlitz
@clerk/agent-toolkit
npm i https://pkg.pr.new/@clerk/agent-toolkit@7581

@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@7581

@clerk/backend
npm i https://pkg.pr.new/@clerk/backend@7581

@clerk/chrome-extension
npm i https://pkg.pr.new/@clerk/chrome-extension@7581

@clerk/clerk-js
npm i https://pkg.pr.new/@clerk/clerk-js@7581

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@7581

@clerk/expo
npm i https://pkg.pr.new/@clerk/expo@7581

@clerk/expo-passkeys
npm i https://pkg.pr.new/@clerk/expo-passkeys@7581

@clerk/express
npm i https://pkg.pr.new/@clerk/express@7581

@clerk/fastify
npm i https://pkg.pr.new/@clerk/fastify@7581

@clerk/localizations
npm i https://pkg.pr.new/@clerk/localizations@7581

@clerk/nextjs
npm i https://pkg.pr.new/@clerk/nextjs@7581

@clerk/nuxt
npm i https://pkg.pr.new/@clerk/nuxt@7581

@clerk/react
npm i https://pkg.pr.new/@clerk/react@7581

@clerk/react-router
npm i https://pkg.pr.new/@clerk/react-router@7581

@clerk/shared
npm i https://pkg.pr.new/@clerk/shared@7581

@clerk/tanstack-react-start
npm i https://pkg.pr.new/@clerk/tanstack-react-start@7581

@clerk/testing
npm i https://pkg.pr.new/@clerk/testing@7581

@clerk/ui
npm i https://pkg.pr.new/@clerk/ui@7581

@clerk/upgrade
npm i https://pkg.pr.new/@clerk/upgrade@7581

@clerk/vue
npm i https://pkg.pr.new/@clerk/vue@7581

commit: d1d14fe
@LauraBeatris
LauraBeatris
merged commit 04c6245
into
mainJan 12, 2026

101 of 104 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my

branch
January 12, 2026 17:11
@LauraBeatrisLauraBeatris
mentioned this pull request
Jan 12, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@NicolasLopes7NicolasLopes7NicolasLopes7 approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

core-3

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@NicolasLopes7

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(ui): Show created org membership in enable organizations prompt by LauraBeatris · Pull Request #7581 · clerk/javascript · GitHub
Skip to content
chore(ui): Show created org membership in enable organizations prompt - #7581
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Jan 12, 2026
Merged
chore(ui): Show created org membership in enable organizations prompt#7581
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Jan 12, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Contributor
Description
This PR replaces the hardcoded "My organization" name on the prompt success message with the actual org membership name created by the /dev_tools FAPI endpoint based on organization_creation_defaults
CleanShot 2026-01-12 at 13 34 14
CleanShot.2026-01-12.at.13.33.33.mp4
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
  • New Features
    • The organization enable prompt success message now displays the actual organization membership name instead of generic text, providing users with personalized confirmation during the organization setup process.
✏️ Tip: You can customize this high-level summary in your review settings.
@LauraBeatrisLauraBeatris
self-assigned this
Jan 12, 2026
@changeset-bot
changeset-botBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: d1d14fe
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJan 12, 2026 4:41pm
@LauraBeatris
LauraBeatris
requested a review
from a teamJanuary 12, 2026 16:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
branch
from
2dc3f21 to
d1d14feCompareJanuary 12, 2026 16:40
@coderabbitai
coderabbitaiBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
📝 Walkthrough
Walkthrough
This pull request updates the EnableOrganizationsPrompt component in @clerk/ui to display the actual organization membership name in the success message upon enabling organizations. The implementation introduces a new internal state variable to store the organization name, fetches the user's organization memberships after enabling the environment setting, derives the first organization name if available, and updates the confirmation message to interpolate this name. A changeset entry documents this patch release for the UI package.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately describes the main change: displaying the actual created organization membership name in the enable organizations prompt, replacing the hardcoded text.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
📜 Recent review details
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
  • Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 1e4074d and d1d14fe.
📒 Files selected for processing (2)
  • .changeset/eighty-mugs-eat.md
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs

Use tree-shaking friendly exports

Validate all inputs and sanitize outputs

All public APIs must be documented with JSDoc

Use dynamic imports for optional features

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

Implement proper logging with different levels
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components

Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components

Leverage TypeScript's type inference where possible in React components

Use proper event types for handlers in React components

Implement proper generic types for reusable React components

Use proper type guards for conditional rendering in React components
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components

Follow PascalCase naming for components (e.g., 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

Separate UI components from business logic components

Use useState for simple state management in React components

Use useReducer for complex state logic in React components

Implement proper state initialization in React components

Use proper state updates with callbacks in React components

Implement proper state cleanup in React components

Use Context API for theme/authentication state management

Implement proper state persistence in React applications

Use React.memo for expensive components

Implement proper useCallback for handlers in React components

Use proper useMemo for expensive computations in React components

Implement proper virtualization for lists in React components

Use proper code splitting with React.lazy in React applications

Implement proper cleanup in useEffect hooks

Use proper refs for DOM access in React components

Implement proper event listener cleanup in React components

Use proper abort controllers for fetch in React components

Implement proper subscription cleanup in React components

Use proper HTML elements for semantic HTML in React components

Implement proper ARIA attributes for accessibility in React components

Use proper heading hierarchy in React components

Implement proper form labels in React components

Use proper button types in React components

Implement proper focus management for keyboard navigation in React components

Use proper keyboard shortcuts in React components

Implement proper tab order in React components

Use proper ...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{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

Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type

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 in classes

Use protected for inheritance hierarchies

Use public explicitly for clarity in public APIs

Use mixins for shared behavior across unrelated classes in TypeScript

Use generic constraints with bounded type parameters like <T extends { id: string }>

Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction

Use discriminated unions instead of boolean flags for state management and API responses

Use mapped types for transforming object types

Use conditional types for type-level logic

Leverage template literal types for string manipulation at the type level

Use ES6 imports/exports consistently

Use default exports sparingly, prefer named exports

Document functions with JSDoc comments including @PARAM, @returns, @throws, and @example tags

Create custom error classes that extend Error for specific error types

Use the Result pattern for error handling instead of throwing exceptions

Use optional chaining (?.) and nullish coalescing (??) operators for safe property access

Let TypeScript infer obvious types to reduce verbosity

Use const assertions with as const for literal types

Use satisfies operator for type checking without widening types

Declare readonly arrays and objects for immutable data structures

Use spread operator and array spread for immutable updates instead of mutations

Use lazy loading for large types...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use ESLint with custom configurations tailored for different package types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use Prettier for code formatting across all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-ui-theming.mdc)
packages/ui/src/**/*.{ts,tsx}: Use element descriptors for all themable elements by applying elementDescriptor prop to components and importing descriptors from packages/ui/src/customizables/elementDescriptors.ts

Use theme-aware functions in elements configuration to access design tokens (e.g., { theme } => ({ backgroundColor: theme.colors.$primary500 }))

Prefer CSS variables (e.g., --clerk-color-primary, --clerk-spacing) for runtime customization via the clerkCssVar utility

Automatically generate color scales using the color scale generation process rather than manually defining all lightness and alpha variations (25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950 shades)

Use the createVariants function from packages/ui/src/styledSystem/createVariants.ts for type-safe variant-based styling with base, variants, defaultVariants, and compoundVariants configuration

Wrap primitive components with makeCustomizable HOC from packages/ui/src/customizables/makeCustomizable.tsx to enable element descriptor support and theming

Apply the sx prop using either a theme-aware function (theme: InternalTheme) => StyleRule or static style object to components for theme-aware CSS

Use state props (isLoading, hasError, isOpen, isActive) to automatically generate state classes (cl-loading, cl-error, cl-open, cl-active) for styling

Use CSS light-dark() function via the lightDark utility from packages/ui/src/utils/lightDark.ts for automatic light/dark mode support with fallbacks

Use Emotion's css prop and ThemeProvider via InternalThemeProvider from packages/ui/src/styledSystem/InternalThemeProvider.tsx for styling and theme context

Use makeResponsive from packages/ui/src/customizables/makeResponsive.tsx with breakpoints defined in packages/ui/src/styledSystem/breakpoints.tsx for responsive design support

Use useDeepEqualMemo in AppearanceProvider to prevent unnecessary re-renders when appearance configuration changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/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.
**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition: if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions, focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities, focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge, otherwise remain silent.

When in doubt, err on the side of fewer comments, brevity and blocking issues only.

Avoid posting any refactoring issues.
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.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). (28)
  • GitHub Check: Unit Tests (shared, clerk-js, RQ)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (**)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (nextjs, chrome, 16)
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (sessions:staging, chrome)
  • GitHub Check: Integration Tests (machine, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (handshake, chrome)
  • GitHub Check: Integration Tests (billing, chrome, RQ)
  • GitHub Check: Integration Tests (custom, chrome)
  • GitHub Check: Integration Tests (quickstart, chrome, 15)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 16, RQ)
  • GitHub Check: Integration Tests (quickstart, chrome, 16)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (handshake:staging, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (machine, chrome, RQ)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
.changeset/eighty-mugs-eat.md (1)
1-5: LGTM!
Changeset properly documents the patch for the UI package.
packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx (2)
51-63: LGTM - Implementation handles the happy path correctly.
The async flow fetches organization memberships after enabling the setting, and the fallback message handles cases where clerk.user is null or no memberships exist.
Consider adding unit tests to cover:
  • Success path with organization name displayed
  • Fallback when clerk.user is null
  • Fallback when memberships array is empty
134-136: Conditional rendering looks good.
The ternary correctly checks both clerk.user and defaultOrganizationName before displaying the personalized message, with a clean fallback to the generic message.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
Jan 12, 2026

Copy link


Copy Markdown

Open in StackBlitz
@clerk/agent-toolkit
npm i https://pkg.pr.new/@clerk/agent-toolkit@7581

@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@7581

@clerk/backend
npm i https://pkg.pr.new/@clerk/backend@7581

@clerk/chrome-extension
npm i https://pkg.pr.new/@clerk/chrome-extension@7581

@clerk/clerk-js
npm i https://pkg.pr.new/@clerk/clerk-js@7581

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@7581

@clerk/expo
npm i https://pkg.pr.new/@clerk/expo@7581

@clerk/expo-passkeys
npm i https://pkg.pr.new/@clerk/expo-passkeys@7581

@clerk/express
npm i https://pkg.pr.new/@clerk/express@7581

@clerk/fastify
npm i https://pkg.pr.new/@clerk/fastify@7581

@clerk/localizations
npm i https://pkg.pr.new/@clerk/localizations@7581

@clerk/nextjs
npm i https://pkg.pr.new/@clerk/nextjs@7581

@clerk/nuxt
npm i https://pkg.pr.new/@clerk/nuxt@7581

@clerk/react
npm i https://pkg.pr.new/@clerk/react@7581

@clerk/react-router
npm i https://pkg.pr.new/@clerk/react-router@7581

@clerk/shared
npm i https://pkg.pr.new/@clerk/shared@7581

@clerk/tanstack-react-start
npm i https://pkg.pr.new/@clerk/tanstack-react-start@7581

@clerk/testing
npm i https://pkg.pr.new/@clerk/testing@7581

@clerk/ui
npm i https://pkg.pr.new/@clerk/ui@7581

@clerk/upgrade
npm i https://pkg.pr.new/@clerk/upgrade@7581

@clerk/vue
npm i https://pkg.pr.new/@clerk/vue@7581

commit: d1d14fe
@LauraBeatris
LauraBeatris
merged commit 04c6245
into
mainJan 12, 2026

101 of 104 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my

branch
January 12, 2026 17:11
@LauraBeatrisLauraBeatris
mentioned this pull request
Jan 12, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@NicolasLopes7NicolasLopes7NicolasLopes7 approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

core-3

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@NicolasLopes7

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(ui): Show created org membership in enable organizations prompt by LauraBeatris · Pull Request #7581 · clerk/javascript · GitHub
Skip to content
chore(ui): Show created org membership in enable organizations prompt - #7581
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Jan 12, 2026
Merged
chore(ui): Show created org membership in enable organizations prompt#7581
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Jan 12, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Contributor
Description
This PR replaces the hardcoded "My organization" name on the prompt success message with the actual org membership name created by the /dev_tools FAPI endpoint based on organization_creation_defaults
CleanShot 2026-01-12 at 13 34 14
CleanShot.2026-01-12.at.13.33.33.mp4
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
  • New Features
    • The organization enable prompt success message now displays the actual organization membership name instead of generic text, providing users with personalized confirmation during the organization setup process.
✏️ Tip: You can customize this high-level summary in your review settings.
@LauraBeatrisLauraBeatris
self-assigned this
Jan 12, 2026
@changeset-bot
changeset-botBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: d1d14fe
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJan 12, 2026 4:41pm
@LauraBeatris
LauraBeatris
requested a review
from a teamJanuary 12, 2026 16:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
branch
from
2dc3f21 to
d1d14feCompareJanuary 12, 2026 16:40
@coderabbitai
coderabbitaiBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
📝 Walkthrough
Walkthrough
This pull request updates the EnableOrganizationsPrompt component in @clerk/ui to display the actual organization membership name in the success message upon enabling organizations. The implementation introduces a new internal state variable to store the organization name, fetches the user's organization memberships after enabling the environment setting, derives the first organization name if available, and updates the confirmation message to interpolate this name. A changeset entry documents this patch release for the UI package.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately describes the main change: displaying the actual created organization membership name in the enable organizations prompt, replacing the hardcoded text.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
📜 Recent review details
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
  • Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 1e4074d and d1d14fe.
📒 Files selected for processing (2)
  • .changeset/eighty-mugs-eat.md
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs

Use tree-shaking friendly exports

Validate all inputs and sanitize outputs

All public APIs must be documented with JSDoc

Use dynamic imports for optional features

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

Implement proper logging with different levels
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components

Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components

Leverage TypeScript's type inference where possible in React components

Use proper event types for handlers in React components

Implement proper generic types for reusable React components

Use proper type guards for conditional rendering in React components
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components

Follow PascalCase naming for components (e.g., 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

Separate UI components from business logic components

Use useState for simple state management in React components

Use useReducer for complex state logic in React components

Implement proper state initialization in React components

Use proper state updates with callbacks in React components

Implement proper state cleanup in React components

Use Context API for theme/authentication state management

Implement proper state persistence in React applications

Use React.memo for expensive components

Implement proper useCallback for handlers in React components

Use proper useMemo for expensive computations in React components

Implement proper virtualization for lists in React components

Use proper code splitting with React.lazy in React applications

Implement proper cleanup in useEffect hooks

Use proper refs for DOM access in React components

Implement proper event listener cleanup in React components

Use proper abort controllers for fetch in React components

Implement proper subscription cleanup in React components

Use proper HTML elements for semantic HTML in React components

Implement proper ARIA attributes for accessibility in React components

Use proper heading hierarchy in React components

Implement proper form labels in React components

Use proper button types in React components

Implement proper focus management for keyboard navigation in React components

Use proper keyboard shortcuts in React components

Implement proper tab order in React components

Use proper ...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{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

Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type

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 in classes

Use protected for inheritance hierarchies

Use public explicitly for clarity in public APIs

Use mixins for shared behavior across unrelated classes in TypeScript

Use generic constraints with bounded type parameters like <T extends { id: string }>

Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction

Use discriminated unions instead of boolean flags for state management and API responses

Use mapped types for transforming object types

Use conditional types for type-level logic

Leverage template literal types for string manipulation at the type level

Use ES6 imports/exports consistently

Use default exports sparingly, prefer named exports

Document functions with JSDoc comments including @PARAM, @returns, @throws, and @example tags

Create custom error classes that extend Error for specific error types

Use the Result pattern for error handling instead of throwing exceptions

Use optional chaining (?.) and nullish coalescing (??) operators for safe property access

Let TypeScript infer obvious types to reduce verbosity

Use const assertions with as const for literal types

Use satisfies operator for type checking without widening types

Declare readonly arrays and objects for immutable data structures

Use spread operator and array spread for immutable updates instead of mutations

Use lazy loading for large types...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use ESLint with custom configurations tailored for different package types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use Prettier for code formatting across all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-ui-theming.mdc)
packages/ui/src/**/*.{ts,tsx}: Use element descriptors for all themable elements by applying elementDescriptor prop to components and importing descriptors from packages/ui/src/customizables/elementDescriptors.ts

Use theme-aware functions in elements configuration to access design tokens (e.g., { theme } => ({ backgroundColor: theme.colors.$primary500 }))

Prefer CSS variables (e.g., --clerk-color-primary, --clerk-spacing) for runtime customization via the clerkCssVar utility

Automatically generate color scales using the color scale generation process rather than manually defining all lightness and alpha variations (25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950 shades)

Use the createVariants function from packages/ui/src/styledSystem/createVariants.ts for type-safe variant-based styling with base, variants, defaultVariants, and compoundVariants configuration

Wrap primitive components with makeCustomizable HOC from packages/ui/src/customizables/makeCustomizable.tsx to enable element descriptor support and theming

Apply the sx prop using either a theme-aware function (theme: InternalTheme) => StyleRule or static style object to components for theme-aware CSS

Use state props (isLoading, hasError, isOpen, isActive) to automatically generate state classes (cl-loading, cl-error, cl-open, cl-active) for styling

Use CSS light-dark() function via the lightDark utility from packages/ui/src/utils/lightDark.ts for automatic light/dark mode support with fallbacks

Use Emotion's css prop and ThemeProvider via InternalThemeProvider from packages/ui/src/styledSystem/InternalThemeProvider.tsx for styling and theme context

Use makeResponsive from packages/ui/src/customizables/makeResponsive.tsx with breakpoints defined in packages/ui/src/styledSystem/breakpoints.tsx for responsive design support

Use useDeepEqualMemo in AppearanceProvider to prevent unnecessary re-renders when appearance configuration changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/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.
**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition: if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions, focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities, focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge, otherwise remain silent.

When in doubt, err on the side of fewer comments, brevity and blocking issues only.

Avoid posting any refactoring issues.
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.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). (28)
  • GitHub Check: Unit Tests (shared, clerk-js, RQ)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (**)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (nextjs, chrome, 16)
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (sessions:staging, chrome)
  • GitHub Check: Integration Tests (machine, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (handshake, chrome)
  • GitHub Check: Integration Tests (billing, chrome, RQ)
  • GitHub Check: Integration Tests (custom, chrome)
  • GitHub Check: Integration Tests (quickstart, chrome, 15)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 16, RQ)
  • GitHub Check: Integration Tests (quickstart, chrome, 16)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (handshake:staging, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (machine, chrome, RQ)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
.changeset/eighty-mugs-eat.md (1)
1-5: LGTM!
Changeset properly documents the patch for the UI package.
packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx (2)
51-63: LGTM - Implementation handles the happy path correctly.
The async flow fetches organization memberships after enabling the setting, and the fallback message handles cases where clerk.user is null or no memberships exist.
Consider adding unit tests to cover:
  • Success path with organization name displayed
  • Fallback when clerk.user is null
  • Fallback when memberships array is empty
134-136: Conditional rendering looks good.
The ternary correctly checks both clerk.user and defaultOrganizationName before displaying the personalized message, with a clean fallback to the generic message.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
Jan 12, 2026

Copy link


Copy Markdown

Open in StackBlitz
@clerk/agent-toolkit
npm i https://pkg.pr.new/@clerk/agent-toolkit@7581

@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@7581

@clerk/backend
npm i https://pkg.pr.new/@clerk/backend@7581

@clerk/chrome-extension
npm i https://pkg.pr.new/@clerk/chrome-extension@7581

@clerk/clerk-js
npm i https://pkg.pr.new/@clerk/clerk-js@7581

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@7581

@clerk/expo
npm i https://pkg.pr.new/@clerk/expo@7581

@clerk/expo-passkeys
npm i https://pkg.pr.new/@clerk/expo-passkeys@7581

@clerk/express
npm i https://pkg.pr.new/@clerk/express@7581

@clerk/fastify
npm i https://pkg.pr.new/@clerk/fastify@7581

@clerk/localizations
npm i https://pkg.pr.new/@clerk/localizations@7581

@clerk/nextjs
npm i https://pkg.pr.new/@clerk/nextjs@7581

@clerk/nuxt
npm i https://pkg.pr.new/@clerk/nuxt@7581

@clerk/react
npm i https://pkg.pr.new/@clerk/react@7581

@clerk/react-router
npm i https://pkg.pr.new/@clerk/react-router@7581

@clerk/shared
npm i https://pkg.pr.new/@clerk/shared@7581

@clerk/tanstack-react-start
npm i https://pkg.pr.new/@clerk/tanstack-react-start@7581

@clerk/testing
npm i https://pkg.pr.new/@clerk/testing@7581

@clerk/ui
npm i https://pkg.pr.new/@clerk/ui@7581

@clerk/upgrade
npm i https://pkg.pr.new/@clerk/upgrade@7581

@clerk/vue
npm i https://pkg.pr.new/@clerk/vue@7581

commit: d1d14fe
@LauraBeatris
LauraBeatris
merged commit 04c6245
into
mainJan 12, 2026

101 of 104 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my

branch
January 12, 2026 17:11
@LauraBeatrisLauraBeatris
mentioned this pull request
Jan 12, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@NicolasLopes7NicolasLopes7NicolasLopes7 approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

core-3

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@NicolasLopes7

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
chore(ui): Show created org membership in enable organizations prompt by LauraBeatris · Pull Request #7581 · clerk/javascript · GitHub
Skip to content
chore(ui): Show created org membership in enable organizations prompt - #7581
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Jan 12, 2026
Merged
chore(ui): Show created org membership in enable organizations prompt#7581
LauraBeatris merged 2 commits into
mainfrom 
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
Jan 12, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Contributor
Description
This PR replaces the hardcoded "My organization" name on the prompt success message with the actual org membership name created by the /dev_tools FAPI endpoint based on organization_creation_defaults
CleanShot 2026-01-12 at 13 34 14
CleanShot.2026-01-12.at.13.33.33.mp4
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
  • New Features
    • The organization enable prompt success message now displays the actual organization membership name instead of generic text, providing users with personalized confirmation during the organization setup process.
✏️ Tip: You can customize this high-level summary in your review settings.
@LauraBeatrisLauraBeatris
self-assigned this
Jan 12, 2026
@changeset-bot
changeset-botBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: d1d14fe
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJan 12, 2026 4:41pm
@LauraBeatris
LauraBeatris
requested a review
from a teamJanuary 12, 2026 16:40
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my
branch
from
2dc3f21 to
d1d14feCompareJanuary 12, 2026 16:40
@coderabbitai
coderabbitaiBot
commented
Jan 12, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
📝 Walkthrough
Walkthrough
This pull request updates the EnableOrganizationsPrompt component in @clerk/ui to display the actual organization membership name in the success message upon enabling organizations. The implementation introduces a new internal state variable to store the organization name, fetches the user's organization memberships after enabling the environment setting, derives the first organization name if available, and updates the confirmation message to interpolate this name. A changeset entry documents this patch release for the UI package.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately describes the main change: displaying the actual created organization membership name in the enable organizations prompt, replacing the hardcoded text.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
📜 Recent review details
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
  • Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 1e4074d and d1d14fe.
📒 Files selected for processing (2)
  • .changeset/eighty-mugs-eat.md
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs

Use tree-shaking friendly exports

Validate all inputs and sanitize outputs

All public APIs must be documented with JSDoc

Use dynamic imports for optional features

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

Implement proper logging with different levels
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components

Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components

Leverage TypeScript's type inference where possible in React components

Use proper event types for handlers in React components

Implement proper generic types for reusable React components

Use proper type guards for conditional rendering in React components
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components

Follow PascalCase naming for components (e.g., 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

Separate UI components from business logic components

Use useState for simple state management in React components

Use useReducer for complex state logic in React components

Implement proper state initialization in React components

Use proper state updates with callbacks in React components

Implement proper state cleanup in React components

Use Context API for theme/authentication state management

Implement proper state persistence in React applications

Use React.memo for expensive components

Implement proper useCallback for handlers in React components

Use proper useMemo for expensive computations in React components

Implement proper virtualization for lists in React components

Use proper code splitting with React.lazy in React applications

Implement proper cleanup in useEffect hooks

Use proper refs for DOM access in React components

Implement proper event listener cleanup in React components

Use proper abort controllers for fetch in React components

Implement proper subscription cleanup in React components

Use proper HTML elements for semantic HTML in React components

Implement proper ARIA attributes for accessibility in React components

Use proper heading hierarchy in React components

Implement proper form labels in React components

Use proper button types in React components

Implement proper focus management for keyboard navigation in React components

Use proper keyboard shortcuts in React components

Implement proper tab order in React components

Use proper ...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{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

Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type

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 in classes

Use protected for inheritance hierarchies

Use public explicitly for clarity in public APIs

Use mixins for shared behavior across unrelated classes in TypeScript

Use generic constraints with bounded type parameters like <T extends { id: string }>

Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction

Use discriminated unions instead of boolean flags for state management and API responses

Use mapped types for transforming object types

Use conditional types for type-level logic

Leverage template literal types for string manipulation at the type level

Use ES6 imports/exports consistently

Use default exports sparingly, prefer named exports

Document functions with JSDoc comments including @PARAM, @returns, @throws, and @example tags

Create custom error classes that extend Error for specific error types

Use the Result pattern for error handling instead of throwing exceptions

Use optional chaining (?.) and nullish coalescing (??) operators for safe property access

Let TypeScript infer obvious types to reduce verbosity

Use const assertions with as const for literal types

Use satisfies operator for type checking without widening types

Declare readonly arrays and objects for immutable data structures

Use spread operator and array spread for immutable updates instead of mutations

Use lazy loading for large types...
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use ESLint with custom configurations tailored for different package types
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
**/*.{js,ts,jsx,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Use Prettier for code formatting across all packages
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
packages/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-ui-theming.mdc)
packages/ui/src/**/*.{ts,tsx}: Use element descriptors for all themable elements by applying elementDescriptor prop to components and importing descriptors from packages/ui/src/customizables/elementDescriptors.ts

Use theme-aware functions in elements configuration to access design tokens (e.g., { theme } => ({ backgroundColor: theme.colors.$primary500 }))

Prefer CSS variables (e.g., --clerk-color-primary, --clerk-spacing) for runtime customization via the clerkCssVar utility

Automatically generate color scales using the color scale generation process rather than manually defining all lightness and alpha variations (25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950 shades)

Use the createVariants function from packages/ui/src/styledSystem/createVariants.ts for type-safe variant-based styling with base, variants, defaultVariants, and compoundVariants configuration

Wrap primitive components with makeCustomizable HOC from packages/ui/src/customizables/makeCustomizable.tsx to enable element descriptor support and theming

Apply the sx prop using either a theme-aware function (theme: InternalTheme) => StyleRule or static style object to components for theme-aware CSS

Use state props (isLoading, hasError, isOpen, isActive) to automatically generate state classes (cl-loading, cl-error, cl-open, cl-active) for styling

Use CSS light-dark() function via the lightDark utility from packages/ui/src/utils/lightDark.ts for automatic light/dark mode support with fallbacks

Use Emotion's css prop and ThemeProvider via InternalThemeProvider from packages/ui/src/styledSystem/InternalThemeProvider.tsx for styling and theme context

Use makeResponsive from packages/ui/src/customizables/makeResponsive.tsx with breakpoints defined in packages/ui/src/styledSystem/breakpoints.tsx for responsive design support

Use useDeepEqualMemo in AppearanceProvider to prevent unnecessary re-renders when appearance configuration changes
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/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.
**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition: if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions, focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities, focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge, otherwise remain silent.

When in doubt, err on the side of fewer comments, brevity and blocking issues only.

Avoid posting any refactoring issues.
Files:
  • packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.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). (28)
  • GitHub Check: Unit Tests (shared, clerk-js, RQ)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (**)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (nextjs, chrome, 16)
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (sessions:staging, chrome)
  • GitHub Check: Integration Tests (machine, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (handshake, chrome)
  • GitHub Check: Integration Tests (billing, chrome, RQ)
  • GitHub Check: Integration Tests (custom, chrome)
  • GitHub Check: Integration Tests (quickstart, chrome, 15)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 16, RQ)
  • GitHub Check: Integration Tests (quickstart, chrome, 16)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (handshake:staging, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (machine, chrome, RQ)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
.changeset/eighty-mugs-eat.md (1)
1-5: LGTM!
Changeset properly documents the patch for the UI package.
packages/ui/src/components/devPrompts/EnableOrganizationsPrompt/index.tsx (2)
51-63: LGTM - Implementation handles the happy path correctly.
The async flow fetches organization memberships after enabling the setting, and the fallback message handles cases where clerk.user is null or no memberships exist.
Consider adding unit tests to cover:
  • Success path with organization name displayed
  • Fallback when clerk.user is null
  • Fallback when memberships array is empty
134-136: Conditional rendering looks good.
The ternary correctly checks both clerk.user and defaultOrganizationName before displaying the personalized message, with a clean fallback to the generic message.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
Jan 12, 2026

Copy link


Copy Markdown

Open in StackBlitz
@clerk/agent-toolkit
npm i https://pkg.pr.new/@clerk/agent-toolkit@7581

@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@7581

@clerk/backend
npm i https://pkg.pr.new/@clerk/backend@7581

@clerk/chrome-extension
npm i https://pkg.pr.new/@clerk/chrome-extension@7581

@clerk/clerk-js
npm i https://pkg.pr.new/@clerk/clerk-js@7581

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@7581

@clerk/expo
npm i https://pkg.pr.new/@clerk/expo@7581

@clerk/expo-passkeys
npm i https://pkg.pr.new/@clerk/expo-passkeys@7581

@clerk/express
npm i https://pkg.pr.new/@clerk/express@7581

@clerk/fastify
npm i https://pkg.pr.new/@clerk/fastify@7581

@clerk/localizations
npm i https://pkg.pr.new/@clerk/localizations@7581

@clerk/nextjs
npm i https://pkg.pr.new/@clerk/nextjs@7581

@clerk/nuxt
npm i https://pkg.pr.new/@clerk/nuxt@7581

@clerk/react
npm i https://pkg.pr.new/@clerk/react@7581

@clerk/react-router
npm i https://pkg.pr.new/@clerk/react-router@7581

@clerk/shared
npm i https://pkg.pr.new/@clerk/shared@7581

@clerk/tanstack-react-start
npm i https://pkg.pr.new/@clerk/tanstack-react-start@7581

@clerk/testing
npm i https://pkg.pr.new/@clerk/testing@7581

@clerk/ui
npm i https://pkg.pr.new/@clerk/ui@7581

@clerk/upgrade
npm i https://pkg.pr.new/@clerk/upgrade@7581

@clerk/vue
npm i https://pkg.pr.new/@clerk/vue@7581

commit: d1d14fe
@LauraBeatris
LauraBeatris
merged commit 04c6245
into
mainJan 12, 2026

101 of 104 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/orgs-1116-update-enableorganizationsprompt-component-to-replace-my

branch
January 12, 2026 17:11
@LauraBeatrisLauraBeatris
mentioned this pull request
Jan 12, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@NicolasLopes7NicolasLopes7NicolasLopes7 approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

core-3

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@NicolasLopes7