fix(ui,localizations): Localize API keys revoke confirmation input (#8258)

Author: wobsoriano

.changeset/fix-api-keys-revoke-localization.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/shared': patch
+'@clerk/clerk-js': patch
+---
+
+Fixed API keys "Revoke" confirmation modal being stuck disabled when using a localization.

packages/localizations/src/en-US.ts

@@ -36,6 +36,7 @@ export const enUS: LocalizationResource = {
     menuAction__revoke: 'Revoke key',
     revokeConfirmation: {
       confirmationText: 'Revoke',
+      inputLabel: 'Type "Revoke" to confirm',
       formButtonPrimary__revoke: 'Revoke key',
       formHint: 'Are you sure you want to delete this Secret key?',
       formTitle: 'Revoke "{{apiKeyName}}" secret key?',

packages/shared/src/types/localization.ts

@@ -1287,6 +1287,7 @@ export type __internal_LocalizationResource = {
       formHint: LocalizationValue;
       formButtonPrimary__revoke: LocalizationValue;
       confirmationText: LocalizationValue;
+      inputLabel: LocalizationValue;
     };
     lastUsed__seconds: LocalizationValue<'seconds'>;
     lastUsed__minutes: LocalizationValue<'minutes'>;

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

@@ -34,12 +34,13 @@ export const RevokeAPIKeyConfirmationModal = ({
 
   const revokeField = useFormControl('apiKeyRevokeConfirmation', '', {
     type: 'text',
-    label: `Type "Revoke" to confirm`,
-    placeholder: 'Revoke',
+    label: localizationKeys('apiKeys.revokeConfirmation.inputLabel'),
+    placeholder: localizationKeys('apiKeys.revokeConfirmation.confirmationText'),
     isRequired: true,
   });
 
-  const canSubmit = revokeField.value === t(localizationKeys('apiKeys.revokeConfirmation.confirmationText'));
+  const canSubmit =
+    revokeField.value === (t(localizationKeys('apiKeys.revokeConfirmation.confirmationText')) || 'Revoke');
 
   const handleClose = () => {
     onClose();