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

@@ -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.

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?",

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

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) }

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>
 );