355 more translations

client/components/Application/Dialogs/Assistant/Assistant.tsx

@@ -10,12 +10,10 @@ import * as React from 'react'
 import { PropsWithChildren } from 'react'
 import Markdown from 'react-markdown'
 import * as store from './store'
-import { useTranslation } from 'react-i18next'
+import { t } from 'i18next'
+import { Trans } from 'react-i18next'
 
-const DEFAULT_PROMPT = `
-suggest improvements to the names of the columns in the table 
-and provide descriptions for each of them
-`
+const DEFAULT_PROMPT = t('AI-assistant-default-prompt')
 
 export function AssistantDialog() {
   const state = store.useState()
@@ -38,7 +36,6 @@ export function AssistantDialog() {
 }
 
 function TermsStepDialog() {
-  const { t } = useTranslation()
   return (
     <StepDialog
       label={t('confirm')}
@@ -53,7 +50,6 @@ function TermsStepDialog() {
 
 function CredsStepDialog() {
   const [key, setKey] = React.useState('')
-  const { t } = useTranslation()
 
   return (
     <StepDialog
@@ -77,18 +73,24 @@ function CredsStepDialog() {
           }}
         />
         <Box>
-          Click{' '}
-          <Link
-            target="_blank"
-            href="https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key"
-          >
-            here
-          </Link>{' '}
-          to learn how to find your key. You can also check OpenAI terms and policies{' '}
-          <Link target="_blank" href="https://openai.com/policies/">
-            here
-          </Link>
-          .
+          <Trans
+            i18nKey="AI-assistant-find-your-key"
+            components={{
+              link1: (
+                <Link
+                  target="_blank"
+                  href="https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key"
+                >
+                  here
+                </Link>
+              ),
+              link2: (
+                <Link target="_blank" href="https://openai.com/policies/">
+                  here
+                </Link>
+              ),
+            }}
+          />
         </Box>
       </Stack>
     </StepDialog>
@@ -97,7 +99,6 @@ function CredsStepDialog() {
 
 function PromptStepDialog() {
   const [prompt, setPrompt] = React.useState(DEFAULT_PROMPT)
-  const { t } = useTranslation()
 
   return (
     <StepDialog
@@ -126,7 +127,6 @@ function PromptStepDialog() {
 
 function ResultStepDialog() {
   const state = store.useState()
-  const { t } = useTranslation()
 
   return (
     <StepDialog
@@ -151,7 +151,6 @@ function StepDialog(
     transitionDuration?: number | { enter?: number; exit?: number }
   }>
 ) {
-  const { t } = useTranslation()
   return (
     <TwoButtonDialog
       open={true}

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

@@ -2,6 +2,7 @@ import { client } from '@client/client'
 import * as helpers from '@client/helpers'
 import * as appStore from '@client/store'
 import invariant from 'tiny-invariant'
+import { t } from 'i18next'
 
 // We use component level state because dialog state
 // needs to be shared between multiple components
@@ -51,15 +52,15 @@ export async function setPromptAndFetchResult(props: { prompt: string }) {
 
   state.progress = {
     type: 'generating',
-    message: 'AI assistant is generating the response.',
+    message: t('generating-response'),
     blocking: true,
   }
 
   const { path } = appStore.getState()
   const { prompt, apiKey } = state
-  invariant(path, 'Path is required')
-  invariant(prompt, 'Prompt is required')
-  invariant(apiKey, 'API key is required')
+  invariant(path, t('path-required'))
+  invariant(prompt, t('prompt-required'))
+  invariant(apiKey, t('api-required'))
 
   const result = await client.tableSuggest({ path, prompt, apiKey })
   if (result instanceof client.Error) {

client/components/Application/Dialogs/DeleteFile/DeleteFile.tsx

@@ -24,7 +24,7 @@ export function DeleteFileDialog() {
   return (
     <TwoButtonDialog
       open={true}
-      title={t('delete-fileFolder', { fileOrFolder })}
+      title={t('delete-filefolder', { fileOrFolder })}
       description={description}
       label={t('delete')}
       hoverBgButtonColor="OKFNRed600"

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

@@ -61,7 +61,7 @@ export function UploadFileDialog() {
             paddingBottom: '33px',
           }}
         >
-          <img src={uploadFilesDialogImg} alt="Image Folder Dialog" />
+          <img src={uploadFilesDialogImg} alt={t('alt-image-folder-dialog')} />
         </Box>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <DialogTabs
@@ -113,7 +113,7 @@ function LocalFileForm(props: { isFolder?: boolean }) {
         />
         <Box sx={{ padding: '32px 48px 24px 48px' }}>
           <Box>
-            <img src={icon} alt="Icon Upload File" />
+            <img src={icon} alt={t('alt-icon-upload-file')} />
           </Box>
           <Box>{text}</Box>
           <StyledSelectBox

client/components/Application/Dialogs/WelcomeBanner.tsx

@@ -1,4 +1,6 @@
-import welcomescreenImg from '@client/assets/welcomescreen.png'
+import welcomescreenImg1 from '@client/assets/welcome_banner_1.png'
+import welcomescreenImg2 from '@client/assets/welcome_banner_2.png'
+import welcomescreenImg3 from '@client/assets/welcome_banner_3.png'
 import * as store from '@client/store'
 import Box from '@mui/material/Box'
 import Checkbox from '@mui/material/Checkbox'
@@ -60,8 +62,30 @@ export default function WelcomeBanner() {
           paddingBottom: '0',
         }}
       >
-        <Box sx={{ backgroundColor: '#F3F4F6', padding: '56px 52px' }}>
-          <img src={welcomescreenImg} alt="Welcome Screen" />
+        <Box
+          sx={{
+            backgroundColor: '#F3F4F6',
+            padding: '56px 52px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <ImageWithText
+            image={welcomescreenImg1}
+            text={t('open-explore-tables')}
+            alt={`${t('welcome-screen-image')} 1`}
+          />
+          <ImageWithText
+            image={welcomescreenImg2}
+            text={t('detect-errors-generate-report')}
+            alt={`${t('welcome-screen-image')} 2`}
+          />
+          <ImageWithText
+            image={welcomescreenImg3}
+            text={t('save-download-work')}
+            alt={`${t('welcome-screen-image')} 3`}
+          />
         </Box>
         <Box sx={{ padding: '32px' }}>
           <Box
@@ -142,3 +166,23 @@ export default function WelcomeBanner() {
     </Dialog>
   )
 }
+
+function ImageWithText(props: { image: string; text: string; alt: string }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        fontSize: '12px',
+        flexDirection: 'column',
+        textAlign: 'center',
+      }}
+    >
+      <Box sx={{ paddingBottom: '20px' }}>
+        <img src={props.image} alt={props.alt} />
+      </Box>
+      <Box sx={{ maxWidth: '100px' }}>
+        <span>{props.text}</span>
+      </Box>
+    </Box>
+  )
+}

client/components/Application/Sidebar.tsx

@@ -4,6 +4,7 @@ import LowerMenu from './LowerMenu'
 import sidebarLogo from '../../assets/ODE_sidebar_logo.svg'
 import Button from '@mui/material/Button'
 import * as store from '@client/store'
+import { t } from 'i18next'
 
 export default function Sidebar() {
   return (
@@ -33,7 +34,7 @@ export default function Sidebar() {
         }}
         onClick={() => store.openDialog('fileUpload')}
       >
-        Upload your data
+        {t('upload-your-data')}
       </Button>
       <Browser />
       <LowerMenu />

client/components/Editors/Base/ListItem.tsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import { useTheme } from '@mui/material/styles'
+import { t } from 'i18next'
 
 interface EditorListItemProps {
   kind: string
@@ -25,14 +26,14 @@ export default function EditorListItem(props: EditorListItemProps) {
         size="small"
         color="warning"
         component="span"
-        title={`Remove ${capitalize(props.kind)}`}
+        title={`${t('remove')} ${capitalize(props.kind)}`}
         sx={{ marginLeft: 2, textDecoration: 'underline' }}
         onClick={(ev) => {
           ev.stopPropagation()
           props.onRemoveClick?.()
         }}
       >
-        Remove
+        {t('remove')}
       </Button>
     )
   }

client/components/Editors/Base/Section.tsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Columns from '../../Parts/Grids/Columns'
 import HeadingBox from './Heading/Box'
+import { t } from 'i18next'
 
 export interface EditorItemProps {
   name?: string
@@ -15,10 +16,10 @@ export default function EditorItem(props: React.PropsWithChildren<EditorItemProp
     if (!props.onBackClick) return null
     return (
       <Button
-        title="Back to list"
+        title={t('back-to-list')}
         onClick={() => props.onBackClick && props.onBackClick()}
       >
-        Back to list
+        {t('back-to-list')}
       </Button>
     )
   }

client/components/Editors/Dialect/Layout.tsx

@@ -8,6 +8,7 @@ import DialectSection from './Sections/Dialect'
 import FormatSection from './Sections/Format'
 import { useStore } from './store'
 import * as types from '../../../types'
+import { t } from 'i18next'
 
 export default function Layout() {
   const externalMenu = useStore((state) => state.externalMenu)
@@ -24,8 +25,8 @@ function LayoutWithMenu() {
   const updateHelp = useStore((state) => state.updateHelp)
   const updateState = useStore((state) => state.updateState)
   const MENU_ITEMS: types.IMenuItem[] = [
-    { section: 'dialect', name: 'Dialect' },
-    { section: 'dialect/format', name: capitalize(format) || 'Format' },
+    { section: 'dialect', name: t('dialect') },
+    { section: 'dialect/format', name: capitalize(format) || t('format') },
   ]
   return (
     <Columns spacing={3} layout={[2, 8]} columns={10}>

client/components/Editors/Dialect/Sections/Dialect.tsx

@@ -9,11 +9,12 @@ import Columns from '../../../Parts/Grids/Columns'
 import { useStore } from '../store'
 import validator from 'validator'
 import * as settings from '../../../../settings'
+import { t } from 'i18next'
 
 export default function General() {
   const updateHelp = useStore((state) => state.updateHelp)
   return (
-    <EditorSection name="Dialect" onHeadingClick={() => updateHelp('dialect')}>
+    <EditorSection name={t('dialect')} onHeadingClick={() => updateHelp('dialect')}>
       <Columns spacing={3}>
         <Box>
           <Title />
@@ -53,7 +54,7 @@ function Title() {
         setIsValid(isValidTitle())
       }}
       onChange={(value) => updateDescriptor({ title: value || undefined })}
-      helperText={!isValid ? 'Title is not valid.' : ''}
+      helperText={!isValid ? t('title-not-valid') : ''}
     />
   )
 }
@@ -64,7 +65,7 @@ function Description() {
   const updateDescriptor = useStore((state) => state.updateDescriptor)
   return (
     <MultilineField
-      label="Description"
+      label={t('description')}
       value={description || ''}
       onFocus={() => updateHelp('dialect/description')}
       onChange={(value) => updateDescriptor({ description: value || undefined })}
@@ -79,7 +80,7 @@ function Format() {
   const externalMenu = useStore((state) => state.externalMenu)
   return (
     <SelectField
-      label="Format"
+      label={t('format')}
       value={format || ''}
       disabled={!!externalMenu}
       options={['csv', 'excel', 'json']}
@@ -95,7 +96,7 @@ function CommentChar() {
   const updateDescriptor = useStore((state) => state.updateDescriptor)
   return (
     <InputField
-      label="Comment Char"
+      label={t('comment-char')}
       value={commentChar || settings.DEFAULT_COMMENT_CHAR}
       onFocus={() => updateHelp('dialect/type/commentChar')}
       onChange={(value) => updateDescriptor({ commentChar: value || undefined })}
@@ -109,7 +110,7 @@ function CommentRows() {
   const updateDescriptor = useStore((state) => state.updateDescriptor)
   return (
     <InputField
-      label="Comment Rows"
+      label={t('comment-rows')}
       value={(commentRows || []).join(',')}
       onFocus={() => updateHelp('dialect/type/commentRows')}
       onChange={(value) =>
@@ -127,7 +128,7 @@ function Header() {
   const updateDescriptor = useStore((state) => state.updateDescriptor)
   return (
     <YesNoField
-      label="Header"
+      label={t('header')}
       value={header ?? settings.DEFAULT_HEADER}
       onFocus={() => updateHelp('dialect/type/header')}
       onChange={(value) => updateDescriptor({ header: value ?? undefined })}
@@ -141,7 +142,7 @@ function HeaderRows() {
   const updateDescriptor = useStore((state) => state.updateDescriptor)
   return (
     <InputField
-      label="Header Rows"
+      label={t('header-rows')}
       value={(headerRows || []).join(',')}
       onFocus={() => updateHelp('dialect/type/headerRows')}
       onChange={(value) =>
@@ -173,7 +174,7 @@ function HeaderCase() {
   const updateDescriptor = useStore((state) => state.updateDescriptor)
   return (
     <YesNoField
-      label="Header Case"
+      label={t('header-case')}
       value={headerCase ?? settings.DEFAULT_HEADER_CASE}
       onFocus={() => updateHelp('dialect/type/headerCase')}
       onChange={(value) => updateDescriptor({ headerCase: value ?? undefined })}