fix(clerk-js): Add descriptor for formatted dates in tables (#3465)

Author: panteliselef

.changeset/warm-candles-thank.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Add descriptor for formatted dates in tables. Those elements can be identified by the `cl-formattedDate__tableCell` css class.

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

@@ -2,7 +2,7 @@ import { useOrganization, useUser } from '@clerk/shared/react';
 import type { OrganizationMembershipResource } from '@clerk/types';
 
 import { Protect } from '../../common/Gate';
-import { Badge, localizationKeys, Td, Text } from '../../customizables';
+import { Badge, Box, descriptors, localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
 import { handleError } from '../../utils';
@@ -91,7 +91,15 @@ const MemberRow = (props: {
           badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}
         />
       </Td>
-      <Td>{membership.createdAt.toLocaleDateString()}</Td>
+      <Td>
+        <Box
+          as='span'
+          elementDescriptor={descriptors.formattedDate}
+          elementId={descriptors.formattedDate.setId('tableCell')}
+        >
+          {membership.createdAt.toLocaleDateString()}
+        </Box>
+      </Td>
       <Td>
         <Protect
           permission={'org:sys_memberships:manage'}

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

@@ -1,7 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationInvitationResource } from '@clerk/types';
 
-import { localizationKeys, Td, Text } from '../../customizables';
+import { Box, descriptors, localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
 import { handleError } from '../../utils';
@@ -79,7 +79,15 @@ const InvitationRow = (props: {
           user={{ primaryEmailAddress: { emailAddress: invitation.emailAddress } } as any}
         />
       </Td>
-      <Td>{invitation.createdAt.toLocaleDateString()}</Td>
+      <Td>
+        <Box
+          as='span'
+          elementDescriptor={descriptors.formattedDate}
+          elementId={descriptors.formattedDate.setId('tableCell')}
+        >
+          {invitation.createdAt.toLocaleDateString()}
+        </Box>
+      </Td>
       <Td>
         <Text
           colorScheme='secondary'

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

@@ -1,7 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationMembershipRequestResource } from '@clerk/types';
 
-import { Button, Flex, localizationKeys, Td } from '../../customizables';
+import { Box, Button, descriptors, Flex, localizationKeys, Td } from '../../customizables';
 import { useCardState, UserPreview, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
 import { DataTable, RowContainer } from './MemberListTable';
@@ -84,7 +84,15 @@ const RequestRow = withCardStateProvider(
             user={{ primaryEmailAddress: { emailAddress: request.publicUserData.identifier } } as any}
           />
         </Td>
-        <Td>{request.createdAt.toLocaleDateString()}</Td>
+        <Td>
+          <Box
+            as='span'
+            elementDescriptor={descriptors.formattedDate}
+            elementId={descriptors.formattedDate.setId('tableCell')}
+          >
+            {request.createdAt.toLocaleDateString()}
+          </Box>
+        </Td>
 
         <Td>
           <AcceptRejectRequestButtons {...{ onAccept, onReject }} />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -228,6 +228,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'formattedPhoneNumberFlag',
   'formattedPhoneNumberText',
 
+  'formattedDate',
+
   'scrollBox',
 
   'navbar',

packages/types/src/appearance.ts

@@ -353,6 +353,8 @@ export type ElementsConfig = {
   formattedPhoneNumberFlag: WithOptions;
   formattedPhoneNumberText: WithOptions;
 
+  formattedDate: WithOptions<'tableCell'>;
+
   scrollBox: WithOptions;
 
   navbar: WithOptions;