From a1370a9286455568d38fdd3962b923e4e726d463 Mon Sep 17 00:00:00 2001
From: Tommy Petty <tommy.petty@gmail.com>
Date: Thu, 26 Oct 2023 09:43:11 -0400
Subject: [PATCH] feat(i18n): fix to properly style code elements with
 translation

---
 packages/sanity/src/desk/i18n/resources.ts       |  4 ++--
 .../src/desk/panes/unknown/UnknownPaneType.tsx   | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
index 307cfc5b2bb..a30801bd2aa 100644
--- a/packages/sanity/src/desk/i18n/resources.ts
+++ b/packages/sanity/src/desk/i18n/resources.ts
@@ -170,11 +170,11 @@ const deskLocaleStrings = {
 
   /** The text to display when type is missing */
   'panes.unknown-pane-type.missing-type.text':
-    'Structure item is missing required <code>type</code> property.',
+    'Structure item is missing required <Code>type</Code> property.',
 
   /** The text to display when type is unknown */
   'panes.unknown-pane-type.unknown-type.text':
-    'Structure item of type <code>{{type}}</code> is not a known entity.',
+    'Structure item of type <Code>{{type}}</Code> is not a known entity.',
 }
 
 /**
diff --git a/packages/sanity/src/desk/panes/unknown/UnknownPaneType.tsx b/packages/sanity/src/desk/panes/unknown/UnknownPaneType.tsx
index 4173713d443..0e4f3580894 100644
--- a/packages/sanity/src/desk/panes/unknown/UnknownPaneType.tsx
+++ b/packages/sanity/src/desk/panes/unknown/UnknownPaneType.tsx
@@ -2,7 +2,7 @@ import {Box, Text} from '@sanity/ui'
 import React from 'react'
 import {Pane, PaneContent, PaneHeader} from '../../components/pane'
 import {deskLocaleNamespace} from '../../i18n'
-import {isRecord, useTranslation} from 'sanity'
+import {isRecord, Translate, useTranslation} from 'sanity'
 
 interface UnknownPaneProps {
   isSelected: boolean
@@ -17,7 +17,6 @@ export function UnknownPane(props: UnknownPaneProps) {
   const {isSelected, pane, paneKey} = props
   const type = (isRecord(pane) && pane.type) || null
   const {t} = useTranslation(deskLocaleNamespace)
-
   return (
     <Pane id={paneKey} selected={isSelected}>
       <PaneHeader title="Unknown pane type" />
@@ -25,11 +24,20 @@ export function UnknownPane(props: UnknownPaneProps) {
         <Box padding={4}>
           {typeof type === 'string' ? (
             <Text as="p" muted>
-              {t('panes.unknown-pane-type.unknown-type.text', {type: type})}
+              <Translate
+                t={t}
+                i18nKey="panes.unknown-pane-type.unknown-type.text"
+                components={{Code: ({children}) => <code>{children}</code>}}
+                values={{type}}
+              />
             </Text>
           ) : (
             <Text as="p" muted>
-              {t('panes.unknown-pane-type.missing-type.text')}
+              <Translate
+                t={t}
+                i18nKey="panes.unknown-pane-type.missing-type.text"
+                components={{Code: ({children}) => <code>{children}</code>}}
+              />
             </Text>
           )}
         </Box>