Merge branch 'master' into 1920-client-find

client/package-lock.json

@@ -12377,9 +12377,9 @@
       }
     },
     "react-i18next": {
-      "version": "11.4.0",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.4.0.tgz",
-      "integrity": "sha512-lyOZSSQkif4H9HnHN3iEKVkryLI+WkdZSEw3VAZzinZLopfYRMHVY5YxCopdkXPLEHs6S5GjKYPh3+j0j336Fg==",
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.7.2.tgz",
+      "integrity": "sha512-Djj3K3hh5Tecla2CI9rLO3TZBYGMFrGilm0JY4cLofAQONCi5TK6nVmUPKoB59n1ZffgjfgJt6zlbE9aGF6Q0Q==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "html-parse-stringify2": "2.0.1"

client/package.json

@@ -28,7 +28,7 @@
         "react": "^16.13.1",
         "react-click-outside": "^3.0.1",
         "react-dom": "^16.13.1",
-        "react-i18next": "^11.4.0",
+        "react-i18next": "^11.7.2",
         "react-modal": "^3.11.2",
         "react-popper-tooltip": "^2.11.1",
         "react-redux": "^7.2.0",

client/src/__locales/en.json

@@ -363,7 +363,7 @@
     "fix": "Fix",
     "dns_providers": "Here is a <0>list of known DNS providers</0> to choose from.",
     "update_now": "Update now",
-    "update_failed": "Auto-update failed. Please <a href='https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update'>follow the steps</a> to update manually.",
+    "update_failed": "Auto-update failed. Please <a>follow these steps</a> to update manually.",
     "processing_update": "Please wait, AdGuard Home is being updated",
     "clients_title": "Clients",
     "clients_desc": "Configure devices connected to AdGuard Home",

client/src/actions/index.js

@@ -4,9 +4,10 @@ import axios from 'axios';
 
 import endsWith from 'lodash/endsWith';
 import escapeRegExp from 'lodash/escapeRegExp';
+import React from 'react';
 import { splitByNewLine, sortClients } from '../helpers/helpers';
 import {
-    BLOCK_ACTIONS, CHECK_TIMEOUT, STATUS_RESPONSE, SETTINGS_NAMES, FORM_NAME,
+    BLOCK_ACTIONS, CHECK_TIMEOUT, STATUS_RESPONSE, SETTINGS_NAMES, FORM_NAME, GETTING_STARTED_LINK,
 } from '../helpers/constants';
 import { areEqualVersions } from '../helpers/version';
 import { getTlsStatus } from './encryption';
@@ -184,7 +185,14 @@ export const getUpdate = () => async (dispatch, getState) => {
 
     dispatch(getUpdateRequest());
     const handleRequestError = () => {
-        dispatch(addNoticeToast({ error: 'update_failed' }));
+        const options = {
+            components: {
+                a: <a href={GETTING_STARTED_LINK} target="_blank"
+                      rel="noopener noreferrer" />,
+            },
+        };
+
+        dispatch(addNoticeToast({ error: 'update_failed', options }));
         dispatch(getUpdateFailure());
     };
 

client/src/components/Logs/Logs.css

@@ -388,3 +388,28 @@
 .logs__table .loading:before {
     min-height: 100%;
 }
+
+.logs__whois {
+    display: inline;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.logs__whois::after {
+    content: "|";
+    padding: 0 5px;
+    opacity: 0.3;
+}
+
+.logs__whois:last-child::after {
+    content: "";
+}
+
+.logs__whois-icon.icons {
+    position: relative;
+    top: -2px;
+    width: 12px;
+    height: 12px;
+    margin-right: 1px;
+    opacity: 0.5;
+}

client/src/components/Settings/Clients/whoisCell.js

@@ -14,7 +14,7 @@ const getFormattedWhois = (value, t) => {
                 <div key={key} title={t(key)}>
                     {icon && (
                         <Fragment>
-                            <svg className="logs__whois-icon text-muted-dark icons">
+                            <svg className="logs__whois-icon text-muted-dark icons icon--24">
                                 <use xlinkHref={`#${icon}`} />
                             </svg>
                             &nbsp;

client/src/components/Toasts/Toast.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { TOAST_TIMEOUTS } from '../../helpers/constants';
 import { removeToast } from '../../actions';
@@ -9,8 +9,8 @@ const Toast = ({
     id,
     message,
     type,
+    options,
 }) => {
-    const { t } = useTranslation();
     const dispatch = useDispatch();
     const [timerId, setTimerId] = useState(null);
 
@@ -30,7 +30,12 @@ const Toast = ({
     return <div className={`toast toast--${type}`}
                 onMouseOver={clearRemoveToastTimeout}
                 onMouseOut={setRemoveToastTimeout}>
-        <p className="toast__content">{t(message)}</p>
+        <p className="toast__content">
+            <Trans
+                    i18nKey={message}
+                    {...options}
+            />
+        </p>
         <button className="toast__dismiss" onClick={removeCurrentToast}>
             <svg stroke="#fff" fill="none" width="20" height="20" strokeWidth="2"
                  viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -45,6 +50,7 @@ Toast.propTypes = {
     id: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
+    options: PropTypes.object,
 };
 
 export default Toast;

client/src/helpers/constants.js

@@ -53,6 +53,8 @@ export const REPOSITORY = {
 export const PRIVACY_POLICY_LINK = 'https://adguard.com/privacy/home.html';
 export const PORT_53_FAQ_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/FAQ#bindinuse';
 
+export const GETTING_STARTED_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update';
+
 export const ADDRESS_IN_USE_TEXT = 'address already in use';
 
 export const INSTALL_FIRST_STEP = 1;
@@ -76,8 +78,6 @@ export const EMPTY_DATE = '0001-01-01T00:00:00Z';
 export const DEBOUNCE_TIMEOUT = 300;
 export const DEBOUNCE_FILTER_TIMEOUT = 500;
 export const CHECK_TIMEOUT = 1000;
-export const SUCCESS_TOAST_TIMEOUT = 5000;
-export const FAILURE_TOAST_TIMEOUT = 30000;
 export const HIDE_TOOLTIP_DELAY = 300;
 export const SHOW_TOOLTIP_DELAY = 200;
 export const MODAL_OPEN_TIMEOUT = 150;
@@ -540,8 +540,11 @@ export const TOAST_TYPES = {
     NOTICE: 'notice',
 };
 
+export const SUCCESS_TOAST_TIMEOUT = 5000;
+export const FAILURE_TOAST_TIMEOUT = 30000;
+
 export const TOAST_TIMEOUTS = {
-    [TOAST_TYPES.SUCCESS]: 5000,
-    [TOAST_TYPES.ERROR]: 30000,
-    [TOAST_TYPES.NOTICE]: 30000,
+    [TOAST_TYPES.SUCCESS]: SUCCESS_TOAST_TIMEOUT,
+    [TOAST_TYPES.ERROR]: FAILURE_TOAST_TIMEOUT,
+    [TOAST_TYPES.NOTICE]: FAILURE_TOAST_TIMEOUT,
 };

client/src/helpers/renderFormattedClientCell.js

@@ -9,7 +9,7 @@ const getFormattedWhois = (whois) => {
             .map((key) => {
                 const icon = WHOIS_ICONS[key];
                 return (
-                    <span className="logs__whois text-muted " key={key} title={whoisInfo[key]}>
+                    <span className="logs__whois text-muted" key={key} title={whoisInfo[key]}>
                     {icon && (
                         <>
                             <svg className="logs__whois-icon icons icon--18">

client/src/reducers/toasts.js

@@ -15,6 +15,7 @@ const toasts = handleActions({
         const errorToast = {
             id: nanoid(),
             message,
+            options: payload.options,
             type: TOAST_TYPES.ERROR,
         };
 
@@ -35,6 +36,7 @@ const toasts = handleActions({
         const noticeToast = {
             id: nanoid(),
             message: payload.error.toString(),
+            options: payload.options,
             type: TOAST_TYPES.NOTICE,
         };