355 more translations (#679)

This PR translates 
+ the interface of the Metadata Panel
+ adds the keys for the Desktop Menu
+  translates the text from the main image of the Welcome Dialog/Banner
+ translates the help.yaml files in the main translation file.

client/components/Application/Browser.tsx

@@ -35,7 +35,10 @@ function DefaultBrowser() {
           <a href="https://github.com/okfn/opendataeditor/issues" target="_blank">
             {t('create-an-issue')}
           </a>{' '}
-          <Trans i18nKey="sharing-contents-if-possible" components={{ 1: <small /> }} />
+          <Trans
+            i18nKey="sharing-contents-if-possible"
+            components={{ 1: <small>(if possible)</small> }}
+          />
         </Box>
       }
     >

client/components/Application/Content.tsx

@@ -44,7 +44,10 @@ function FileContent() {
           <a href="https://github.com/okfn/opendataeditor/issues" target="_blank">
             {t('create-an-issue')}
           </a>{' '}
-          <Trans i18nKey="sharing-contents-if-possible" components={{ 1: <small /> }} />
+          <Trans
+            i18nKey="sharing-contents-if-possible"
+            components={{ 1: <small>(if possible)</small> }}
+          />
         </Box>
       }
     >

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

@@ -10,12 +10,7 @@ import * as React from 'react'
 import { PropsWithChildren } from 'react'
 import Markdown from 'react-markdown'
 import * as store from './store'
-import { useTranslation } from 'react-i18next'
-
-const DEFAULT_PROMPT = `
-suggest improvements to the names of the columns in the table 
-and provide descriptions for each of them
-`
+import { useTranslation, Trans } from 'react-i18next'
 
 export function AssistantDialog() {
   const state = store.useState()
@@ -54,7 +49,6 @@ function TermsStepDialog() {
 function CredsStepDialog() {
   const [key, setKey] = React.useState('')
   const { t } = useTranslation()
-
   return (
     <StepDialog
       label={t('confirm')}
@@ -77,27 +71,34 @@ 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>
   )
 }
 
 function PromptStepDialog() {
-  const [prompt, setPrompt] = React.useState(DEFAULT_PROMPT)
   const { t } = useTranslation()
+  const DEFAULT_PROMPT = t('AI-assistant-default-prompt')
+  const [prompt, setPrompt] = React.useState(DEFAULT_PROMPT)
 
   return (
     <StepDialog
@@ -127,7 +128,6 @@ function PromptStepDialog() {
 function ResultStepDialog() {
   const state = store.useState()
   const { t } = useTranslation()
-
   return (
     <StepDialog
       label={t('ok')}

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,8 +4,10 @@ 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 { useTranslation } from 'react-i18next'
 
 export default function Sidebar() {
+  const { t } = useTranslation()
   return (
     <Box
       className="sidebar"
@@ -33,7 +35,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 { useTranslation } from 'react-i18next'
 
 interface EditorListItemProps {
   kind: string
@@ -17,6 +18,8 @@ interface EditorListItemProps {
 export default function EditorListItem(props: EditorListItemProps) {
   const theme = useTheme()
 
+  const { t } = useTranslation()
+
   const RemoveButton = () => {
     if (!props.onRemoveClick) return null
 
@@ -25,14 +28,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 { useTranslation } from 'react-i18next'
 
 export interface EditorItemProps {
   name?: string
@@ -13,12 +14,13 @@ export interface EditorItemProps {
 export default function EditorItem(props: React.PropsWithChildren<EditorItemProps>) {
   const BackButton = () => {
     if (!props.onBackClick) return null
+    const { t } = useTranslation()
     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 { useTranslation } from 'react-i18next'
 
 export default function Layout() {
   const externalMenu = useStore((state) => state.externalMenu)
@@ -23,9 +24,10 @@ function LayoutWithMenu() {
   const section = useStore((state) => state.section)
   const updateHelp = useStore((state) => state.updateHelp)
   const updateState = useStore((state) => state.updateState)
+  const { t } = useTranslation()
   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}>