fix(clerk-js): Do not display invitation if membership is active #6208
Conversation
🦋 Changeset detectedLatest commit: 0199b0c The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThis change updates the 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.changeset/yummy-laws-hunt.md (1)
5-5: Minor grammatical improvement suggested.Consider adding the article "the" before "user" for better readability.
-Hide invitation in `OrganizationSwitcher` when user is already an active member of the organization +Hide invitation in `OrganizationSwitcher` when the user is already an active member of the organization
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/yummy-laws-hunt.md(1 hunks)packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
`**/*.{js,ts,tsx,jsx}`: All code must pass ESLint checks with the project's configuration. Use Prettier for consistent code formatting.
**/*.{js,ts,tsx,jsx}: All code must pass ESLint checks with the project's configuration.
Use Prettier for consistent code formatting.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
`**/*.{ts,tsx}`: Maintain comprehensive JSDoc comments for public APIs.
**/*.{ts,tsx}: Maintain comprehensive JSDoc comments for public APIs.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
`packages/**`: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/**: All publishable packages under the @clerk namespace must be located in the packages/ directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/global.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
`**/*.{jsx,tsx}`: Always use functional components with hooks instead of class c...
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components.
Follow PascalCase naming for components; the filename and component name should match.
Limit component size to 150-200 lines; extract logic into custom hooks.
Export components as named exports for better tree-shaking.
One component per file with matching filename and component name.
Co-locate related files (component, test, stories) in the same directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/react.mdc)
List of files the instruction was applied to:
packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: LauraBeatris
PR: clerk/javascript#6117
File: packages/clerk-js/src/ui/components/SessionTasks/index.tsx:64-83
Timestamp: 2025-06-18T16:33:36.764Z
Learning: In SessionTasks component at packages/clerk-js/src/ui/components/SessionTasks/index.tsx, the useEffect that checks for pending tasks should only run on mount (not react to currentTask/status changes) to handle browser back navigation edge cases without interfering with normal task completion flow managed by nextTask().
Learnt from: LauraBeatris
PR: clerk/javascript#6117
File: packages/clerk-js/src/ui/components/SessionTasks/tasks/ForceOrganizationSelection.tsx:17-21
Timestamp: 2025-06-18T23:27:13.537Z
Learning: In Clerk's JavaScript codebase, query errors from hooks like useOrganizationList are not typically handled in AIO (All-in-One) components. Error handling may be connected with the Card context instead, suggesting a centralized error handling approach rather than component-level error handling.
.changeset/yummy-laws-hunt.md (3)
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
Learning: In the Clerk JavaScript repository, changeset headers support single quotes syntax (e.g., '@clerk/backend': minor) and work fine with their current changesets integration, so there's no need to change them to double quotes.
Learnt from: LauraBeatris
PR: clerk/javascript#6117
File: packages/clerk-js/src/ui/components/SessionTasks/tasks/ForceOrganizationSelection.tsx:17-21
Timestamp: 2025-06-18T23:27:13.537Z
Learning: In Clerk's JavaScript codebase, query errors from hooks like useOrganizationList are not typically handled in AIO (All-in-One) components. Error handling may be connected with the Card context instead, suggesting a centralized error handling approach rather than component-level error handling.
🪛 LanguageTool
.changeset/yummy-laws-hunt.md
[uncategorized] ~5-~5: You might be missing the article “the” here.
Context: ...vitation in OrganizationSwitcher when user is already an active member of the orga...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🔇 Additional comments (1)
packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx (1)
171-174: LGTM! The expanded condition correctly addresses the cache invalidation issue.The addition of the direct comparison between
invitation.publicOrganizationData.idandactiveOrganization?.idprovides a reliable fallback when theAcceptedInvitationsProviderloses its state after cache invalidation. This ensures invitations are properly hidden when the user is already an active member of the organization.
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
LauraBeatris
deleted the
laura/orgs-722-invitation-still-gets-displayed-on-organization-switcher
branch
Description
Once the after-auth navigation occurs, it invalidates the client cache, and therefore,
AcceptedInvitationsProviderloses its state.This PR updates the existing render condition of
InvitationPreviewto take in account the ID of the active organization vs the invitation org ID, and if those match, then don't render it on the organization switcher.Also, it's not possible to invalidate organization resources before navigating away from the after-auth screen; otherwise, it'll result in a change of UI state.
With fix
CleanShot.2025-06-27.at.15.03.46.mp4
🐛
CleanShot.2025-06-27.at.15.05.41.mp4
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit