Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Invite dialog: display MXID on its own line #11756

Merged
merged 2 commits into from
Aug 1, 2024
+47 −35
Merged

Invite dialog: display MXID on its own line #11756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d196b5
Invite dialog: display MXID on its own line
AndrewFerr Oct 12, 2023
060fcc6
Refactor to satisfy i18n linter
AndrewFerr Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions res/css/views/rooms/_RoomPreviewBar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
34 changes: 20 additions & 14 deletions src/components/views/rooms/RoomPreviewBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these don't have keys so shouldn't be an array, use a React Fragment instead please

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

subTitle currently has a type of string | ReactNode[] | undefined; is a React Fragment a ReactNode[] or should the type of subTitle be expanded to include it?

And is something like the below what you're after? It's a pattern used elsewhere in this function.

subTitle = [
    <>
        {avatar}
        {inviterElement}
    </>,
];

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fragment would qualify as ReactNode, but if using an array must be given a key otherwise https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

Your snippet would work but would trigger the warning due to missing a key

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh looks like the code further down inserts a key based on position, that's not ideal but good enough

subTitleElements = subTitle.map((t, i) => <p key={subTitle${i}}>{t}</p>);


const myUserId = MatrixClientPeg.safeGet().getSafeUserId();
const member = this.props.room?.currentState.getMember(myUserId);
Expand Down
2 changes: 1 addition & 1 deletion src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
42 changes: 22 additions & 20 deletions test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
`;
Expand Down Expand Up @@ -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>
Expand Down
Loading