feat(DatasetFiles): add internationalization

public/locales/en/files.json

@@ -1,8 +1,34 @@
 {
-  "metadataReleased": "Metadata Released",
-  "published": "Published",
-  "deposited": "Deposited",
-  "embargoedWillBeUntil": "Draft: will be embargoed until",
-  "embargoedUntil": "Embargoed until",
-  "embargoedWasThrough": "Was embargoed until"
+  "filesLoading": "Files loading spinner symbol",
+  "table": {
+    "pagination": {
+      "pageSize": "Files per page"
+    },
+    "tabularData": {
+      "variables": "Variables",
+      "observations": "Observations"
+    },
+    "embargoDate": {
+      "embargoedWillBeUntil": "Draft: will be embargoed until",
+      "embargoedUntil": "Embargoed until",
+      "embargoedWasThrough": "Was embargoed until"
+    },
+    "downloads": "Downloads",
+    "date": {
+      "metadataReleased": "Metadata Released",
+      "published": "Published",
+      "deposited": "Deposited"
+    },
+    "thumbnail": {
+      "restricted": {
+        "locked": "Locked File Icon",
+        "unlocked": "Unlocked File Icon"
+      }
+    },
+    "copyToClipboard": {
+      "clickToCopy": "Click to copy",
+      "correctlyCopiedIcon": "Correctly copied to clipboard icon",
+      "copyToClipboardIcon": "Copy to clipboard icon"
+    }
+  }
 }

src/sections/dataset/dataset-files/DatasetFiles.tsx

@@ -3,7 +3,7 @@ import { FileRepository } from '../../../files/domain/repositories/FileRepositor
 import { useFiles } from './useFiles'
 import { useEffect } from 'react'
 import { FilesTable } from './files-table/FilesTable'
