support icu messageformat for translations

ts/components/Intl.tsx

@@ -3,11 +3,17 @@
 
 import React from 'react';
 
+import type { FormatXMLElementFn } from 'intl-messageformat';
 import type { LocalizerType, RenderTextCallbackType } from '../types/Util';
 import type { ReplacementValuesType } from '../types/I18N';
 import * as log from '../logging/log';
+import { strictAssert } from '../util/assert';
 
-export type FullJSXType = Array<JSX.Element | string> | JSX.Element | string;
+export type FullJSXType =
+  | FormatXMLElementFn<JSX.Element | string>
+  | Array<JSX.Element | string>
+  | JSX.Element
+  | string;
 export type IntlComponentsType =
   | undefined
   | Array<FullJSXType>
@@ -32,7 +38,7 @@ export class Intl extends React.Component<Props> {
     index: number,
     placeholderName: string,
     key: number
-  ): FullJSXType | null {
+  ): JSX.Element | null {
     const { id, components } = this.props;
 
     if (!components) {
@@ -75,6 +81,15 @@ export class Intl extends React.Component<Props> {
       return null;
     }
 
+    if (!i18n.isLegacyFormat(id)) {
+      strictAssert(
+        !Array.isArray(components),
+        `components cannot be an array for ICU message ${id}`
+      );
+      const intl = i18n.getIntl();
+      return intl.formatMessage({ id }, components);
+    }
+
     const text = i18n(id);
     const results: Array<
       string | JSX.Element | Array<string | JSX.Element> | null

ts/components/Preferences.tsx

@@ -915,7 +915,7 @@ export const Preferences = ({
             onSubmit={onUniversalExpireTimerChange}
           />
         )}
-        <SettingsRow title={i18n('disappearingMessages')}>
+        <SettingsRow title={i18n('icu:disappearingMessages')}>
           <Control
             left={
               <>

ts/components/ProfileEditor.tsx

@@ -798,7 +798,7 @@ export const ProfileEditor = ({
         <div className="ProfileEditor__info">
           <Intl
             i18n={i18n}
-            id="ProfileEditor--info"
+            id="icu:ProfileEditor--info"
             components={{
               learnMore: (
                 <a

ts/components/conversation/ConversationHeader.tsx

@@ -347,7 +347,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
     const muteOptions = getMuteOptions(muteExpiresAt, i18n);
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const disappearingTitle = i18n('disappearingMessages') as any;
+    const disappearingTitle = i18n('icu:disappearingMessages') as any;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const muteTitle = i18n('muteNotificationsTitle') as any;
     const isGroup = type === 'group';

ts/components/installScreen/InstallScreenQrCodeNotScannedStep.tsx

@@ -98,12 +98,12 @@ function InstallScreenQrCode(
         <span className={classNames(getQrCodeClassName('__error-message'))}>
           <Intl
             i18n={i18n}
-            id="Install__qr-failed"
-            components={[
-              <a href={QR_CODE_FAILED_LINK}>
-                {i18n('Install__qr-failed__learn-more')}
-              </a>,
-            ]}
+            id="icu:Install__qr-failed"
+            components={{
+              learnMoreLink: children => (
+                <a href={QR_CODE_FAILED_LINK}>{children}</a>
+              ),
+            }}
           />
         </span>
       );

ts/components/leftPane/LeftPaneInboxHelper.tsx

@@ -120,15 +120,17 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
           <div>
             <Intl
               i18n={i18n}
-              id="emptyInboxMessage"
-              components={[
-                <span>
-                  <strong>{i18n('composeIcon')}</strong>
-                  <span className="module-left-pane__empty--composer_icon">
-                    <i className="module-left-pane__empty--composer_icon--icon" />
+              id="icu:emptyInboxMessage"
+              components={{
+                composeIcon: (
+                  <span>
+                    <strong>{i18n('composeIcon')}</strong>
+                    <span className="module-left-pane__empty--composer_icon">
+                      <i className="module-left-pane__empty--composer_icon--icon" />
+                    </span>
                   </span>
-                </span>,
-              ]}
+                ),
+              }}
             />
           </div>
         </div>

ts/components/leftPane/LeftPaneSearchHelper.tsx

@@ -148,7 +148,7 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
     if (searchConversationName) {
       noResults = (
         <Intl
-          id="noSearchResultsInConversation"
+          id="icu:noSearchResultsInConversation"
           i18n={i18n}
           components={{
             searchTerm,

ts/components/leftPane/LeftPaneSetGroupMetadataHelper.tsx

@@ -199,7 +199,7 @@ export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<LeftPaneSetGr
 
         <section className="module-left-pane__header__form__expire-timer">
           <div className="module-left-pane__header__form__expire-timer__label">
-            {i18n('disappearingMessages')}
+            {i18n('icu:disappearingMessages')}
           </div>
           <DisappearingTimerSelect
             i18n={i18n}