Update release notes for v5.20.0

_locales/en/messages.json

@@ -6489,5 +6489,9 @@
   "WhatsNew__v5.19--4": {
     "message": "This feature goes out to everyone who reacts with 💅 more than 👍: you can now customize the emojis that appear by default when you want to react to a message.",
     "description": "Release notes for v5.19"
+  },
+  "WhatsNew__v5.20": {
+    "message": "This version contains a number of small tweaks and bug fixes to keep Signal running smoothly.",
+    "description": "Release notes for v5.20"
   }
 }

ts/components/WhatsNew.tsx

@@ -1,13 +1,13 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useState } from 'react';
+import React, { ReactChild, ReactNode, useState } from 'react';
 import moment from 'moment';
 
 import { Modal } from './Modal';
 import { Intl, IntlComponentsType } from './Intl';
 import { Emojify } from './conversation/Emojify';
-import { LocalizerType } from '../types/Util';
+import type { LocalizerType, RenderTextCallbackType } from '../types/Util';
 
 export type PropsType = {
   i18n: LocalizerType;
@@ -19,6 +19,10 @@ type ReleaseNotesType = {
   features: Array<{ key: string; components: IntlComponentsType }>;
 };
 
+const renderText: RenderTextCallbackType = ({ key, text }) => (
+  <Emojify key={key} text={text} />
+);
+
 export const WhatsNew = ({ i18n }: PropsType): JSX.Element => {
   const [releaseNotes, setReleaseNotes] = useState<
     ReleaseNotesType | undefined
@@ -28,46 +32,63 @@ export const WhatsNew = ({ i18n }: PropsType): JSX.Element => {
     setReleaseNotes({
       date: new Date(window.getBuildCreation?.() || Date.now()),
       version: window.getVersion(),
-      features: [
+      features: [{ key: 'WhatsNew__v5.20', components: undefined }],
-        { key: 'WhatsNew__v5.19--1', components: undefined },
-        { key: 'WhatsNew__v5.19--2', components: undefined },
-        { key: 'WhatsNew__v5.19--3', components: undefined },
-        { key: 'WhatsNew__v5.19--4', components: undefined },
-      ],
     });
   };
 
+  let modalNode: ReactNode;
+  if (releaseNotes) {
+    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>
+      );
+    }
+
+    modalNode = (
+      <Modal
+        hasXButton
+        i18n={i18n}
+        onClose={() => setReleaseNotes(undefined)}
+        title={i18n('WhatsNew__modal-title')}
+      >
+        <>
+          <span>
+            {moment(releaseNotes.date).format('LL')} &middot;{' '}
+            {releaseNotes.version}
+          </span>
+          {contentNode}
+        </>
+      </Modal>
+    );
+  }
+
   return (
     <>
-      {releaseNotes && (
+      {modalNode}
-        <Modal
-          hasXButton
-          i18n={i18n}
-          onClose={() => setReleaseNotes(undefined)}
-          title={i18n('WhatsNew__modal-title')}
-        >
-          <>
-            <span>
-              {moment(releaseNotes.date).format('LL')} &middot;{' '}
-              {releaseNotes.version}
-            </span>
-            <ul>
-              {releaseNotes.features.map(({ key, components }) => (
-                <li key={key}>
-                  <Intl
-                    i18n={i18n}
-                    id={key}
-                    renderText={({ key: innerKey, text }) => (
-                      <Emojify key={innerKey} text={text} />
-                    )}
-                    components={components}
-                  />
-                </li>
-              ))}
-            </ul>
-          </>
-        </Modal>
-      )}
       <Intl
         i18n={i18n}
         id="whatsNew"