Skip to content

Commit 20d8abf

Browse files
floriandurosflorianduros
authored
New room list: add primary filters (#29481)
* feat(room filter): add component for the primary filters * feat(room filter): add filter component to room list view * test(room filter): add tests to primary filters * test: update snapshots * test(e2e): update snapshots * test(e2e): add tests for primary filters * refactor: change aria-label of primary filters
1 parent fda6581 commit 20d8abf

File tree

14 files changed

+354
-2
lines changed

14 files changed

+354
-2
lines changed

‎playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/*
2+
* Copyright 2025 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
import { expect, test } from "../../../element-web-test";
9+
import type { Page } from "@playwright/test";
10+
11+
test.describe("Room list filters and sort", () => {
12+
test.use({
13+
displayName: "Alice",
14+
botCreateOpts: {
15+
displayName: "BotBob",
16+
autoAcceptInvites: true,
17+
},
18+
labsFlags: ["feature_new_room_list"],
19+
});
20+
21+
/**
22+
* Get the room list
23+
* @param page
24+
*/
25+
function getRoomList(page: Page) {
26+
return page.getByTestId("room-list");
27+
}
28+
29+
function getPrimaryFilters(page: Page) {
30+
return page.getByRole("listbox", { name: "Room list filters" });
31+
}
32+
33+
test.beforeEach(async ({ page, app, bot, user }) => {
34+
// The notification toast is displayed above the search section
35+
await app.closeNotificationToast();
36+
37+
await app.client.createRoom({ name: "empty room" });
38+
39+
const unReadDmId = await bot.createRoom({
40+
name: "unread dm",
41+
invite: [user.userId],
42+
is_direct: true,
43+
});
44+
await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
45+
46+
const unReadRoomId = await app.client.createRoom({ name: "unread room" });
47+
await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
48+
await bot.joinRoom(unReadRoomId);
49+
await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
50+
51+
const favouriteId = await app.client.createRoom({ name: "favourite room" });
52+
await app.client.evaluate(async (client, favouriteId) => {
53+
await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
54+
}, favouriteId);
55+
});
56+
57+
test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
58+
const roomList = getRoomList(page);
59+
const primaryFilters = getPrimaryFilters(page);
60+
61+
const allFilters = await primaryFilters.locator("option").all();
62+
for (const filter of allFilters) {
63+
expect(await filter.getAttribute("aria-selected")).toBe("false");
64+
}
65+
await expect(primaryFilters).toMatchScreenshot("unselected-primary-filters.png");
66+
67+
await primaryFilters.getByRole("option", { name: "Unread" }).click();
68+
// only one room should be visible
69+
await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
70+
await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
71+
expect(await roomList.locator("role=gridcell").count()).toBe(2);
72+
await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
73+
74+
await primaryFilters.getByRole("option", { name: "Favourite" }).click();
75+
await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
76+
expect(await roomList.locator("role=gridcell").count()).toBe(1);
77+
78+
await primaryFilters.getByRole("option", { name: "People" }).click();
79+
await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
80+
expect(await roomList.locator("role=gridcell").count()).toBe(1);
81+
82+
await primaryFilters.getByRole("option", { name: "Rooms" }).click();
83+
await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
84+
await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
85+
await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
86+
expect(await roomList.locator("role=gridcell").count()).toBe(3);
87+
});
88+
});

‎playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png

4.61 KB
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png

3.9 KB
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png

2.42 KB
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png

-1.61 KB
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png

-1.35 KB
Loading

‎res/css/_components.pcss

+1
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,7 @@
273273
@import "./views/rooms/RoomListPanel/_RoomListCell.pcss";
274274
@import "./views/rooms/RoomListPanel/_RoomListHeaderView.pcss";
275275
@import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
276+
@import "./views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss";
276277
@import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";
277278
@import "./views/rooms/_AppsDrawer.pcss";
278279
@import "./views/rooms/_Autocomplete.pcss";

