Pull request: 4913 IP anonymizer notification

Updates #4913

Squashed commit of the following:

commit baa63c647bdecf10a2c5e91568231864c423c4c3
Merge: 70de6540 9ffe0787
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Sep 19 18:53:24 2022 +0300

    Merge branch 'master' into 4913-anonymizer-notification

commit 70de65405fa34ba764408ce1331f90ec0ef7aec2
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Sep 19 18:03:52 2022 +0300

    client: fix text

commit e6d8db0086903fe61b0aa511807e97dd12bd571c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Sep 16 20:37:42 2022 +0300

    client: IP anonymizer notification

client/src/__locales/en.json

@@ -635,5 +635,6 @@
     "parental_control": "Parental Control",
     "safe_browsing": "Safe Browsing",
     "served_from_cache": "{{value}} <i>(served from cache)</i>",
-    "form_error_password_length": "Password must be at least {{value}} characters long"
+    "form_error_password_length": "Password must be at least {{value}} characters long",
+    "anonymizer_notification": "<0>Note:</0> IP anonymization is enabled. You can disable it in <1>General settings</1>."
 }

client/src/components/Logs/AnonymizerNotification.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { HashLink as Link } from 'react-router-hash-link';
+
+const AnonymizerNotification = () => (
+    <div className="alert alert-primary mt-6">
+        <Trans components={[
+            <strong key="0">text</strong>,
+            <Link to="/settings#logs-config" key="1">link</Link>,
+        ]}>
+            anonymizer_notification
+        </Trans>
+    </div>
+);
+
+export default AnonymizerNotification;

client/src/components/Logs/index.js

@@ -25,6 +25,7 @@ import {
 import InfiniteTable from './InfiniteTable';
 import './Logs.css';
 import { BUTTON_PREFIX } from './Cells/helpers';
+import AnonymizerNotification from './AnonymizerNotification';
 
 const processContent = (data) => Object.entries(data)
     .map(([key, value]) => {
@@ -73,6 +74,7 @@ const Logs = () => {
         processingGetConfig,
         processingAdditionalLogs,
         processingGetLogs,
+        anonymize_client_ip: anonymizeClientIp,
     } = useSelector((state) => state.queryLogs, shallowEqual);
     const filter = useSelector((state) => state.queryLogs.filter, shallowEqual);
     const logs = useSelector((state) => state.queryLogs.logs, shallowEqual);
@@ -206,11 +208,18 @@ const Logs = () => {
         </Modal>
     </>;
 
-    return <>
-        {enabled && processingGetConfig && <Loading />}
-        {enabled && !processingGetConfig && renderPage()}
-        {!enabled && !processingGetConfig && <Disabled />}
-    </>;
+    return (
+        <>
+            {enabled && (
+                <>
+                    {processingGetConfig && <Loading />}
+                    {anonymizeClientIp && <AnonymizerNotification />}
+                    {!processingGetConfig && renderPage()}
+                </>
+            )}
+            {!enabled && !processingGetConfig && <Disabled />}
+        </>
+    );
 };
 
 export default Logs;