-import { SpinnerSymbol } from './SpinnerSymbol'
+import { SpinnerSymbol } from './files-table/spinner-symbol/SpinnerSymbol'
 
 interface DatasetFilesProps {
   filesRepository: FileRepository

src/sections/dataset/dataset-files/files-table/file-info-cell/FileDate.tsx

@@ -6,7 +6,7 @@ export function FileDate({ date }: { date: FileDateModel }) {
   return (
     <div>
       <span>
-        {t(date.type)} {date.date}
+        {t(`table.date.${date.type}`)} {date.date}
       </span>
     </div>
   )

src/sections/dataset/dataset-files/files-table/file-info-cell/FileDownloads.tsx

@@ -1,17 +1,21 @@
 import { FileStatus } from '../../../../../files/domain/models/File'
+import { useTranslation } from 'react-i18next'
 
 interface FileDownloadsProps {
   downloads: number
   status: FileStatus
 }
 export function FileDownloads({ downloads, status }: FileDownloadsProps) {
+  const { t } = useTranslation('files')
   if (status !== FileStatus.RELEASED) {
     return <></>
   }
 
   return (
     <div>
-      <span>{downloads} Downloads</span>
+      <span>
+        {downloads} {t('table.downloads')}
+      </span>
     </div>
   )
 }

src/sections/dataset/dataset-files/files-table/file-info-cell/FileEmbargoDate.tsx

@@ -24,8 +24,10 @@ export function FileEmbargoDate({ embargo, status }: FileEmbargoDateProps) {
 
 const embargoTypeOfDate = (embargoIsActive: boolean, status: FileStatus) => {
   if (status === FileStatus.RELEASED) {
-    return embargoIsActive ? 'embargoedUntil' : 'embargoedWasThrough'
+    return embargoIsActive
+      ? 'table.embargoDate.embargoedUntil'
+      : 'table.embargoDate.embargoedWasThrough'
   }
 
-  return 'embargoedWillBeUntil'
+  return 'table.embargoDate.embargoedWillBeUntil'
 }

src/sections/dataset/dataset-files/files-table/file-info-cell/FileTabularData.tsx

@@ -1,18 +1,21 @@
 import { FileTabularData as FileTabularDataModel } from '../../../../../files/domain/models/File'
 import { CopyToClipboardButton } from './copy-to-clipboard-button/CopyToClipboardButton'
+import { useTranslation } from 'react-i18next'
 
 export function FileTabularData({
   tabularData
 }: {
   tabularData: FileTabularDataModel | undefined
 }) {
+  const { t } = useTranslation('files')
   if (!tabularData) {
     return <></>
   }
   return (
     <div>
-      {tabularData.variablesCount} Variables, {tabularData.observationsCount} Observations{' '}
-      {tabularData.unf} <CopyToClipboardButton text={tabularData.unf} />
+      {tabularData.variablesCount} {t('table.tabularData.variables')},{' '}
+      {tabularData.observationsCount} {t('table.tabularData.observations')} {tabularData.unf}{' '}
+      <CopyToClipboardButton text={tabularData.unf} />
     </div>
   )
 }

src/sections/dataset/dataset-files/files-table/file-info-cell/copy-to-clipboard-button/CopyToClipboardButton.tsx

@@ -2,8 +2,10 @@ import { Check, ClipboardPlusFill } from 'react-bootstrap-icons'
 import { OverlayTrigger } from 'dataverse-design-system'
 import { useState } from 'react'
 import styles from './CopyToClipboard.module.scss'
+import { useTranslation } from 'react-i18next'
 
 export function CopyToClipboardButton({ text }: { text: string }) {
+  const { t } = useTranslation('files')
   const [copied, setCopied] = useState(false)
   const copyToClipboard = () => {
     navigator.clipboard
@@ -19,12 +21,16 @@ export function CopyToClipboardButton({ text }: { text: string }) {
   }
 
   return (
-    <OverlayTrigger placement="top" message={`Click to copy ${text}`}>
+    <OverlayTrigger placement="top" message={`${t('table.copyToClipboard.clickToCopy')} ${text}`}>
       <span onClick={copyToClipboard} className={styles.container} role="button">
         {copied ? (
-          <Check className={styles.check} role="img" title="Correctly copied to clipboard icon" />
+          <Check
+            className={styles.check}
+            role="img"
+            title={t('table.copyToClipboard.correctlyCopiedIcon')}
+          />
         ) : (
-          <ClipboardPlusFill role="img" title="Copy to clipboard icon" />
+          <ClipboardPlusFill role="img" title={t('table.copyToClipboard.copyToClipboardIcon')} />
         )}
       </span>
     </OverlayTrigger>

src/sections/dataset/dataset-files/files-table/file-info-cell/file-thumbnail/FileThumbnailRestrictedIcon.tsx

@@ -1,18 +1,28 @@
 import { Lock, Unlock } from 'react-bootstrap-icons'
 import styles from './FileThumbnail.module.scss'
+import { useTranslation } from 'react-i18next'
 
 export function FileThumbnailRestrictedIcon({ locked }: { locked: boolean }) {
+  const { t } = useTranslation('files')
   if (locked) {
     return (
       <div>
-        <Lock className={styles.thumbnail__locked} role="img" title="Locked File Icon" />
+        <Lock
+          className={styles.thumbnail__locked}
+          role="img"
+          title={t('table.thumbnail.restricted.locked')}
+        />
       </div>
     )
   }
 
   return (
     <div>
-      <Unlock className={styles.thumbnail__unlocked} role="img" title="Unlocked File Icon" />
+      <Unlock
+        className={styles.thumbnail__unlocked}
+        role="img"
+        title={t('table.thumbnail.restricted.unlocked')}
+      />
     </div>
   )
 }

src/sections/dataset/dataset-files/files-table/spinner-symbol/SpinnerSymbol.module.scss

@@ -0,0 +1,3 @@
+.container {
+    justify-content: center;
+}

src/sections/dataset/dataset-files/SpinnerSymbol.tsx → src/sections/dataset/dataset-files/files-table/spinner-symbol/SpinnerSymbol.tsx

@@ -1,15 +1,18 @@
 import { Col, Row, useTheme } from 'dataverse-design-system'
 import { TailSpin } from 'react-loader-spinner'
+import styles from './SpinnerSymbol.module.scss'
+import { useTranslation } from 'react-i18next'
 
 export function SpinnerSymbol() {
   const theme = useTheme()
+  const { t } = useTranslation('files')
   return (
-    <Row className="justify-content-md-center">
+    <Row className={styles.container}>
       <Col md="auto">
         <TailSpin
           height="30"
           width="30"
-          ariaLabel="tail-spin-loading"
+          ariaLabel={t('filesLoading')}
           color={theme.color.primary}
           radius="1"
           wrapperStyle={{}}

src/sections/dataset/dataset-files/files-table/table-pagination/PageSizeSelector.tsx

@@ -1,4 +1,5 @@
 import styles from './TablePagination.module.scss'
+import { useTranslation } from 'react-i18next'
 
 export function PageSizeSelector({
   pageSize,
@@ -7,18 +8,21 @@ export function PageSizeSelector({
   pageSize: number
   setPageSize: (pageSize: number) => void
 }) {
+  const { t } = useTranslation('files')
+  const availableSizes = [10, 25, 50]
+
   return (
     <div className={styles['size-selector-container']}>
-      <label htmlFor="page-size-selector" className={styles['size-selector-container__text']}>
-        Files per page
+      <label htmlFor="files-per-page-selector" className={styles['size-selector-container__text']}>
+        {t('table.pagination.pageSize')}
       </label>
       <select
-        id="page-size-selector"
+        id="files-per-page-selector"
         value={pageSize}
         onChange={(e) => {
           setPageSize(Number(e.target.value))
         }}>
-        {[10, 25, 50].map((pageSize) => (
+        {availableSizes.map((pageSize) => (
           <option key={pageSize} value={pageSize}>
             {pageSize}
           </option>

src/stories/files/FileMockLoadingRepository.ts

@@ -4,7 +4,7 @@ import { File } from '../../files/domain/models/File'
 export class FileMockLoadingRepository implements FileRepository {
   // eslint-disable-next-line unused-imports/no-unused-vars
   getAllByDatasetPersistentId(persistentId: string, version?: string): Promise<File[]> {
-    return new Promise((resolve) => {
+    return new Promise(() => {
       setTimeout(() => {
         // Do nothing
       }, 0)