Merge pull request #2427 from clari182/fix/discover-missing-translations

Fix/discover missing translations

site/gatsby-site/i18n/locales/es/translation.json

@@ -282,5 +282,10 @@
   "Not every incident in AIID meets this definition of AI harm. The below bar charts show the annotated results for both all AIID incidents and incidents that meet the CSET definition of AI harm.": "No todos los incidentes en AIID cumplen con esta definición de daño de IA. Los gráficos de barras a continuación muestran los resultados anotados tanto para todos los incidentes de AIID como para los incidentes que cumplen con la definición de daño de IA de CSET.",
   "csetChartDeveloped": "CSET ha desarrollado definiciones específicas para las frases subrayadas que pueden diferir de las definiciones de otras organizaciones. Como resultado, otras organizaciones pueden hacer diferentes evaluaciones sobre si un incidente de IA en particular es (o no) un daño de IA. Los detalles sobre las definiciones de CSET para el daño de la IA se pueden encontrar <1>aquí</1>.",
   "csetChartMail": "Cada incidente es clasificado de forma independiente por dos anotadores CSET. Las anotaciones se revisan por pares y finalmente se seleccionan al azar para el control de calidad antes de la publicación. A pesar de este riguroso proceso, ocurren errores y se invita a los lectores a <1>informar</1> de cualquier error que puedan descubrir mientras navegan.",
-  "[Untitled Report]": "[Informe sin título]"
+  "[Untitled Report]": "[Informe sin título]",
+  "Incidents": "Incidentes",
+  "Incident and Issue Reports": "Incidentes e Informes de Problemas",
+  "Issue Reports": "Informes de Problemas",
+  "found": "encontrados",
+  "results found": "resultados encontrados"
 }

site/gatsby-site/i18n/locales/fr/translation.json

@@ -270,5 +270,10 @@
   "Not every incident in AIID meets this definition of AI harm. The below bar charts show the annotated results for both all AIID incidents and incidents that meet the CSET definition of AI harm.": "Tous les incidents de l'AIID ne répondent pas à cette définition du préjudice causé par l'IA. Les graphiques à barres ci-dessous montrent les résultats annotés pour tous les incidents de l'AIID et les incidents qui répondent à la définition CSET du préjudice causé par l'IA.",
   "csetChartDeveloped": "Le CSET a développé des définitions spécifiques pour les phrases soulignées qui peuvent différer des définitions d'autres organisations. Par conséquent, d'autres organisations peuvent procéder à des évaluations différentes pour déterminer si un incident d'IA particulier est (ou n'est pas) un préjudice lié à l'IA. Des détails sur les définitions du CSET pour les dommages causés par l'IA peuvent être trouvés <1>ici</1>.",
   "csetChartMail": "Chaque incident est classé indépendamment par deux annotateurs CSET. Les annotations sont examinées par des pairs et finalement sélectionnées au hasard pour un contrôle qualité avant publication. Malgré ce processus rigoureux, des erreurs se produisent et les lecteurs sont invités à <1>signaler</1> toute erreur qu'ils pourraient découvrir en naviguant.",
-  "[Untitled Report]": "[Rapport sans titre]"
+  "[Untitled Report]": "[Rapport sans titre]",
+  "Incidents": "Incidents",
+  "Incident and Issue Reports": "Incidents et rapports de problèmes",
+  "Issue Reports": "Rapports de problèmes",
+  "found": "trouvés",
+  "results found": "résultats trouvés"
 }

site/gatsby-site/src/components/discover/DisplayOptions.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Dropdown } from 'flowbite-react';
 import isEqual from 'lodash/isEqual';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { Configure, useInstantSearch } from 'react-instantsearch';
 
 const findIndex = (displayOptions, currentState) => {
@@ -55,6 +55,8 @@ const DisplayOptions = () => {
 
   const [selectedIndex, setSelectedIndex] = useState(-1);
 
+  const { t } = useTranslation();
+
   const selectItem = useCallback((index) => {
     const { state } = displayOptions[index];
 
@@ -92,14 +94,20 @@ const DisplayOptions = () => {
 
       <Configure {...configure} />
 
-      <Dropdown label={displayOptions[selectedIndex]?.text} color={'light'} className="min-w-max">
+      <Dropdown
+        label={t(displayOptions[selectedIndex]?.text)}
+        color={'light'}
+        className="min-w-max"
+      >
         {displayOptions.map(({ text }, index) => (
           <Dropdown.Item
             key={text}
             onClick={() => selectItem(index)}
             className={`${text === displayOptions[selectedIndex]?.text ? 'bg-blue-100' : ''}`}
           >
-            <span>{text}</span>
+            <span>
+              <Trans>{text}</Trans>
+            </span>
           </Dropdown.Item>
         ))}
       </Dropdown>

site/gatsby-site/src/components/discover/Stats.js

@@ -8,13 +8,12 @@ export default function Stats({ className, ...props }) {
 
   return (
     <div className={'flex gap-3 items-center ' + className}>
-      <Trans count={count}>
-        <b>{{ count }}</b>{' '}
-        <span data-cy="display-options">
-          <DisplayOptions />
-        </span>{' '}
-        found
-      </Trans>
+      <span data-cy="display-options">
+        <DisplayOptions />
+      </span>
+      <div>
+        <b>{count}</b> <Trans>results found</Trans>
+      </div>
     </div>
   );
 }