feat(i18n): updates translation for form/inputs/files

sanity-io · Nov 3, 2023 · 2b09cda · 2b09cda
1 parent 5ca2a30
commit 2b09cda
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}