Finish i18n initial integration

Makefile

@@ -63,6 +63,10 @@ test:
 	hatch run test
 	npm run test
 
+## Runs the translation script to update the translation files.
+translate:
+	npm run translate
+
 ## Runs the E2E suite of tests (requires make dist for an application bundle)
 test-e2e:
 	npm run wdio

client/components/Application/Content.tsx

@@ -8,11 +8,11 @@ import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
+import { Trans, useTranslation } from 'react-i18next'
 import emptyContentScreenImg from '../../assets/empty_screen.png'
 import File from '../Controllers/File'
 import Table from '../Controllers/Table'
 import SpinnerCard from '../Parts/Cards/Spinner'
-import { useTranslation, Trans } from 'react-i18next'
 
 export default function Content() {
   const record = store.useStore((state) => state.record)

client/components/Application/Dialogs/Assistant/store.ts

@@ -1,14 +1,15 @@
 import { client } from '@client/client'
 import * as helpers from '@client/helpers'
 import * as appStore from '@client/store'
-import invariant from 'tiny-invariant'
+import * as types from '@client/types'
 import { t } from 'i18next'
+import invariant from 'tiny-invariant'
 
 // We use component level state because dialog state
 // needs to be shared between multiple components
 // but it is not needed in the global state
 class State {
-  progress?: IProgress
+  progress?: types.IProgress
   isTermsAccepted?: boolean
   apiKey?: string
   prompt?: string
@@ -22,12 +23,6 @@ class State {
   }
 }
 
-type IProgress = {
-  type: 'generating' | 'error'
-  message?: string
-  blocking?: boolean
-}
-
 export const { state, useState, resetState } = helpers.createState(
   'AssistantDialog',
   new State()
@@ -52,6 +47,7 @@ export async function setPromptAndFetchResult(props: { prompt: string }) {
 
   state.progress = {
     type: 'generating',
+    title: t('generating'),
     message: t('generating-response'),
     blocking: true,
   }

client/components/Application/Dialogs/CreateFolder/store.ts

@@ -2,6 +2,7 @@ import { client } from '@client/client'
 import * as helpers from '@client/helpers'
 import * as appStore from '@client/store'
 import * as types from '@client/types'
+import { t } from 'i18next'
 
 class State {
   progress?: types.IProgress
@@ -21,7 +22,7 @@ export function closeDialog() {
 export async function createFolder(path: string) {
   state.progress = {
     type: 'creating',
-    title: 'Creating a folder',
+    title: t('creating-folder'),
     blocking: true,
     hidden: true,
   }
@@ -31,13 +32,13 @@ export async function createFolder(path: string) {
   if (result instanceof client.Error) {
     state.progress = {
       type: 'error',
-      title: `Error creating a folder`,
+      title: t('error-creating-folder'),
       message: result.detail,
     }
-  } else {
-    appStore.onFileCreated([result.path])
+    return
   }
 
+  appStore.onFileCreated([result.path])
   state.progress = undefined
   closeDialog()
 }

client/components/Application/Dialogs/DeleteFile/store.ts

@@ -2,6 +2,7 @@ import { client } from '@client/client'
 import * as helpers from '@client/helpers'
 import * as appStore from '@client/store'
 import * as types from '@client/types'
+import { t } from 'i18next'
 
 class State {
   progress?: types.IProgress
@@ -27,7 +28,7 @@ export async function deleteFile() {
 
   state.progress = {
     type: 'deleting',
-    title: `Deleting selected ${target}`,
+    title: `${t('deleting-selected')} ${target}`,
     blocking: true,
   }
 
@@ -38,13 +39,13 @@ export async function deleteFile() {
   if (result instanceof client.Error) {
     state.progress = {
       type: 'error',
-      title: `Error deleting ${target}`,
+      title: `${t('error-deleting')} ${target}`,
       message: result.detail,
     }
-  } else {
-    appStore.onFileDeleted([path])
+    return
   }
 
+  appStore.onFileDeleted([path])
   state.progress = undefined
   closeDialog()
 }

client/components/Application/Dialogs/RenameFile/store.ts

@@ -2,6 +2,7 @@ import { client } from '@client/client'
 import * as helpers from '@client/helpers'
 import * as appStore from '@client/store'
 import * as types from '@client/types'
+import { t } from 'i18next'
 
 class State {
   progress?: types.IProgress
@@ -27,7 +28,7 @@ export async function renameFile(toPath: string) {
 
   state.progress = {
     type: 'renaming',
-    title: `Renaming selected ${target}`,
+    title: `${t('renaming-selected')} ${target}`,
     blocking: true,
     hidden: true,
   }
@@ -39,13 +40,13 @@ export async function renameFile(toPath: string) {
   if (result instanceof client.Error) {
     state.progress = {
       type: 'error',
-      title: `Error renaming ${target}`,
+      title: `${t('error-renaming')} ${target}`,
       message: result.detail,
     }
-  } else {
-    appStore.onFileCreated([result.path])
+    return
   }
 
+  appStore.onFileCreated([result.path])
   state.progress = undefined
   closeDialog()
 }

client/components/Application/Dialogs/SaveChanges/store.ts

@@ -2,6 +2,7 @@ import { client } from '@client/client'
 import * as helpers from '@client/helpers'
 import * as appStore from '@client/store'
 import * as types from '@client/types'
+import { t } from 'i18next'
 
 class State {
   progress?: types.IProgress
@@ -20,8 +21,8 @@ export async function saveChanges() {
   appStore.openDialog('saveChanges')
   state.progress = {
     type: 'loading',
-    title: 'Saving the updated table',
-    message: 'If the file is large, this may take some time...',
+    title: t('saving-updated-table'),
+    message: `${t('file-too-large')}...`,
     blocking: true,
   }
 
@@ -38,14 +39,14 @@ export async function saveChanges() {
   if (result instanceof client.Error) {
     state.progress = {
       type: 'error',
-      title: 'Error saving changes',
+      title: t('error-saving-changes'),
       message: result.detail,
     }
+    return
   }
 
   await appStore.onFileUpdated([path])
   grid.reload()
-
   state.progress = undefined
   closeDialog()
 }

client/components/Application/Dialogs/UploadFile/UploadFile.tsx

@@ -17,8 +17,8 @@ import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import { styled, useTheme } from '@mui/material/styles'
 import * as React from 'react'
-import * as store from './store'
 import { useTranslation } from 'react-i18next'
+import * as store from './store'
 
 export function UploadFileDialog() {
   const dialog = appStore.useStore((state) => state.dialog)
@@ -119,7 +119,7 @@ function LocalFileForm(props: { isFolder?: boolean }) {
           <StyledSelectBox
             className={!progress?.blocking ? 'file-select__button' : undefined}
           >
-            Select
+            {t('select')}
           </StyledSelectBox>
         </Box>
       </FileSelectBox>

client/components/Application/Dialogs/UploadFile/store.tsx

@@ -2,6 +2,7 @@ import { client } from '@client/client'
 import * as helpers from '@client/helpers'
 import * as appStore from '@client/store'
 import * as types from '@client/types'
+import { t } from 'i18next'
 
 class State {
   progress?: types.IProgress
@@ -35,7 +36,7 @@ export async function ingestFiles(props: { source: FileList | string }, t: any)
 }
 
 async function uploadLocalFiles(props: { source: FileList }) {
-  state.progress = { type: 'loading', blocking: true }
+  state.progress = { type: 'loading', title: t('loading'), blocking: true }
 
   const files: IFile[] = []
   const folder = appStore.getFolderPath(appStore.getState())
@@ -57,7 +58,7 @@ async function uploadLocalFiles(props: { source: FileList }) {
 }
 
 async function uploadRemoteFile(props: { source: string }, t: any) {
-  state.progress = { type: 'loading', blocking: true }
+  state.progress = { type: 'loading', title: t('loading'), blocking: true }
 
   if (!props.source) {
     state.progress = { type: 'error', message: t('error-url-blank') }