* client: add link to the update error

client/src/__locales/en.json

@@ -262,7 +262,6 @@
     "fix": "Fix",
     "dns_providers": "Here is a <0>list of known DNS providers</0> to choose from.",
     "update_now": "Update now",
-    "update_failed": "Update failed",
-    "update_failed_try_later": "Update failed, please try again later",
+    "update_failed": "Auto-update failed. Please <a href='https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update'>follow the steps<\/a> to update manually.",
     "processing_update": "Please wait, AdGuard Home is being updated"
 }

client/src/actions/index.js

@@ -12,6 +12,7 @@ const apiClient = new Api();
 
 export const addErrorToast = createAction('ADD_ERROR_TOAST');
 export const addSuccessToast = createAction('ADD_SUCCESS_TOAST');
+export const addNoticeToast = createAction('ADD_NOTICE_TOAST');
 export const removeToast = createAction('REMOVE_TOAST');
 
 export const toggleSettingStatus = createAction('SETTING_STATUS_TOGGLE');
@@ -169,7 +170,7 @@ export const getUpdate = () => async (dispatch) => {
             let timeout;
 
             if (count > 60) {
-                dispatch(addErrorToast({ error: 'update_failed_try_later' }));
+                dispatch(addNoticeToast({ error: 'update_failed' }));
                 dispatch(getUpdateFailure());
                 return false;
             }
@@ -181,8 +182,6 @@ export const getUpdate = () => async (dispatch) => {
                 ...args,
             );
 
-            console.log(count);
-
             axios.get('control/status')
                 .then((response) => {
                     rmTimeout(timeout);
@@ -202,7 +201,7 @@ export const getUpdate = () => async (dispatch) => {
 
         checkUpdate();
     } catch (error) {
-        dispatch(addErrorToast({ error: 'update_failed' }));
+        dispatch(addNoticeToast({ error: 'update_failed' }));
         dispatch(getUpdateFailure());
     }
 };

client/src/components/Toasts/Toast.css

@@ -32,6 +32,12 @@
     overflow: hidden;
 }
 
+.toast__content a {
+    font-weight: 600;
+    color: #fff;
+    text-decoration: underline;
+}
+
 .toast__dismiss {
     display: block;
     flex: 0 0 auto;

client/src/components/Toasts/Toast.js

@@ -4,7 +4,7 @@ import { Trans, withNamespaces } from 'react-i18next';
 
 class Toast extends Component {
     componentDidMount() {
-        const timeout = this.props.type === 'error' ? 30000 : 5000;
+        const timeout = this.props.type === 'success' ? 5000 : 30000;
 
         setTimeout(() => {
             this.props.removeToast(this.props.id);
@@ -15,13 +15,25 @@ class Toast extends Component {
         return false;
     }
 
+    showMessage(t, type, message) {
+        if (type === 'notice') {
+            return <span dangerouslySetInnerHTML={{ __html: t(message) }} />;
+        }
+
+        return <Trans>{message}</Trans>;
+    }
+
     render() {
+        const {
+            type, id, t, message,
+        } = this.props;
+
         return (
-            <div className={`toast toast--${this.props.type}`}>
+            <div className={`toast toast--${type}`}>
                 <p className="toast__content">
-                    <Trans>{this.props.message}</Trans>
+                    {this.showMessage(t, type, message)}
                 </p>
-                <button className="toast__dismiss" onClick={() => this.props.removeToast(this.props.id)}>
+                <button className="toast__dismiss" onClick={() => this.props.removeToast(id)}>
                     <svg stroke="#fff" fill="none" width="20" height="20" strokeWidth="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18 6-12 12"/><path d="m6 6 12 12"/></svg>
                 </button>
             </div>
@@ -30,6 +42,7 @@ class Toast extends Component {
 }
 
 Toast.propTypes = {
+    t: PropTypes.func.isRequired,
     id: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,

client/src/reducers/toasts.js

@@ -1,7 +1,7 @@
 import { handleActions } from 'redux-actions';
 import nanoid from 'nanoid';
 
-import { addErrorToast, addSuccessToast, removeToast } from '../actions';
+import { addErrorToast, addSuccessToast, addNoticeToast, removeToast } from '../actions';
 
 const toasts = handleActions({
     [addErrorToast]: (state, { payload }) => {
@@ -24,6 +24,16 @@ const toasts = handleActions({
         const newState = { ...state, notices: [...state.notices, successToast] };
         return newState;
     },
+    [addNoticeToast]: (state, { payload }) => {
+        const noticeToast = {
+            id: nanoid(),
+            message: payload.error.toString(),
+            type: 'notice',
+        };
+
+        const newState = { ...state, notices: [...state.notices, noticeToast] };
+        return newState;
+    },
     [removeToast]: (state, { payload }) => {
         const filtered = state.notices.filter(notice => notice.id !== payload);
         const newState = { ...state, notices: filtered };