‎res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* Copyright 2025 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
.mx_RoomListPrimaryFilters {
9+
margin: unset;
10+
list-style-type: none;
11+
padding: var(--cpd-space-2x) var(--cpd-space-3x);
12+
}

‎src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
* Copyright 2025 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
import React, { type JSX } from "react";
9+
import { ChatFilter } from "@vector-im/compound-web";
10+
11+
import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
12+
import { Flex } from "../../../utils/Flex";
13+
import { _t } from "../../../../languageHandler";
14+
15+
interface RoomListPrimaryFiltersProps {
16+
/**
17+
* The view model for the room list
18+
*/
19+
vm: RoomListViewState;
20+
}
21+
22+
/**
23+
* The primary filters for the room list
24+
*/
25+
export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX.Element {
26+
return (
27+
<Flex
28+
as="ul"
29+
role="listbox"
30+
aria-label={_t("room_list|primary_filters")}
31+
className="mx_RoomListPrimaryFilters"
32+
align="center"
33+
gap="var(--cpd-space-2x)"
34+
wrap="wrap"
35+
>
36+
{vm.primaryFilters.map((filter) => (
37+
<li role="option" aria-selected={filter.active} key={filter.name}>
38+
<ChatFilter selected={filter.active} onClick={filter.toggle}>
39+
{filter.name}
40+
</ChatFilter>
41+
</li>
42+
))}
43+
</Flex>
44+
);
45+
}

‎src/components/views/rooms/RoomListPanel/RoomListView.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@ import React, { type JSX } from "react";
99

1010
import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
1111
import { RoomList } from "./RoomList";
12+
import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
1213

1314
/**
1415
* Host the room list and the (future) room filters
1516
*/
1617
export function RoomListView(): JSX.Element {
1718
const vm = useRoomListViewModel();
18-
// Room filters will be added soon
19-
return <RoomList vm={vm} />;
19+
return (
20+
<>
21+
<RoomListPrimaryFilters vm={vm} />
22+
<RoomList vm={vm} />
23+
</>
24+
);
2025
}

‎src/i18n/strings/en_EN.json

