Added UpdateTopline component

client/src/__locales/en.json

@@ -245,5 +245,6 @@
     "form_error_port_unsafe": "This is an unsafe port",
     "form_error_equal": "Shouldn't be equal",
     "form_error_password": "Password mismatched",
-    "reset_settings": "Reset settings"
+    "reset_settings": "Reset settings",
+    "update_announcement": "AdGuard Home {{version}} is now available! <0>Click here</0> for more info."
 }

client/src/components/App/index.js

@@ -17,7 +17,7 @@ import Logs from '../../containers/Logs';
 import Footer from '../ui/Footer';
 import Toasts from '../Toasts';
 import Status from '../ui/Status';
-import Topline from '../ui/Topline';
+import UpdateTopline from '../ui/UpdateTopline';
 import EncryptionTopline from '../ui/EncryptionTopline';
 import i18n from '../../i18n';
 
@@ -62,9 +62,10 @@ class App extends Component {
             <HashRouter hashType='noslash'>
                 <Fragment>
                     {updateAvailable &&
-                        <Topline type="info">
-                            {dashboard.announcement} <a href={dashboard.announcementUrl} target="_blank" rel="noopener noreferrer">Click here</a> for more info.
-                        </Topline>
+                        <UpdateTopline
+                            url={dashboard.announcementUrl}
+                            version={dashboard.version}
+                        />
                     }
                     {!encryption.processing &&
                         <EncryptionTopline notAfter={encryption.not_after} />

client/src/components/ui/UpdateTopline.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
+
+import Topline from './Topline';
+
+const UpdateTopline = props => (
+    <Topline type="info">
+        <Trans
+            values={{ version: props.version }}
+            components={[
+                <a href={props.url} target="_blank" rel="noopener noreferrer" key="0">
+                    Click here
+                </a>,
+            ]}
+        >
+            update_announcement
+        </Trans>
+    </Topline>
+);
+
+UpdateTopline.propTypes = {
+    version: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+};
+
+export default withNamespaces()(UpdateTopline);

client/src/reducers/index.js

@@ -120,13 +120,13 @@ const dashboard = handleActions({
 
         if (versionCompare(currentVersion, payload.version) === -1) {
             const {
-                announcement,
+                version,
                 announcement_url: announcementUrl,
             } = payload;
 
             const newState = {
                 ...state,
-                announcement,
+                version,
                 announcementUrl,
                 isUpdateAvailable: true,
             };