feat(clerk-js,types,localizations): Introduces Membership Requests in <OrganizationProfile />

.changeset/giant-timers-film.md

@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/types': patch
+---
+
+Introduces Membership Requests in <OrganizationProfile />
+
+- This is a list of users that have requested to join the active organization

packages/clerk-js/bundlewatch.config.json

@@ -6,7 +6,7 @@
     { "path": "./dist/vendors*.js", "maxSize": "70KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
-    { "path": "./dist/organizationprofile*.js", "maxSize": "8KB" },
+    { "path": "./dist/organizationprofile*.js", "maxSize": "8.5KB" },
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/signin*.js", "maxSize": "10KB" },
     { "path": "./dist/signup*.js", "maxSize": "10KB" },

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

@@ -1,6 +1,7 @@
 import type { OrganizationInvitationStatus, OrganizationMembershipRequestResource, PublicUserData } from '@clerk/types';
 import type { OrganizationMembershipRequestJSON } from '@clerk/types';
 
+import { unixEpochToDate } from '../../utils/date';
 import { BaseResource } from './Base';
 
 export class OrganizationMembershipRequest extends BaseResource implements OrganizationMembershipRequestResource {
@@ -27,6 +28,8 @@ export class OrganizationMembershipRequest extends BaseResource implements Organ
       this.id = data.id;
       this.organizationId = data.organization_id;
       this.status = data.status;
+      this.createdAt = unixEpochToDate(data.created_at);
+      this.updatedAt = unixEpochToDate(data.updated_at);
       if (data.public_user_data) {
         this.publicUserData = {
           firstName: data.public_user_data.first_name,

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

@@ -3,6 +3,7 @@
 exports[`OrganizationMembership has the same initial properties 1`] = `
 OrganizationMembershipRequest {
   "accept": [Function],
+  "createdAt": 1970-01-01T00:00:12.345Z,
   "id": "test_id",
   "organizationId": "test_org_id",
   "pathRoot": "",
@@ -16,5 +17,6 @@ OrganizationMembershipRequest {
     "userId": undefined,
   },
   "status": "pending",
+  "updatedAt": 1970-01-01T00:00:05.678Z,
 }
 `;

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

@@ -4,7 +4,7 @@ import { useCoreOrganization, useCoreUser } from '../../contexts';
 import { Badge, localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, usePagination, UserPreview } from '../../elements';
 import { handleError, roleLocalizationKey } from '../../utils';
-import { MembersListTable, RoleSelect, RowContainer } from './MemberListTable';
+import { DataTable, RoleSelect, RowContainer } from './MemberListTable';
 
 const ITEMS_PER_PAGE = 10;
 
@@ -53,12 +53,13 @@ export const ActiveMembersList = () => {
   };
 
   return (
-    <MembersListTable
+    <DataTable
       page={page}
       onPageChange={changePage}
       itemCount={organization.membersCount}
       itemsPerPage={ITEMS_PER_PAGE}
       isLoading={!membershipList}
+      emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.detailsTitle__emptyRow')}
       headers={[
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__joined'),

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

@@ -4,7 +4,7 @@ import { useCoreOrganization } from '../../contexts';
 import { localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, usePagination, UserPreview } from '../../elements';
 import { handleError, roleLocalizationKey } from '../../utils';
-import { MembersListTable, RowContainer } from './MemberListTable';
+import { DataTable, RowContainer } from './MemberListTable';
 
 const ITEMS_PER_PAGE = 10;
 
@@ -35,12 +35,13 @@ export const InvitedMembersList = () => {
   };
 
   return (
-    <MembersListTable
+    <DataTable
       page={page}
       onPageChange={changePage}
       itemCount={organization.pendingInvitationsCount}
       itemsPerPage={ITEMS_PER_PAGE}
       isLoading={!invitationList}
+      emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.invitationsTab.table__emptyRow')}
       headers={[
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
         localizationKeys('organizationProfile.membersPage.invitedMembersTab.tableHeader__invited'),

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

@@ -2,20 +2,7 @@ import type { MembershipRole } from '@clerk/types';
 import React from 'react';
 
 import type { LocalizationKey } from '../../customizables';
-import {
-  Col,
-  Flex,
-  localizationKeys,
-  Spinner,
-  Table,
-  Tbody,
-  Td,
-  Text,
-  Th,
-  Thead,
-  Tr,
-  useLocalizations,
-} from '../../customizables';
+import { Col, Flex, Spinner, Table, Tbody, Td, Text, Th, Thead, Tr, useLocalizations } from '../../customizables';
 import { Pagination, Select, SelectButton, SelectOptionList } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
 import { roleLocalizationKey } from '../../utils';
@@ -28,10 +15,11 @@ type MembersListTableProps = {
   onPageChange: (page: number) => void;
   itemCount: number;
   itemsPerPage: number;
+  emptyStateLocalizationKey: LocalizationKey;
 };
 
-export const MembersListTable = (props: MembersListTableProps) => {
-  const { headers, page, onPageChange, rows, isLoading, itemCount, itemsPerPage } = props;
+export const DataTable = (props: MembersListTableProps) => {
+  const { headers, page, onPageChange, rows, isLoading, itemCount, itemsPerPage, emptyStateLocalizationKey } = props;
 
   const pageCount = rows.length !== 0 ? Math.ceil(itemCount / itemsPerPage) : 1;
   const startRowIndex = (page - 1) * rows.length;
@@ -62,7 +50,10 @@ export const MembersListTable = (props: MembersListTableProps) => {
                 </Td>
               </Tr>
             ) : !rows.length ? (
-              <EmptyRow key='empty' />
+              <EmptyRow
+                key='empty'
+                localizationKey={emptyStateLocalizationKey}
+              />
             ) : (
               rows
             )}
@@ -86,12 +77,12 @@ export const MembersListTable = (props: MembersListTableProps) => {
   );
 };
 
-const EmptyRow = () => {
+const EmptyRow = (props: { localizationKey: LocalizationKey }) => {
   return (
     <Tr>
       <Td colSpan={4}>
         <Text
-          localizationKey={localizationKeys('organizationProfile.membersPage.detailsTitle__emptyRow')}
+          localizationKey={props.localizationKey}
           sx={t => ({
             margin: 'auto',
             display: 'block',

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

@@ -1,10 +1,8 @@
-import { CalloutWithAction } from '../../common';
 import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
-import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
+import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   CardAlert,
   Header,
-  IconButton,
   NavbarMenuButtonRow,
   Tab,
   TabPanel,
@@ -14,15 +12,12 @@ import {
   useCardState,
   withCardStateProvider,
 } from '../../elements';
-import { UserAdd } from '../../icons';
-import { useRouter } from '../../router';
 import { ActiveMembersList } from './ActiveMembersList';
-import { DomainList } from './DomainList';
-import { InvitedMembersList } from './InvitedMembersList';
 import { MembershipWidget } from './MembershipWidget';
+import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
+import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const OrganizationMembers = withCardStateProvider(() => {
-  const { navigate } = useRouter();
   const card = useCardState();
   const { membership } = useCoreOrganization();
   //@ts-expect-error
@@ -56,6 +51,9 @@ export const OrganizationMembers = withCardStateProvider(() => {
                 localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}
               />
             )}
+            {isAdmin && (
+              <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')} />
+            )}
           </TabsList>
           <TabPanels>
             <TabPanel sx={{ width: '100%' }}>
@@ -72,96 +70,12 @@ export const OrganizationMembers = withCardStateProvider(() => {
             </TabPanel>
             {isAdmin && (
               <TabPanel sx={{ width: '100%' }}>
-                <Col
-                  gap={8}
-                  sx={{
-                    width: '100%',
-                  }}
-                >
-                  {isAdmin && __unstable_manageBillingUrl && <MembershipWidget />}
-                  <Col
-                    gap={2}
-                    sx={{
-                      width: '100%',
-                    }}
-                  >
-                    <Header.Root>
-                      <Header.Title
-                        localizationKey={localizationKeys(
-                          'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',
-                        )}
-                        textVariant='largeMedium'
-                      />
-                      <Header.Subtitle
-                        localizationKey={localizationKeys(
-                          'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
-                        )}
-                        variant='regularRegular'
-                      />
-                    </Header.Root>
-                    <DomainList
-                      fallback={
-                        <CalloutWithAction
-                          text={localizationKeys(
-                            'organizationProfile.membersPage.invitationsTab.autoInvitations.calloutTextLabel',
-                          )}
-                          actionLabel={localizationKeys(
-                            'organizationProfile.membersPage.invitationsTab.autoInvitations.calloutActionLabel',
-                          )}
-                          onClick={() => navigate('organization-settings/domain')}
-                        />
-                      }
-                      redirectSubPath={'organization-settings/domain/'}
-                      verificationStatus={'verified'}
-                      enrollmentMode={'automatic_invitation'}
-                    />
-                  </Col>
-
-                  <Flex
-                    direction='col'
-                    gap={4}
-                    sx={{
-                      width: '100%',
-                    }}
-                  >
-                    <Flex
-                      justify={'between'}
-                      align={'center'}
-                    >
-                      <Header.Root>
-                        <Header.Title
-                          localizationKey={localizationKeys(
-                            'organizationProfile.membersPage.invitationsTab.manualInvitations.headerTitle',
-                          )}
-                          textVariant='largeMedium'
-                        />
-                        <Header.Subtitle
-                          localizationKey={localizationKeys(
-                            'organizationProfile.membersPage.invitationsTab.manualInvitations.headerSubtitle',
-                          )}
-                          variant='regularRegular'
-                        />
-                      </Header.Root>
-                      {isAdmin && (
-                        <IconButton
-                          elementDescriptor={descriptors.membersPageInviteButton}
-                          aria-label='Invite'
-                          onClick={() => navigate('invite-members')}
-                          icon={
-                            <Icon
-                              icon={UserAdd}
-                              size={'sm'}
-                              sx={t => ({ marginRight: t.space.$2 })}
-                            />
-                          }
-                          textVariant='buttonExtraSmallBold'
-                          localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
-                        />
-                      )}
-                    </Flex>
-                    <InvitedMembersList />
-                  </Flex>
-                </Col>
+                <OrganizationMembersTabInvitations />
+              </TabPanel>
+            )}
+            {isAdmin && (
+              <TabPanel sx={{ width: '100%' }}>
+                <OrganizationMembersTabRequests />
               </TabPanel>
             )}
           </TabPanels>