nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

More work

Browse Source
This commit is contained in:
R Midhun Suresh
2024-12-14 16:12:45 +05:30
parent 13df65bc61
commit 9d93c86847
7 changed files with 371 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/viewmodels/MemberListViewModel.tsx
View File

@@ -50,7 +50,7 @@ import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
type Member = XOR<{ member: RoomMember }, { threePidInvite: ThreePIDInvite }>;
function getPending3PidInvites(room: Room, searchQuery?: string): Member[] {
export function getPending3PidInvites(room: Room, searchQuery?: string): Member[] {
// include 3pid invites (m.room.third_party_invite) state events.
// The HS may have already converted these into m.room.member invites so
// we shouldn't add them if the 3pid invite state key (token) is in the
@@ -76,7 +76,7 @@ function getPending3PidInvites(room: Room, searchQuery?: string): Member[] {
return invites;
}
function sdkRoomMemberToRoomMember(member: SDKRoomMember): Member {
export function sdkRoomMemberToRoomMember(member: SDKRoomMember): Member {
const displayUserId =
UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId, {
roomId: member.roomId,

4
src/components/viewmodels/MemberTileViewModel.tsx
View File

@@ -56,7 +56,7 @@ export enum PowerStatus {
const PowerLabel: Record<PowerStatus, TranslationKey> = {
[PowerStatus.Admin]: _td("power_level|admin"),
[PowerStatus.Moderator]: _td("power_level|mod"),
[PowerStatus.Moderator]: _td("power_level|moderator"),
};
export interface ThreePidTileViewState {
@@ -190,7 +190,7 @@ export function useMemberTileViewModel(props: MemberTileViewModelProps): MemberT
userLabel = _t(PowerLabel[powerStatus]);
}
if (props.member.isInvite) {
userLabel = "(Invited)";
userLabel = `(${_t("member_list|invited_label")})`;
}
return {

10
src/components/views/rooms/MemberListHeaderView.tsx
View File

@@ -47,16 +47,16 @@ function getHeaderLabelJSX(vm: MemberListViewState): React.ReactNode {
if (vm.isLoading) {
return (
<Flex align="center" gap="8px">
<InlineSpinner /> Loading...
<InlineSpinner /> {_t("common|loading")}
</Flex>
);
}
const filteredMemberCount = vm.members.length;
if (filteredMemberCount === 0) {
return "No matches";
return _t("member_list|no_matches");
}
return `${filteredMemberCount} Members`;
return _t("member_list|count", { count: filteredMemberCount });
}
/**
@@ -79,7 +79,7 @@ const MemberListHeaderView: React.FC<Props> = (props: Props) => {
disabled={!vm.canInvite}
onClick={vm.onInviteButtonClick}
>
Invite
{_t("action|invite")}
</Button>
</OptionalTooltip>
) : (
@@ -87,7 +87,7 @@ const MemberListHeaderView: React.FC<Props> = (props: Props) => {
<Search
className="mx_MemberListHeaderView_search mx_no_textinput"
name="searchMembers"
placeholder="Filter People..."
placeholder={_t("member_list|filter_placeholder")}
onChange={(e) => vm.search((e as React.ChangeEvent<HTMLInputElement>).target.value)}
/>
<OptionalTooltip canInvite={vm.canInvite}>

8
src/i18n/strings/en_EN.json
View File

@@ -1590,9 +1590,15 @@
"toggle_attribution": "Toggle attribution"
},
"member_list": {
"filter_placeholder": "Filter room members",
"count": {
"one": "%(count)s Member",
"other": "%(count)s Members"
},
"filter_placeholder": "Filter People...",
"invite_button_no_perms_tooltip": "You do not have permission to invite users",
"invited_label": "Invited",
"invited_list_heading": "Invited",
"no_matches": "No matches",
"power_label": "%(userName)s (power %(powerLevelNumber)s)"
},
"member_list_back_action_label": "Room members",

2
test/test-utils/test-utils.ts
View File

@@ -798,6 +798,8 @@ export const mkThirdPartyInviteEvent = (user: string, displayName: string, room:
type: EventType.RoomThirdPartyInvite,
content: {
display_name: displayName,
public_key: "foo",
key_validity_url: "bar",
},
skey: "test" + Math.random(),
user,

114
test/unit-tests/components/views/rooms/MemberTileView-test.tsx Normal file
View File

@@ -0,0 +1,114 @@
/*
* Copyright 2024 New Vector Ltd.
* Copyright 2023 The Matrix.org Foundation C.I.C.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
* Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, screen, waitFor } from "jest-matrix-react";
import { MatrixClient, RoomMember as SdkRoomMember, Device, Room } from "matrix-js-sdk/src/matrix";
import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
import { mocked } from "jest-mock";
import userEvent from "@testing-library/user-event";
import * as TestUtils from "../../../../test-utils";
import { RoomMember } from "../../../../../src/models/rooms/RoomMember";
import {
getPending3PidInvites,
sdkRoomMemberToRoomMember,
} from "../../../../../src/components/viewmodels/MemberListViewModel";
import { RoomMemberTileView, ThreePidInviteTileView } from "../../../../../src/components/views/rooms/MemberTileView";
describe("MemberTileView", () => {
describe("RoomMemberTileView", () => {
let matrixClient: MatrixClient;
let member: RoomMember;
beforeEach(() => {
matrixClient = TestUtils.stubClient();
mocked(matrixClient.isRoomEncrypted).mockReturnValue(true);
const sdkMember = new SdkRoomMember("roomId", matrixClient.getUserId()!);
member = sdkRoomMemberToRoomMember(sdkMember)!.member!;
});
it("should not display an E2EIcon when the e2E status = normal", () => {
const { container } = render(<RoomMemberTileView member={member} />);
const e2eIcon = container.querySelector(".mx_E2EIconView");
expect(e2eIcon).toBeNull();
expect(container).toMatchSnapshot();
});
it("should display an warning E2EIcon when the e2E status = Warning", async () => {
mocked(matrixClient.getCrypto()!.getUserVerificationStatus).mockResolvedValue({
isCrossSigningVerified: jest.fn().mockReturnValue(false),
wasCrossSigningVerified: jest.fn().mockReturnValue(true),
} as unknown as UserVerificationStatus);
const { container } = render(<RoomMemberTileView member={member} />);
await waitFor(async () => {
await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
expect(screen.getByText("This user has not verified all of their sessions.")).toBeInTheDocument();
});
expect(container).toMatchSnapshot();
});
it("should display an verified E2EIcon when the e2E status = Verified", async () => {
// Mock all the required crypto methods
const deviceMap = new Map<string, Map<string, Device>>();
deviceMap.set(member.userId, new Map([["deviceId", {} as Device]]));
// Return a DeviceMap = Map<string, Map<string, Device>>
mocked(matrixClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(deviceMap);
mocked(matrixClient.getCrypto()!.getUserVerificationStatus).mockResolvedValue({
isCrossSigningVerified: jest.fn().mockReturnValue(true),
} as unknown as UserVerificationStatus);
mocked(matrixClient.getCrypto()!.getDeviceVerificationStatus).mockResolvedValue({
crossSigningVerified: true,
} as DeviceVerificationStatus);
const { container } = render(<RoomMemberTileView member={member} />);
await waitFor(async () => {
await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
expect(
screen.getByText("You have verified this user. This user has verified all of their sessions."),
).toBeInTheDocument();
});
expect(container).toMatchSnapshot();
});
it("renders user labels correctly", async () => {
member.powerLevel = 50;
const { container: container1 } = render(<RoomMemberTileView member={member} />);
expect(container1).toHaveTextContent("Moderator");
member.powerLevel = 100;
const { container: container2 } = render(<RoomMemberTileView member={member} />);
expect(container2).toHaveTextContent("Admin");
member.isInvite = true;
const { container: container3 } = render(<RoomMemberTileView member={member} />);
expect(container3).toHaveTextContent("Invited");
});
});
describe("ThreePidInviteTileView", () => {
let cli: MatrixClient;
let room: Room;
beforeEach(() => {
cli = TestUtils.stubClient();
room = new Room("!mytestroom:foo.org", cli, cli.getSafeUserId());
room.getLiveTimeline().addEvent(
TestUtils.mkThirdPartyInviteEvent(cli.getSafeUserId(), "Foobar", room.roomId),
);
});
it("renders ThreePidInvite correctly", async () => {
const [{ threePidInvite }] = getPending3PidInvites(room);
const { container } = render(<ThreePidInviteTileView threePidInvite={threePidInvite!} />);
expect(container).toMatchSnapshot();
});
});
});

239
test/unit-tests/components/views/rooms/__snapshots__/MemberTileView-test.tsx.snap Normal file
View File

@@ -0,0 +1,239 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon when the e2E status = Verified 1`] = `
<div>
<div>
<div
aria-label="@userId:matrix.org (power 0)"
class="mx_AccessibleButton mx_MemberTileView"
role="button"
tabindex="0"
>
<div
class="mx_MemberTileView_left"
>
<div
class="mx_MemberTileView_avatar"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title="@userId:matrix.org"
>
u
</span>
</div>
<div
class="mx_MemberTileView_name"
>
<div
class="mx_DisambiguatedProfile"
>
<span
class=""
dir="auto"
>
@userId:matrix.org
</span>
</div>
</div>
</div>
<div
class="mx_MemberTileView_right"
>
<span
tabindex="0"
>
<div
aria-labelledby=":ri:"
class="mx_E2EIconView"
>
<svg
class="mx_E2EIconView_verified"
fill="currentColor"
height="16px"
viewBox="0 0 24 24"
width="16px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.15 21.75 6.7 19.3l-2.75-.6a.943.943 0 0 1-.6-.387.928.928 0 0 1-.175-.688L3.45 14.8l-1.875-2.15a.934.934 0 0 1-.25-.65c0-.25.083-.467.25-.65L3.45 9.2l-.275-2.825a.928.928 0 0 1 .175-.688.943.943 0 0 1 .6-.387l2.75-.6 1.45-2.45a.983.983 0 0 1 .55-.438.97.97 0 0 1 .7.038l2.6 1.1 2.6-1.1a.97.97 0 0 1 .7-.038.983.983 0 0 1 .55.438L17.3 4.7l2.75.6c.25.05.45.18.6.388.15.208.208.437.175.687L20.55 9.2l1.875 2.15c.167.183.25.4.25.65s-.083.467-.25.65L20.55 14.8l.275 2.825a.928.928 0 0 1-.175.688.943.943 0 0 1-.6.387l-2.75.6-1.45 2.45a.983.983 0 0 1-.55.438.97.97 0 0 1-.7-.038l-2.6-1.1-2.6 1.1a.97.97 0 0 1-.7.038.983.983 0 0 1-.55-.438Zm2.8-9.05L9.5 11.275A.933.933 0 0 0 8.813 11c-.275 0-.513.1-.713.3a.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.15 2.15c.2.2.433.3.7.3.267 0 .5-.1.7-.3l4.25-4.25c.2-.2.296-.433.287-.7a1.055 1.055 0 0 0-.287-.7 1.02 1.02 0 0 0-.713-.313.93.93 0 0 0-.712.288L10.95 12.7Z"
/>
</svg>
</div>
</span>
</div>
</div>
</div>
</div>
`;
exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon when the e2E status = Warning 1`] = `
<div>
<div>
<div
aria-label="@userId:matrix.org (power 0)"
class="mx_AccessibleButton mx_MemberTileView"
role="button"
tabindex="0"
>
<div
class="mx_MemberTileView_left"
>
<div
class="mx_MemberTileView_avatar"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title="@userId:matrix.org"
>
u
</span>
</div>
<div
class="mx_MemberTileView_name"
>
<div
class="mx_DisambiguatedProfile"
>
<span
class=""
dir="auto"
>
@userId:matrix.org
</span>
</div>
</div>
</div>
<div
class="mx_MemberTileView_right"
>
<span
tabindex="0"
>
<div
aria-labelledby=":r8:"
class="mx_E2EIconView"
>
<svg
class="mx_E2EIconView_warning"
fill="currentColor"
height="16px"
viewBox="0 0 24 24"
width="16px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div>
</span>
</div>
</div>
</div>
</div>
`;
exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when the e2E status = normal 1`] = `
<div>
<div>
<div
aria-label="@userId:matrix.org (power 0)"
class="mx_AccessibleButton mx_MemberTileView"
role="button"
tabindex="0"
>
<div
class="mx_MemberTileView_left"
>
<div
class="mx_MemberTileView_avatar"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title="@userId:matrix.org"
>
u
</span>
</div>
<div
class="mx_MemberTileView_name"
>
<div
class="mx_DisambiguatedProfile"
>
<span
class=""
dir="auto"
>
@userId:matrix.org
</span>
</div>
</div>
</div>
<div
class="mx_MemberTileView_right"
/>
</div>
</div>
</div>
`;
exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly 1`] = `
<div>
<div>
<div
class="mx_AccessibleButton mx_MemberTileView"
role="button"
tabindex="0"
>
<div
class="mx_MemberTileView_left"
>
<div
class="mx_MemberTileView_avatar"
>
<span
aria-hidden="true"
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="1"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
F
</span>
</div>
<div
class="mx_MemberTileView_name"
>
Foobar
</div>
</div>
<div
class="mx_MemberTileView_right"
/>
</div>
</div>
</div>
`;