Feature: Add Release Notes (#491)

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

9 files changed, 341 insertions, 100 deletions

diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx
index 48efbfb7f..3ff488b74 100644
--- a/src/components/AppUpdateInfoBar.tsx
+++ b/src/components/AppUpdateInfoBar.tsx
@@ -2,10 +2,10 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { mdiInformation } from '@mdi/js';
 import InfoBar from './ui/InfoBar';
-import { GITHUB_FERDIUM_URL } from '../config';
-import { openExternalUrl } from '../helpers/url-helpers';
 import Icon from './ui/icon';
 
+import { onAuthGoToReleaseNotes } from '../helpers/update-helpers';
+
 const messages = defineMessages({
   updateAvailable: {
     id: 'infobar.updateAvailable',
@@ -24,9 +24,14 @@ const messages = defineMessages({
 type Props = {
   onInstallUpdate: () => void;
   onHide: () => void;
+  updateVersionParsed: string;
 };
 
-const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => {
+const AppUpdateInfoBar = ({
+  onInstallUpdate,
+  updateVersionParsed,
+  onHide,
+}: Props) => {
   const intl = useIntl();
 
   return (
@@ -41,12 +46,12 @@ const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => {
       <button
         className="info-bar__inline-button"
         type="button"
-        onClick={() =>
-          openExternalUrl(
-            `${GITHUB_FERDIUM_URL}/ferdium-app/blob/develop/CHANGELOG.md`,
-            true,
-          )
-        }
+        onClick={() => {
+          window.location.href = onAuthGoToReleaseNotes(
+            window.location.href,
+            updateVersionParsed,
+          );
+        }}
       >
         <u>{intl.formatMessage(messages.changelog)}</u>
       </button>
diff --git a/src/components/auth/AuthLayout.jsx b/src/components/auth/AuthLayout.jsx
index 8a88cedb1..5c87c3080 100644
--- a/src/components/auth/AuthLayout.jsx
+++ b/src/components/auth/AuthLayout.jsx
@@ -14,6 +14,7 @@ import {
   oneOrManyChildElements,
   globalError as globalErrorPropType,
 } from '../../prop-types';
+import { updateVersionParse } from '../../helpers/update-helpers';
 import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
@@ -34,6 +35,7 @@ class AuthLayout extends Component {
     isFullScreen: PropTypes.bool.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
+    updateVersion: PropTypes.string.isRequired,
   };
 
   constructor() {
@@ -55,10 +57,10 @@ class AuthLayout extends Component {
       isFullScreen,
       installAppUpdate,
       appUpdateIsDownloaded,
+      updateVersion,
     } = this.props;
 
     const { intl } = this.props;
-
     let serverNameParse = serverName();
     serverNameParse =
       serverNameParse === 'Custom' ? 'your Custom Server' : serverNameParse;
@@ -81,6 +83,7 @@ class AuthLayout extends Component {
           {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
             <AppUpdateInfoBar
               onInstallUpdate={installAppUpdate}
+              updateVersionParsed={updateVersionParse(updateVersion)}
               onHide={() => {
                 this.setState({ shouldShowAppUpdateInfoBar: false });
               }}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.jsx
index f7860afc6..685839c0a 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.jsx
@@ -13,6 +13,7 @@ import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as QuickSwitch } from '../../features/quickSwitch';
 import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
 import ErrorBoundary from '../util/ErrorBoundary';
+import { updateVersionParse } from '../../helpers/update-helpers';
 
 // import globalMessages from '../../i18n/globalMessages';
 
@@ -94,10 +95,14 @@ class AppLayout extends Component {
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
   };
 
-  state = {
-    shouldShowAppUpdateInfoBar: true,
-    shouldShowServicesUpdatedInfoBar: true,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      shouldShowAppUpdateInfoBar: true,
+      shouldShowServicesUpdatedInfoBar: true,
+    };
+  }
 
   render() {
     const {
@@ -115,6 +120,7 @@ class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
+      updateVersion,
     } = this.props;
 
     const { intl } = this.props;
@@ -126,86 +132,90 @@ class AppLayout extends Component {
 
     return (
       <>
-      {isMac && !isFullScreen && (
-        <div className="window-draggable" />
-      )}
-      <ErrorBoundary>
-        <div className="app">
-          {isWindows && !isFullScreen && (
-            <TitleBar
-              menu={window['ferdium'].menu.template}
-              icon="assets/images/logo.svg"
-            />
-          )}
-          {isMac && !isFullScreen && (
-            <span
-              onDoubleClick={toggleFullScreen}
-              className={classes.titleBar}
-            />
-          )}
-          <div className={`app__content ${classes.appContent}`}>
-            {workspacesDrawer}
-            {sidebar}
-            <div className="app__service">
-              <WorkspaceSwitchingIndicator />
-              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                <InfoBar
-                  type="danger"
-                  ctaLabel="Try again"
-                  ctaLoading={areRequiredRequestsLoading}
-                  sticky
-                  onClick={retryRequiredRequests}
-                >
-                  <Icon icon={mdiFlash} />
-                  {intl.formatMessage(messages.requiredRequestsFailed)}
-                </InfoBar>
-              )}
-              {authRequestFailed && (
-                <InfoBar
-                  type="danger"
-                  ctaLabel="Try again"
-                  ctaLoading={areRequiredRequestsLoading}
-                  sticky
-                  onClick={retryRequiredRequests}
-                >
-                  <Icon icon={mdiFlash} />
-                  {intl.formatMessage(messages.authRequestFailed)}
-                </InfoBar>
-              )}
-              {automaticUpdates && showServicesUpdatedInfoBar &&
-                this.state.shouldShowServicesUpdatedInfoBar && (
+        {isMac && !isFullScreen && <div className="window-draggable" />}
+        <ErrorBoundary>
+          <div className="app">
+            {isWindows && !isFullScreen && (
+              <TitleBar
+                menu={window['ferdium'].menu.template}
+                icon="assets/images/logo.svg"
+              />
+            )}
+            {isMac && !isFullScreen && (
+              <span
+                onDoubleClick={toggleFullScreen}
+                className={classes.titleBar}
+              />
+            )}
+            <div className={`app__content ${classes.appContent}`}>
+              {workspacesDrawer}
+              {sidebar}
+              <div className="app__service">
+                <WorkspaceSwitchingIndicator />
+                {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+                  <InfoBar
+                    type="danger"
+                    ctaLabel="Try again"
+                    ctaLoading={areRequiredRequestsLoading}
+                    sticky
+                    onClick={retryRequiredRequests}
+                  >
+                    <Icon icon={mdiFlash} />
+                    {intl.formatMessage(messages.requiredRequestsFailed)}
+                  </InfoBar>
+                )}
+                {authRequestFailed && (
                   <InfoBar
-                    type="primary"
-                    ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                    onClick={() => window.location.reload()}
-                    onHide={() => {
-                      this.setState({
-                        shouldShowServicesUpdatedInfoBar: false,
-                      });
-                    }}
+                    type="danger"
+                    ctaLabel="Try again"
+                    ctaLoading={areRequiredRequestsLoading}
+                    sticky
+                    onClick={retryRequiredRequests}
                   >
-                    <Icon icon={mdiPowerPlug} />
-                    {intl.formatMessage(messages.servicesUpdated)}
+                    <Icon icon={mdiFlash} />
+                    {intl.formatMessage(messages.authRequestFailed)}
                   </InfoBar>
                 )}
-              {automaticUpdates && appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
-                <AppUpdateInfoBar
-                  onInstallUpdate={installAppUpdate}
-                  onHide={() => {
-                    this.setState({ shouldShowAppUpdateInfoBar: false });
-                  }}
-                />
-              )}
-              <BasicAuth />
-              <QuickSwitch />
-              <PublishDebugInfo />
-              {services}
-              <Outlet />
+                {automaticUpdates &&
+                  showServicesUpdatedInfoBar &&
+                  this.state.shouldShowServicesUpdatedInfoBar && (
+                    <InfoBar
+                      type="primary"
+                      ctaLabel={intl.formatMessage(
+                        messages.buttonReloadServices,
+                      )}
+                      onClick={() => window.location.reload()}
+                      onHide={() => {
+                        this.setState({
+                          shouldShowServicesUpdatedInfoBar: false,
+                        });
+                      }}
+                    >
+                      <Icon icon={mdiPowerPlug} />
+                      {intl.formatMessage(messages.servicesUpdated)}
+                    </InfoBar>
+                  )}
+                {automaticUpdates &&
+                  appUpdateIsDownloaded &&
+                  this.state.shouldShowAppUpdateInfoBar && (
+                    <AppUpdateInfoBar
+                      onInstallUpdate={installAppUpdate}
+                      updateVersionParsed={updateVersionParse(updateVersion)}
+                      onHide={() => {
+                        this.setState({ shouldShowAppUpdateInfoBar: false });
+                      }}
+                    />
+                  )}
+                <BasicAuth />
+                <QuickSwitch />
+                <PublishDebugInfo />
+                {services}
+                <Outlet />
+              </div>
+              <Todos />
             </div>
-            <Todos />
           </div>
-        </div>
-      </ErrorBoundary>
+        </ErrorBoundary>
       </>
     );
   }
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>
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index 117c02f97..228c7888a 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -1,10 +1,10 @@
-import { ReactChildren, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 type Props = {
-  children: ReactChildren;
+  children: ReactNode;
   transitionName: string;
-  className: string;
+  className?: string;
 };
 const Appear = ({
   children,
@@ -36,4 +36,8 @@ const Appear = ({
   );
 };
 
+Appear.defaultProps = {
+  className: '',
+};
+
 export default Appear;