Show What's New dialog in app via Help -> Go to release notes

app/main.ts

@@ -865,6 +865,11 @@ function openJoinTheBeta() {
 }
 
 function openReleaseNotes() {
+  if (mainWindow && mainWindow.isVisible()) {
+    mainWindow.webContents.send('show-release-notes');
+    return;
+  }
+
   shell.openExternal(
     `https://github.com/signalapp/Signal-Desktop/releases/tag/v${app.getVersion()}`
   );

js/modules/signal.js

@@ -56,7 +56,7 @@ const {
 const {
   SystemTraySettingsCheckboxes,
 } = require('../../ts/components/conversation/SystemTraySettingsCheckboxes');
-const { WhatsNew } = require('../../ts/components/WhatsNew');
+const { WhatsNewLink } = require('../../ts/components/WhatsNewLink');
 
 // State
 const {
@@ -338,7 +338,7 @@ exports.setup = (options = {}) => {
     StagedLinkPreview,
     DisappearingTimeDialog,
     SystemTraySettingsCheckboxes,
-    WhatsNew,
+    WhatsNewLink,
   };
 
   const Roots = {

preload.js

@@ -340,6 +340,13 @@ try {
     }
   });
 
+  ipc.on('show-release-notes', () => {
+    const { showReleaseNotes } = window.Events;
+    if (showReleaseNotes) {
+      showReleaseNotes();
+    }
+  });
+
   window.addSetupMenuItems = () => ipc.send('add-setup-menu-items');
   window.removeSetupMenuItems = () => ipc.send('remove-setup-menu-items');
 

ts/components/GlobalModalContainer.tsx

@@ -1,9 +1,14 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import React from 'react';
 import { ContactModalStateType } from '../state/ducks/globalModals';
+import { LocalizerType } from '../types/Util';
+
+import { WhatsNewModal } from './WhatsNewModal';
 
 type PropsType = {
+  i18n: LocalizerType;
   // ContactModal
   contactModalState?: ContactModalStateType;
   renderContactModal: () => JSX.Element;
@@ -13,9 +18,13 @@ type PropsType = {
   // SafetyNumberModal
   safetyNumberModalContactId?: string;
   renderSafetyNumber: () => JSX.Element;
+  // WhatsNewModal
+  isWhatsNewVisible: boolean;
+  hideWhatsNewModal: () => unknown;
 };
 
 export const GlobalModalContainer = ({
+  i18n,
   // ContactModal
   contactModalState,
   renderContactModal,
@@ -25,6 +34,9 @@ export const GlobalModalContainer = ({
   // SafetyNumberModal
   safetyNumberModalContactId,
   renderSafetyNumber,
+  // WhatsNewModal
+  hideWhatsNewModal,
+  isWhatsNewVisible,
 }: PropsType): JSX.Element | null => {
   if (safetyNumberModalContactId) {
     return renderSafetyNumber();
@@ -38,5 +50,9 @@ export const GlobalModalContainer = ({
     return renderProfileEditor();
   }
 
+  if (isWhatsNewVisible) {
+    return <WhatsNewModal hideWhatsNewModal={hideWhatsNewModal} i18n={i18n} />;
+  }
+
   return null;
 };

ts/components/WhatsNewLink.tsx

@@ -0,0 +1,29 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { Intl } from './Intl';
+
+import { LocalizerType } from '../types/Util';
+
+export type PropsType = {
+  i18n: LocalizerType;
+  showWhatsNewModal: () => unknown;
+};
+
+export const WhatsNewLink = (props: PropsType): JSX.Element => {
+  const { i18n, showWhatsNewModal } = props;
+
+  return (
+    <Intl
+      i18n={i18n}
+      id="whatsNew"
+      components={[
+        <button className="WhatsNew" type="button" onClick={showWhatsNewModal}>
+          {i18n('viewReleaseNotes')}
+        </button>,
+      ]}
+    />
+  );
+};

ts/components/WhatsNewModal.tsx

@@ -0,0 +1,89 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ReactChild } from 'react';
+import moment from 'moment';
+
+import { Modal } from './Modal';
+import { Intl, IntlComponentsType } from './Intl';
+import { Emojify } from './conversation/Emojify';
+import type { LocalizerType, RenderTextCallbackType } from '../types/Util';
+
+export type PropsType = {
+  hideWhatsNewModal: () => unknown;
+  i18n: LocalizerType;
+};
+
+type ReleaseNotesType = {
+  date: Date;
+  version: string;
+  features: Array<{ key: string; components: IntlComponentsType }>;
+};
+
+const renderText: RenderTextCallbackType = ({ key, text }) => (
+  <Emojify key={key} text={text} />
+);
+
+const releaseNotes: ReleaseNotesType = {
+  date: new Date(window.getBuildCreation?.() || Date.now()),
+  version: window.getVersion(),
+  features: [
+    {
+      key: 'WhatsNew__v5.22',
+      components: undefined,
+    },
+  ],
+};
+
+export const WhatsNewModal = ({
+  i18n,
+  hideWhatsNewModal,
+}: PropsType): JSX.Element => {
+  let contentNode: ReactChild;
+
+  if (releaseNotes.features.length === 1) {
+    const { key, components } = releaseNotes.features[0];
+    contentNode = (
+      <p>
+        <Intl
+          i18n={i18n}
+          id={key}
+          renderText={renderText}
+          components={components}
+        />
+      </p>
+    );
+  } else {
+    contentNode = (
+      <ul>
+        {releaseNotes.features.map(({ key, components }) => (
+          <li key={key}>
+            <Intl
+              i18n={i18n}
+              id={key}
+              renderText={renderText}
+              components={components}
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <Modal
+      hasXButton
+      i18n={i18n}
+      onClose={hideWhatsNewModal}
+      title={i18n('WhatsNew__modal-title')}
+    >
+      <>
+        <span>
+          {moment(releaseNotes.date).format('LL')} &middot;{' '}
+          {releaseNotes.version}
+        </span>
+        {contentNode}
+      </>
+    </Modal>
+  );
+};