From 36f9fecaed161b1bc7150fa245577ba4c7197910 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Mon, 11 Mar 2024 11:12:45 +0300
Subject: [PATCH] Pull request: fix served from cache label

Updates #6740.

Squashed commit of the following:

commit a3cb491099060c6bb1f543196c6d179edddb9a3a
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Mar 7 17:15:55 2024 +0300

    fix tooltip label

commit 4ab301e34ca2983e3bbcaeb914b3707bcec99a25
Merge: 6bc325d35 5388ad55a
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Mar 7 17:08:45 2024 +0300

    Merge branch 'master' into ADG-8259

commit 6bc325d35db9cdbf1199a309fbef50e8aefa0834
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Mar 7 09:58:35 2024 +0300

    fix icon

commit 8274faaf39c62d1777c21ab5d9b6fdfd88674527
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Mar 7 09:56:50 2024 +0300

    ADG-8259 fix server from cache label
---
 CHANGELOG.md                                     |  2 ++
 client/src/__locales/en.json                     |  2 +-
 client/src/components/Logs/Cells/ResponseCell.js | 14 ++++++++++----
 client/src/components/Logs/Cells/index.js        | 14 ++++++++++----
 client/src/components/ui/Icons.js                |  4 ++++
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3953d3f..15102de7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,11 +32,13 @@ NOTE: Add new changes BELOW THIS COMMENT.
 
 ### Fixed
 
+- Missing "served from cache" label on long DNS server strings ([#6740]).
 - Incorrect tracking of the system hosts file's changes ([#6711]).
 
 [#5992]: https://github.com/AdguardTeam/AdGuardHome/issues/5992
 [#6610]: https://github.com/AdguardTeam/AdGuardHome/issues/6610
 [#6711]: https://github.com/AdguardTeam/AdGuardHome/issues/6711
+[#6740]: https://github.com/AdguardTeam/AdGuardHome/issues/6740
 
 <!--
 NOTE: Add new changes ABOVE THIS COMMENT.
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index bc3e459c..dc4e9271 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -678,7 +678,7 @@
     "use_saved_key": "Use the previously saved key",
     "parental_control": "Parental Control",
     "safe_browsing": "Safe Browsing",
-    "served_from_cache": "{{value}} <i>(served from cache)</i>",
+    "served_from_cache_label": "Served from cache",
     "form_error_password_length": "Password must be {{min}} to {{max}} characters long",
     "anonymizer_notification": "<0>Note:</0> IP anonymization is enabled. You can disable it in <1>General settings</1>.",
     "confirm_dns_cache_clear": "Are you sure you want to clear DNS cache?",
diff --git a/client/src/components/Logs/Cells/ResponseCell.js b/client/src/components/Logs/Cells/ResponseCell.js
index c9282e70..3de2f3ad 100644
--- a/client/src/components/Logs/Cells/ResponseCell.js
+++ b/client/src/components/Logs/Cells/ResponseCell.js
@@ -38,9 +38,6 @@ const ResponseCell = ({
 
     const statusLabel = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason);
     const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
-    const upstreamString = cached
-        ? t('served_from_cache', { value: upstream, i: <i /> })
-        : upstream;
 
     const renderResponses = (responseArr) => {
         if (!responseArr || responseArr.length === 0) {
@@ -58,7 +55,16 @@ const ResponseCell = ({
 
     const COMMON_CONTENT = {
         encryption_status: boldStatusLabel,
-        install_settings_dns: upstreamString,
+        install_settings_dns: upstream,
+        ...(cached
+            && {
+                served_from_cache_label: (
+                    <svg className="icons icon--20 icon--green mb-1">
+                        <use xlinkHref="#check" />
+                    </svg>
+                ),
+            }
+        ),
         elapsed: formattedElapsedMs,
         response_code: status,
         ...(service_name && services.allServices
diff --git a/client/src/components/Logs/Cells/index.js b/client/src/components/Logs/Cells/index.js
index fe32b104..df46a429 100644
--- a/client/src/components/Logs/Cells/index.js
+++ b/client/src/components/Logs/Cells/index.js
@@ -118,9 +118,6 @@ const Row = memo(({
 
         const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
         const clientNameBlockingFor = getBlockingClientName(clients, client);
-        const upstreamString = cached
-            ? t('served_from_cache', { value: upstream, i: <i /> })
-            : upstream;
 
         const onBlockingForClientClick = () => {
             dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
@@ -192,7 +189,16 @@ const Row = memo(({
                             className="link--green">{sourceData.name}
                     </a>,
             response_details: 'title',
-            install_settings_dns: upstreamString,
+            install_settings_dns: upstream,
+            ...(cached
+                && {
+                    served_from_cache_label: (
+                        <svg className="icons icon--20 icon--green">
+                            <use xlinkHref="#check" />
+                        </svg>
+                    ),
+                }
+            ),
             elapsed: formattedElapsedMs,
             ...(rules.length > 0
                     && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }
diff --git a/client/src/components/ui/Icons.js b/client/src/components/ui/Icons.js
index af5ca52c..01a79898 100644
--- a/client/src/components/ui/Icons.js
+++ b/client/src/components/ui/Icons.js
@@ -245,6 +245,10 @@ const Icons = () => (
             <path fillRule="evenodd" clipRule="evenodd" d="M12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12C13.5 12.8284 12.8284 13.5 12 13.5Z" fill="currentColor" />
             <path fillRule="evenodd" clipRule="evenodd" d="M12 20C11.1716 20 10.5 19.3284 10.5 18.5C10.5 17.6716 11.1716 17 12 17C12.8284 17 13.5 17.6716 13.5 18.5C13.5 19.3284 12.8284 20 12 20Z" fill="currentColor" />
         </symbol>
+
+        <symbol id="check" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M5 11.7665L10.5878 17L19 8" />
+        </symbol>
     </svg>
 );