From 2b09cdaff20baf454ee4b7de292ae2970026abb6 Mon Sep 17 00:00:00 2001
From: Tommy Petty <tommy.petty@gmail.com>
Date: Fri, 3 Nov 2023 16:00:16 -0400
Subject: [PATCH] feat(i18n): updates translation for form/inputs/files

---
 .../files/FileInput/FileActionsMenu.tsx       |  5 +-
 .../form/inputs/files/FileInput/FileInput.tsx | 27 ++++----
 .../files/FileInput/InvalidFileWarning.tsx    | 16 +++--
 .../inputs/files/ImageInput/ImageInput.tsx    | 12 ++--
 .../files/ImageInput/InvalidImageWarning.tsx  |  7 ++-
 .../files/ImageToolInput/ImageToolInput.tsx   |  8 ++-
 .../form/inputs/files/common/DropMessage.tsx  |  9 ++-
 .../inputs/files/common/UploadPlaceholder.tsx |  3 +-
 .../form/studio/inputs/StudioFileInput.tsx    |  5 +-
 .../sanity/src/core/i18n/bundles/studio.ts    | 62 +++++++++++++++++++
 packages/sanity/test/form/renderFileInput.tsx |  1 +
 11 files changed, 121 insertions(+), 34 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
index 7113c320d926..07156cd95605 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
@@ -13,6 +13,7 @@ import {
   useGlobalKeyDown,
 } from '@sanity/ui'
 import {formatBytes} from '../../common/helper'
+import {useTranslation} from '../../../../i18n'
 
 type Props = {
   children: ReactNode
@@ -87,6 +88,8 @@ export function FileActionsMenu(props: Props) {
     }
   }, [isMenuOpen, menuElement])
 
