feat(clerk-js): Reject a membership request as an organization admin

.changeset/rotten-rules-argue.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+A OrganizationMembershipRequest can now be rejected
+
+- New `OrganizationMembershipRequest.reject` method alongside `accept`
+- As an organization admin, navigate to `Organization Profile` > `Members` > `Requests`. You can now reject a request from the table.

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

@@ -23,6 +23,12 @@ export class OrganizationMembershipRequest extends BaseResource implements Organ
     });
   };
 
+  reject = async (): Promise<OrganizationMembershipRequestResource> => {
+    return await this._basePost({
+      path: `/organizations/${this.organizationId}/membership_requests/${this.id}/reject`,
+    });
+  };
+
   protected fromJSON(data: OrganizationMembershipRequestJSON | null): this {
     if (data) {
       this.id = data.id;

packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembershipRequest.test.ts.snap

@@ -16,6 +16,7 @@ OrganizationMembershipRequest {
     "profileImageUrl": "test_url",
     "userId": undefined,
   },
+  "reject": [Function],
   "status": "pending",
   "updatedAt": 1970-01-01T00:00:05.678Z,
 }

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

@@ -66,7 +66,6 @@ const InvitationRow = (props: { invitation: OrganizationInvitationResource; onRe
       <Td>
         <UserPreview
           sx={{ maxWidth: '30ch' }}
-          showAvatar={false}
           user={{ primaryEmailAddress: { emailAddress: invitation.emailAddress } } as any}
         />
       </Td>

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

@@ -2,7 +2,7 @@ import type { OrganizationMembershipRequestResource } from '@clerk/types';
 
 import { useCoreOrganization } from '../../contexts';
 import { Button, Flex, localizationKeys, Td } from '../../customizables';
-import { useCardState, UserPreview } from '../../elements';
+import { useCardState, UserPreview, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
 import { DataTable, RowContainer } from './MemberListTable';
 
@@ -15,82 +15,101 @@ export const RequestToJoinList = () => {
     },
   });
 
-  const mutateSwrState = () => {
-    const unstable__mutate = (membershipRequests as any).unstable__mutate;
-    if (unstable__mutate && typeof unstable__mutate === 'function') {
-      unstable__mutate();
-    }
-  };
-
   if (!organization) {
     return null;
   }
 
-  const approve = (request: OrganizationMembershipRequestResource) => () => {
-    return card
-      .runAsync(request.accept)
-      .then(mutateSwrState)
-      .catch(err => handleError(err, [], card.setError));
-  };
-
   return (
     <DataTable
       page={membershipRequests?.page || 1}
       onPageChange={membershipRequests?.fetchPage ?? (() => null)}
       itemCount={membershipRequests?.count ?? 0}
       itemsPerPage={ITEMS_PER_PAGE}
-      isLoading={membershipRequests?.isFetching}
+      isLoading={membershipRequests?.isLoading}
       emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.table__emptyRow')}
       headers={[
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
         localizationKeys('organizationProfile.membersPage.requestsTab.tableHeader__requested'),
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
       ]}
-      rows={(membershipRequests?.data || []).map(i => (
+      rows={(membershipRequests?.data || []).map(request => (
         <RequestRow
-          key={i.id}
-          request={i}
-          onAccept={approve(i)}
+          key={request.id}
+          request={request}
+          onError={card.setError}
         />
       ))}
     />
   );
 };
 
-const RequestRow = (props: { request: OrganizationMembershipRequestResource; onAccept: () => unknown }) => {
-  const { request, onAccept } = props;
+const RequestRow = withCardStateProvider(
+  (props: { request: OrganizationMembershipRequestResource; onError: ReturnType<typeof useCardState>['setError'] }) => {
+    const { request, onError } = props;
+    const card = useCardState();
+    const { membershipRequests } = useCoreOrganization();
 
-  return (
-    <RowContainer>
-      <Td>
-        <UserPreview
-          sx={{ maxWidth: '30ch' }}
-          showAvatar={false}
-          user={{ primaryEmailAddress: { emailAddress: request.publicUserData.identifier } } as any}
-        />
-      </Td>
-      <Td>{request.createdAt.toLocaleDateString()}</Td>
+    const mutateSwrState = () => {
+      const unstable__mutate = (membershipRequests as any).unstable__mutate;
+      if (unstable__mutate && typeof unstable__mutate === 'function') {
+        unstable__mutate();
+      }
+    };
 
-      <Td>
-        <Flex>
-          <AcceptRejectRequestButtons onAccept={onAccept} />
-        </Flex>
-      </Td>
-    </RowContainer>
-  );
-};
+    const onAccept = () => {
+      return card
+        .runAsync(request.accept, 'accept')
+        .then(mutateSwrState)
+        .catch(err => handleError(err, [], onError));
+    };
+
+    const onReject = () => {
+      return card
+        .runAsync(request.reject, 'reject')
+        .then(mutateSwrState)
+        .catch(err => handleError(err, [], onError));
+    };
 
-const AcceptRejectRequestButtons = (props: { onAccept: () => unknown }) => {
+    return (
+      <RowContainer>
+        <Td>
+          <UserPreview
+            sx={{ maxWidth: '30ch' }}
+            showAvatar={false}
+            user={{ primaryEmailAddress: { emailAddress: request.publicUserData.identifier } } as any}
+          />
+        </Td>
+        <Td>{request.createdAt.toLocaleDateString()}</Td>
+
+        <Td>
+          <AcceptRejectRequestButtons {...{ onAccept, onReject }} />
+        </Td>
+      </RowContainer>
+    );
+  },
+);
+
+const AcceptRejectRequestButtons = (props: { onAccept: () => unknown; onReject: () => unknown }) => {
   const card = useCardState();
   return (
-    <>
+    <Flex gap={2}>
+      <Button
+        textVariant='buttonExtraSmallBold'
+        variant='ghost'
+        isLoading={card.isLoading && card.loadingMetadata === 'reject'}
+        isDisabled={card.isLoading && card.loadingMetadata !== 'reject'}
+        onClick={props.onReject}
+        localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.menuAction__reject')}
+      />
+
       <Button
         textVariant='buttonExtraSmallBold'
         variant='solid'
-        isLoading={card.isLoading}
+        isLoading={card.isLoading && card.loadingMetadata === 'accept'}
+        isDisabled={card.isLoading && card.loadingMetadata !== 'accept'}
         onClick={props.onAccept}
         localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.menuAction__approve')}
       />
-    </>
+    </Flex>
   );
 };

packages/clerk-js/src/ui/elements/UserPreview.tsx

@@ -77,39 +77,42 @@ export const UserPreview = (props: UserPreviewProps) => {
       sx={[{ minWidth: '0px', width: '100%' }, sx]}
       {...rest}
     >
-      {showAvatar ? (
-        <Flex
-          elementDescriptor={descriptors.userPreviewAvatarContainer}
-          elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
-          justify='center'
-          sx={{ position: 'relative' }}
-        >
-          <UserAvatar
-            boxElementDescriptor={descriptors.userPreviewAvatarBox}
-            imageElementDescriptor={descriptors.userPreviewAvatarImage}
-            {...user}
-            {...externalAccount}
-            {...samlAccount}
-            name={name}
-            avatarUrl={imageUrl}
-            size={getAvatarSizes}
-            sx={avatarSx}
-            rounded={rounded}
-          />
+      {/*Do not attempt to render or reserve space based on height if image url is not defined*/}
+      {imageUrl ? (
+        showAvatar ? (
+          <Flex
+            elementDescriptor={descriptors.userPreviewAvatarContainer}
+            elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
+            justify='center'
+            sx={{ position: 'relative' }}
+          >
+            <UserAvatar
+              boxElementDescriptor={descriptors.userPreviewAvatarBox}
+              imageElementDescriptor={descriptors.userPreviewAvatarImage}
+              {...user}
+              {...externalAccount}
+              {...samlAccount}
+              name={name}
+              avatarUrl={imageUrl}
+              size={getAvatarSizes}
+              sx={avatarSx}
+              rounded={rounded}
+            />
 
-          {icon && <Flex sx={{ position: 'absolute', left: 0, bottom: 0 }}>{icon}</Flex>}
-        </Flex>
-      ) : (
-        // Reserve layout space when avatar is not visible
-        <Flex
-          elementDescriptor={descriptors.userPreviewAvatarContainer}
-          elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
-          justify='center'
-          sx={t => ({
-            height: getAvatarSizes(t),
-          })}
-        />
-      )}
+            {icon && <Flex sx={{ position: 'absolute', left: 0, bottom: 0 }}>{icon}</Flex>}
+          </Flex>
+        ) : (
+          // Reserve layout space when avatar is not visible
+          <Flex
+            elementDescriptor={descriptors.userPreviewAvatarContainer}
+            elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
+            justify='center'
+            sx={t => ({
+              height: getAvatarSizes(t),
+            })}
+          />
+        )
+      ) : null}
 
       <Flex
         elementDescriptor={descriptors.userPreviewTextContainer}

packages/clerk-js/src/ui/elements/contexts/CardStateContext.tsx

@@ -33,13 +33,13 @@ const useCardState = () => {
   const setIdle = (metadata?: Metadata) => setState(s => ({ ...s, status: 'idle', metadata }));
   const setError = (metadata: ClerkAPIError | Metadata) => setState(s => ({ ...s, error: translateError(metadata) }));
   const setLoading = (metadata?: Metadata) => setState(s => ({ ...s, status: 'loading', metadata }));
-  const runAsync = async <T = unknown,>(cb: Promise<T> | (() => Promise<T>)) => {
-    setLoading();
+  const runAsync = async <T = unknown,>(cb: Promise<T> | (() => Promise<T>), metadata?: Metadata) => {
+    setLoading(metadata);
     return (typeof cb === 'function' ? cb() : cb)
       .then(res => {
         return res;
       })
-      .finally(() => setIdle());
+      .finally(() => setIdle(metadata));
   };
 
   return {

packages/localizations/src/en-US.ts

@@ -657,6 +657,7 @@ export const enUS: LocalizationResource = {
       requestsTab: {
         tableHeader__requested: 'Requested access',
         menuAction__approve: 'Approve',
+        menuAction__reject: 'Reject',
         table__emptyRow: 'No requests to display',
         requests: {
           headerTitle: 'Requests',

packages/types/src/localization.ts

@@ -678,6 +678,7 @@ type _LocalizationResource = {
       requestsTab: {
         tableHeader__requested: LocalizationValue;
         menuAction__approve: LocalizationValue;
+        menuAction__reject: LocalizationValue;
         table__emptyRow: LocalizationValue;
         requests: {
           headerTitle: LocalizationValue;

packages/types/src/organizationMembershipRequest.ts

@@ -11,4 +11,5 @@ export interface OrganizationMembershipRequestResource extends ClerkResource {
   updatedAt: Date;
 
   accept: () => Promise<OrganizationMembershipRequestResource>;
+  reject: () => Promise<OrganizationMembershipRequestResource>;
 }