From d0de6f8326c3f922b3a366c3dde15516503883b6 Mon Sep 17 00:00:00 2001
From: Sotski Eugene <jekakmail@gmail.com>
Date: Thu, 1 May 2025 02:55:42 +0300
Subject: [PATCH] Add i18n support to LogInfoDialog labels (#17979)

Integrated translations using `react-i18next` for LogInfoDialog component labels, ensuring proper localization. Updated static text labels (Type, Timestamp, Tag, Message) to dynamically rendered translation keys.
---
 web/src/components/overlay/LogInfoDialog.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/web/src/components/overlay/LogInfoDialog.tsx b/web/src/components/overlay/LogInfoDialog.tsx
index 3e9696f91..3212fde22 100644
--- a/web/src/components/overlay/LogInfoDialog.tsx
+++ b/web/src/components/overlay/LogInfoDialog.tsx
@@ -17,6 +17,7 @@ import {
 import { LogChip } from "../indicators/Chip";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 type LogInfoDialogProps = {
   logLine?: LogLine;
@@ -26,6 +27,7 @@ export default function LogInfoDialog({
   logLine,
   setLogLine,
 }: LogInfoDialogProps) {
+  const { t } = useTranslation(["views/system"]);
   const Overlay = isDesktop ? Sheet : Drawer;
   const Content = isDesktop ? SheetContent : DrawerContent;
   const Header = isDesktop ? SheetHeader : DrawerHeader;
@@ -53,19 +55,27 @@ export default function LogInfoDialog({
         {logLine && (
           <div className="flex size-full flex-col gap-5">
             <div className="flex w-min flex-col gap-1.5">
-              <div className="text-sm text-primary/40">Type</div>
+              <div className="text-sm text-primary/40">
+                {t("logs.type.label")}
+              </div>
               <LogChip severity={logLine.severity} />
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary/40">Timestamp</div>
+              <div className="text-sm text-primary/40">
+                {t("logs.type.timestamp")}
+              </div>
               <div className="text-sm">{logLine.dateStamp}</div>
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary/40">Tag</div>
+              <div className="text-sm text-primary/40">
+                {t("logs.type.tag")}
+              </div>
               <div className="text-sm">{logLine.section}</div>
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary/40">Message</div>
+              <div className="text-sm text-primary/40">
+                {t("logs.type.message")}
+              </div>
               <div className="text-sm">
                 {logLine.content.split("\n").map((line) => (
                   <>