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

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;
  }