Feature: Add Release Notes (#491)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Co-authored-by: Ricardo Cino <ricardo@cino.io>

5 files changed, 228 insertions, 9 deletions

diff --git a/src/components/settings/SettingsLayout.jsx b/src/components/settings/SettingsLayout.jsx
index dea4bb387..989c428f2 100644
--- a/src/components/settings/SettingsLayout.jsx
+++ b/src/components/settings/SettingsLayout.jsx
@@ -8,6 +8,7 @@ import { Outlet } from 'react-router-dom';
 import ErrorBoundary from '../util/ErrorBoundary';
 import Appear from '../ui/effects/Appear';
 import Icon from '../ui/icon';
+import { isEscKeyPress } from '../../jsUtils';
 
 const messages = defineMessages({
   closeSettings: {
@@ -36,8 +37,7 @@ class SettingsLayout extends Component {
   }
 
   handleKeyDown(e) {
-    if (e.keyCode === 27) {
-      // escape key
+    if (isEscKeyPress(e.keyCode)) {
       this.props.closeSettings();
     }
   }
diff --git a/src/components/settings/navigation/SettingsNavigation.jsx b/src/components/settings/navigation/SettingsNavigation.jsx
index bbbe8d888..e1242a7fe 100644
--- a/src/components/settings/navigation/SettingsNavigation.jsx
+++ b/src/components/settings/navigation/SettingsNavigation.jsx
@@ -5,7 +5,11 @@ import { inject, observer } from 'mobx-react';
 import { RouterStore } from '@superwf/mobx-react-router';
 
 import { NavLink } from 'react-router-dom';
-import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config';
+import {
+  LOCAL_SERVER,
+  LIVE_FERDIUM_API,
+  LIVE_FRANZ_API,
+} from '../../../config';
 import UIStore from '../../../stores/UIStore';
 import SettingsStore from '../../../stores/SettingsStore';
 import UserStore from '../../../stores/UserStore';
@@ -32,6 +36,10 @@ const messages = defineMessages({
     id: 'settings.navigation.team',
     defaultMessage: 'Manage Team',
   },
+  releaseNotes: {
+    id: 'settings.navigation.releaseNotes',
+    defaultMessage: 'Release Notes',
+  },
   supportFerdium: {
     id: 'settings.navigation.supportFerdium',
     defaultMessage: 'About Ferdium',
@@ -165,6 +173,16 @@ class SettingsNavigation extends Component {
             )}
         </NavLink>
         <NavLink
+          to="/settings/releasenotes"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
+        >
+          {intl.formatMessage(messages.releaseNotes)}
+        </NavLink>
+        <NavLink
           to="/settings/support"
           className={({ isActive }) =>
             isActive
@@ -190,4 +208,6 @@ class SettingsNavigation extends Component {
   }
 }
 
-export default injectIntl(inject('stores', 'actions')(observer(SettingsNavigation)));
+export default injectIntl(
+  inject('stores', 'actions')(observer(SettingsNavigation)),
+);
diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
new file mode 100644
index 000000000..d0be82312
--- /dev/null
+++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
@@ -0,0 +1,99 @@
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+import Markdown from 'markdown-to-jsx';
+import { openExternalUrl } from '../../../helpers/url-helpers';
+import { ferdiumVersion } from '../../../environment-remote';
+import {
+  getFerdiumVersion,
+  getUpdateInfoFromGH,
+} from '../../../helpers/update-helpers';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.releasenotes.headline',
+    defaultMessage: 'Release Notes',
+  },
+  connectionError: {
+    id: 'settings.releasenotes.connectionError',
+    defaultMessage:
+      'An error occured when connecting to Github, please try again later.',
+  },
+  connectionErrorPageMissing: {
+    id: 'settings.releasenotes.connectionErrorPageMissing',
+    defaultMessage:
+      'An error occured when connecting to Github, the page you are looking for is missing.',
+  },
+});
+
+interface IProps {
+  intl: any;
+}
+
+class ReleaseNotesDashboard extends Component<IProps> {
+  state = {
+    data: '',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = { data: '' };
+  }
+
+  async componentDidMount() {
+    const { intl } = this.props;
+
+    const data = await getUpdateInfoFromGH(
+      window.location.href,
+      ferdiumVersion,
+      intl,
+    );
+
+    this.setState({
+      data,
+    });
+
+    for (const link of document.querySelectorAll('.releasenotes__body a')) {
+      link.addEventListener('click', this.handleClick.bind(this), false);
+    }
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    openExternalUrl(e.target.href);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'click',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+      this.handleClick.bind(this),
+      false,
+    );
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    const { data } = this.state;
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            Ferdium {getFerdiumVersion(window.location.href, ferdiumVersion)}{' '}
+            {' | '}
+          </span>
+          <span className="settings__header-item__secondary">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body releasenotes__body">
+          <Markdown options={{ wrapper: 'article' }}>{data}</Markdown>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(observer(ReleaseNotesDashboard));
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
new file mode 100644
index 000000000..ee0ba75a8
--- /dev/null
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -0,0 +1,79 @@
+import { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { mdiClose } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
+import { StoresProps } from '../../../@types/ferdium-components.types';
+import ErrorBoundary from '../../util/ErrorBoundary';
+import Appear from '../../ui/effects/Appear';
+import Icon from '../../ui/icon';
+import { isEscKeyPress } from '../../../jsUtils';
+
+const messages = defineMessages({
+  closeSettings: {
+    id: 'settings.app.closeSettings',
+    defaultMessage: 'Close settings',
+  },
+});
+
+interface IProps extends StoresProps {
+  intl: any;
+}
+
+class ReleaseNotesLayout extends Component<IProps> {
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'keydown',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+      this.handleKeyDown.bind(this),
+      false,
+    );
+  }
+
+  handleKeyDown(e) {
+    if (isEscKeyPress(e.keyCode)) {
+      this.props.actions.ui.closeSettings();
+    }
+  }
+
+  render() {
+    const { closeSettings } = this.props.actions.ui;
+
+    const { intl } = this.props;
+
+    return (
+      <Appear transitionName="fadeIn-fast">
+        <div className="settings-wrapper">
+          <ErrorBoundary>
+            <button
+              type="button"
+              className="settings-wrapper__action"
+              onClick={closeSettings}
+              aria-label={intl.formatMessage(messages.closeSettings)}
+            />
+            <div className="settings franz-form">
+              <Outlet />
+              <button
+                type="button"
+                className="settings__close"
+                onClick={closeSettings}
+                aria-label={intl.formatMessage(messages.closeSettings)}
+              >
+                <Icon icon={mdiClose} size={1.35} />
+              </button>
+            </div>
+          </ErrorBoundary>
+        </div>
+      </Appear>
+    );
+  }
+}
+
+export default injectIntl<'intl', IProps>(
+  inject('stores', 'actions')(observer(ReleaseNotesLayout)),
+);
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.jsx
index cb1d261f8..a10d89570 100644
--- a/src/components/settings/settings/EditSettingsForm.jsx
+++ b/src/components/settings/settings/EditSettingsForm.jsx
@@ -15,6 +15,13 @@ import Input from '../../ui/Input';
 import ColorPickerInput from '../../ui/ColorPickerInput';
 import Infobox from '../../ui/Infobox';
 import { H1, H2, H3, H5 } from '../../ui/headline';
+import {
+  ferdiumVersion,
+  userDataPath,
+  userDataRecipesPath,
+} from '../../../environment-remote';
+
+import { updateVersionParse } from '../../../helpers/update-helpers';
 
 import {
   DEFAULT_ACCENT_COLOR,
@@ -25,11 +32,6 @@ import {
   SPLIT_COLUMNS_MIN,
 } from '../../../config';
 import { isMac, isWindows, lockFerdiumShortcutKey } from '../../../environment';
-import {
-  ferdiumVersion,
-  userDataPath,
-  userDataRecipesPath,
-} from '../../../environment-remote';
 import { openExternalUrl, openPath } from '../../../helpers/url-helpers';
 import globalMessages from '../../../i18n/globalMessages';
 import Icon from '../../ui/icon';
@@ -213,6 +215,10 @@ const messages = defineMessages({
     id: 'settings.app.buttonInstallUpdate',
     defaultMessage: 'Restart & install update',
   },
+  buttonShowChangelog: {
+    id: 'settings.app.buttonShowChangelog',
+    defaultMessage: 'Show changelog',
+  },
   updateStatusSearching: {
     id: 'settings.app.updateStatusSearching',
     defaultMessage: 'Searching for updates...',
@@ -328,6 +334,7 @@ class EditSettingsForm extends Component {
       checkForUpdates,
       installUpdate,
       form,
+      updateVersion,
       isCheckingForUpdates,
       isAdaptableDarkModeEnabled,
       isUseGrayscaleServicesEnabled,
@@ -1002,6 +1009,20 @@ class EditSettingsForm extends Component {
                             loaded={!isCheckingForUpdates || !isUpdateAvailable}
                           />
                         )}
+                        {(isUpdateAvailable || updateIsReadyToInstall) && (
+                          <Button
+                            className="settings__updates__changelog-button"
+                            label={intl.formatMessage(
+                              messages.buttonShowChangelog,
+                            )}
+                            onClick={() => {
+                              window.location.href = `#/releasenotes${updateVersionParse(
+                                updateVersion,
+                              )}`;
+                            }}
+                          />
+                        )}
+                        <br />
                         <br />
                       </div>
                       <p>