feat(i18n): localize desktool components

packages/sanity/src/core/components/RelativeTime.tsx

@@ -1,10 +1,16 @@
 import React from 'react'
 import {type RelativeTimeOptions, useRelativeTime} from '../hooks/useRelativeTime'
 
+/**
+ * @internal
+ */
 export interface RelativeTimeProps extends RelativeTimeOptions {
   time: string | Date
 }
 
+/**
+ * @internal
+ */
 export function RelativeTime({time, ...options}: RelativeTimeProps) {
   const timestamp = time instanceof Date ? time : new Date(time)
   const timeAgo = useRelativeTime(timestamp, options)

packages/sanity/src/core/components/index.ts

@@ -23,3 +23,4 @@ export * from './transitional'
 export * from './userAvatar'
 export * from './WithReferringDocuments'
 export * from './zOffsets'
+export * from './RelativeTime'

packages/sanity/src/core/i18n/Translate.tsx

@@ -2,7 +2,10 @@ import React, {ComponentType, ReactNode, useMemo} from 'react'
 import type {TFunction} from 'i18next'
 import {CloseTagToken, simpleParser, TextToken, Token} from './simpleParser'
 
-type ComponentMap = Record<string, ComponentType<{children?: ReactNode}>>
+type ComponentMap = Record<
+  string,
+  ComponentType<{children?: ReactNode}> | keyof JSX.IntrinsicElements
+>
 
 /**
  * @beta
@@ -11,7 +14,7 @@ export interface TranslationProps {
   t: TFunction
   i18nKey: string
   components: ComponentMap
-  values?: Record<string, string | string[]>
+  values?: Record<string, number | string | string[]>
 }
 
 function render(tokens: Token[], componentMap: ComponentMap): ReactNode {

packages/sanity/src/desk/components/DocTitle.tsx

@@ -1,6 +1,7 @@
 import {SanityDocumentLike} from '@sanity/types'
 import React from 'react'
-import {useSchema, unstable_useValuePreview as useValuePreview} from 'sanity'
+import {deskLocaleNamespace} from '../i18n'
+import {useSchema, useTranslation, unstable_useValuePreview as useValuePreview} from 'sanity'
 
 export interface DocTitleProps {
   document: SanityDocumentLike
@@ -10,19 +11,26 @@ export function DocTitle(props: DocTitleProps) {
   const {document: documentValue} = props
   const schema = useSchema()
   const schemaType = schema.get(documentValue._type)
+  const {t} = useTranslation(deskLocaleNamespace)
 
   const {error, value} = useValuePreview({
     schemaType: schemaType!,
     value: documentValue,
   })
 
   if (!schemaType) {
-    return <code>Unknown schema type: {documentValue._type}</code>
+    return <code>{t('doc-title.unknown-schema-type.text', {schemaType: documentValue._type})}</code>
   }
 
   if (error) {
-    return <>Error: {error.message}</>
+    return <>{t('doc-title.error.text', {errorMessage: error.message})}</>
   }
 
-  return <>{value?.title || <span style={{color: 'var(--card-muted-fg-color)'}}>Untitled</span>}</>
+  return (
+    <>
+      {value?.title || (
+        <span style={{color: 'var(--card-muted-fg-color)'}}>{t('doc-title.fallback.text')}</span>
+      )}
+    </>
+  )
 }

packages/sanity/src/desk/components/DraftStatus.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 import {EditIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Box, Text, Tooltip} from '@sanity/ui'
-import {TimeAgo} from './TimeAgo'
-import {TextWithTone} from 'sanity'
+import {deskLocaleNamespace} from '../i18n'
+import {TextWithTone, Translate, useTranslation, RelativeTime} from 'sanity'
 
 export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
   const {document} = props
   const updatedAt = document && '_updatedAt' in document && document._updatedAt
+  const {t} = useTranslation(deskLocaleNamespace)
 
   return (
     <Tooltip
@@ -16,9 +17,17 @@ export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocu
         <Box padding={2}>
           <Text size={1}>
             {document ? (
-              <>Edited {updatedAt && <TimeAgo time={updatedAt} />}</>
+              <Translate
+                i18nKey="pane-item.draft-status.has-draft.tooltip"
+                t={t}
+                components={{
+                  RelativeTime: () => (
+                    <>{updatedAt && <RelativeTime time={updatedAt} useTemporalPhrase />}</>
+                  ),
+                }}
+              />
             ) : (
-              <>No unpublished edits</>
+              t('pane-item.draft-status.no-draft.tooltip')
             )}
           </Text>
         </Box>

packages/sanity/src/desk/components/MissingSchemaType.tsx

@@ -1,31 +1,41 @@
 import {WarningOutlineIcon} from '@sanity/icons'
 import {SanityDocument} from '@sanity/types'
 import React from 'react'
-import {GeneralPreviewLayoutKey, SanityDefaultPreview} from 'sanity'
+import {deskLocaleNamespace} from '../i18n'
+import {GeneralPreviewLayoutKey, SanityDefaultPreview, Translate, useTranslation} from 'sanity'
 
 export interface MissingSchemaTypeProps {
   layout?: GeneralPreviewLayoutKey
   value: SanityDocument
 }
 
-const getUnknownTypeFallback = (id: string, typeName: string) => ({
-  title: (
-    <em>
-      No schema found for type <code>{typeName}</code>
-    </em>
-  ),
-  subtitle: (
-    <em>
-      Document: <code>{id}</code>
-    </em>
-  ),
-  media: () => <WarningOutlineIcon />,
-})
-
 export function MissingSchemaType(props: MissingSchemaTypeProps) {
+  const {t} = useTranslation(deskLocaleNamespace)
   const {layout, value} = props
 
   return (
-    <SanityDefaultPreview {...getUnknownTypeFallback(value._id, value._type)} layout={layout} />
+    <SanityDefaultPreview
+      title={
+        <em>
+          <Translate
+            t={t}
+            i18nKey="pane-item.missing-schema-type.title"
+            components={{Code: 'code'}}
+            values={{documentType: value._type}}
+          />
+        </em>
+      }
+      subtitle={
+        <Translate
+          t={t}
+          i18nKey="pane-item.missing-schema-type.subtitle"
+          components={{Code: 'code'}}
+          values={{documentId: value._id}}
+        />
+      }
+      // eslint-disable-next-line react/jsx-no-bind
+      media={() => <WarningOutlineIcon />}
+      layout={layout}
+    />
   )
 }

packages/sanity/src/desk/components/PublishedStatus.tsx

@@ -2,13 +2,14 @@ import React from 'react'
 import {PublishIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
 import {Box, Text, Tooltip} from '@sanity/ui'
-import {TimeAgo} from './TimeAgo'
-import {TextWithTone} from 'sanity'
+import {deskLocaleNamespace} from '../i18n'
+import {RelativeTime, TextWithTone, Translate, useTranslation} from 'sanity'
 
 export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
   const {document} = props
   const updatedAt = document && '_updatedAt' in document && document._updatedAt
   const statusLabel = document ? 'Published' : 'Not published'
+  const {t} = useTranslation(deskLocaleNamespace)
 
   return (
     <Tooltip
@@ -17,9 +18,17 @@ export function PublishedStatus(props: {document?: PreviewValue | Partial<Sanity
         <Box padding={2}>
           <Text size={1}>
             {document ? (
-              <>Published {updatedAt && <TimeAgo time={updatedAt} />}</>
+              <Translate
+                t={t}
+                i18nKey="pane-item.published-status.has-published.tooltip"
+                components={{
+                  RelativeTime: () => (
+                    <>{updatedAt && <RelativeTime time={updatedAt} useTemporalPhrase />}</>
+                  ),
+                }}
+              />
             ) : (
-              <>Not published</>
+              t('pane-item.published-status.no-published.tooltip')
             )}
           </Text>
         </Box>