mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-15 07:31:08 +01:00
Code Issues Projects Releases Wiki Activity

New room list: add space menu in room header (#29352)

Browse Source 
* feat(new room list): add space menu in view model

* test(new room list): add space menu in view model

* feat(new room list): add space menu in room list header

* chore: update i18n

* test(new room list): add tests for space menu

* test(new room list): update room list tests

* test(e2e): add tests for space menu
This commit is contained in:
Florian Duros 2025-02-25 15:06:01 +01:00 committed by GitHub
parent 62a287219d
commit f95218e2b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 611 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
playwright/e2e/left-panel/room-list-view/room-list-header.spec.ts
View File

@ -47,12 +47,41 @@ test.describe("Header section of the room list", () => {
await app.closeDialog();
});
test("should render the header section for a space", async ({ page, app, user }) => {
test("should render the header section for a space", { tag: "@screenshot" }, async ({ page, app, user }) => {
await app.client.createSpace({ name: "MySpace" });
await page.getByRole("button", { name: "MySpace" }).click();
const roomListHeader = getHeaderSection(page);
await expect(roomListHeader).toMatchScreenshot("room-list-space-header.png");
await expect(roomListHeader.getByRole("heading", { name: "MySpace" })).toBeVisible();
await expect(roomListHeader.getByRole("button", { name: "Add" })).toBeVisible();
const spaceMenu = roomListHeader.getByRole("button", { name: "Open space menu" });
await spaceMenu.click();
await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-space-menu.png");
// It should open the space home
await page.getByRole("menuitem", { name: "Space home" }).click();
await expect(page.getByRole("main").getByRole("heading", { name: "MySpace" })).toBeVisible();
// It should open the invite dialog
await spaceMenu.click();
await page.getByRole("menuitem", { name: "Invite" }).click();
await expect(page.getByRole("heading", { name: "Invite to MySpace" })).toBeVisible();
await app.closeDialog();
// It should open the space preferences
await spaceMenu.click();
await page.getByRole("menuitem", { name: "Preferences" }).click();
await expect(page.getByRole("heading", { name: "Preferences" })).toBeVisible();
await app.closeDialog();
// It should open the space settings
await spaceMenu.click();
await page.getByRole("menuitem", { name: "Space Settings" }).click();
await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
await app.closeDialog();
});
});

BIN
playwright/snapshots/left-panel/room-list-view/room-list-header.spec.ts/room-list-header-space-menu-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
playwright/snapshots/left-panel/room-list-view/room-list-header.spec.ts/room-list-space-header-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

12
res/css/views/rooms/RoomListView/_RoomListHeaderView.pcss
View File

@ -17,4 +17,16 @@
button {
color: var(--cpd-color-icon-secondary);
}
.mx_SpaceMenu_button {
svg {
transition: transform 0.1s linear;
}
}
.mx_SpaceMenu_button[aria-expanded="true"] {
svg {
transform: rotate(180deg);
}
}
}

82
src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx
View File

