From c53a132072b3601a459878c40a40740fe1e88917 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Wed, 20 Feb 2019 16:54:14 +0300
Subject: [PATCH] Added UpdateTopline component

---
 client/src/__locales/en.json              |  3 ++-
 client/src/components/App/index.js        |  9 ++++----
 client/src/components/ui/UpdateTopline.js | 27 +++++++++++++++++++++++
 client/src/reducers/index.js              |  4 ++--
 4 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/ui/UpdateTopline.js

diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index 3412a12a..4d8ac38c 100644
--- a/client/src/__locales/en.json
+++ b/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."
 }
\ No newline at end of file
diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
index b483f64a..91c5e512 100644
--- a/client/src/components/App/index.js
+++ b/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} />
diff --git a/client/src/components/ui/UpdateTopline.js b/client/src/components/ui/UpdateTopline.js
new file mode 100644
index 00000000..a9124666
--- /dev/null
+++ b/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);
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
index 8cd04ac5..e83f48a1 100644
--- a/client/src/reducers/index.js
+++ b/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,
             };