+1
Original file line numberDiff line numberDiff line change
@@ -2114,6 +2114,7 @@
21142114
"list_title": "Room list",
21152115
"notification_options": "Notification options",
21162116
"open_space_menu": "Open space menu",
2117+
"primary_filters": "Room list filters",
21172118
"redacting_messages_status": {
21182119
"one": "Currently removing messages in %(count)s room",
21192120
"other": "Currently removing messages in %(count)s rooms"

‎test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*
2+
* Copyright 2025 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
import React from "react";
9+
import { render, screen } from "jest-matrix-react";
10+
import userEvent from "@testing-library/user-event";
11+
12+
import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
13+
import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
14+
import { RoomListPrimaryFilters } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters";
15+
16+
describe("<RoomListPrimaryFilters />", () => {
17+
let vm: RoomListViewState;
18+
19+
beforeEach(() => {
20+
vm = {
21+
rooms: [],
22+
openRoom: jest.fn(),
23+
primaryFilters: [
24+
{ name: "People", active: false, toggle: jest.fn() },
25+
{ name: "Rooms", active: true, toggle: jest.fn() },
26+
],
27+
activateSecondaryFilter: () => {},
28+
activeSecondaryFilter: SecondaryFilters.AllActivity,
29+
};
30+
});
31+
32+
it("should render primary filters", async () => {
33+
const user = userEvent.setup();
34+
35+
const { asFragment } = render(<RoomListPrimaryFilters vm={vm} />);
36+
expect(screen.getByRole("option", { name: "People" })).toBeInTheDocument();
37+
expect(screen.getByRole("option", { name: "Rooms" })).toHaveAttribute("aria-selected", "true");
38+
expect(asFragment()).toMatchSnapshot();
39+
40+
await user.click(screen.getByRole("button", { name: "People" }));
41+
expect(vm.primaryFilters[0].toggle).toHaveBeenCalled();
42+
});
43+
});

‎test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap

+118
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,65 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
2424
</h1>
2525
</div>
2626
</header>
27+
<ul
28+
aria-label="Room list filters"
29+
class="mx_Flex mx_RoomListPrimaryFilters"
30+
role="listbox"
31+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
32+
>
33+
<li
34+
aria-selected="false"
35+
role="option"
36+
>
37+
<button
38+
aria-selected="false"
39+
class="_chat-filter_5qdp0_8"
40+
role="button"
41+
tabindex="0"
42+
>
43+
Unread
44+
</button>
45+
</li>
46+
<li
47+
aria-selected="false"
48+
role="option"
49+
>
50+
<button
51+
aria-selected="false"
52+
class="_chat-filter_5qdp0_8"
53+
role="button"
54+
tabindex="0"
55+
>
56+
Favourites
57+
</button>
58+
</li>
59+
<li
60+
aria-selected="false"
61+
role="option"
62+
>
63+
<button
64+
aria-selected="false"
65+
class="_chat-filter_5qdp0_8"
66+
role="button"
67+
tabindex="0"
68+
>
69+
People
70+
</button>
71+
</li>
72+
<li
73+
aria-selected="false"
74+
role="option"
75+
>
76+
<button
77+
aria-selected="false"
78+
class="_chat-filter_5qdp0_8"
79+
role="button"
80+
tabindex="0"
81+
>
82+
Rooms
83+
</button>
84+
</li>
85+
</ul>
2786
<div
2887
class="mx_RoomList"
2988
data-testid="room-list"
@@ -174,6 +233,65 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
174233
</div>
175234
</button>
176235
</header>
236+
<ul
237+
aria-label="Room list filters"
238+
class="mx_Flex mx_RoomListPrimaryFilters"
239+
role="listbox"
240+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
241+
>
242+
<li
243+
aria-selected="false"
244+
role="option"
245+
>
246+
<button
247+
aria-selected="false"
248+
class="_chat-filter_5qdp0_8"
249+
role="button"
250+
tabindex="0"
251+
>
252+
Unread
253+
</button>
254+
</li>
255+
<li
256+
aria-selected="false"
257+
role="option"
258+
>
259+
<button
260+
aria-selected="false"
261+
class="_chat-filter_5qdp0_8"
262+
role="button"
263+
tabindex="0"
264+
>
265+
Favourites
266+
</button>
267+
</li>
268+
<li
269+
aria-selected="false"
270+
role="option"
271+
>
272+
<button
273+
aria-selected="false"
274+
class="_chat-filter_5qdp0_8"
275+
role="button"
276+
tabindex="0"
277+
>
278+
People
279+
</button>
280+
</li>
281+
<li
282+
aria-selected="false"
283+
role="option"
284+
>
285+
<button
286+
aria-selected="false"
287+
class="_chat-filter_5qdp0_8"
288+
role="button"
289+
tabindex="0"
290+
>
291+
Rooms
292+
</button>
293+
</li>
294+
</ul>
177295
<div
178296
class="mx_RoomList"
179297
data-testid="room-list"

‎test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<RoomListPrimaryFilters /> should render primary filters 1`] = `
4+
<DocumentFragment>
5+
<ul
6+
aria-label="Room list filters"
7+
class="mx_Flex mx_RoomListPrimaryFilters"
8+
role="listbox"
9+
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
10+
>
11+
<li
12+
aria-selected="false"
13+
role="option"
14+
>
15+
<button
16+
aria-selected="false"
17+
class="_chat-filter_5qdp0_8"
18+
role="button"
19+
tabindex="0"
20+
>
21+
People
22+
</button>
23+
</li>
24+
<li
25+
aria-selected="true"
26+
role="option"
27+
>
28+
<button
29+
aria-selected="true"
30+
class="_chat-filter_5qdp0_8"
31+
role="button"
32+
tabindex="0"
33+
>
34+
Rooms
35+
</button>
36+
</li>
37+
</ul>
38+
</DocumentFragment>
39+
`;

0 commit comments

Comments
 (0)