- client: Add link to 'update_failed' error toast

Close #2062

Squashed commit of the following:

commit a1a1d4fe74dd414f83477d972bc07062e2c890ab
Merge: 9535e109 84938c56
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 8 10:21:47 2020 +0300

    Merge branch 'master' into fix/2062

commit 9535e10934c57c2592df234a030bad183c0086cd
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 7 13:59:57 2020 +0300

    Fix translation

commit e6f912d1d2793fd008c22b4418681abcc54896d0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 7 12:03:45 2020 +0300

    - client: Add link to 'update_failed' error toast
This commit is contained in:
Artem Baskal 2020-09-08 13:18:19 +03:00
parent 84938c5603
commit 06594bde8f
7 changed files with 34 additions and 15 deletions

6
client/package-lock.json generated vendored
View File

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

2
client/package.json vendored
View File

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

View File

@ -363,7 +363,7 @@
"fix": "Fix", "fix": "Fix",
"dns_providers": "Here is a <0>list of known DNS providers</0> to choose from.", "dns_providers": "Here is a <0>list of known DNS providers</0> to choose from.",
"update_now": "Update now", "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", "processing_update": "Please wait, AdGuard Home is being updated",
"clients_title": "Clients", "clients_title": "Clients",
"clients_desc": "Configure devices connected to AdGuard Home", "clients_desc": "Configure devices connected to AdGuard Home",

View File

@ -4,9 +4,10 @@ import axios from 'axios';
import endsWith from 'lodash/endsWith'; import endsWith from 'lodash/endsWith';
import escapeRegExp from 'lodash/escapeRegExp'; import escapeRegExp from 'lodash/escapeRegExp';
import React from 'react';
import { splitByNewLine, sortClients } from '../helpers/helpers'; import { splitByNewLine, sortClients } from '../helpers/helpers';
import { 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'; } from '../helpers/constants';
import { areEqualVersions } from '../helpers/version'; import { areEqualVersions } from '../helpers/version';
import { getTlsStatus } from './encryption'; import { getTlsStatus } from './encryption';
@ -184,7 +185,14 @@ export const getUpdate = () => async (dispatch, getState) => {
dispatch(getUpdateRequest()); dispatch(getUpdateRequest());
const handleRequestError = () => { 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()); dispatch(getUpdateFailure());
}; };

View File

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

View File

@ -53,6 +53,8 @@ export const REPOSITORY = {
export const PRIVACY_POLICY_LINK = 'https://adguard.com/privacy/home.html'; 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 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 ADDRESS_IN_USE_TEXT = 'address already in use';
export const INSTALL_FIRST_STEP = 1; 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_TIMEOUT = 300;
export const DEBOUNCE_FILTER_TIMEOUT = 500; export const DEBOUNCE_FILTER_TIMEOUT = 500;
export const CHECK_TIMEOUT = 1000; 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 HIDE_TOOLTIP_DELAY = 300;
export const SHOW_TOOLTIP_DELAY = 200; export const SHOW_TOOLTIP_DELAY = 200;
export const MODAL_OPEN_TIMEOUT = 150; export const MODAL_OPEN_TIMEOUT = 150;
@ -540,8 +540,11 @@ export const TOAST_TYPES = {
NOTICE: 'notice', NOTICE: 'notice',
}; };
export const SUCCESS_TOAST_TIMEOUT = 5000;
export const FAILURE_TOAST_TIMEOUT = 30000;
export const TOAST_TIMEOUTS = { export const TOAST_TIMEOUTS = {
[TOAST_TYPES.SUCCESS]: 5000, [TOAST_TYPES.SUCCESS]: SUCCESS_TOAST_TIMEOUT,
[TOAST_TYPES.ERROR]: 30000, [TOAST_TYPES.ERROR]: FAILURE_TOAST_TIMEOUT,
[TOAST_TYPES.NOTICE]: 30000, [TOAST_TYPES.NOTICE]: FAILURE_TOAST_TIMEOUT,
}; };

View File

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