Update i18n eslint rule to validate missing/extra icu params

ts/components/StoriesAddStoryButton.tsx

@@ -70,7 +70,10 @@ export function StoriesAddStoryButton({
 
       if (result.reason === ReasonVideoNotGood.TooBig) {
         setError(
-          i18n('icu:StoryCreator__error--video-too-big', result.renderDetails)
+          i18n('icu:StoryCreator__error--video-too-big', {
+            limit: result.renderDetails.limit,
+            units: result.renderDetails.units,
+          })
         );
         return;
       }

ts/components/StoryViewer.tsx

@@ -861,7 +861,10 @@ export function StoryViewer({
                         <Intl
                           i18n={i18n}
                           id="icu:MyStories__views--strong"
-                          components={{ viewCount, strong: renderStrong }}
+                          components={{
+                            views: viewCount,
+                            strong: renderStrong,
+                          }}
                         />
                       )}
                       {(isSent || viewCount > 0) && replyCount > 0 && ' '}

ts/components/ToastManager.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import { get } from 'lodash';
 import type { LocalizerType, ReplacementValuesType } from '../types/Util';
 import { SECOND } from '../util/durations';
 import { Toast } from './Toast';
@@ -41,7 +40,7 @@ export function ToastManager({
     return (
       <Toast onClose={hideToast} timeout={SHORT_TIMEOUT}>
         {i18n('icu:AddUserToAnotherGroupModal__toast--adding-user-to-group', {
-          ...toast.parameters,
+          contact: toast.parameters?.contact,
         })}
       </Toast>
     );
@@ -106,9 +105,7 @@ export function ToastManager({
   if (toastType === ToastType.CannotStartGroupCall) {
     return (
       <Toast onClose={hideToast}>
-        {i18n('icu:GroupV2--cannot-start-group-call', {
-          ...toast.parameters,
-        })}
+        {i18n('icu:GroupV2--cannot-start-group-call')}
       </Toast>
     );
   }
@@ -219,7 +216,10 @@ export function ToastManager({
   if (toastType === ToastType.FileSize) {
     return (
       <Toast onClose={hideToast}>
-        {i18n('icu:fileSizeWarning', toast?.parameters)}
+        {i18n('icu:fileSizeWarning', {
+          limit: toast.parameters?.limit,
+          units: toast.parameters?.units,
+        })}
       </Toast>
     );
   }
@@ -323,9 +323,7 @@ export function ToastManager({
   if (toastType === ToastType.TooManyMessagesToForward) {
     return (
       <Toast onClose={hideToast}>
-        {i18n('icu:SelectModeActions__toast--TooManyMessagesToForward', {
-          count: get(toast.parameters, 'count'),
-        })}
+        {i18n('icu:SelectModeActions__toast--TooManyMessagesToForward')}
       </Toast>
     );
   }
@@ -356,7 +354,8 @@ export function ToastManager({
     return (
       <Toast onClose={hideToast}>
         {i18n('icu:AddUserToAnotherGroupModal__toast--user-added-to-group', {
-          ...toast.parameters,
+          contact: toast.parameters?.contact,
+          group: toast.parameters?.group,
         })}
       </Toast>
     );

ts/components/WhatsNewModal.tsx

@@ -35,12 +35,7 @@ export function WhatsNewModal({
     date: new Date(window.getBuildCreation?.() || Date.now()),
     version: window.getVersion?.(),
     features: [
-      <Intl
-        i18n={i18n}
-        id="icu:WhatsNew__v6.13--0"
-        renderText={renderText}
-        components={{}}
-      />,
+      <Intl i18n={i18n} id="icu:WhatsNew__v6.13--0" renderText={renderText} />,
       <Intl
         i18n={i18n}
         id="icu:WhatsNew__v6.13--1"

ts/components/conversation/DeliveryIssueDialog.tsx

@@ -52,9 +52,7 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
     </>
   );
 
-  const intlComponents = {
-    sender: <Emojify text={sender.title} />,
-  };
+  const senderTitle = <Emojify text={sender.title} />;
 
   return (
     <Modal
@@ -80,13 +78,13 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
           {inGroup ? (
             <Intl
               id="icu:DeliveryIssue--summary--group"
-              components={intlComponents}
+              components={{ sender: senderTitle }}
               i18n={i18n}
             />
           ) : (
             <Intl
               id="icu:DeliveryIssue--summary"
-              components={intlComponents}
+              components={{ sender: senderTitle }}
               i18n={i18n}
             />
           )}

ts/components/conversation/MandatoryProfileSharingActions.tsx

@@ -92,7 +92,7 @@ export function MandatoryProfileSharingActions({
             <Intl
               i18n={i18n}
               id="icu:MessageRequests--profile-sharing--group--link"
-              components={{ firstName: firstNameContact, learnMoreLink }}
+              components={{ learnMoreLink }}
             />
           )}
         </p>

ts/components/conversation/Message.tsx

@@ -2555,7 +2555,7 @@ export class Message extends React.PureComponent<Props, State> {
       <span className="module-message__alt-accessibility-tree">
         <span id={`message-accessibility-label:${id}`}>
           {author.isMe
-            ? i18n('icu:messageAccessibilityLabel--outgoing', {})
+            ? i18n('icu:messageAccessibilityLabel--outgoing')
             : i18n('icu:messageAccessibilityLabel--incoming', {
                 author: author.title,
               })}

ts/components/conversation/MessageRequestActions.tsx

@@ -77,18 +77,10 @@ export function MessageRequestActions({
             />
           )}
           {conversationType === 'group' && isBlocked && (
-            <Intl
-              i18n={i18n}
-              id="icu:MessageRequests--message-group-blocked"
-              components={{ name }}
-            />
+            <Intl i18n={i18n} id="icu:MessageRequests--message-group-blocked" />
           )}
           {conversationType === 'group' && !isBlocked && (
-            <Intl
-              i18n={i18n}
-              id="icu:MessageRequests--message-group"
-              components={{ name }}
-            />
+            <Intl i18n={i18n} id="icu:MessageRequests--message-group" />
           )}
         </p>
         <div className="module-message-request-actions__buttons">

ts/components/conversation/MessageRequestActionsConfirmation.tsx

@@ -136,9 +136,6 @@ export function MessageRequestActionsConfirmation({
             <Intl
               i18n={i18n}
               id="icu:MessageRequests--delete-direct-confirm-title"
-              components={{
-                title: <ContactName key="name" title={title} />,
-              }}
             />
           ) : (
             <Intl

ts/components/conversation/RemoveGroupMemberConfirmationDialog.tsx

@@ -30,9 +30,7 @@ export function RemoveGroupMemberConfirmationDialog({
     group.accessControlAddFromInviteLink
   );
 
-  const intlComponents = {
-    name: <ContactName title={conversation.title} />,
-  };
+  const contactName = <ContactName title={conversation.title} />;
 
   return (
     <ConfirmationDialog
@@ -51,13 +49,13 @@ export function RemoveGroupMemberConfirmationDialog({
           <Intl
             i18n={i18n}
             id="icu:RemoveGroupMemberConfirmation__description__with-link"
-            components={intlComponents}
+            components={{ name: contactName }}
           />
         ) : (
           <Intl
             i18n={i18n}
             id="icu:RemoveGroupMemberConfirmation__description"
-            components={intlComponents}
+            components={{ name: contactName }}
           />
         )
       }

ts/components/conversation/SafetyNumberNotification.tsx

@@ -57,11 +57,7 @@ export function SafetyNumberNotification({
             i18n={i18n}
           />
         ) : (
-          <Intl
-            id="icu:safetyNumberChanged"
-            components={{ name }}
-            i18n={i18n}
-          />
+          <Intl id="icu:safetyNumberChanged" i18n={i18n} />
         )
       }
       button={

ts/components/conversation/UnsupportedMessage.tsx

@@ -50,28 +50,23 @@ function UnsupportedMessageContents({ canProcessNow, contact, i18n }: Props) {
         />
       );
     }
-    return (
-      <Intl
-        id="icu:Message--from-me-unsupported-message"
-        components={{ contact: contactName }}
-        i18n={i18n}
-      />
-    );
+    return <Intl id="icu:Message--from-me-unsupported-message" i18n={i18n} />;
   }
   if (canProcessNow) {
     return (
       <Intl
         id="icu:Message--from-me-unsupported-message-ask-to-resend"
-        components={{ contact: contactName }}
         i18n={i18n}
       />
     );
   }
   return (
     <Intl
-      id="icu:Message--from-me-unsupported-message"
-      components={{ contact: contactName }}
+      id="icu:Message--unsupported-message"
       i18n={i18n}
+      components={{
+        contact: contactName,
+      }}
     />
   );
 }