Feature: Add Release Notes (#491)

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

6 files changed, 169 insertions, 1 deletions

diff --git a/src/containers/auth/AuthLayoutContainer.tsx b/src/containers/auth/AuthLayoutContainer.tsx
index 8d31cfb48..6fc6713f1 100644
--- a/src/containers/auth/AuthLayoutContainer.tsx
+++ b/src/containers/auth/AuthLayoutContainer.tsx
@@ -49,6 +49,7 @@ class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
           appUpdateIsDownloaded={
             app.updateStatus === app.updateStatusTypes.DOWNLOADED
           }
+          updateVersion={app.updateVersion}
         >
           <Outlet />
         </AuthLayout>
diff --git a/src/containers/auth/AuthReleaseNotesScreen.tsx b/src/containers/auth/AuthReleaseNotesScreen.tsx
new file mode 100644
index 000000000..c717529fa
--- /dev/null
+++ b/src/containers/auth/AuthReleaseNotesScreen.tsx
@@ -0,0 +1,107 @@
+import { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+
+import { defineMessages, injectIntl } from 'react-intl';
+import Markdown from 'markdown-to-jsx';
+import { mdiArrowLeftCircle } from '@mdi/js';
+import { openExternalUrl } from '../../helpers/url-helpers';
+import Icon from '../../components/ui/icon';
+import { ferdiumVersion } from '../../environment-remote';
+import {
+  getFerdiumVersion,
+  getUpdateInfoFromGH,
+} from '../../helpers/update-helpers';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.releasenotes.headline',
+    defaultMessage: 'Release Notes',
+  },
+});
+
+interface IProps {
+  intl: any;
+}
+
+class AuthReleaseNotesScreen 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="auth__container auth__container--releasenotes">
+        <div className="auth__main--releasenotes">
+          <div className="auth__header">
+            <span className="auth__header-item">
+              Ferdium {getFerdiumVersion(window.location.href, ferdiumVersion)}{' '}
+              {' | '}
+            </span>
+            <span className="auth__header-item__secondary">
+              {intl.formatMessage(messages.headline)}
+            </span>
+          </div>
+          <div className="auth__body releasenotes__body">
+            <Markdown options={{ wrapper: 'article' }}>{data}</Markdown>
+          </div>
+          <div className="auth__help">
+            <button
+              type="button"
+              onClick={() => {
+                // For some reason <Link> doesn't work here. So we hard code the path to take us to the Welcome Screen
+                window.location.href = '#/auth/welcome';
+              }}
+            >
+              <Icon icon={mdiArrowLeftCircle} size={1.5} />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl<'intl', IProps>(
+  inject('stores', 'actions')(observer(AuthReleaseNotesScreen)),
+);
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
index a4857a426..9c03b0ba4 100644
--- a/src/containers/layout/AppLayoutContainer.tsx
+++ b/src/containers/layout/AppLayoutContainer.tsx
@@ -157,6 +157,7 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
           areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
+          updateVersion={app.updateVersion}
         >
           <Outlet />
         </AppLayout>
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index a6c4561dd..fbbed629a 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -853,6 +853,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
     const { app } = this.props.stores;
     const {
       updateStatus,
+      updateVersion,
       updateStatusTypes,
       isClearingAllCache,
       lockingFeatureEnabled,
@@ -860,13 +861,13 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
     const { checkForUpdates, installUpdate, clearAllCache } =
       this.props.actions.app;
     const form = this.prepareForm();
-
     return (
       <ErrorBoundary>
         <EditSettingsForm
           form={form}
           checkForUpdates={checkForUpdates}
           installUpdate={installUpdate}
+          updateVersion={updateVersion}
           isCheckingForUpdates={updateStatus === updateStatusTypes.CHECKING}
           isUpdateAvailable={updateStatus === updateStatusTypes.AVAILABLE}
           noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
diff --git a/src/containers/settings/ReleaseNotesScreen.tsx b/src/containers/settings/ReleaseNotesScreen.tsx
new file mode 100644
index 000000000..c3014d187
--- /dev/null
+++ b/src/containers/settings/ReleaseNotesScreen.tsx
@@ -0,0 +1,16 @@
+import { Component, ReactElement } from 'react';
+
+import ReleaseNotes from '../../components/settings/releaseNotes/ReleaseNotesDashboard';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
+class ReleaseNotesScreen extends Component {
+  render(): ReactElement {
+    return (
+      <ErrorBoundary>
+        <ReleaseNotes />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default ReleaseNotesScreen;
diff --git a/src/containers/settings/ReleaseNotesWindow.tsx b/src/containers/settings/ReleaseNotesWindow.tsx
new file mode 100644
index 000000000..3e43727d0
--- /dev/null
+++ b/src/containers/settings/ReleaseNotesWindow.tsx
@@ -0,0 +1,42 @@
+import { inject, observer } from 'mobx-react';
+import { Component, ReactPortal } from 'react';
+import ReactDOM from 'react-dom';
+import { Outlet } from 'react-router-dom';
+
+import { StoresProps } from '../../@types/ferdium-components.types';
+import Layout from '../../components/settings/releaseNotes/ReleaseNotesLayout';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
+class SettingsContainer extends Component<StoresProps> {
+  portalRoot: any;
+
+  el: HTMLDivElement;
+
+  constructor(props: StoresProps) {
+    super(props);
+
+    this.portalRoot = document.querySelector('#portalContainer');
+    this.el = document.createElement('div');
+  }
+
+  componentDidMount(): void {
+    this.portalRoot.append(this.el);
+  }
+
+  componentWillUnmount(): void {
+    this.el.remove();
+  }
+
+  render(): ReactPortal {
+    return ReactDOM.createPortal(
+      <ErrorBoundary>
+        <Layout {...this.props}>
+          <Outlet />
+        </Layout>
+      </ErrorBoundary>,
+      this.el,
+    );
+  }
+}
+
+export default inject('stores', 'actions')(observer(SettingsContainer));