feat(i18n): adds translation for desk panes

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

@@ -165,6 +165,136 @@ const deskLocaleStrings = {
 
   /** --- "PRODUCTION PREVIEW", eg link to content --- */
   'production-preview.menu-item.title': 'Open preview',
+
+  /** -- DESK PANES -- */
+  /** The tool tipe for the split pane button on the document panel header */
+  'document-panel-header.split-pane-button.tooltip': 'Split pane right',
+
+  /** The text content for the deleted document banner */
+  'banners.deleted-document-banner.text': 'This document has been deleted.',
+
+  /** The text for the restore button on the deleted document banner */
+  'banners.deleted-document-banner.restore-button.text': 'Restore most recent version',
+
+  /** The text for the reference change banner if the reason is that the reference has been changed */
+  'banners.reference-changed-banner.reason-changed.text':
+    'This reference has changed since you opened it.',
+
+  /** The text for the reload button */
+  'banners.reference-changed-banner.reason-changed.reload-button.text': 'Reload reference',
+
+  /** The text for the reference change banner if the reason is that the reference has been deleted */
+  'banners.reference-changed-banner.reason-removed.text':
+    'This reference has been removed since you opened it.',
+
+  /** The text for the close button */
+  'banners.reference-changed-banner.reason-removed.close-button.text': 'Close reference',
+
+  /** The text for the permission check banner if there is only one role */
+  'banners.permission-check-banner.singular-role.text':
+    'Your role {{roles}} does not have permissions to {{requiredPermission}} this document.',
+
+  /** The text for the permission check banner if there is are multiple roles */
+  'banners.permission-check-banner.plural-roles.text':
+    'Your roles {{roles}} do not have permissions to {{requiredPermission}} this document.',
+
+  /** The text for when a form is hidden */
+  'document-view.form-view.form-hidden': 'This form is hidden',
+
+  /** The text for when the form view is loading a document */
+  'document-view.form-view.loading': 'Loading document',
+
+  /** The title of the sync lock toast on the form view */
+  'document-view.form-view.sync-lock-toast.title': 'Syncing document…',
+
+  /** The description of the sync lock toast on the form view */
+  'document-view.form-view.sync-lock-toast.description':
+    'Please hold tight while the document is synced. This usually happens right after the document has been published, and it should not take more than a few seconds',
+
+  /** The title of the reconnecting toast */
+  'panes.document-pane-provider.reconnecting-toast.title': 'Connection lost. Reconnecting…',
+
+  /** The loading message for the document not found pane */
+  'panes.document-pane.document-not-found.loading': 'Loading document…',
+
+  /** The title of the document not found pane if the schema is known */
+  'panes.document-pane.document-not-found.title': 'The document was not found',
+
+  /** The text of the document not found pane if the schema is known */
+  'panes.document-pane.document-not-found.text':
+    'The document type is not defined, and a document with the <Code>{{id}}</Code> identifier could not be found.',
+
+  /** The title of the document not found pane if the schema is not found or unknown */
+  'panes.document-pane.document-unknown-type.title':
+    'Unknown document type: <Code>{{documentType}}</Code>',
+
+  /** The text of the document not found pane if the schema is not found */
+  'panes.document-pane.document-unknown-type.text':
+    'This document has the schema type <Code>{{documentType}}</Code>, which is not defined as a type in the local content studio schema.',
+
+  /** The title of the document not found pane if the schema is unknown */
+  'panes.document-pane.document-unknown-type.without-schema.text':
+    'This document does not exist, and no schema type was specified for it.',
+
+  /** The text of the document list pane if more than a maximum number of documents are returned */
+  'panes.document-list-pane.max-items.text': 'Displaying a maximum of {{limit}} documents',
+
+  /** The text of the document list pane if no documents are found */
+  'panes.document-list-pane.no-documents.text': 'No results found',
+
+  /** The text of the document list pane if no documents are found matching specified criteria */
+  'panes.document-list-pane.no-matching-documents.text': 'No matching documents',
+
+  /** The text of the document list pane if no documents are found for a specified type */
+  'panes.document-list-pane.no-documents-of-type.text': 'No documents of this type',
+
+  /** The error title on the document list pane */
+  'panes.document-list-pane.error.title': 'Could not fetch list items',
+
+  /** The error text on the document list pane */
+  'panes.document-list-pane.error.text': 'Error: <Code>{{error}}</Code>',
+
+  /** The summary title when displaying an error for a document operation result */
+  'panes.document-operation-results.error.summary.title': 'Details',
+
+  /** The text when a delete operation failed  */
+  'panes.document-operation-results.delete-operation.error':
+    'An error occurred while attempting to delete this document. This usually means that there are other documents that refers to it.',
+
+  /** The text when an unpublish operation failed  */
+  'panes.document-operation-results.unpublish-operation.error':
+    'An error occurred while attempting to unpublish this document. This usually means that there are other documents that refers to it.',
+
+  /** The text when a generic operation failed  */
+  'panes.document-operation-results.generic-operation.error': 'An error occurred during {{op}}',
+
+  /** The text when a publish operation succeded  */
+  'panes.document-operation-results.publish-operation.success': 'The document was published',
+
+  /** The text when an unpublish operation succeded  */
+  'panes.document-operation-results.unpublish-operation.success':
+    'The document was unpublished. A draft has been created from the latest published version.',
+
+  /** The text when a discard changes operation succeded  */
+  'panes.document-operation-results.discard-changes-operation.success':
+    'All changes since last publish has now been discarded. The discarded draft can still be recovered from history',
+
+  /** The text when a delete operation succeded  */
+  'panes.document-operation-results.delete-operation.success':
+    'The document was successfully deleted',
+
+  /** The text when a generic operation succeded  */
+  'panes.document-operation-results.generic-operation.success':
+    'Successfully performed {{op}} on document',
+
+  /** The text used in the document header title if creating a new item */
+  'header.document-header-title.new.text': 'New {{item}}',
+
+  /** The text used in the document header title if there is an error */
+  'header.document-header-title.error.text': 'Error: {{error}}',
+
+  /** The text used in the document header title if no other title can be determined */
+  'header.document-header-title.untitled.text': 'Untitled',
 }
 
 /**

packages/sanity/src/desk/panes/document/DocumentOperationResults.tsx

@@ -1,35 +1,34 @@
 import {useToast} from '@sanity/ui'
 import React, {memo, useEffect, useRef} from 'react'
 import {useDocumentPane} from './useDocumentPane'
-import {useDocumentOperationEvent} from 'sanity'
+import {useDocumentOperationEvent, useTranslation} from 'sanity'
 import {usePaneRouter} from '../../components'
+import {deskLocaleNamespace} from '../../i18n'
 
 function getOpErrorTitle(op: string): string {
   if (op === 'delete') {
-    return `An error occurred while attempting to delete this document.
-      This usually means that there are other documents that refers to it.`
+    return 'panes.document-operation-results.delete-operation.error'
   }
   if (op === 'unpublish') {
-    return `An error occurred while attempting to unpublish this document.
-      This usually means that there are other documents that refers to it.`
+    return 'panes.document-operation-results.unpublish-operation.error'
   }
-  return `An error occurred during ${op}`
+  return 'panes.document-operation-results.generic-operation.error'
 }
 
 function getOpSuccessTitle(op: string): string {
   if (op === 'publish') {
-    return `The document was published`
+    return 'panes.document-operation-results.publish-operation.success'
   }
   if (op === 'unpublish') {
-    return `The document was unpublished. A draft has been created from the latest published version.`
+    return 'panes.document-operation-results.unpublish-operation.success'
   }
   if (op === 'discardChanges') {
-    return `All changes since last publish has now been discarded. The discarded draft can still be recovered from history`
+    return 'panes.document-operation-results.discard-changes-operation.success'
   }
   if (op === 'delete') {
-    return `The document was successfully deleted`
+    return 'panes.document-operation-results.delete-operation.success'
   }
-  return `Successfully performed ${op} on document`
+  return 'panes.document-operation-results.generic-operation.success'
 }
 
 const IGNORE_OPS = ['patch', 'commit']
@@ -40,6 +39,7 @@ export const DocumentOperationResults = memo(function DocumentOperationResults()
   const event: any = useDocumentOperationEvent(documentId, documentType)
   const prevEvent = useRef(event)
   const paneRouter = usePaneRouter()
+  const {t} = useTranslation(deskLocaleNamespace)
 
   useEffect(() => {
     if (!event || event === prevEvent.current) return
@@ -51,10 +51,10 @@ export const DocumentOperationResults = memo(function DocumentOperationResults()
         closable: true,
         duration: 30000, // 30s
         status: 'error',
-        title: getOpErrorTitle(event.op),
+        title: t(getOpErrorTitle(event.op), {op: event.op}),
         description: (
           <details>
-            <summary>Details</summary>
+            <summary>{t('panes.document-operation-results.error.summary.title')}</summary>
             {event.error.message}
           </details>
         ),
@@ -65,7 +65,7 @@ export const DocumentOperationResults = memo(function DocumentOperationResults()
       pushToast({
         closable: true,
         status: 'success',
-        title: getOpSuccessTitle(event.op),
+        title: t(getOpSuccessTitle(event.op), {op: event.op}),
       })
     }
 
@@ -81,7 +81,7 @@ export const DocumentOperationResults = memo(function DocumentOperationResults()
 
     // eslint-disable-next-line consistent-return
     return () => clearTimeout(cleanupId)
-  }, [event, paneRouter, pushToast])
+  }, [event, paneRouter, pushToast, t])
 
   return null
 })

packages/sanity/src/desk/panes/document/DocumentPane.tsx

@@ -31,15 +31,18 @@ import {
   DOCUMENT_PANEL_INITIAL_MIN_WIDTH,
   DOCUMENT_PANEL_MIN_WIDTH,
 } from './constants'
+import {deskLocaleNamespace} from '../../i18n'
 import {
   ChangeConnectorRoot,
   ReferenceInputOptionsProvider,
   SourceProvider,
   isDev,
+  Translate,
   useDocumentType,
   useSource,
   useTemplatePermissions,
   useTemplates,
+  useTranslation,
   useZIndex,
 } from 'sanity'
 
@@ -119,8 +122,17 @@ function DocumentPaneInner(props: DocumentPaneProviderProps) {
       : {path: [], state: 'none'}
   }, [parentRefPath, groupIndex, routerPanesStateLength])
 
+  const {t} = useTranslation(deskLocaleNamespace)
+
   if (options.type === '*' && !isLoaded) {
-    return <LoadingPane flex={2.5} minWidth={320} paneKey={paneKey} title="Loading document…" />
+    return (
+      <LoadingPane
+        flex={2.5}
+        minWidth={320}
+        paneKey={paneKey}
+        title={t('panes.document-pane.document-not-found.loading')}
+      />
+    )
   }
 
   if (!documentType) {
@@ -129,12 +141,16 @@ function DocumentPaneInner(props: DocumentPaneProviderProps) {
         flex={2.5}
         minWidth={320}
         paneKey={paneKey}
-        title={<>The document was not found</>}
+        title={t('panes.document-pane.document-not-found.title')}
       >
         <Stack space={4}>
           <Text as="p">
-            The document type is not defined, and a document with the <code>{options.id}</code>{' '}
-            identifier could not be found.
+            <Translate
+              t={t}
+              i18nKey="panes.document-pane.document-not-found.text"
+              components={{Code: ({children}) => <code>{children}</code>}}
+              values={{id: options.id}}
+            />
           </Text>
         </Stack>
       </ErrorPane>
@@ -241,6 +257,7 @@ function InnerDocumentPane() {
     DOCUMENT_PANEL_INITIAL_MIN_WIDTH + (inspector ? DOCUMENT_INSPECTOR_MIN_WIDTH : 0)
 
   const minWidth = DOCUMENT_PANEL_MIN_WIDTH + (inspector ? DOCUMENT_INSPECTOR_MIN_WIDTH : 0)
+  const {t} = useTranslation(deskLocaleNamespace)
 
   if (!schemaType) {
     return (
@@ -250,27 +267,33 @@ function InnerDocumentPane() {
         minWidth={minWidth}
         paneKey={paneKey}
         title={
-          <>
-            Unknown document type: <code>{documentType}</code>
-          </>
+          <Translate
+            t={t}
+            i18nKey="panes.document-pane.document-unknown-type.title"
+            components={{Code: ({children}) => <code>{children}</code>}}
+            values={{documentType}}
+          />
         }
         tone="caution"
       >
         <Stack space={4}>
           {documentType && (
             <Text as="p">
-              This document has the schema type <code>{documentType}</code>, which is not defined as
-              a type in the local content studio schema.
+              <Translate
+                t={t}
+                i18nKey="panes.document-pane.document-unknown-type.text"
+                components={{Code: ({children}) => <code>{children}</code>}}
+                values={{documentType}}
+              />
             </Text>
           )}
 
           {!documentType && (
-            <Text as="p">
-              This document does not exist, and no schema type was specified for it.
-            </Text>
+            <Text as="p">{t('panes.document-pane.document-unknown-type.without-schema.text')}</Text>
           )}
 
           {isDev && value && (
+            /* eslint-disable i18next/no-literal-string */
             <>
               <Text as="p">Here is the JSON representation of the document:</Text>
               <Card padding={3} overflow="auto" radius={2} shadow={1} tone="inherit">