@ -6,7 +6,7 @@
*/
import { useCallback } from "react";
import { type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
import { JoinRule, type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
import { UIComponent } from "../../../settings/UIFeature";
@ -23,7 +23,15 @@ import {
UPDATE_SELECTED_SPACE,
} from "../../../stores/spaces";
import SpaceStore from "../../../stores/spaces/SpaceStore";
import { showCreateNewRoom } from "../../../utils/space";
import {
shouldShowSpaceSettings,
showCreateNewRoom,
showSpaceInvite,
showSpacePreferences,
showSpaceSettings,
} from "../../../utils/space";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
/**
* Hook to get the active space and its title.
@ -59,6 +67,11 @@ export interface RoomListHeaderViewState {
* True if the user can create rooms
*/
displayComposeMenu: boolean;
/**
* Whether to display the space menu
* True if there is an active space
*/
displaySpaceMenu: boolean;
/**
* Whether the user can create rooms
*/
@ -67,6 +80,14 @@ export interface RoomListHeaderViewState {
* Whether the user can create video rooms
*/
canCreateVideoRoom: boolean;
/**
* Whether the user can invite in the active space
*/
canInviteInSpace: boolean;
/**
* Whether the user can access space settings
*/
canAccessSpaceSettings: boolean;
/**
* Create a chat room
* @param e - The click event
@ -81,17 +102,39 @@ export interface RoomListHeaderViewState {
* Create a video room
*/
createVideoRoom: () => void;
/**
* Open the active space home
*/
openSpaceHome: () => void;
/**
* Display the space invite dialog
*/
inviteInSpace: () => void;
/**
* Open the space preferences
*/
openSpacePreferences: () => void;
/**
* Open the space settings
*/
openSpaceSettings: () => void;
}
/**
* View model for the RoomListHeader.
*/
export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
const matrixClient = useMatrixClientContext();
const { activeSpace, title } = useSpace();
const canCreateRoom = shouldShowComponent(UIComponent.CreateRooms);
const canCreateVideoRoom = useFeatureEnabled("feature_video_rooms");
const displayComposeMenu = canCreateRoom;
const displaySpaceMenu = Boolean(activeSpace);
const canInviteInSpace = Boolean(
activeSpace?.getJoinRule() === JoinRule.Public || activeSpace?.canInvite(matrixClient.getSafeUserId()),
);
const canAccessSpaceSettings = Boolean(activeSpace && shouldShowSpaceSettings(activeSpace));
/* Actions */
@ -125,13 +168,48 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
}
}, [activeSpace, elementCallVideoRoomsEnabled]);
const openSpaceHome = useCallback(() => {
// openSpaceHome is only available when there is an active space
if (!activeSpace) return;
defaultDispatcher.dispatch<ViewRoomPayload>({
action: Action.ViewRoom,
room_id: activeSpace.roomId,
metricsTrigger: undefined,
});
}, [activeSpace]);
const inviteInSpace = useCallback(() => {
// inviteInSpace is only available when there is an active space
if (!activeSpace) return;
showSpaceInvite(activeSpace);
}, [activeSpace]);
const openSpacePreferences = useCallback(() => {
// openSpacePreferences is only available when there is an active space
if (!activeSpace) return;
showSpacePreferences(activeSpace);
}, [activeSpace]);
const openSpaceSettings = useCallback(() => {
// openSpaceSettings is only available when there is an active space
if (!activeSpace) return;
showSpaceSettings(activeSpace);
}, [activeSpace]);
return {
title,
displayComposeMenu,
displaySpaceMenu,
canCreateRoom,
canCreateVideoRoom,
canInviteInSpace,
canAccessSpaceSettings,
createChatRoom,
createRoom,
createVideoRoom,
openSpaceHome,
inviteInSpace,
openSpacePreferences,
openSpaceSettings,
};
}

49
src/components/views/rooms/RoomListView/RoomListHeaderView.tsx
View File