+  const {t} = useTranslation('sanity')
+
   return (
     <Flex wrap="nowrap" justify="space-between" align="center">
       <Card
@@ -126,7 +129,7 @@ export function FileActionsMenu(props: Props) {
             constrainSize
           >
             <Button
-              aria-label="Open file options menu"
+              aria-label={t('inputs.files.image.actions-menu.files.aria-label')}
               data-testid="options-menu-button"
               icon={EllipsisVerticalIcon}
               mode="bleed"
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
index d1f463ca7ac9..6155cd3919eb 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
@@ -64,6 +64,7 @@ export interface BaseFileInputProps extends ObjectInputProps<BaseFileInputValue,
   observeAsset: (documentId: string) => Observable<FileAsset>
   resolveUploader: UploaderResolver
   client: SanityClient
+  t: (key: string, values?: Record<string, string>) => string
 }
 
 /** @internal */
@@ -201,7 +202,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
     file: globalThis.File,
     assetDocumentProps: UploadOptions = {},
   ) => {
-    const {schemaType, onChange, client} = this.props
+    const {schemaType, onChange, client, t} = this.props
     const {source} = assetDocumentProps
     const options = {
       metadata: get(schemaType, 'options.metadata'),
@@ -222,8 +223,8 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
         console.error(err)
         this.toast?.push({
           status: 'error',
-          description: 'The upload could not be completed at this time.',
-          title: 'Upload failed',
+          description: t('inputs.files.file-input.upload-failed.description'),
+          title: t('inputs.files.file-input.upload-failed.title'),
         })
         this.clearUploadStatus()
       },
@@ -247,11 +248,10 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
 
   renderAssetSource() {
     const {selectedAssetSource} = this.state
-    const {value, schemaType, observeAsset} = this.props
+    const {value, schemaType, observeAsset, t} = this.props
     if (!selectedAssetSource) {
       return null
     }
-
     const accept = get(schemaType, 'options.accept', '')
 
     const Component = selectedAssetSource.component
@@ -268,7 +268,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
               selectionType="single"
               assetType="file"
               accept={accept}
-              dialogHeaderTitle="Select file"
+              dialogHeaderTitle={t('inputs.files.file-input.dialog.tile')}
               onClose={this.handleAssetSourceClosed}
               onSelect={this.handleSelectAssetFromSource}
             />
@@ -282,7 +282,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
         selectionType="single"
         assetType="file"
         accept={accept}
-        dialogHeaderTitle="Select file"
+        dialogHeaderTitle={t('inputs.files.file-input.dialog.tile')}
         onClose={this.handleAssetSourceClosed}
         onSelect={this.handleSelectAssetFromSource}
       />
@@ -381,7 +381,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
   }
 
   renderPreview() {
-    const {value, readOnly, assetSources, schemaType, directUploads, observeAsset} = this.props
+    const {value, readOnly, assetSources, schemaType, directUploads, observeAsset, t} = this.props
     const {isMenuOpen} = this.state
     const asset = value?.asset
     if (!asset) {
@@ -394,7 +394,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
       assetSources && assetSources?.length === 0 ? null : (
         <MenuItem
           icon={SearchIcon}
-          text="Browse"
+          text={t('inputs.files.file-input.browse-button.text')}
           onClick={() => {
             this.setState({isMenuOpen: false})
             this.handleSelectFileFromAssetSource(assetSources[0])
@@ -488,7 +488,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
   }
 
   renderBrowser() {
-    const {assetSources, readOnly, directUploads, id} = this.props
+    const {assetSources, readOnly, directUploads, id, t} = this.props
 
     if (assetSources.length === 0) return null
 
@@ -500,7 +500,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
           button={
             <Button
               mode="ghost"
-              text="Select"
+              text={t('inputs.files.file-input.multi-browse-button.text')}
               data-testid="file-input-multi-browse-button"
               icon={SearchIcon}
             />
@@ -532,7 +532,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
     return (
       <Button
         fontSize={2}
-        text="Browse"
+        text={t('inputs.files.file-input.browse-button.text')}
         icon={SearchIcon}
         mode="ghost"
         onClick={() => {
@@ -619,6 +619,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
       renderInput,
       renderField,
       renderPreview,
+      t,
     } = this.props
     const {selectedAssetSource} = this.state
 
@@ -666,7 +667,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
             return <MemberFieldError key={member.key} member={member} />
           }
           //@ts-expect-error all possible cases should be covered
-          return <>Unknown member kind: ${member.kind}</>
+          return <>{t('inputs.files.file-input.error.unknown-member-kind', {kind: member.kind})}</>
         })}
         {selectedAssetSource && this.renderAssetSource()}
       </>
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
index 378dddea50e0..e7dc2f1b685d 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
@@ -2,6 +2,7 @@ import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
+import {useTranslation} from '../../../../i18n'
 
 type Props = {
   onClearValue?: () => void
@@ -12,6 +13,7 @@ const ButtonWrapper = styled(Button)`
 `
 
 export function InvalidFileWarning({onClearValue}: Props) {
+  const {t} = useTranslation('sanity')
   return (
     <Card tone="caution" padding={4} border radius={2}>
       <Flex gap={4} marginBottom={4}>
@@ -22,15 +24,17 @@ export function InvalidFileWarning({onClearValue}: Props) {
         </Box>
         <Stack space={3}>
           <Text size={1} weight="semibold">
-            Invalid file value
-          </Text>
-          <Text size={1}>
-            The value of this field is not a valid file. Resetting this field will let you choose a
-            new file.
+            {t('inputs.files.file-input.invalid-file-warning.title')}
           </Text>
+          <Text size={1}>{t('inputs.files.file-input.invalid-file-warning.description')}</Text>
         </Stack>
       </Flex>
-      <ButtonWrapper icon={ResetIcon} text="Reset value" onClick={onClearValue} mode="ghost" />
+      <ButtonWrapper
+        icon={ResetIcon}
+        text={t('inputs.files.file-input.invalid-file-warning.reest-button.text')}
+        onClick={onClearValue}
+        mode="ghost"
+      />
     </Card>
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index 5c02b0f2c13c..60db889f7948 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -52,7 +52,6 @@ import {PresenceOverlay} from '../../../../presence'
 import {FIXME} from '../../../../FIXME'
 import {ImperativeToast} from '../../../../components'
 import {ChangeIndicator} from '../../../../changeIndicators'
-import {TFunction} from '../../../../i18n'
 import {ImageActionsMenu} from './ImageActionsMenu'
 import {ImagePreview} from './ImagePreview'
 import {InvalidImageWarning} from './InvalidImageWarning'
@@ -470,6 +469,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
       directUploads,
       imageUrlBuilder,
       observeAsset,
+      t,
     } = this.props
 
     const asset = value?.asset
@@ -485,7 +485,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
       assetSources && assetSources.length === 0 ? null : (
         <MenuItem
           icon={SearchIcon}
-          text="Select"
+          text={t('inputs.files.image.browse-menu.text')}
           onClick={() => {
             this.setState({isMenuOpen: false})
             this.handleSelectImageFromAssetSource(assetSources[0])
@@ -552,7 +552,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
   }
 
   renderBrowser() {
-    const {assetSources, readOnly, directUploads, id} = this.props
+    const {assetSources, readOnly, directUploads, id, t} = this.props
 
     if (assetSources && assetSources.length === 0) return null
 
@@ -567,7 +567,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
               icon={SearchIcon}
               iconRight={ChevronDownIcon}
               mode="ghost"
-              text="Select"
+              text={t('inputs.files.image.browse-menu.text')}
             />
           }
           menu={
@@ -597,7 +597,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
     return (
       <Button
         fontSize={2}
-        text="Select"
+        text={t('inputs.files.image.browse-menu.text')}
         icon={SearchIcon}
         mode="ghost"
         onClick={() => {
@@ -851,7 +851,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
             return <MemberFieldError key={member.key} member={member} />
           }
           //@ts-expect-error all possible cases should be covered
-          return <>Unknown member kind: ${member.kind}</>
+          return <>{t('inputs.files.image.error.unknown-member-kind', {kind: member.kind})}</>
         })}
         {hotspotField?.open && (
           <FormInput
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
index e2c93fb87c2d..eed2cba4de99 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
@@ -29,7 +29,12 @@ export function InvalidImageWarning({onClearValue}: Props) {
           <Text size={1}>{t('inputs.files.image.invalid-image-warning.description')}</Text>
         </Stack>
       </Flex>
-      <ButtonWrapper icon={ResetIcon} text="Reset value" onClick={onClearValue} mode="ghost" />
+      <ButtonWrapper
+        icon={ResetIcon}
+        text={t('inputs.files.image.invalid-image-warning.reset-button.text')}
+        onClick={onClearValue}
+        mode="ghost"
+      />
     </Card>
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
index 104c08cf3d2d..3e725f48bcd7 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
@@ -135,10 +135,14 @@ export function ImageToolInput(props: ImageToolInputProps) {
                 <LoadStatus>
                   {imageLoadError ? (
                     <Card padding={4} radius={2} tone="critical" border>
-                      <Text>Error: {imageLoadError.message}</Text>
+                      <Text>
+                        {t('inputs.files.imagetool.field.load-error', {
+                          errorMessage: imageLoadError.message,
+                        })}
+                      </Text>
                     </Card>
                   ) : (
-                    <Text muted>Loading image… </Text>
+                    <Text muted>{t('inputs.files.imagetool.field.loading')}</Text>
                   )}
                 </LoadStatus>
               )}
diff --git a/packages/sanity/src/core/form/inputs/files/common/DropMessage.tsx b/packages/sanity/src/core/form/inputs/files/common/DropMessage.tsx
index 109c39406012..04c72f3b9616 100644
--- a/packages/sanity/src/core/form/inputs/files/common/DropMessage.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/DropMessage.tsx
@@ -41,8 +41,9 @@ export function DropMessage(props: Props) {
                   <AccessDeniedIcon />
                 </Text>
                 <Text muted size={1}>
-                  {rejectedFilesCount} file
-                  {rejectedFilesCount > 1 ? 's' : ''} can't be uploaded here
+                  {t('inputs.files.common.drop-message.drop-to-upload.rejected-file-message', {
+                    count: rejectedFilesCount,
+                  })}
                 </Text>
               </Inline>
             </Box>
@@ -54,7 +55,9 @@ export function DropMessage(props: Props) {
             <AccessDeniedIcon />
           </Text>
           <Text>
-            Can't upload {hoveringFiles.length > 1 ? 'any of these files' : 'this file'} here
+            {t('inputs.files.common.drop-message.drop-to-upload.no-accepted-file-message', {
+              count: hoveringFiles.length,
+            })}
           </Text>
         </Inline>
       )}
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
index 6eba63b2a019..304fd3c300c8 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
@@ -36,6 +36,7 @@ function UploadPlaceholderComponent(props: UploadPlaceholderProps) {
 
   // Adjust the layout in narrow containers
   const collapsed = rect?.border && rect.border.width < 440
+  const {t} = useTranslation()
 
   return (
     <Flex
@@ -65,7 +66,7 @@ function UploadPlaceholderComponent(props: UploadPlaceholderProps) {
           icon={UploadIcon}
           mode="ghost"
           onSelect={onUpload}
-          text="Upload"
+          text={t('input.files.common.upload-placeholder.file-input-button.text')}
         />
 
         {browse}
diff --git a/packages/sanity/src/core/form/studio/inputs/StudioFileInput.tsx b/packages/sanity/src/core/form/studio/inputs/StudioFileInput.tsx
index 20d3a32feb09..f058d2f22cc9 100644
--- a/packages/sanity/src/core/form/studio/inputs/StudioFileInput.tsx
+++ b/packages/sanity/src/core/form/studio/inputs/StudioFileInput.tsx
@@ -8,13 +8,14 @@ import {FileLike} from '../uploads/types'
 import {useDocumentPreviewStore} from '../../../store'
 import {useClient} from '../../../hooks'
 import {observeFileAsset} from './client-adapters/assets'
+import {useTranslation} from '../../../i18n'
 
 /**
  * @hidden
  * @beta */
 export type FileInputProps = Omit<
   BaseFileInputProps,
-  'assetSources' | 'directUploads' | 'observeAsset' | 'resolveUploader' | 'client'
+  'assetSources' | 'directUploads' | 'observeAsset' | 'resolveUploader' | 'client' | 't'
 >
 
 /**
@@ -25,6 +26,7 @@ export function StudioFileInput(props: FileInputProps) {
   const documentPreviewStore = useDocumentPreviewStore()
   const {file: fileConfig} = useFormBuilder().__internal
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
+  const {t} = useTranslation()
 
   const resolveUploader = useCallback(
     (type: SchemaType, file: FileLike) => {
@@ -50,6 +52,7 @@ export function StudioFileInput(props: FileInputProps) {
   return (
     <BaseFileInput
       {...props}
+      t={t}
       client={client}
       assetSources={assetSources}
       directUploads={fileConfig.directUploads}
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 623d558d2875..84a3bd04ca9e 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -172,6 +172,9 @@ export const studioLocaleStrings = {
   /** Open image options menu */
   'inputs.files.image.actions-menu.options.label': 'Open image options menu',
 
+  /** Open file options menu */
+  'inputs.files.image.actions-menu.files.aria-label': 'Open file options menu',
+
   /** The upload could not be completed at this time. */
   'inputs.files.image.upload-error.description': 'The upload could not be completed at this time.',
 
@@ -200,6 +203,15 @@ export const studioLocaleStrings = {
   'inputs.files.image.invalid-image-warning.description':
     'The value of this field is not a valid image. Resetting this field will let you choose a new image.',
 
+  /** Reset value */
+  'inputs.files.image.invalid-image-warning.reset-button.text': 'Reset value',
+
+  /** Select */
+  'inputs.files.image.browse-menu.text': 'Select',
+
+  /** Unknown member kind: `{{kind}}` */
+  'inputs.files.image.error.unknown-member-kind': 'Unknown member kind: {{kind}}',
+
   /** The URL is copied to the clipboard */
   'inputs.files.common.actions-menu.notification.url-copied': 'The URL is copied to the clipboard',
 
@@ -249,9 +261,24 @@ export const studioLocaleStrings = {
   /** Drop to upload `{{count}}` files */
   'inputs.files.common.drop-message.drop-to-upload-multi_other': 'Drop to upload {{count}} files',
 
+  /** `{{count}}` file can't be uploaded here */
+  'inputs.files.common.drop-message.drop-to-upload.rejected-file-message_one': `{{count}} file can't be uploaded here`,
+
+  /** `{{count}}` files can't be uploaded here */
+  'inputs.files.common.drop-message.drop-to-upload.rejected-file-message_other': `{{count}} files can't be uploaded here`,
+
+  /** Can't upload this file here */
+  'inputs.files.common.drop-message.drop-to-upload.no-accepted-file-message_one': `Can't upload this file here`,
+
+  /** Can't upload any of these files here */
+  'inputs.files.common.drop-message.drop-to-upload.no-accepted-file-message_other': `Can't upload any of these files here`,
+
   /** Uploading <FileName/> */
   'input.files.common.upload-progress': 'Uploading <FileName/>',
 
+  /** Text for file input button in upload placeholder */
+  'input.files.common.upload-placeholder.file-input-button.text': 'Upload',
+
   /** Incomplete upload */
   'inputs.files.common.stale-upload-warning.title': 'Incomplete upload',
 
@@ -269,6 +296,41 @@ export const studioLocaleStrings = {
   'inputs.files.imagetool.field.description':
     'Adjust the rectangle to crop image. Adjust the circle to specify the area that should always be visible.',
 
+  /** Loading image… */
+  'inputs.files.imagetool.field.loading': 'Loading image…',
+
+  /** Error: `{{errorMessage}}` */
+  'inputs.files.imagetool.field.load-error': 'Error: {{errorMessage}}',
+
+  /** Select file */
+  'inputs.files.file-input.dialog.tile': 'Select file',
+
+  /** Browse */
+  'inputs.files.file-input.browse-button.text': 'Browse',
+
+  /** Select */
+  'inputs.files.file-input.multi-browse-button.text': 'Select',
+
+  /** Unknown member kind: `{{kind}}` */
+  'inputs.files.file-input.error.unknown-member-kind': 'Unknown member kind: {{kind}}',
+
+  /** Invalid file value */
+  'inputs.files.file-input.invalid-file-warning.title': 'Invalid file value',
+
+  /** The value of this field is not a valid file. Resetting this field will let you choose a new file. */
+  'inputs.files.file-input.invalid-file-warning.description':
+    'The value of this field is not a valid file. Resetting this field will let you choose a new file.',
+
+  /** Reset value */
+  'inputs.files.file-input.invalid-file-warning.reest-button.text': 'Reset value',
+
+  /** The upload could not be completed at this time. */
+  'inputs.files.file-input.upload-failed.description':
+    'The upload could not be completed at this time.',
+
+  /** Upload failed */
+  'inputs.files.file-input.upload-failed.title': 'Upload failed',
+
   /** --- Reference (and Cross-Dataset Reference) Input --- */
 
   /** Error title for when the search for a reference failed. Note that the message sent by the backend may not be localized. */
diff --git a/packages/sanity/test/form/renderFileInput.tsx b/packages/sanity/test/form/renderFileInput.tsx
index fc2920b3510a..a68670278cab 100644
--- a/packages/sanity/test/form/renderFileInput.tsx
+++ b/packages/sanity/test/form/renderFileInput.tsx
@@ -51,6 +51,7 @@ export async function renderFileInput(options: {
       ...restProps,
       assetSources,
       client,
+      t: (key: string, values?: Record<string, string>) => key,
       directUploads: true,
       observeAsset,
       resolveUploader,