feat(i18n): convert review changes button to use i18n primitives (#4993)

packages/sanity/src/desk/documentActions/PublishAction.tsx

@@ -20,7 +20,7 @@ import {
 const DISABLED_REASON_TITLE_KEY: Record<string, DeskLocaleResourceKeys> = {
   LIVE_EDIT_ENABLED: 'action.publish.live-edit.publish-disabled',
   ALREADY_PUBLISHED: 'action.publish.already-published.no-time-ago.tooltip',
-  NO_CHANGES: 'action.publish.tooltip.no-changes',
+  NO_CHANGES: 'action.publish.no-changes.tooltip',
   NOT_READY: 'action.publish.disabled.not-ready',
 } as const
 

packages/sanity/src/desk/i18n/resources.ts

@@ -26,7 +26,7 @@ const deskLocaleStrings = {
 
   /** Fallback tooltip for the "Publish" document action when publish is invoked for a document with live edit enabled.*/
   'action.publish.live-edit.publish-disabled':
-    'Cannot publish since liveEdit is enabled for this document type',
+    'Cannot publish since Live Edit is enabled for this document type',
 
   /** Tooltip when the "Publish" document action is disabled due to validation issues */
   'action.publish.validation-issues.tooltip':
@@ -39,7 +39,7 @@ const deskLocaleStrings = {
   'action.publish.already-published.no-time-ago.tooltip': 'Already published',
 
   /** Tooltip when publish button is disabled because there are no changes.*/
-  'action.publish.tooltip.no-changes': 'No unpublished changes',
+  'action.publish.no-changes.tooltip': 'No unpublished changes',
 
   /** Tooltip when publish button is waiting for validation and async tasks to complete.*/
   'action.publish.waiting': 'Waiting for tasks to finish before publishing',
@@ -50,7 +50,7 @@ const deskLocaleStrings = {
 
   /** Tooltip when action button is disabled because the document does not exist */
   'action.delete.disabled.nothing-to-delete':
-    'This document doesn’t yet exist or is already deleted',
+    "This document doesn't yet exist or is already deleted",
 
   /** Label for the "Delete" document action button */
   'action.delete.label': 'Delete',
@@ -81,7 +81,7 @@ const deskLocaleStrings = {
 
   /** Tooltip when action is disabled because the document doesn't exist */
   'action.duplicate.disabled.nothing-to-duplicate':
-    "This document doesn't yet exist so there‘s nothing to duplicate",
+    "This document doesn't yet exist so there's nothing to duplicate",
 
   /** Label for the "Duplicate" document action */
   'action.duplicate.label': 'Duplicate',
@@ -116,6 +116,22 @@ const deskLocaleStrings = {
   /** Message prompting the user to confirm that they want to restore to an earlier version*/
   'action.restore.confirm-dialog.confirm-discard-changes':
     'Are you sure you want to restore this document?',
+
+  /** --- REVIEW CHANGES BUTTON --- */
+  /** Label for button when status is syncing */
+  'status-bar.review-changes-button.status.syncing.text': 'Saving...',
+
+  /** Label for button when status is saved */
+  'status-bar.review-changes-button.status.saved.text': 'Saved!',
+
+  /** Primary text for tooltip for the button */
+  'status-bar.review-changes-button.tooltip.text': 'Review changes',
+
+  /** Text for the secondary text for tooltip for the button */
+  'status-bar.review-changes-button.tooltip.changes-saved': 'Changes saved',
+
+  /** Aria label for the button */
+  'status-bar.review-changes-button.aria-label': 'Review changes',
 }
 
 /**

packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx

@@ -1,7 +1,8 @@
 import React, {useMemo} from 'react'
 import {Box, Button, ButtonProps, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {deskLocaleNamespace} from '../../../../../i18n'
 import {AnimatedStatusIcon} from './AnimatedStatusIcon'
-import {useTimeAgo} from 'sanity'
+import {useTimeAgo, useTranslation} from 'sanity'
 
 interface ReviewChangesButtonProps extends React.HTMLProps<HTMLButtonElement> {
   status?: 'changes' | 'saved' | 'syncing'
@@ -18,10 +19,12 @@ const ReviewButton = React.forwardRef(function ReviewButton(
   const lastUpdatedTimeAgo = useTimeAgo(lastUpdated || '', {minimal: true, agoSuffix: true})
   const a11yUpdatedAgo = useTimeAgo(lastUpdated || '', {minimal: false, agoSuffix: true})
 
+  const {t} = useTranslation(deskLocaleNamespace)
+
   const buttonProps: ButtonProps = useMemo(() => {
     if (status === 'syncing') {
       return {
-        text: 'Saving...',
+        text: t('status-bar.review-changes-button.status.syncing.text'),
         tone: undefined,
       }
     }
@@ -33,13 +36,13 @@ const ReviewButton = React.forwardRef(function ReviewButton(
     }
     if (status === 'saved') {
       return {
-        text: 'Saved!',
+        text: t('status-bar.review-changes-button.status.saved.text'),
         tone: 'positive',
       }
     }
 
     return {}
-  }, [status, lastUpdatedTime])
+  }, [status, lastUpdatedTime, t])
 
   if (!status) {
     return null
@@ -53,10 +56,11 @@ const ReviewButton = React.forwardRef(function ReviewButton(
       content={
         <Stack padding={3} space={3}>
           <Text size={1} weight="semibold">
-            Review changes
+            {t('status-bar.review-changes-button.tooltip.text')}
           </Text>
           <Text size={1} muted>
-            Changes saved <abbr aria-label={a11yUpdatedAgo}>{lastUpdatedTimeAgo}</abbr>
+            {t('status-bar.review-changes-button.tooltip.changes-saved')}{' '}
+            <abbr aria-label={a11yUpdatedAgo}>{lastUpdatedTimeAgo}</abbr>
           </Text>
         </Stack>
       }
@@ -68,7 +72,7 @@ const ReviewButton = React.forwardRef(function ReviewButton(
         {...rest}
         data-testid="review-changes-button"
         ref={ref}
-        aria-label="Review changes"
+        aria-label={t('status-bar.review-changes-button.aria-label')}
       >
         <Flex align="center">
           <Box marginRight={collapsed ? 0 : 3} aria-hidden="true">