Add basic French language support

packages/app/src/components/layout/Header.jsx

@@ -2,7 +2,9 @@ import SearchUrls from "components/search/SearchUrls";
 import ExternalLink from "components/ui/ExternalLink";
 import Configuration from "Configuration";
 import { AuthContext } from "contexts/AuthContext";
+import { t } from "i18next";
 import { useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { ServerIssuesUrl, UserManualUrl } from "ServerUrls";
 import NotificationsBadge from "../notifications/NotificationsBadge";
@@ -13,46 +15,47 @@ import HeaderLogo from "./HeaderLogo";
 
 const MenuLinks = [
     {
-        name: "Projects",
-        items: [{ name: "List", url: "/projects" }, null, { name: "Tasks", url: "/tasks" }],
+        name: t("Projects"),
+        items: [{ name: t("List"), url: "/projects" }, null, { name: t("Tasks"), url: "/tasks" }],
     },
     {
-        name: "Library",
+        name: t("Library"),
         items: [
-            { name: "Commands", url: "/commands", permissions: "commands.*" },
-            { name: "Vulnerabilities", url: "/vulnerabilities", permissions: "commands.*" },
-            { name: "Documents", url: "/documents", permissions: "documents.*" },
+            { name: t("Commands"), url: "/commands", permissions: "commands.*" },
+            { name: t("Vulnerabilities"), url: "/vulnerabilities", permissions: "commands.*" },
+            { name: t("Documents"), url: "/documents", permissions: "documents.*" },
         ],
     },
     {
-        name: "Settings",
+        name: t("Settings"),
         items: [
-            { name: "Users", url: "/users" },
-            { name: "Custom fields", url: "/settings/custom-fields" },
-            { name: "Search", url: SearchUrls.AdvancedSearch },
-            { name: "Import data", url: "/system/import-data" },
-            { name: "Export data", url: "/system/export-data" },
+            { name: t("Users"), url: "/users" },
+            { name: t("Custom fields"), url: "/settings/custom-fields" },
+            { name: t("Search"), url: SearchUrls.AdvancedSearch },
+            { name: t("Import data"), url: "/system/import-data" },
+            { name: t("Export data"), url: "/system/export-data" },
         ],
     },
     {
-        name: "Help & Support",
+        name: t("Help & Support"),
         items: [
-            { name: "User manual", url: UserManualUrl, external: true },
-            { name: "API docs", url: `${Configuration.getDefaultApiUrl()}/docs/`, external: true },
-            { name: "Support info", url: "/support" },
-            { name: "System health", url: "/system/health" },
+            { name: t("User manual"), url: UserManualUrl, external: true },
+            { name: t("API docs"), url: `${Configuration.getDefaultApiUrl()}/docs/`, external: true },
+            { name: t("Support info"), url: "/support" },
+            { name: t("System health"), url: "/system/health" },
             null,
-            { name: "Audit log", url: "/auditlog" },
-            { name: "Licenses", url: "/licenses" },
-            { name: "Integrations", url: "/system/integrations" },
-            { name: "Usage", url: "/system/usage" },
+            { name: t("Audit log"), url: "/auditlog" },
+            { name: t("Licenses"), url: "/licenses" },
+            { name: t("Integrations"), url: "/system/integrations" },
+            { name: t("System usage"), url: "/system/usage" },
             null,
-            { name: "Log issue", url: ServerIssuesUrl, external: true },
+            { name: t("Log issue"), url: ServerIssuesUrl, external: true },
         ],
     },
 ];
 
 const Header = () => {
+    const [t] = useTranslation();
     const { user } = useContext(AuthContext);
     const [activeMenu, setActiveMenu] = useState(null);
 
@@ -73,7 +76,7 @@ const Header = () => {
             <div id="navbarExampleTransparentExample" className="navbar-menu">
                 <div className="navbar-start">
                     <Link className="navbar-item" to={DashboardUrls.DEFAULT}>
-                        Dashboard
+                        {t("Dashboard")}
                     </Link>
                     {MenuLinks.map((menuLink) => {
                         return (

packages/app/src/components/layout/dashboard/DashboardPage.jsx

@@ -5,9 +5,9 @@ import Loading from "components/ui/Loading";
 import Title from "components/ui/Title";
 import { actionCompletedToast } from "components/ui/toast";
 import { useAuth } from "contexts/AuthContext";
-import useDocumentTitle from "hooks/useDocumentTitle";
 import Widgets from "models/Widgets";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import secureApiFetch from "services/api";
 import PermissionsService from "services/permissions";
 import { initialiseUserPreferences } from "services/userPreferences";
@@ -39,6 +39,8 @@ const filterWidgets = (user) => {
 
 const DashboardPage = () => {
     const { user } = useAuth();
+    const [t] = useTranslation("app");
+
     user.preferences = initialiseUserPreferences(user);
     const [dashboardConfig, setDashboardConfig] = useState(
         user?.preferences?.["web-client.widgets"] || InitialiseWidgetConfig(),
@@ -80,15 +82,13 @@ const DashboardPage = () => {
             });
     };
 
-    useDocumentTitle("Dashboard");
-
     if (dashboardConfig === null) return <Loading />;
 
     return (
         <div>
-            <Title type="Home" title="Dashboard" />
+            <Title type={t("Home")} title={t("Dashboard")} documentTitle="single" />
             <div>
-                <NativeTabs labels={["View", "Configure"]} tabIndex={tabIndex} tabIndexSetter={tabIndexSetter} />
+                <NativeTabs labels={[t("View"), t("Configure")]} tabIndex={tabIndex} tabIndexSetter={tabIndexSetter} />
 
                 {0 === tabIndex && (
                     <div>
@@ -129,7 +129,7 @@ const DashboardPage = () => {
                             })}
                         </div>
                         <PrimaryButton disabled={!formHasChanged} onClick={(ev) => onSave(ev, user)}>
-                            Save
+                            {t("Save")}
                         </PrimaryButton>
                     </div>
                 )}

packages/app/src/components/search/Box.jsx

@@ -1,9 +1,11 @@
 import NativeInput from "components/form/NativeInput";
 import { createRef, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import isInputElement from "../../utilities/domUtils";
 
 const SearchBox = () => {
+    const [t] = useTranslation();
     const navigate = useNavigate();
     const inputRef = createRef();
 
@@ -39,7 +41,7 @@ const SearchBox = () => {
             className="input is-rounded"
             ref={inputRef}
             type="search"
-            placeholder="Search..."
+            placeholder={t("Search...")}
             onKeyDown={handleSearchKeyDown}
         />
     );

packages/app/src/components/ui/HeaderUserMenu.jsx

@@ -2,11 +2,13 @@ import UserAvatar from "components/badges/UserAvatar";
 import { AuthContext } from "contexts/AuthContext";
 import useToggle from "hooks/useToggle";
 import { useContext } from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import KeyCloakService from "services/keycloak";
 import ExternalLink from "./ExternalLink";
 
 const HeaderUserMenu = () => {
+    const [t] = useTranslation();
     const { user, logout } = useContext(AuthContext);
 
     const { value, toggle } = useToggle(false);
@@ -37,7 +39,7 @@ const HeaderUserMenu = () => {
                     </Link>
                     <hr className="dropdown-divider" />
                     <Link className="dropdown-item" to="/" onClick={logout}>
-                        <div>Logout</div>
+                        {t("Logout")}
                     </Link>
                 </div>
             </div>

packages/app/src/components/users/Preferences.jsx

@@ -1,4 +1,3 @@
-import { LanguageList } from "bootstrap/LanguageList";
 import NativeSelect from "components/form/NativeSelect";
 import PrimaryButton from "components/ui/buttons/Primary";
 import { actionCompletedToast } from "components/ui/toast";
@@ -10,6 +9,7 @@ import { ThemeList } from "models/themes";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { initialiseUserPreferences } from "services/userPreferences";
+import { LanguageList } from "translations/LanguageList";
 import secureApiFetch from "../../services/api";
 import Breadcrumb from "../ui/Breadcrumb";
 import Title from "../ui/Title";

packages/app/src/index.tsx

@@ -1,11 +1,11 @@
-import 'bootstrap/i18n';
 import HeaderLogo from 'components/layout/HeaderLogo.jsx';
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Toaster } from 'react-hot-toast';
 import KeyCloakService from 'services/keycloak.js';
+import 'translations/i18n';
 import App from './App.jsx';
 import * as serviceWorker from './serviceWorker.js';
 import './styles/main.css';

packages/app/src/bootstrap/LanguageList.ts → packages/app/src/translations/LanguageList.ts

@@ -8,6 +8,7 @@ const LanguageList: Language[] = [
     { id: "en", name: "English" },
     { id: "cn", name: "Chinese" },
     { id: "fa", name: "Persian" },
+    { id: "fr", name: "French" },
 ];
 
 export { LanguageList };

packages/app/src/translations/es/application.json

@@ -1,14 +1,101 @@
 {
+    "(any)": "(cualquiera)",
+    "(empty)": "(vacío)",
+    "(nobody)": "(nadie)",
+    "(not set)": "(sin asignar)",
+    "(undefined)": "(sin definir)",
+    "(you)": "(tú)",
+    "Action": "Acción",
+    "Active": "Activo",
+    "Add": "Añadir",
+    "Address": "Dirección",
+    "Archive": "Archivado",
+    "Assignee": "Asignado",
+    "Attachements": "Adjuntos",
+    "Audit log": "Registro de eventos",
+    "Branding": "Marca",
+    "Category": "Categoría",
+    "Client": "Cliente",
+    "Clients": "Clientes",
+    "Closed": "Cerrada",
+    "Commands": "Comandos",
+    "Comments": "Comentarios",
+    "Configure": "Configurar",
+    "Contacts": "Contactos",
+    "Create": "Crear",
+    "Created by": "Creado por",
+    "Created": "Creado",
+    "Critical": "Crítica",
+    "Custom fields": "Campos personalizados",
     "Dashboard": "Cuadro de mandos",
+    "Date/Time": "Fecha/Hora",
+    "Delete": "Eliminar",
+    "Description": "Descripción",
+    "Details": "Detalles",
+    "Documents": "Documentos",
+    "Doing": "Haciendo",
+    "Done": "Hecho",
+    "Edit": "Editar",
+    "Email": "Correo electrónico",
+    "End date": "Fecha de final",
+    "Export data": "Exportar datos",
+    "File size": "Tamaño de fichero",
+    "Filename": "Nombre de fichero",
+    "Filters": "Filtros",
+    "Full name": "Nombre completo",
+    "Help and support": "Ayuda y soporte",
+    "High": "Alta",
+    "Home": "Inicio",
+    "Import data": "Importar datos",
+    "Integrations": "Integraciones",
+    "Label": "Etiqueta",
+    "Language": "Idioma",
+    "Library": "Librería",
+    "List": "Lista",
+    "Loading...": "Cargando...",
+    "Logout": "Cerrar sesión",
+    "Low": "Baja",
+    "Medium": "Media",
+    "Mimetype": "Tipo de fichero",
+    "Name": "Nombre",
+    "No results": "Sin resultados",
+    "None": "Ninguna",
+    "Notifications": "Notificaciones",
+    "Open": "Abierta",
+    "Phone": "Teléfono",
+    "Priority": "Prioridad",
+    "Private": "Privado",
     "Projects": "Proyectos",
-    "Tasks": "Tareas",
-    "Commands": "Comandos",
-    "Vulnerabilities": "Vulnerabilidades",
+    "Public": "Público",
+    "Relations": "Relaciones",
     "Reports": "Informes",
-    "Documents": "Documentos",
-    "Clients": "Clientes",
-    "Users": "Usuarios",
+    "Role": "Rol",
+    "Save": "Guardar",
+    "Search": "Buscar",
+    "Search...": "Buscar...",
     "Settings": "Configuración",
+    "Start date": "Fecha de comienzo",
+    "Stats": "Estadísticas",
+    "Status": "Estado",
+    "Summary": "Resumen",
     "System": "Sistema",
-    "Help and support": "Ayuda y soporte"
+    "System usage": "Uso del sistema",
+    "System health": "Salud del sistema",
+    "Tasks": "Tareas",
+    "Templates": "Plantillas",
+    "Theme": "Tema",
+    "Timestamps": "Fechas claves",
+    "Timezone": "Huso horario",
+    "Title": "Título",
+    "Todo": "Por hacer",
+    "URL": "Dirección Web",
+    "Upload date": "Fecha de subida",
+    "Upload": "Subir",
+    "Uplodaded by": "Subido por",
+    "User": "Usuario",
+    "Username": "Nombre de usuario",
+    "Users": "Usuarios",
+    "View": "Ver",
+    "Visibility": "Visibilidad",
+    "Vulnerabilities": "Vulnerabilidades"
 }