feat(i18n): use i18n primitives for inspect dialog, document pane men…

…u items
sanity-io · Oct 17, 2023 · a21f1ec · a21f1ec
1 parent 892bd2b
commit a21f1ec
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 38 deletions.
diff --git a/dev/test-studio/plugins/locale-no-nb/bundles/desk.ts b/dev/test-studio/plugins/locale-no-nb/bundles/desk.ts
@@ -143,6 +143,25 @@ const deskResources: Record<DeskLocaleResourceKeys, string> = {
 
   /** Aria label for the button */
   'status-bar.review-changes-button.aria-label': 'Se endringer',
+
+  /** --- DOCUMENT JSON INSPECTOR --- */
+  /** Title shown for menu item that opens the "Inspect" dialog */
+  'document-inspector.menu-item.title': 'Inspiser',
+
+  /** The title shown in the dialog header, when inspecting a valid document */
+  'document-inspector.dialog.title': 'Inspiserer <DocumentTitle/>',
+
+  /** The title shown in the dialog header, when the document being inspected is not created yet/has no value */
+  'document-inspector.dialog.title-no-value': 'Ingen verdi',
+
+  /** The "parsed" view mode, meaning the JSON is searchable, collapsible etc */
+  'document-inspector.view-mode.parsed': 'Behandlet',
+
+  /** The "raw" view mode, meaning the JSON is presented syntax-highlighted, but with no other features - optimal for copying */
+  'document-inspector.view-mode.raw-json': 'Rå JSON',
+
+  /** --- "PRODUCTION PREVIEW", eg link to content --- */
+  'production-preview.menu-item.title': 'Åpne forhåndsvisning',
 }
 
 export default deskResources
diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
@@ -146,6 +146,25 @@ const deskLocaleStrings = {
 
   /** Aria label for the button */
   'status-bar.review-changes-button.aria-label': 'Review changes',
+
+  /** --- DOCUMENT JSON INSPECTOR --- */
+  /** Title shown for menu item that opens the "Inspect" dialog */
+  'document-inspector.menu-item.title': 'Inspect',
+
+  /** The title shown in the dialog header, when inspecting a valid document */
+  'document-inspector.dialog.title': 'Inspecting <DocumentTitle/>',
+
+  /** The title shown in the dialog header, when the document being inspected is not created yet/has no value */
+  'document-inspector.dialog.title-no-value': 'No value',
+
+  /** The "parsed" view mode, meaning the JSON is searchable, collapsible etc */
+  'document-inspector.view-mode.parsed': 'Parsed',
+
+  /** The "raw" view mode, meaning the JSON is presented syntax-highlighted, but with no other features - optimal for copying */
+  'document-inspector.view-mode.raw-json': 'Raw JSON',
+
+  /** --- "PRODUCTION PREVIEW", eg link to content --- */
+  'production-preview.menu-item.title': 'Open preview',
 }
 
 /**

diff --git a/packages/sanity/src/desk/panes/document/DocumentPaneProvider.tsx b/packages/sanity/src/desk/panes/document/DocumentPaneProvider.tsx
@@ -1,16 +1,17 @@
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {ObjectSchemaType, Path, SanityDocument, SanityDocumentLike} from '@sanity/types'
-import {omit, set} from 'lodash'
+import type {ObjectSchemaType, Path, SanityDocument, SanityDocumentLike} from '@sanity/types'
+import {omit} from 'lodash'
 import {useToast} from '@sanity/ui'
 import {fromString as pathFromString, resolveKeyedPath} from '@sanity/util/paths'
 import isHotkey from 'is-hotkey'
 import {isActionEnabled} from '@sanity/schema/_internal'
 import {usePaneRouter} from '../../components'
-import {PaneMenuItem} from '../../types'
+import type {PaneMenuItem} from '../../types'
 import {useDeskTool} from '../../useDeskTool'
-import {DocumentPaneContext, DocumentPaneContextValue} from './DocumentPaneContext'
+import {deskLocaleNamespace} from '../../i18n'
+import {DocumentPaneContext, type DocumentPaneContextValue} from './DocumentPaneContext'
 import {getMenuItems} from './menuItems'
-import {DocumentPaneProviderProps} from './types'
+import type {DocumentPaneProviderProps} from './types'
 import {usePreviewUrl} from './usePreviewUrl'
 import {getInitialValueTemplateOpts} from './getInitialValueTemplateOpts'
 import {
@@ -21,35 +22,36 @@ import {
 } from './constants'
 import {DocumentInspectorMenuItemsResolver} from './DocumentInspectorMenuItemsResolver'
 import {
-  DocumentInspector,
-  DocumentPresence,
-  PatchEvent,
-  StateTree,
-  toMutationPatches,
+  type DocumentFieldAction,
+  type DocumentFieldActionNode,
+  type DocumentInspector,
+  type DocumentInspectorMenuItem,
+  type DocumentPresence,
+  type PatchEvent,
+  type StateTree,
+  EMPTY_ARRAY,
+  FieldActionsProvider,
+  FieldActionsResolver,
+  getDraftId,
   getExpandOperations,
   getPublishedId,
   setAtPath,
+  toMutationPatches,
   useConnectionState,
   useDocumentOperation,
+  useDocumentValuePermissions,
   useEditState,
   useFormState,
   useInitialValue,
   usePresenceStore,
   useSchema,
   useSource,
   useTemplates,
+  useTimelineSelector,
+  useTimelineStore,
+  useTranslation,
   useUnique,
   useValidationStatus,
-  getDraftId,
-  useDocumentValuePermissions,
-  useTimelineStore,
-  useTimelineSelector,
-  DocumentFieldAction,
-  DocumentInspectorMenuItem,
-  FieldActionsResolver,
-  EMPTY_ARRAY,
-  DocumentFieldActionNode,
-  FieldActionsProvider,
 } from 'sanity'
 
 /**
@@ -216,6 +218,7 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
   const changesOpen = currentInspector?.name === HISTORY_INSPECTOR_NAME
 
   const hasValue = Boolean(value)
+  const {t} = useTranslation(deskLocaleNamespace)
   const menuItems = useMemo(
     () =>
       getMenuItems({
@@ -225,8 +228,9 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
         inspectorMenuItems,
         inspectors,
         previewUrl,
+        t,
       }),
-    [currentInspector, features, hasValue, inspectorMenuItems, inspectors, previewUrl],
+    [currentInspector, features, hasValue, inspectorMenuItems, inspectors, previewUrl, t],
   )
   const inspectOpen = params.inspect === 'on'
   const compareValue: Partial<SanityDocument> | null = changesOpen

diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
@@ -4,11 +4,13 @@ import React, {useCallback} from 'react'
 import JSONInspector from '@rexxars/react-json-inspector'
 import {DocTitle} from '../../../components'
 import {useDeskToolSetting} from '../../../useDeskToolSetting'
+import {deskLocaleNamespace} from '../../../i18n'
 import {useDocumentPane} from '../useDocumentPane'
 import {VIEW_MODE_PARSED, VIEW_MODE_RAW, VIEW_MODES} from './constants'
 import {isDocumentLike, isExpanded, maybeSelectAll, select, toggleExpanded} from './helpers'
 import {JSONInspectorWrapper} from './InspectDialog.styles'
 import {Search} from './Search'
+import {Translate, useTranslation} from 'sanity'
 
 interface InspectDialogProps {
   value: Partial<SanityDocument> | null
@@ -39,19 +41,26 @@ export function InspectDialog(props: InspectDialogProps) {
     onViewModeChange(VIEW_MODE_RAW.id)
   }, [onViewModeChange])
 
+  const {t} = useTranslation(deskLocaleNamespace)
+
   return (
     <Dialog
       id={`${dialogIdPrefix}dialog`}
       header={
         isDocumentLike(value) ? (
-          <>
-            Inspecting{' '}
-            <em>
-              <DocTitle document={value} />
-            </em>
-          </>
+          <Translate
+            t={t}
+            i18nKey="document-inspector.dialog.title"
+            components={{
+              DocumentTitle: () => (
+                <em>
+                  <DocTitle document={value} />
+                </em>
+              ),
+            }}
+          />
         ) : (
-          <em>No value</em>
+          <em>{t('document-inspector.dialog.title-no-value')}</em>
         )
       }
       onClose={onInspectClose}
@@ -65,15 +74,15 @@ export function InspectDialog(props: InspectDialogProps) {
               aria-controls={`${dialogIdPrefix}tabpanel`}
               fontSize={1}
               id={`${dialogIdPrefix}tab-${VIEW_MODE_PARSED.id}`}
-              label={VIEW_MODE_PARSED.title}
+              label={t(VIEW_MODE_PARSED.title)}
               onClick={setParsedViewMode}
               selected={viewMode === VIEW_MODE_PARSED}
             />
             <Tab
               aria-controls={`${dialogIdPrefix}tabpanel`}
               fontSize={1}
               id={`${dialogIdPrefix}tab-${VIEW_MODE_RAW.id}`}
-              label={VIEW_MODE_RAW.title}
+              label={t(VIEW_MODE_RAW.title)}
               onClick={setRawViewMode}
               selected={viewMode === VIEW_MODE_RAW}
             />

diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/constants.ts b/packages/sanity/src/desk/panes/document/inspectDialog/constants.ts
@@ -1,3 +1,3 @@
-export const VIEW_MODE_PARSED = {id: 'parsed', title: 'Parsed'}
-export const VIEW_MODE_RAW = {id: 'raw', title: 'Raw JSON'}
+export const VIEW_MODE_PARSED = {id: 'parsed', title: 'document-inspector.view-mode.parsed'}
+export const VIEW_MODE_RAW = {id: 'raw', title: 'document-inspector.view-mode.raw-json'}
 export const VIEW_MODES = [VIEW_MODE_PARSED, VIEW_MODE_RAW]
diff --git a/packages/sanity/src/desk/panes/document/menuItems.ts b/packages/sanity/src/desk/panes/document/menuItems.ts
@@ -1,7 +1,7 @@
 import {BinaryDocumentIcon, EarthAmericasIcon} from '@sanity/icons'
-import {DeskToolFeatures, PaneMenuItem} from '../../types'
+import type {DeskToolFeatures, PaneMenuItem} from '../../types'
 import {INSPECT_ACTION_PREFIX} from './constants'
-import {DocumentInspector, DocumentInspectorMenuItem, ValidationMarker} from 'sanity'
+import type {DocumentInspector, DocumentInspectorMenuItem, TFunction} from 'sanity'
 
 interface GetMenuItemsParams {
   currentInspector?: DocumentInspector
@@ -10,6 +10,7 @@ interface GetMenuItemsParams {
   inspectors: DocumentInspector[]
   previewUrl?: string | null
   inspectorMenuItems: DocumentInspectorMenuItem[]
+  t: TFunction
 }
 
 function getInspectorItems({
@@ -39,24 +40,24 @@ function getInspectorItems({
     .filter(Boolean) as PaneMenuItem[]
 }
 
-function getInspectItem({hasValue}: GetMenuItemsParams): PaneMenuItem {
+function getInspectItem({hasValue, t}: GetMenuItemsParams): PaneMenuItem {
   return {
     action: 'inspect',
     group: 'inspectors',
-    title: 'Inspect',
+    title: t('document-inspector.menu-item.title'),
     icon: BinaryDocumentIcon,
     isDisabled: !hasValue,
     shortcut: 'Ctrl+Alt+I',
   }
 }
 
-export function getProductionPreviewItem({previewUrl}: GetMenuItemsParams): PaneMenuItem | null {
+export function getProductionPreviewItem({previewUrl, t}: GetMenuItemsParams): PaneMenuItem | null {
   if (!previewUrl) return null
 
   return {
     action: 'production-preview',
     group: 'links',
-    title: 'Open preview',
+    title: t('production-preview.menu-item.title'),
     icon: EarthAmericasIcon,
     shortcut: 'Ctrl+Alt+O',
   }