From 2a7e6ce837394b6e40c1ff86e55d6735621670c7 Mon Sep 17 00:00:00 2001
From: Etheryte <karl.tarvas@suse.com>
Date: Wed, 29 Jan 2025 19:49:20 +0100
Subject: [PATCH] Make help panel more translatable

---
 .../manager/admin/config/monitoring-admin.tsx | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/web/html/src/manager/admin/config/monitoring-admin.tsx b/web/html/src/manager/admin/config/monitoring-admin.tsx
index 527f568b2c8f..b0d29b02e4a2 100644
--- a/web/html/src/manager/admin/config/monitoring-admin.tsx
+++ b/web/html/src/manager/admin/config/monitoring-admin.tsx
@@ -156,22 +156,27 @@ const HelpPanel = (props: HelpPanelProps) => {
     <div className="col-sm-3 hidden-xs" id="wizard-faq">
       <h4>{t("Server Monitoring")}</h4>
       <p>
-        {t("The server uses ")}
-        <a href="https://prometheus.io" target="_blank" rel="noopener noreferrer">
-          {t("Prometheus")}
-        </a>
-        {t(" exporters to expose metrics about your environment.")}
+        {t("The server uses <link>Prometheus</link> exporters to expose metrics about your environment.", {
+          link: (str: string) => (
+            <a href="https://prometheus.io" target="_blank" rel="noopener noreferrer" key={str}>
+              {str}
+            </a>
+          ),
+        })}
       </p>
       <p>
-        {t("Refer to the ")}
-        <a
-          href={"/docs/" + docsLocale + docsDirectory + "/administration/monitoring.html"}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {t("documentation")}
-        </a>
-        {t(" to learn how to consume these metrics.")}
+        {t("Refer to the <link>documentation</link> to learn how to consume these metrics.", {
+          link: (str: string) => (
+            <a
+              href={"/docs/" + docsLocale + docsDirectory + "/administration/monitoring.html"}
+              target="_blank"
+              rel="noopener noreferrer"
+              key={str}
+            >
+              {str}
+            </a>
+          ),
+        })}
       </p>
     </div>
   );