@ -8,7 +8,11 @@ import React, { type JSX, useState } from "react";
import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
import ComposeIcon from "@vector-im/compound-design-tokens/assets/web/icons/compose";
import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
import HomeIcon from "@vector-im/compound-design-tokens/assets/web/icons/home";
import PreferencesIcon from "@vector-im/compound-design-tokens/assets/web/icons/preferences";
import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
import { _t } from "../../../../languageHandler";
@ -34,12 +38,57 @@ export function RoomListHeaderView(): JSX.Element {
align="center"
data-testid="room-list-header"
>
<Flex align="center" gap="var(--cpd-space-1x)">
<h1>{vm.title}</h1>
{vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
</Flex>
{vm.displayComposeMenu && <ComposeMenu vm={vm} />}
</Flex>
);
}
interface SpaceMenuProps {
/**
* The view model for the room list header
*/
vm: RoomListHeaderViewState;
}
/**
* The space menu for the room list header
*/
function SpaceMenu({ vm }: SpaceMenuProps): JSX.Element {
const [open, setOpen] = useState(false);
return (
<Menu
open={open}
onOpenChange={setOpen}
title={vm.title}
side="right"
align="start"
trigger={
<IconButton className="mx_SpaceMenu_button" aria-label={_t("room_list|open_space_menu")} size="20px">
<ChevronDownIcon />
</IconButton>
}
>
<MenuItem Icon={HomeIcon} label={_t("room_list|space_menu|home")} onSelect={vm.openSpaceHome} />
{vm.canInviteInSpace && (
<MenuItem Icon={UserAddIcon} label={_t("action|invite")} onSelect={vm.inviteInSpace} />
)}
<MenuItem Icon={PreferencesIcon} label={_t("common|preferences")} onSelect={vm.openSpacePreferences} />
{vm.canAccessSpaceSettings && (
<MenuItem
Icon={SettingsIcon}
label={_t("room_list|space_menu|space_settings")}
onSelect={vm.openSpaceSettings}
/>
)}
</Menu>
);
}
interface ComposeMenuProps {
/**
* The view model for the room list header

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

@ -2098,6 +2098,7 @@
"other": "Currently joining %(count)s rooms"
},
"notification_options": "Notification options",
"open_space_menu": "Open space menu",
"redacting_messages_status": {
"one": "Currently removing messages in %(count)s room",
"other": "Currently removing messages in %(count)s rooms"
@ -2112,6 +2113,10 @@
"sort_by_activity": "Activity",
"sort_by_alphabet": "A-Z",
"sort_unread_first": "Show rooms with unread messages first",
"space_menu": {
"home": "Space home",
"space_settings": "Space Settings"
},
"space_menu_label": "%(spaceName)s menu",
"sublist_options": "List options",
"suggested_rooms_heading": "Suggested Rooms"

103
test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx
View File

@ -6,24 +6,34 @@
*/
import { renderHook } from "jest-matrix-react";
import { type MatrixClient, type Room, RoomType } from "matrix-js-sdk/src/matrix";
import { JoinRule, type MatrixClient, type Room, RoomType } from "matrix-js-sdk/src/matrix";
import { mocked } from "jest-mock";
import { useRoomListHeaderViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel";
import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
import { mkStubRoom, stubClient } from "../../../../test-utils";
import { mkStubRoom, stubClient, withClientContextRenderOptions } from "../../../../test-utils";
import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
import SettingsStore from "../../../../../src/settings/SettingsStore";
import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../../src/dispatcher/actions";
import { showCreateNewRoom } from "../../../../../src/utils/space";
import {
shouldShowSpaceSettings,
showCreateNewRoom,
showSpaceInvite,
showSpacePreferences,
showSpaceSettings,
} from "../../../../../src/utils/space";
jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({
shouldShowComponent: jest.fn(),
}));
jest.mock("../../../../../src/utils/space", () => ({
shouldShowSpaceSettings: jest.fn(),
showCreateNewRoom: jest.fn(),
showSpaceInvite: jest.fn(),
showSpacePreferences: jest.fn(),
showSpaceSettings: jest.fn(),
}));
describe("useRoomListHeaderViewModel", () => {
@ -39,15 +49,19 @@ describe("useRoomListHeaderViewModel", () => {
jest.resetAllMocks();
});
function render() {
return renderHook(() => useRoomListHeaderViewModel(), withClientContextRenderOptions(matrixClient));
}
describe("title", () => {
it("should return Home as title", () => {
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
expect(result.current.title).toStrictEqual("Home");
});
it("should return the current space name as title", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
expect(result.current.title).toStrictEqual("spaceName");
});
@ -55,7 +69,7 @@ describe("useRoomListHeaderViewModel", () => {
it("should be displayComposeMenu=true and canCreateRoom=true if the user can creates room", () => {
mocked(shouldShowComponent).mockReturnValue(false);
const { result, rerender } = renderHook(() => useRoomListHeaderViewModel());
const { result, rerender } = render();
expect(result.current.displayComposeMenu).toBe(false);
expect(result.current.canCreateRoom).toBe(false);
@ -65,15 +79,45 @@ describe("useRoomListHeaderViewModel", () => {
expect(result.current.canCreateRoom).toBe(true);
});
it("should be displaySpaceMenu=true if the user is in a space", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
const { result } = render();
expect(result.current.displaySpaceMenu).toBe(true);
});
it("should be canInviteInSpace=true if the space join rule is public", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
jest.spyOn(space, "getJoinRule").mockReturnValue(JoinRule.Public);
const { result } = render();
expect(result.current.displaySpaceMenu).toBe(true);
});
it("should be canInviteInSpace=true if the user has the right", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
jest.spyOn(space, "canInvite").mockReturnValue(true);
const { result } = render();
expect(result.current.displaySpaceMenu).toBe(true);
});
it("should be canAccessSpaceSettings=true if the user has the right", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
mocked(shouldShowSpaceSettings).mockReturnValue(true);
const { result } = render();
expect(result.current.canAccessSpaceSettings).toBe(true);
});
it("should be canCreateVideoRoom=true if feature_video_rooms is enabled", () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
expect(result.current.canCreateVideoRoom).toBe(true);
});
it("should fire Action.CreateChat when createChatRoom is called", () => {
const spy = jest.spyOn(defaultDispatcher, "fire");
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
result.current.createChatRoom(new Event("click"));
expect(spy).toHaveBeenCalledWith(Action.CreateChat);
@ -81,7 +125,7 @@ describe("useRoomListHeaderViewModel", () => {
it("should fire Action.CreateRoom when createRoom is called", () => {
const spy = jest.spyOn(defaultDispatcher, "fire");
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
result.current.createRoom(new Event("click"));
expect(spy).toHaveBeenCalledWith(Action.CreateRoom);
@ -89,7 +133,7 @@ describe("useRoomListHeaderViewModel", () => {
it("should call showCreateNewRoom when createRoom is called in a space", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
result.current.createRoom(new Event("click"));
expect(showCreateNewRoom).toHaveBeenCalledWith(space);
@ -98,7 +142,7 @@ describe("useRoomListHeaderViewModel", () => {
it("should fire Action.CreateRoom with RoomType.UnstableCall when createVideoRoom is called and feature_element_call_video_rooms is enabled", () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
const spy = jest.spyOn(defaultDispatcher, "dispatch");
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
result.current.createVideoRoom();
expect(spy).toHaveBeenCalledWith({ action: Action.CreateRoom, type: RoomType.UnstableCall });
@ -107,7 +151,7 @@ describe("useRoomListHeaderViewModel", () => {
it("should fire Action.CreateRoom with RoomType.ElementVideo when createVideoRoom is called and feature_element_call_video_rooms is disabled", () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
const spy = jest.spyOn(defaultDispatcher, "dispatch");
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
result.current.createVideoRoom();
expect(spy).toHaveBeenCalledWith({ action: Action.CreateRoom, type: RoomType.ElementVideo });
@ -115,9 +159,42 @@ describe("useRoomListHeaderViewModel", () => {
it("should call showCreateNewRoom when createVideoRoom is called in a space", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
const { result } = renderHook(() => useRoomListHeaderViewModel());
const { result } = render();
result.current.createVideoRoom();
expect(showCreateNewRoom).toHaveBeenCalledWith(space, RoomType.ElementVideo);
});
it("should fire Action.ViewRoom when openSpaceHome is called in a space", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
const spy = jest.spyOn(defaultDispatcher, "dispatch");
const { result } = render();
result.current.openSpaceHome();
expect(spy).toHaveBeenCalledWith({ action: Action.ViewRoom, room_id: space.roomId, metricsTrigger: undefined });
});
it("should call showSpaceInvite when inviteInSpace is called in a space", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
const { result } = render();
result.current.inviteInSpace();
expect(showSpaceInvite).toHaveBeenCalledWith(space);
});
it("should call showSpacePreferences when openSpacePreferences is called in a space", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
const { result } = render();
result.current.openSpacePreferences();
expect(showSpacePreferences).toHaveBeenCalledWith(space);
});
it("should call showSpaceSettings when openSpaceSettings is called in a space", () => {
jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(space);
const { result } = render();
result.current.openSpaceSettings();
expect(showSpaceSettings).toHaveBeenCalledWith(space);
});
});

65
test/unit-tests/components/views/rooms/RoomListView/RoomListHeaderView-test.tsx
View File

@ -24,17 +24,25 @@ describe("<RoomListHeaderView />", () => {
const defaultValue: RoomListHeaderViewState = {
title: "title",
displayComposeMenu: true,
displaySpaceMenu: true,
canCreateRoom: true,
canCreateVideoRoom: true,
canInviteInSpace: true,
canAccessSpaceSettings: true,
createRoom: jest.fn(),
createVideoRoom: jest.fn(),
createChatRoom: jest.fn(),
openSpaceHome: jest.fn(),
inviteInSpace: jest.fn(),
openSpacePreferences: jest.fn(),
openSpaceSettings: jest.fn(),
};
afterEach(() => {
jest.resetAllMocks();
});
describe("compose menu", () => {
it("should display the compose menu", () => {
mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
@ -84,4 +92,61 @@ describe("<RoomListHeaderView />", () => {
expect(screen.queryByRole("menuitem", { name: "New room" })).toBeNull();
expect(screen.queryByRole("menuitem", { name: "New video room" })).toBeNull();
});
});
describe("space menu", () => {
it("should display the space menu", () => {
mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
const { asFragment } = render(<RoomListHeaderView />);
expect(screen.queryByRole("button", { name: "Open space menu" })).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
it("should not display the space menu", () => {
mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displaySpaceMenu: false });
const { asFragment } = render(<RoomListHeaderView />);
expect(screen.queryByRole("button", { name: "Open space menu" })).toBeNull();
expect(asFragment()).toMatchSnapshot();
});
it("should display all the buttons when the space menu is opened", async () => {
const user = userEvent.setup();
mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
render(<RoomListHeaderView />);
const openMenu = screen.getByRole("button", { name: "Open space menu" });
await user.click(openMenu);
await user.click(screen.getByRole("menuitem", { name: "Space home" }));
expect(defaultValue.openSpaceHome).toHaveBeenCalled();
await user.click(openMenu);
await user.click(screen.getByRole("menuitem", { name: "Invite" }));
expect(defaultValue.inviteInSpace).toHaveBeenCalled();
await user.click(openMenu);
await user.click(screen.getByRole("menuitem", { name: "Preferences" }));
expect(defaultValue.openSpacePreferences).toHaveBeenCalled();
await user.click(openMenu);
await user.click(screen.getByRole("menuitem", { name: "Space Settings" }));
expect(defaultValue.openSpaceSettings).toHaveBeenCalled();
});
it("should display only the home and preference buttons", async () => {
const user = userEvent.setup();
mocked(useRoomListHeaderViewModel).mockReturnValue({
...defaultValue,
canInviteInSpace: false,
canAccessSpaceSettings: false,
});
render(<RoomListHeaderView />);
await user.click(screen.getByRole("button", { name: "Add" }));
expect(screen.queryByRole("menuitem", { name: "Invite" })).toBeNull();
expect(screen.queryByRole("menuitem", { name: "Space Setting" })).toBeNull();
});
});
});

216
test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListHeaderView-test.tsx.snap
View File

@ -1,16 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
title
</h1>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open space menu"
class="_icon-button_m2erp_8 mx_SpaceMenu_button"
data-state="closed"
id="radix-:r0:"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
type="button"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</button>
</div>
<button
aria-disabled="false"
aria-expanded="false"
@ -18,7 +53,7 @@ exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
aria-label="Add"
class="_icon-button_m2erp_8"
data-state="closed"
id="radix-:r0:"
id="radix-:r2:"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -50,17 +85,192 @@ exports[`<RoomListHeaderView /> should display the compose menu 1`] = `
</DocumentFragment>
`;
exports[`<RoomListHeaderView /> should not display the compose menu 1`] = `
exports[`<RoomListHeaderView /> compose menu should not display the compose menu 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
title
</h1>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open space menu"
class="_icon-button_m2erp_8 mx_SpaceMenu_button"
data-state="closed"
id="radix-:r4:"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
type="button"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</button>
</div>
</header>
</DocumentFragment>
`;
exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
title
</h1>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open space menu"
class="_icon-button_m2erp_8 mx_SpaceMenu_button"
data-state="closed"
id="radix-:rs:"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
type="button"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
</button>
</div>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_m2erp_8"
data-state="closed"
id="radix-:ru:"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
</header>
</DocumentFragment>
`;
exports[`<RoomListHeaderView /> space menu should not display the space menu 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
title
</h1>
</div>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_m2erp_8"
data-state="closed"
id="radix-:r10:"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
</header>
</DocumentFragment>
`;

10
test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap
View File

@ -11,10 +11,15 @@ exports[`<RoomListView /> should not render the RoomListSearch component when UI
class="mx_Flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
Home
</h1>
</div>
</header>
</section>
</DocumentFragment>
@ -87,10 +92,15 @@ exports[`<RoomListView /> should render the RoomListSearch component when UIComp
class="mx_Flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
Home
</h1>
</div>
<button
aria-disabled="false"
aria-expanded="false"