From 995a22fcf310a5154ed961f4342e4576c4b595f5 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 30 May 2024 12:30:28 +0300
Subject: [PATCH] fix(clerk-js): Add descriptor for formatted dates in tables

---
 .changeset/warm-candles-thank.md                     |  6 ++++++
 .../OrganizationProfile/ActiveMembersList.tsx        | 12 ++++++++++--
 .../OrganizationProfile/InvitedMembersList.tsx       | 12 ++++++++++--
 .../OrganizationProfile/RequestToJoinList.tsx        | 12 ++++++++++--
 .../src/ui/customizables/elementDescriptors.ts       |  2 ++
 packages/types/src/appearance.ts                     |  2 ++
 6 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/warm-candles-thank.md

diff --git a/.changeset/warm-candles-thank.md b/.changeset/warm-candles-thank.md
new file mode 100644
index 00000000000..3176272b1db
--- /dev/null
+++ b/.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.
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
index f14d2660945..18a935a3dd6 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/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'}
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx
index b1c7012efde..eb882b34ef0 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx
+++ b/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'
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
index 322cbf3e05c..d90908140c9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
+++ b/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 }} />
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 64ad08c77e2..463aa036d10 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -228,6 +228,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'formattedPhoneNumberFlag',
   'formattedPhoneNumberText',
 
+  'formattedDate',
+
   'scrollBox',
 
   'navbar',
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 294fdc3569d..eb44d134c9f 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -353,6 +353,8 @@ export type ElementsConfig = {
   formattedPhoneNumberFlag: WithOptions;
   formattedPhoneNumberText: WithOptions;
 
+  formattedDate: WithOptions<'tableCell'>;
+
   scrollBox: WithOptions;
 
   navbar: WithOptions;