Translate dialogs (publish, delete, rename, unsaved changes, etc)

okfn · Nov 28, 2024 · 4a0d3ff · 4a0d3ff
1 parent 34ac802
commit 4a0d3ff
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 82 deletions.
diff --git a/client/components/Application/Dialogs/AddEmptyFolder.tsx b/client/components/Application/Dialogs/AddEmptyFolder.tsx
@@ -1,16 +1,19 @@
 import InputDialog from '../../Parts/Dialogs/Input'
 import * as store from '@client/store'
+import { useTranslation } from 'react-i18next'
 
 export default function AddEmptyFolderDialog() {
   const folderPath = store.useStore(store.getFolderPath)
 
+  const { t } = useTranslation()
+
   return (
     <InputDialog
       open={true}
       value={folderPath}
-      title="Create new folder"
-      label="Create"
-      placholder="Name of the new folder"
+      title={t('create-new-folder')}
+      label={t('create')}
+      placholder={t('name-new-folder')}
       onCancel={store.closeDialog}
       onConfirm={async (path) => {
         await store.createFolder(path)

diff --git a/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx b/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx
@@ -1,6 +1,7 @@
 import DangerousIcon from '@mui/icons-material/Dangerous'
 import TwoButtonDialog from '../../Parts/Dialogs/TwoButton'
 import * as store from '@client/store'
+import { useTranslation } from 'react-i18next'
 
 export default function CloseWithUnsavedChangesDialog() {
   const onSave = async () => {
@@ -13,14 +14,16 @@ export default function CloseWithUnsavedChangesDialog() {
     store.closeDesktopApp()
   }
 
+  const { t } = useTranslation()
+
   return (
     <TwoButtonDialog
       open={true}
-      title="Unsaved Changes"
-      cancelLabel="Discard"
-      label="Save"
+      title={t('unsaved-changes')}
+      cancelLabel={t('discard')}
+      label={t('save')}
       Icon={DangerousIcon}
-      description="There are unsaved changes. Please, click save or cancel."
+      description={t('unsaved-changes-dialog-description')}
       onCancel={onDiscard}
       onConfirm={onSave}
       disableClosing={true}

diff --git a/client/components/Application/Dialogs/DeleteFilesFolders.tsx b/client/components/Application/Dialogs/DeleteFilesFolders.tsx
@@ -1,12 +1,16 @@
 import TwoButtonDialog from '../../Parts/Dialogs/TwoButton'
 import * as store from '@client/store'
+import { useTranslation } from 'react-i18next'
 
 export default function DeleteFilesFoldersDialog() {
   const path = store.useStore((state) => state.path)
   const files = store.useStore((state) => state.files)
   const selectedMultiplePaths = store.useStore((state) => state.selectedMultiplePaths)
   const isFolder = store.useStore(store.getIsFolder)
 
+  const { t } = useTranslation()
+  const fileOrFolder = isFolder ? t('folder') : t('file')
+
   const selectedFolders = files
     .filter((file) => {
       return selectedMultiplePaths?.includes(file.path) && file.type === 'folder'
@@ -24,15 +28,15 @@ export default function DeleteFilesFoldersDialog() {
   return (
     <TwoButtonDialog
       open={true}
-      title="Delete File"
+      title={t('delete-filefolder', { fileOrFolder })}
       description={
         selectedMultiplePaths
-          ? 'Are you sure you want to delete these elements?'
-          : `Are you sure you want to delete this ${isFolder ? 'folder' : 'file'}?`
+          ? t('are-you-sure-delete-elements')
+          : t('are-you-sure-delete-filefolder', { fileOrFolder })
       }
-      label="Delete"
+      label={t('delete')}
       hoverBgButtonColor="OKFNRed600"
-      cancelLabel="No"
+      cancelLabel={t('no')}
       onCancel={store.closeDialog}
       onConfirm={async () => {
         if (selectedMultiplePaths) {

diff --git a/client/components/Application/Dialogs/Publish.tsx b/client/components/Application/Dialogs/Publish.tsx
@@ -8,6 +8,7 @@ import OneButtonDialog from '../../Parts/Dialogs/OneButton'
 import PortalEditor from '../../Editors/Portal'
 import * as helpers from '../../../helpers'
 import * as types from '../../../types'
+import { useTranslation } from 'react-i18next'
 
 type IState = 'form' | 'load' | 'done' | 'fail'
 
@@ -28,13 +29,15 @@ export default function PublishDialog() {
     setPublishedUrl(url)
   }
 
+  const { t } = useTranslation()
+
   return (
     <OneButtonDialog
       open={true}
       disabled={!control}
       maxWidth="md"
-      title="Publish Dataset"
-      label={publishedUrl ? 'OK' : 'Publish'}
+      title={t('publish-dataset')}
+      label={publishedUrl ? t('ok') : t('publish')}
       Icon={CheckIcon}
       onCancel={handleClose}
       onConfirm={publishedUrl ? handleClose : handlePublish}

diff --git a/client/components/Application/Dialogs/RenameFile.tsx b/client/components/Application/Dialogs/RenameFile.tsx
@@ -1,17 +1,22 @@
 import InputDialog from '../../Parts/Dialogs/Input'
 import * as store from '@client/store'
+import { useTranslation } from 'react-i18next'
 
 export default function RenameFileDialog() {
   const currentFilePath = store.useStore((state) => state.path)
+
   const isFolder = store.useStore(store.getIsFolder)
 
+  const { t } = useTranslation()
+  const fileOrFolder = isFolder ? t('folder') : t('file')
+
   return (
     <InputDialog
       open={true}
       value=""
-      title={`Rename ${isFolder ? 'folder' : 'file'}`}
-      label="Save"
-      placholder={`Name of new ${isFolder ? 'folder' : 'file'}`}
+      title={t('rename-filefolder', { fileOrFolder })}
+      label={t('save')}
+      placholder={t('name-new-filefolder', { fileOrFolder })}
       onCancel={store.closeDialog}
       onConfirm={async (newPath) => {
         if (currentFilePath)

diff --git a/client/components/Application/Dialogs/UnsavedChanges.tsx b/client/components/Application/Dialogs/UnsavedChanges.tsx
@@ -1,6 +1,7 @@
 import DangerousIcon from '@mui/icons-material/Dangerous'
 import TwoButtonDialog from '../../Parts/Dialogs/TwoButton'
 import * as store from '@client/store'
+import { useTranslation } from 'react-i18next'
 
 export default function UnsavedChangesDialog() {
   const onSave = async () => {
@@ -13,14 +14,16 @@ export default function UnsavedChangesDialog() {
     store.closeDialog()
   }
 
+  const { t } = useTranslation()
+
   return (
     <TwoButtonDialog
       open={true}
-      title="Unsaved Changes"
-      cancelLabel="Discard"
-      label="Save"
+      title={t('unsaved-changes')}
+      cancelLabel={t('discard')}
+      label={t('save')}
       Icon={DangerousIcon}
-      description="There are unsaved changes. Please, click save or cancel."
+      description={t('unsaved-changes-dialog-description')}
       onCancel={onDiscard}
       onConfirm={onSave}
     />

diff --git a/client/components/Editors/Portal/Sections/Ckan.tsx b/client/components/Editors/Portal/Sections/Ckan.tsx
@@ -3,6 +3,7 @@ import InputField from '../../../Parts/Fields/Input'
 import YesNoField from '../../../Parts/Fields/YesNo'
 import { useStore } from '../store'
 import Box from '@mui/material/Box'
+import { useTranslation } from 'react-i18next'
 
 export default function CkanSection() {
   const updateHelp = useStore((state) => state.updateHelp)
@@ -21,12 +22,13 @@ export default function CkanSection() {
 }
 
 function Baseurl() {
+  const { t } = useTranslation()
   const baseurl = useStore((state) => state.descriptor.ckan?.baseurl)
   const updateCkan = useStore((state) => state.updateCkan)
   return (
     <InputField
       required
-      label="Base Url"
+      label={t('base-url')}
       value={baseurl || ''}
       onChange={(value) => updateCkan({ baseurl: value || undefined })}
     />
@@ -36,10 +38,11 @@ function Baseurl() {
 function Dataset() {
   const dataset = useStore((state) => state.descriptor.ckan?.dataset)
   const updateCkan = useStore((state) => state.updateCkan)
+  const { t } = useTranslation()
   return (
     <InputField
       required
-      label="Dataset"
+      label={t('dataset')}
       value={dataset || ''}
       onChange={(value) => updateCkan({ dataset: value || undefined })}
     />
@@ -49,9 +52,10 @@ function Dataset() {
 function AllowUpdate() {
   const allowUpdate = useStore((state) => state.descriptor.ckan?.allowUpdate)
   const updateCkan = useStore((state) => state.updateCkan)
+  const { t } = useTranslation()
   return (
     <YesNoField
-      label="Allow Update"
+      label={t('allow-update')}
       value={allowUpdate || false}
       onChange={(value) => updateCkan({ allowUpdate: value })}
     />
@@ -61,11 +65,12 @@ function AllowUpdate() {
 function Apikey() {
   const apikey = useStore((state) => state.descriptor.ckan?.apikey)
   const updateCkan = useStore((state) => state.updateCkan)
+  const { t } = useTranslation()
   return (
     <InputField
       type="password"
       required
-      label="API Key"
+      label={t('api-key')}
       value={apikey || ''}
       onChange={(value) => updateCkan({ apikey: value || undefined })}
     />

diff --git a/client/components/Editors/Portal/Sections/Github.tsx b/client/components/Editors/Portal/Sections/Github.tsx
@@ -2,6 +2,7 @@ import EditorSection from '../../Base/Section'
 import InputField from '../../../Parts/Fields/Input'
 import { useStore } from '../store'
 import Box from '@mui/material/Box'
+import { useTranslation } from 'react-i18next'
 
 export default function GithubSection() {
   const updateHelp = useStore((state) => state.updateHelp)
@@ -23,10 +24,11 @@ export default function GithubSection() {
 function User() {
   const user = useStore((state) => state.descriptor.github?.user)
   const updateGithub = useStore((state) => state.updateGithub)
+  const { t } = useTranslation()
   return (
     <InputField
       required
-      label="User"
+      label={t('user')}
       value={user || ''}
       onChange={(value) => updateGithub({ user: value || undefined })}
     />
@@ -36,10 +38,11 @@ function User() {
 function Repo() {
   const repo = useStore((state) => state.descriptor.github?.repo)
   const updateGithub = useStore((state) => state.updateGithub)
+  const { t } = useTranslation()
   return (
     <InputField
       required
-      label="Repo"
+      label={t('repo')}
       value={repo || ''}
       onChange={(value) => updateGithub({ repo: value || undefined })}
     />
@@ -49,9 +52,10 @@ function Repo() {
 function Email() {
   const email = useStore((state) => state.descriptor.github?.email)
   const updateGithub = useStore((state) => state.updateGithub)
+  const { t } = useTranslation()
   return (
     <InputField
-      label="Email"
+      label={t('email')}
       value={email || ''}
       onChange={(value) => updateGithub({ email: value || undefined })}
     />
@@ -61,11 +65,12 @@ function Email() {
 function Apikey() {
   const apikey = useStore((state) => state.descriptor.github?.apikey)
   const updateGithub = useStore((state) => state.updateGithub)
+  const { t } = useTranslation()
   return (
     <InputField
       required
       type="password"
-      label="API Key"
+      label={t('api-key')}
       value={apikey || ''}
       onChange={(value) => updateGithub({ apikey: value || undefined })}
     />

diff --git a/client/components/Editors/Portal/Sections/Zenodo.tsx b/client/components/Editors/Portal/Sections/Zenodo.tsx
@@ -3,6 +3,7 @@ import MultilineField from '../../../Parts/Fields/Multiline'
 import InputField from '../../../Parts/Fields/Input'
 import { useStore } from '../store'
 import Box from '@mui/material/Box'
+import { useTranslation } from 'react-i18next'
 
 export default function ZenodoSection() {
   const updateHelp = useStore((state) => state.updateHelp)
@@ -24,10 +25,11 @@ export default function ZenodoSection() {
 function Title() {
   const title = useStore((state) => state.descriptor.zenodo?.title)
   const updateZenodo = useStore((state) => state.updateZenodo)
+  const { t } = useTranslation()
   return (
     <InputField
       required
-      label="Title"
+      label={t('title')}
       value={title || ''}
       onChange={(value) => updateZenodo({ title: value || undefined })}
     />
@@ -37,10 +39,11 @@ function Title() {
 function Description() {
   const description = useStore((state) => state.descriptor.zenodo?.description)
   const updateZenodo = useStore((state) => state.updateZenodo)
+  const { t } = useTranslation()
   return (
     <MultilineField
       required
-      label="Description"
+      label={t('description')}
       value={description || ''}
       onChange={(value) => updateZenodo({ description: value || undefined })}
     />
@@ -50,10 +53,11 @@ function Description() {
 function Author() {
   const author = useStore((state) => state.descriptor.zenodo?.author)
   const updateZenodo = useStore((state) => state.updateZenodo)
+  const { t } = useTranslation()
   return (
     <InputField
       required
-      label="Author"
+      label={t('author')}
       value={author || ''}
       onChange={(value) => updateZenodo({ author: value || undefined })}
     />
@@ -63,11 +67,12 @@ function Author() {
 function Apikey() {
   const apikey = useStore((state) => state.descriptor.zenodo?.apikey)
   const updateZenodo = useStore((state) => state.updateZenodo)
+  const { t } = useTranslation()
   return (
     <InputField
       required
       type="password"
-      label="API Key"
+      label={t('api-key')}
       value={apikey || ''}
       onChange={(value) => updateZenodo({ apikey: value || undefined })}
     />