From f329d9234aa595a2bb96f0d1c65b3e880d94fd32 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Fri, 3 Feb 2023 12:40:57 -0800
Subject: [PATCH] Proper i18n for search result headers "<sender> to
 <receiver>"

---
 _locales/en/messages.json                     | 18 ++++-
 ts/components/Intl.tsx                        |  2 +
 .../conversationList/MessageSearchResult.tsx  | 73 +++++++++++++++----
 3 files changed, 78 insertions(+), 15 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 2aa3340be1..d6b23e7c44 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1108,9 +1108,25 @@
     "message": "To",
     "description": "Label for the receiver of a message"
   },
+  "icu:searchResultHeader--sender-to-group": {
+    "messageformat": "{sender} to {receiverGroup}",
+    "description": "Shown for search result items - like 'Jon to Friends Group'"
+  },
+  "icu:searchResultHeader--sender-to-you": {
+    "messageformat": "{sender} to You",
+    "description": "Shown for search result items - like 'Jon to You"
+  },
+  "icu:searchResultHeader--you-to-group": {
+    "messageformat": "You to {receiverGroup}",
+    "description": "Shown for search result items - like 'You to Friends Group'"
+  },
+  "icu:searchResultHeader--you-to-receiver": {
+    "messageformat": "You to {receiverContact}",
+    "description": "Shown for search result items - like 'You to Jon'"
+  },
   "toJoiner": {
     "message": "to",
-    "description": "Joiner for message search results - like 'Jon' to 'Friends Group'"
+    "description": "(deleted 2023/02/02) Joiner for message search results - like 'Jon' to 'Friends Group'"
   },
   "sent": {
     "message": "Sent",
diff --git a/ts/components/Intl.tsx b/ts/components/Intl.tsx
index 410bd56d10..53ccf7ada8 100644
--- a/ts/components/Intl.tsx
+++ b/ts/components/Intl.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import type { ReactNode } from 'react';
 
 import type { FormatXMLElementFn } from 'intl-messageformat';
 import type { LocalizerType, RenderTextCallbackType } from '../types/Util';
@@ -12,6 +13,7 @@ import { strictAssert } from '../util/assert';
 export type FullJSXType =
   | FormatXMLElementFn<JSX.Element | string>
   | Array<JSX.Element | string>
+  | ReactNode
   | JSX.Element
   | string;
 export type IntlComponentsType =
diff --git a/ts/components/conversationList/MessageSearchResult.tsx b/ts/components/conversationList/MessageSearchResult.tsx
index 79ec453236..2c61cc35ac 100644
--- a/ts/components/conversationList/MessageSearchResult.tsx
+++ b/ts/components/conversationList/MessageSearchResult.tsx
@@ -20,6 +20,7 @@ import type {
   ShowConversationType,
 } from '../../state/ducks/conversations';
 import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
+import { Intl } from '../Intl';
 
 export type PropsDataType = {
   isSelected?: boolean;
@@ -44,16 +45,14 @@ export type PropsDataType = {
     | 'profileName'
     | 'sharedGroupNames'
     | 'title'
+    | 'type'
     | 'unblurredAvatarPath'
   >;
 
-  to: {
-    groupName?: string;
-    phoneNumber?: string;
-    title: string;
-    isMe?: boolean;
-    profileName?: string;
-  };
+  to: Pick<
+    ConversationType,
+    'isMe' | 'phoneNumber' | 'profileName' | 'title' | 'type'
+  >;
 };
 
 type PropsHousekeepingType = {
@@ -164,14 +163,60 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
     let headerName: ReactNode;
     if (isNoteToSelf) {
       headerName = i18n('noteToSelf');
+    } else if (from.isMe) {
+      if (to.type === 'group') {
+        headerName = (
+          <span>
+            <Intl
+              i18n={i18n}
+              id="icu:searchResultHeader--you-to-group"
+              components={{
+                receiverGroup: renderPerson(i18n, to),
+              }}
+            />
+          </span>
+        );
+      } else {
+        headerName = (
+          <span>
+            <Intl
+              i18n={i18n}
+              id="icu:searchResultHeader--you-to-receiver"
+              components={{
+                receiverContact: renderPerson(i18n, to),
+              }}
+            />
+          </span>
+        );
+      }
     } else {
-      // This isn't perfect because (1) it doesn't work with RTL languages (2)
-      //   capitalization may be incorrect for some languages, like English.
-      headerName = (
-        <span>
-          {renderPerson(i18n, from)} {i18n('toJoiner')} {renderPerson(i18n, to)}
-        </span>
-      );
+      // eslint-disable-next-line no-lonely-if
+      if (to.type === 'group') {
+        headerName = (
+          <span>
+            <Intl
+              i18n={i18n}
+              id="icu:searchResultHeader--sender-to-group"
+              components={{
+                sender: renderPerson(i18n, from),
+                receiverGroup: renderPerson(i18n, to),
+              }}
+            />
+          </span>
+        );
+      } else {
+        headerName = (
+          <span>
+            <Intl
+              i18n={i18n}
+              id="icu:searchResultHeader--sender-to-you"
+              components={{
+                sender: renderPerson(i18n, from),
+              }}
+            />
+          </span>
+        );
+      }
     }
 
     const snippetBodyRanges = getFilteredBodyRanges(snippet, body, bodyRanges);