fix: provider translation missing

Author: JeromeBu

api/src/rpc/translations/en_default.json

@@ -7,7 +7,8 @@
         "referent_other": "referents",
         "provider_one": "provider",
         "providers_other": "providers",
-        "appAccronym": "SILL"
+        "appAccronym": "SILL",
+        "officialWebsite": "Official website"
     },
     "app": {
         "title": "The Interministerial Free Software Base is a set of free software recommended by the French State since 2013.",

api/src/rpc/translations/fr_default.json

@@ -9,7 +9,8 @@
         "providers_other": "fournisseurs",
         "free software_one": "logiciel libre",
         "free software_other": "logiciels libres",
-        "appAccronym": "SILL"
+        "appAccronym": "SILL",
+        "officialWebsite": "Site officiel"
     },
     "app": {
         "title": "Le socle interministériel de logiciels libres est un ensemble de logiciels libres préconisés par l'État français depuis 2013.",

api/src/rpc/translations/schema.json

@@ -37,6 +37,10 @@
                 "appAccronym": {
                     "type": "string",
                     "description": "Common reusable translation"
+                },
+                "officialWebsite": {
+                    "type": "string",
+                    "description": "Common reusable translation"
                 }
             },
             "description": "Common reusable translation",

web/src/ui/pages/softwareDetails/SoftwareDetails.tsx

@@ -2,7 +2,7 @@
 // SPDX-FileCopyrightText: 2024-2025 Université Grenoble Alpes
 // SPDX-License-Identifier: MIT
 
-import { useEffect } from "react";
+import { Fragment, useEffect } from "react";
 import { useCoreState, useCore } from "core";
 import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb";
 import { tss } from "tss-react";
@@ -405,33 +405,38 @@ const ServiceProviderRow = ({
     serviceProvider: { url, name, identifiers }
 }: {
     serviceProvider: ApiTypes.Organization;
-}) => (
-    <li>
-        <span className={fr.cx("fr-text--bold")}>{name}</span>
-        {" - "}
-        {url && (
-            <a href={url} target="_blank" rel="noreferrer">
-                Site officiel TODO Translate
-            </a>
-        )}{" "}
-        {identifiers &&
-            identifiers.map(identifier => (
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <li>
+            <span className={fr.cx("fr-text--bold")}>{name}</span>
+            {url && (
                 <>
-                    -{" "}
-                    {identifier?.url && (
-                        <a
-                            href={identifier.url.toString()}
-                            target="_blank"
-                            rel="noreferrer"
-                        >
-                            {identifier.subjectOf?.name ?? identifier.name}
-                        </a>
-                    )}
+                    {" - "}
+                    <a href={url} target="_blank" rel="noreferrer">
+                        {t("common.officialWebsite")}
+                    </a>
                 </>
-            ))}
-    </li>
-);
-
+            )}
+            {identifiers &&
+                identifiers
+                    .filter(identifier => !!identifier.url)
+                    .map(identifier => (
+                        <Fragment key={identifier.url! as string}>
+                            {" - "}
+                            <a
+                                href={identifier.url!.toString()}
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                {identifier.subjectOf?.name ?? identifier.name}
+                            </a>
+                        </Fragment>
+                    ))}
+        </li>
+    );
+};
 const useStyles = tss.withName({ SoftwareDetails }).create({
     breadcrumb: {
         marginBottom: fr.spacing("4v")