Introduce user method to leave an organization (#1809)

* feat(types,clerk-js): Introduce user method to leave an organization

Introduce a new leaveOrganization() method on the User resource, which you can
use in order to leave an organization as a user.

* chore(clerk-js): Use the new user.leaveOrganization() method in <OrgProfile /> when leaving an org

We replace the usage of the old 'organization.removeMember()' method with
the new one we recently introduced, in the <OrgProfile /> component when
a user chooses to leave the current organization

.changeset/early-tigers-report.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Introduce a new user resource method to leave an organization. You can now call 'user.leaveOrganization(<org_id>)' when a user chooses to leave an organization instead of 'organization.removeMember(<user_id>)' which is mostly meant for organization based actions.

.changeset/shaggy-bottles-worry.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -270,6 +270,17 @@ export class User extends BaseResource implements UserResource {
   getOrganizationMemberships: GetOrganizationMemberships = retrieveMembership =>
     OrganizationMembership.retrieve(retrieveMembership);
 
+  leaveOrganization = async (organizationId: string): Promise<DeletedObjectResource> => {
+    const json = (
+      await BaseResource._fetch<DeletedObjectJSON>({
+        path: `${this.path()}/organization_memberships/${organizationId}`,
+        method: 'DELETE',
+      })
+    )?.response as unknown as DeletedObjectJSON;
+
+    return new DeletedObject(json);
+  };
+
   get verifiedExternalAccounts() {
     return this.externalAccounts.filter(externalAccount => externalAccount.verification?.status == 'verified');
   }

packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx

@@ -17,15 +17,15 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 export const LeaveOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization, membership } = useCoreOrganization();
+  const { organization } = useCoreOrganization();
   const user = useCoreUser();
 
-  if (!organization || !membership) {
+  if (!organization) {
     return null;
   }
 
   const leave = () => {
-    return card.runAsync(organization.removeMember(user.id)).then(navigateAfterLeaveOrganization);
+    return card.runAsync(user.leaveOrganization(organization.id)).then(navigateAfterLeaveOrganization);
   };
 
   return (
@@ -50,9 +50,9 @@ export const LeaveOrganizationPage = () => {
 export const DeleteOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization, membership } = useCoreOrganization();
+  const { organization } = useCoreOrganization();
 
-  if (!organization || !membership) {
+  if (!organization) {
     return null;
   }
 

packages/types/src/user.ts

@@ -108,6 +108,7 @@ export interface UserResource extends ClerkResource {
   getOrganizationSuggestions: (
     params?: GetUserOrganizationSuggestionsParams,
   ) => Promise<ClerkPaginatedResponse<OrganizationSuggestionResource>>;
+  leaveOrganization: (organizationId: string) => Promise<DeletedObjectResource>;
   createTOTP: () => Promise<TOTPResource>;
   verifyTOTP: (params: VerifyTOTPParams) => Promise<TOTPResource>;
   disableTOTP: () => Promise<DeletedObjectResource>;