fix(i18n): allow locale plugins to translate "All fields" field group (…

…#7117)

* fix(i18n): allow translating field group titles

* chore(test-studio): add field group translation debug

* chore(e2e): simplify e2e studio config

* test(i18n): add test for field group translations

dev/studio-e2e-testing/i18n/bundles.ts

@@ -0,0 +1,12 @@
+import {defineLocaleResourceBundle} from 'sanity'
+import {testStudioLocaleNamespace} from 'sanity-test-studio/locales'
+
+export const e2eI18nBundles = [
+  defineLocaleResourceBundle({
+    locale: 'en-US',
+    namespace: testStudioLocaleNamespace,
+    resources: {
+      'field-groups.group-1': '🇺🇸 Group 1',
+    },
+  }),
+]

dev/studio-e2e-testing/sanity.config.ts

@@ -1,7 +1,7 @@
 import {googleMapsInput} from '@sanity/google-maps-input'
 import {BookIcon} from '@sanity/icons'
 import {visionTool} from '@sanity/vision'
-import {defineConfig, definePlugin} from 'sanity'
+import {defineConfig} from 'sanity'
 import {structureTool} from 'sanity/structure'
 import {muxInput} from 'sanity-plugin-mux-input'
 import {imageAssetSource} from 'sanity-test-studio/assetSources'
@@ -16,10 +16,18 @@ import {presenceTool} from 'sanity-test-studio/plugins/presence'
 import {defaultDocumentNode, newDocumentOptions, structure} from 'sanity-test-studio/structure'
 
 import {customComponents} from './components-api'
+import {e2eI18nBundles} from './i18n/bundles'
 import {schemaTypes} from './schemaTypes'
 
-const sharedSettings = definePlugin({
-  name: 'sharedSettings',
+export default defineConfig({
+  name: 'default',
+  title: 'studio-e2e-testing',
+
+  projectId: process.env.SANITY_E2E_PROJECT_ID!,
+  dataset: process.env.SANITY_E2E_DATASET!,
+
+  basePath: '/test',
+
   schema: {
     types: schemaTypes,
     templates: resolveInitialValueTemplates,
@@ -30,6 +38,10 @@ const sharedSettings = definePlugin({
     },
   },
 
+  i18n: {
+    bundles: e2eI18nBundles,
+  },
+
   document: {
     actions: documentActions,
     inspectors: (prev, ctx) => {
@@ -90,14 +102,3 @@ const sharedSettings = definePlugin({
     },
   },
 })
-
-export default defineConfig({
-  name: 'default',
-  title: 'studio-e2e-testing',
-
-  projectId: process.env.SANITY_E2E_PROJECT_ID!,
-  dataset: process.env.SANITY_E2E_DATASET!,
-
-  plugins: [sharedSettings()],
-  basePath: '/test',
-})

dev/test-studio/locales/index.ts

@@ -11,6 +11,10 @@ const enUSStrings = {
   'translate.with-formatter': 'This value has a list-formatter: {{countries, list}}',
   'use-translation.with-html': 'Apparently, <code>code</code> is an HTML element?',
   'use-translation.interpolation-example': 'This has {{ spaces }} around it, this one {{doesNot}}',
+
+  // Used by `fieldGroupsWithI18n` debug schema type
+  'field-groups.group-1': '🇺🇸 Group 1',
+  'field-groups.group-2': '🇺🇸 Group 2',
 }
 
 const enUS = defineLocaleResourceBundle({
@@ -29,6 +33,10 @@ const nbNO = defineLocaleResourceBundle({
     'translate.with-xml-in-value':
       'Denne verdien har XML i en interpolert verdi: <strong>{{value}}</strong>',
     'use-translation.with-html': 'Faktisk er <code>code</code> et HTML-element?',
+
+    // Used by `fieldGroupsWithI18n` debug schema type
+    'field-groups.group-1': '🇳🇴 Gruppe 1',
+    'field-groups.group-2': '🇳🇴 Gruppe 2',
   },
 })
 
@@ -40,6 +48,14 @@ const nbNOBStructureOverrides = defineLocaleResourceBundle({
   },
 })
 
+const enUSStudioOverrides = defineLocaleResourceBundle({
+  locale: 'en-US',
+  namespace: 'studio',
+  resources: {
+    //'inputs.object.field-group-tabs.all-fields-title': 'அனைத்து துறைகள்',
+  },
+})
+
 export type TestStudioLocaleResourceKeys = keyof typeof enUSStrings
 
-export const testStudioLocaleBundles = [enUS, nbNO, nbNOBStructureOverrides]
+export const testStudioLocaleBundles = [enUS, nbNO, nbNOBStructureOverrides, enUSStudioOverrides]

dev/test-studio/schema/debug/fieldGroupsWithI18n.ts

@@ -0,0 +1,32 @@
+import {defineType} from 'sanity'
+
+import {testStudioLocaleNamespace} from '../../locales'
+
+export default defineType({
+  name: 'fieldGroupsWithI18n',
+  title: 'With i18n',
+  type: 'document',
+  groups: [
+    {
+      name: 'i18n-group1',
+      title: 'I18N-MISSING (1)',
+      i18n: {title: {key: 'field-groups.group-1', ns: testStudioLocaleNamespace}},
+    },
+    {
+      name: 'i18n-group2',
+      title: 'I18N-MISSING (2)',
+      i18n: {title: {key: 'intentionally-missing-key', ns: testStudioLocaleNamespace}},
+    },
+    {
+      name: 'non-i18n-group3',
+      title: '🌐 Non-i18n group',
+    },
+  ],
+  fields: [
+    {name: 'field1', type: 'string', group: 'i18n-group1'},
+    {name: 'field2', type: 'string', group: 'i18n-group2'},
+    {name: 'field3', type: 'string', group: 'i18n-group1'},
+    {name: 'field4', type: 'string', group: ['i18n-group1', 'i18n-group2']},
+    {name: 'field5', type: 'string', group: 'non-i18n-group3'},
+  ],
+})

dev/test-studio/schema/index.ts

@@ -32,6 +32,7 @@ import fieldGroupsDefault from './debug/fieldGroupsDefault'
 import fieldGroupsMany from './debug/fieldGroupsMany'
 import fieldGroupsWithFieldsets from './debug/fieldGroupsWithFieldsets'
 import fieldGroupsWithFieldsetsAndValidation from './debug/fieldGroupsWithFieldsetsAndValidation'
+import fieldGroupsWithI18n from './debug/fieldGroupsWithI18n'
 import fieldGroupsWithValidation from './debug/fieldGroupsWithValidation'
 import fieldsets from './debug/fieldsets'
 import {
@@ -249,6 +250,7 @@ export const schemaTypes = [
   fieldGroups,
   fieldGroupsDefault,
   fieldGroupsMany,
+  fieldGroupsWithI18n,
   fieldGroupsWithValidation,
   fieldGroupsWithFieldsetsAndValidation,
   virtualizationInObject,

dev/test-studio/structure/constants.ts

@@ -94,6 +94,7 @@ export const DEBUG_FIELD_GROUP_TYPES = [
   'fieldGroups',
   'fieldGroupsDefault',
   'fieldGroupsMany',
+  'fieldGroupsWithI18n',
   'fieldGroupsWithValidation',
   'fieldGroupsWithFieldsets',
   'fieldGroupsWithFieldsetsAndValidation',

packages/@sanity/types/src/schema/definition/type/common.ts

@@ -1,6 +1,6 @@
 import {type ComponentType, type ReactElement, type ReactNode} from 'react'
 
-import {type ConditionalProperty, type DeprecatedProperty} from '../../types'
+import {type ConditionalProperty, type DeprecatedProperty, type I18nTextRecord} from '../../types'
 import {type ObjectOptions} from './object'
 
 /** @public */
@@ -21,6 +21,7 @@ export type FieldGroupDefinition = {
   hidden?: ConditionalProperty
   icon?: ComponentType
   default?: boolean
+  i18n?: I18nTextRecord<'title'>
 }
 
 /** @public */

packages/@sanity/types/src/schema/types.ts

@@ -105,7 +105,7 @@ export interface SortOrderingItem {
   direction: 'asc' | 'desc'
 }
 
-/** @beta */
+/** @public */
 export type I18nTextRecord<K extends string> = {[P in K]?: {key: string; ns: string}}
 
 /** @beta */
@@ -388,6 +388,7 @@ export interface FieldGroup {
   icon?: ComponentType
   title?: string
   description?: string
+  i18n?: I18nTextRecord<'title'>
   hidden?: ConditionalProperty
   default?: boolean
   fields?: ObjectField[]

packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/FieldGroupTabs.tsx

@@ -38,25 +38,32 @@ const GroupTabs = ({
   onClick,
   shouldAutoFocus = true,
   disabled,
-}: FieldGroupTabsProps) => (
-  <TabList space={2} data-testid="field-group-tabs">
-    {groups.map((group) => {
-      return (
-        <GroupTab
-          aria-controls={`${inputId}-field-group-fields`}
-          autoFocus={shouldAutoFocus && group.selected}
-          disabled={disabled || group.disabled}
-          icon={group?.icon}
-          key={`${inputId}-${group.name}-tab`}
-          name={group.name}
-          onClick={onClick}
-          selected={Boolean(group.selected)}
-          title={group.title || group.name}
-        />
-      )
-    })}
-  </TabList>
-)
+}: FieldGroupTabsProps) => {
+  const {t} = useTranslation()
+  return (
+    <TabList space={2} data-testid="field-group-tabs">
+      {groups.map((group) => {
+        const title = group.i18n?.title
+          ? t(group.i18n.title.key, {ns: group.i18n.title.ns})
+          : group.title || group.name
+
+        return (
+          <GroupTab
+            aria-controls={`${inputId}-field-group-fields`}
+            autoFocus={shouldAutoFocus && group.selected}
+            disabled={disabled || group.disabled}
+            icon={group?.icon}
+            key={`${inputId}-${group.name}-tab`}
+            name={group.name}
+            onClick={onClick}
+            selected={Boolean(group.selected)}
+            title={title}
+          />
+        )
+      })}
+    </TabList>
+  )
+}
 
 /* For small screens, use Select from Sanity UI  */
 const GroupSelect = ({
@@ -87,15 +94,18 @@ const GroupSelect = ({
       value={groups.find((g) => g.selected)?.name}
     >
       {groups.map((group) => {
-        // Separate hidden in order to resolve it to a boolean type
+        const title = group.i18n?.title
+          ? t(group.i18n.title.key, {ns: group.i18n.title.ns})
+          : group.title || group.name
+
         return (
           <GroupOption
             aria-controls={`${inputId}-field-group-fields`}
             disabled={group.disabled}
             key={`${inputId}-${group.name}-tab`}
             name={group.name}
             selected={Boolean(group.selected)}
-            title={group.title || group.name}
+            title={title}
           />
         )
       })}

packages/sanity/src/core/form/store/constants.ts

@@ -1,5 +1,7 @@
 import {type FieldGroup} from '@sanity/types'
 
+import {studioLocaleNamespace} from '../../i18n/localeNamespaces'
+
 /**
  * Max supported field depth. Fields deeper than this will be considered hidden.
  */
@@ -14,4 +16,10 @@ export const ALL_FIELDS_GROUP: FieldGroup = {
   name: 'all-fields',
   title: 'All fields',
   hidden: false,
+  i18n: {
+    title: {
+      key: 'inputs.object.field-group-tabs.all-fields-title',
+      ns: studioLocaleNamespace,
+    },
+  },
 }

packages/sanity/src/core/form/store/formState.ts

@@ -575,6 +575,7 @@ function prepareObjectInputState<T>(
             name: group.name,
             selected,
             title: group.title,
+            i18n: group.i18n,
           },
         ]
   })

packages/sanity/src/core/form/store/types/fieldGroup.ts

@@ -1,3 +1,4 @@
+import {type I18nTextRecord} from '@sanity/types'
 import {type ComponentType} from 'react'
 
 /**
@@ -8,5 +9,6 @@ export interface FormFieldGroup {
   selected?: boolean
   disabled?: boolean
   title?: string
+  i18n?: I18nTextRecord<'title'>
   icon?: ComponentType
 }

packages/sanity/src/core/i18n/bundles/studio.ts

@@ -660,7 +660,9 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.invalid-value.reset-button.text': 'Reset value',
   /** Invalid property value */
   'inputs.invalid-value.title': 'Invalid property value',
-  /** Field groups */
+  /** Title for the "All fields" field group */
+  'inputs.object.field-group-tabs.all-fields-title': 'All fields',
+  /** Aria label for the "Field groups" select control on smaller screens */
   'inputs.object.field-group-tabs.aria-label': 'Field groups',
   /** Read-only field description */
   'inputs.object.unknown-fields.read-only.description':

test/e2e/tests/inputs/object.spec.ts

@@ -0,0 +1,15 @@
+import {expect} from '@playwright/test'
+import {test} from '@sanity/test'
+
+test('fields groups can use/not use i18n titles', async ({page, createDraftDocument}) => {
+  await createDraftDocument('/test/content/input-debug;field-groups;fieldGroupsWithI18n')
+
+  await expect(await page.getByTestId(`group-tab-i18n-group1`)).toBeVisible()
+
+  // Should be translated (see e2e studio `i18n/bundles`)
+  await expect(page.getByTestId('group-tab-i18n-group1')).toHaveText('🇺🇸 Group 1')
+  // Should intentionally not be translated, eg show the missing key
+  await expect(page.getByTestId('group-tab-i18n-group2')).toHaveText('intentionally-missing-key')
+  // Should show defined title if no `i18n` key is defined
+  await expect(page.getByTestId('group-tab-non-i18n-group3')).toHaveText('🌐 Non-i18n group')
+})