From 127051892d23c88fc22a58a151732287c8364c05 Mon Sep 17 00:00:00 2001
From: Andrew Ferrazzutti <andrewf@element.io>
Date: Thu, 1 Aug 2024 10:17:49 -0400
Subject: [PATCH] Invite dialog: display MXID on its own line (#11756)

* Invite dialog: display MXID on its own line

Signed-off-by: Andrew Ferrazzutti <andrewf@element.io>

* Refactor to satisfy i18n linter

Signed-off-by: Andrew Ferrazzutti <andrewf@element.io>

---------

Signed-off-by: Andrew Ferrazzutti <andrewf@element.io>
---
 res/css/views/rooms/_RoomPreviewBar.pcss      |  4 ++
 src/components/views/rooms/RoomPreviewBar.tsx | 34 ++++++++-------
 src/i18n/strings/en_EN.json                   |  2 +-
 .../RoomPreviewBar-test.tsx.snap              | 42 ++++++++++---------
 4 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/res/css/views/rooms/_RoomPreviewBar.pcss b/res/css/views/rooms/_RoomPreviewBar.pcss
index be50c9faf2b..a3fae0e0089 100644
--- a/res/css/views/rooms/_RoomPreviewBar.pcss
+++ b/res/css/views/rooms/_RoomPreviewBar.pcss
@@ -163,6 +163,10 @@ a.mx_RoomPreviewBar_inviter {
     cursor: pointer;
 }
 
+.mx_RoomPreviewBar_inviter_mxid {
+    color: var(--cpd-color-text-secondary);
+}
+
 .mx_RoomPreviewBar_icon {
     margin-right: 8px;
     vertical-align: text-top;
diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx
index 472cb4e4eb4..0f4c552fdce 100644
--- a/src/components/views/rooms/RoomPreviewBar.tsx
+++ b/src/components/views/rooms/RoomPreviewBar.tsx
@@ -506,33 +506,39 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 break;
             }
             case MessageCase.Invite: {
+                const isDM = this.isDMInvite();
                 const avatar = <RoomAvatar room={this.props.room} oobData={this.props.oobData} />;
 
                 const inviteMember = this.getInviteMember();
-                let inviterElement: JSX.Element;
-                if (inviteMember) {
-                    inviterElement = (
-                        <span>
-                            <span className="mx_RoomPreviewBar_inviter">{inviteMember.rawDisplayName}</span> (
-                            {inviteMember.userId})
-                        </span>
-                    );
-                } else {
-                    inviterElement = <span className="mx_RoomPreviewBar_inviter">{this.props.inviterName}</span>;
-                }
+                const userName = (
+                    <span className="mx_RoomPreviewBar_inviter">
+                        {inviteMember?.rawDisplayName ?? this.props.inviterName}
+                    </span>
+                );
+                const inviterElement = (
+                    <>
+                        {isDM
+                            ? _t("room|dm_invite_subtitle", {}, { userName })
+                            : _t("room|invite_subtitle", {}, { userName })}
+                        {inviteMember && (
+                            <>
+                                <br />
+                                <span className="mx_RoomPreviewBar_inviter_mxid">{inviteMember.userId}</span>
+                            </>
+                        )}
+                    </>
+                );
 
-                const isDM = this.isDMInvite();
                 if (isDM) {
                     title = _t("room|dm_invite_title", {
                         user: inviteMember?.name ?? this.props.inviterName,
                     });
-                    subTitle = [avatar, _t("room|dm_invite_subtitle", {}, { userName: () => inviterElement })];
                     primaryActionLabel = _t("room|dm_invite_action");
                 } else {
                     title = _t("room|invite_title", { roomName });
-                    subTitle = [avatar, _t("room|invite_subtitle", {}, { userName: () => inviterElement })];
                     primaryActionLabel = _t("action|accept");
                 }
+                subTitle = [avatar, inviterElement];
 
                 const myUserId = MatrixClientPeg.safeGet().getSafeUserId();
                 const member = this.props.room?.currentState.getMember(myUserId);
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f3fe21baa91..1cc22ac3829 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1991,7 +1991,7 @@
         "invite_reject_ignore": "Reject & Ignore user",
         "invite_sent_to_email": "This invite was sent to %(email)s",
         "invite_sent_to_email_room": "This invite to %(roomName)s was sent to %(email)s",
-        "invite_subtitle": "<userName/> invited you",
+        "invite_subtitle": "Invited by <userName/>",
         "invite_this_room": "Invite to this room",
         "invite_title": "Do you want to join %(roomName)s?",
         "inviter_unknown": "Unknown",
diff --git a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
index 6ab9961f28d..2c7a831ebee 100644
--- a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
@@ -264,12 +264,12 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
   </p>
   <p>
     <span>
+      Invited by 
       <span
         class="mx_RoomPreviewBar_inviter"
       >
         @inviter:test.com
       </span>
-       invited you
     </span>
   </p>
 </div>
@@ -322,18 +322,19 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
   </p>
   <p>
     <span>
-      <span>
-        <span
-          class="mx_RoomPreviewBar_inviter"
-        >
-          @inviter:test.com name
-        </span>
-         (
-        @inviter:test.com
-        )
+      <span
+        class="mx_RoomPreviewBar_inviter"
+      >
+        @inviter:test.com name
       </span>
        wants to chat
     </span>
+    <br />
+    <span
+      class="mx_RoomPreviewBar_inviter_mxid"
+    >
+      @inviter:test.com
+    </span>
   </p>
 </div>
 `;
@@ -387,17 +388,18 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
   </p>
   <p>
     <span>
-      <span>
-        <span
-          class="mx_RoomPreviewBar_inviter"
-        >
-          @inviter:test.com name
-        </span>
-         (
-        @inviter:test.com
-        )
+      Invited by 
+      <span
+        class="mx_RoomPreviewBar_inviter"
+      >
+        @inviter:test.com name
       </span>
-       invited you
+    </span>
+    <br />
+    <span
+      class="mx_RoomPreviewBar_inviter_mxid"
+    >
+      @inviter:test.com
     </span>
   </p>
 </div>