chore(clerk-js): Sort organizations list alphabetically in OrganizationSwitcher

[reinert]

Description

<OrganizationSwitcher/> displays the organizations in random order by default. It's annoying to find an organization over hundreds of randomly sorted options having no ability to search through them. This simple patch sorts the organization list alphabetically by default to make it feasible for the users to find an org when they have several alternatives.

Checklist

• npm test runs as expected.
• npm run 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:

[changeset-bot]

🦋 Changeset detected

Latest commit: f979cb7

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

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

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

[LauraBeatris]

Thanks @reinert!

We're aware that this experience can be improved. There's an upcoming feature on our roadmap to introduce search capabilities on OrganizationSwitcher 😄

[LauraBeatris]

Hi @reinert! We need to perform some adjustments here to handle the server-side rendering case.

[panteliselef]

As @LauraBeatris mentioned, we will be improving the soon. That being said, we appreciate your efforts and for pushing us to improve the UX here.

Here are the issues I see with the proposed solution from this PR:

• (Optionally) Make it opt-in so that users understand what has changed (e.g., controlled via a prop or UI button).
• Do this server-side. With the implementation of this PR and due to pagination, an end user may end up fetching the next batch and causing layout shifts, as organizations may not necessarily be appended but could appear between existing ones. There’s also a chance that the user might miss the newly fetched organizations if they’ve scrolled and an organization is added at the top due to client-side sorting.

Since this requires more changes to the codebase, I propose that we take over to ensure the issues above are resolved before shipping this to everyone. (We may need to make changes in parts that are not accessible to OSS contributors.)

[reinert]

Thanks guys for the feedback. Do we have any ETA regarding those improvements in the OrganizationSwitcher component? This unsorted listing is causing us several issues like many tickets being submitted to our support channel. It's a daily pain for our back-office and a cost that's increasing exponentially. We really need an immediate workaround at least if we can't have a definitive solution soon. I really appreciate your timely response. In case this client-side sorting is not stable, I'd love to expose a prop to optionally enable sorted rendering (since we don't use pagination).

[panteliselef]

!snapshot

[clerk-cookie]

Hey @panteliselef - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	1.3.13-snapshot.vf979cb7
@clerk/clerk-js	5.24.2-snapshot.vf979cb7
@clerk/clerk-expo	2.2.19-snapshot.vf979cb7

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

[panteliselef]

@reinert I've cut a snapshot version for you to try. The pagination is used inside the component, but end-users will experience it only if they've joined more than 10 organizations.

If you are using the <ClerkProvider/> you can do this <ClerkProvider clerkJsVersion="5.24.2-snapshot.vf979cb7"/>

[reinert]

Thank you @panteliselef. Do we have the ability to quickly lookup for one organization over several alternatives in this snapshot version? (otherwise pagination is going to cause even more pain in this scenario)

[panteliselef]

This snapshot only includes the solution from this PR

[reinert]

Oh, great, I got it. Thanks @panteliselef. Gonna try it out.

[LauraBeatris]

@reinert We're working on a frontend API change to alphabetically order organization memberships by default. This should be shipped by the beginning of next week and it won't require updating your SDK code, just keep using OrganizationSwitcher as it is atm.

[reinert]

Thanks for the feedback @LauraBeatris. Really appreciate the effort to solve this issue.

[reinert]

May I close this PR?

[LauraBeatris]

@reinert Closing this PR, I'll @ you here once those changes are deployed.

[LauraBeatris]

@reinert We've deployed that change, could you give it a try and let us know?