feat(App): Add link to changelog in app update notification

Author: adlk

src/components/layout/AppLayout.js

@@ -23,6 +23,10 @@ const messages = defineMessages({
     id: 'infobar.buttonReloadServices',
     defaultMessage: '!!!Reload services',
   },
+  changelog: {
+    id: 'infobar.buttonChangelog',
+    defaultMessage: '!!!Changelog',
+  },
   buttonInstallUpdate: {
     id: 'infobar.buttonInstallUpdate',
     defaultMessage: '!!!Restart & install update',
@@ -135,7 +139,9 @@ export default class AppLayout extends Component {
                 sticky
               >
                 <span className="mdi mdi-information" />
-                {intl.formatMessage(messages.updateAvailable)}
+                {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
+                  <u>{intl.formatMessage(messages.changelog)}</u>
+                </a>
               </InfoBar>
             )}
             {services}

src/components/ui/InfoBar.js

@@ -61,10 +61,13 @@ export default class InfoBar extends Component {
           [`${className}`]: true,
         })}
       >
-        <div onClick={onClick} className="info-bar__content">
+        <div className="info-bar__content">
           {children}
           {ctaLabel && (
-            <button className="info-bar__cta">
+            <button
+              className="info-bar__cta"
+              onClick={onClick}
+            >
               <Loader
                 loaded={!ctaLoading}
                 lines={10}

src/i18n/locales/en-US.json

@@ -58,6 +58,7 @@
   "infobar.updateAvailable": "A new update for Franz is available.",
   "infobar.buttonReloadServices": "Reload services",
   "infobar.buttonInstallUpdate": "Restart & install update",
+  "infobar.buttonChangelog": "What is new?",
   "infobar.requiredRequestsFailed": "Could not load services and user information",
   "sidebar.settings": "Settings",
   "sidebar.addNewService": "Add new service",

src/styles/info-bar.scss

@@ -46,6 +46,10 @@
     }
   }
 
+  a {
+    // text-decoration: underline;
+  }
+
   &.info-bar--bottom {
     order: 10;
   }