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

@@ -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;

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})
+                const userName = (
+                    <span className="mx_RoomPreviewBar_inviter">
+                        {inviteMember?.rawDisplayName ?? this.props.inviterName}
                     </span>
                 );
-                } else {
-                    inviterElement = <span className="mx_RoomPreviewBar_inviter">{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);

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",

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>
@@ -321,19 +321,20 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
     </span>
   </p>
   <p>
-    <span>
     <span>
       <span
         class="mx_RoomPreviewBar_inviter"
       >
         @inviter:test.com name
-        </span>
-         (
-        @inviter:test.com
-        )
       </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>
+      Invited by 
       <span
         class="mx_RoomPreviewBar_inviter"
       >
         @inviter:test.com name
       </span>
-         (
-        @inviter:test.com
-        )
     </span>
-       invited you
+    <br />
+    <span
+      class="mx_RoomPreviewBar_inviter_mxid"
+    >
+      @inviter:test.com
     </span>
   </p>
 </div>