fix(ui,localizations): Localize API keys component table headers (#8462)

Co-authored-by: Robert Soriano <sorianorobertc@gmail.com>

Author: jebibot

.changeset/blue-bats-count.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/shared': patch
+'@clerk/ui': patch
+---
+
+Localize API keys table headers

packages/localizations/src/en-US.ts

@@ -41,6 +41,9 @@ export const enUS: LocalizationResource = {
       formHint: 'Are you sure you want to delete this Secret key?',
       formTitle: 'Revoke "{{apiKeyName}}" secret key?',
     },
+    tableHeader__name: 'Name',
+    tableHeader__lastUsed: 'Last used',
+    tableHeader__actions: 'Actions',
   },
   backButton: 'Back',
   badge__activePlan: 'Active',

packages/localizations/src/ko-KR.ts

@@ -52,6 +52,9 @@ export const koKR: LocalizationResource = {
       formHint: '이 시크릿 키를 삭제할까요?',
       formTitle: '"{{apiKeyName}}" 시크릿 키를 폐기할까요?',
     },
+    tableHeader__name: '이름',
+    tableHeader__lastUsed: '마지막 사용',
+    tableHeader__actions: '동작',
   },
   backButton: '돌아가기',
   badge__activePlan: '활성',

packages/shared/src/types/localization.ts

@@ -1304,6 +1304,9 @@ export type __internal_LocalizationResource = {
     menuAction__revoke: LocalizationValue;
     action__search: LocalizationValue;
     action__add: LocalizationValue;
+    tableHeader__name: LocalizationValue;
+    tableHeader__lastUsed: LocalizationValue;
+    tableHeader__actions: LocalizationValue;
     detailsTitle__emptyRow: LocalizationValue;
     revokeConfirmation: {
       formTitle: LocalizationValue<'apiKeyName'>;

packages/ui/src/components/APIKeys/ApiKeysTable.tsx

@@ -40,9 +40,14 @@ export const APIKeysTable = ({
       >
         <Thead>
           <Tr>
-            <Th>Name</Th>
-            <Th>Last used</Th>
-            {canManageAPIKeys && <Th sx={{ textAlign: 'end' }}>Actions</Th>}
+            <Th localizationKey={localizationKeys('apiKeys.tableHeader__name')} />
+            <Th localizationKey={localizationKeys('apiKeys.tableHeader__lastUsed')} />
+            {canManageAPIKeys && (
+              <Th
+                localizationKey={localizationKeys('apiKeys.tableHeader__actions')}
+                sx={{ textAlign: 'end' }}
+              />
+            )}
           </Tr>
         </Thead>
         <Tbody>