@@ -279,6 +302,7 @@ function InnerDocumentPane() {
                 </Code>
               </Card>
             </>
+            /* eslint-enable i18next/no-literal-string */
           )}
         </Stack>
       </ErrorPane>

packages/sanity/src/desk/panes/document/DocumentPaneProvider.tsx

@@ -643,10 +643,10 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
       pushToast({
         id: 'sanity/desk/reconnecting',
         status: 'warning',
-        title: <>Connection lost. Reconnecting…</>,
+        title: t('panes.document-pane-provider.reconnecting-toast.title'),
       })
     }
-  }, [connectionState, pushToast])
+  }, [connectionState, pushToast, t])
 
   // Reset `focusPath` when `documentId` or `params.path` changes
   useEffect(() => {

packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx

@@ -3,8 +3,9 @@ import {Button, Card, Container, Flex, Text} from '@sanity/ui'
 import {ReadOnlyIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {useDocumentPane} from '../useDocumentPane'
-import {useDocumentOperation} from 'sanity'
+import {useDocumentOperation, useTranslation} from 'sanity'
 import {useRouter} from 'sanity/router'
+import {deskLocaleNamespace} from '../../../i18n'
 
 const Root = styled(Card)`
   position: relative;
@@ -25,6 +26,7 @@ export function DeletedDocumentBanner({revisionId}: DeletedDocumentBannerProps)
       navigateIntent('edit', {id: documentId, type: documentType})
     }
   }, [documentId, documentType, navigateIntent, restore, revisionId])
+  const {t} = useTranslation(deskLocaleNamespace)
 
   return (
     <Root data-testid="deleted-document-banner" shadow={1} tone="transparent">
@@ -35,15 +37,15 @@ export function DeletedDocumentBanner({revisionId}: DeletedDocumentBannerProps)
           </Text>
 
           <Flex align="center" gap={2} flex={1} marginLeft={3}>
-            <Text size={1}>This document has been deleted.</Text>
+            <Text size={1}>{t('banners.deleted-document-banner.text')}</Text>
             {revisionId && (
               <Button
                 fontSize={1}
                 padding={2}
                 mode="bleed"
                 tone="primary"
                 onClick={handleRestore}
-                text="Restore most recent version"
+                text={t('banners.deleted-document-banner.restore-button.text')}
               />
             )}
           </Flex>