Release announcement for new room list (#30675)

* Release announcement for new room list

* Update snapshots

* Update release announcement tests

* worryingly large snapshot update

* Remove the pinned message release anncounement

* Hopefully fix e2e tests

add missing e2e screenshot and remove one for removed test

* Remove unused i18n strings

* Fix screenshot

* Try straight on the quick settings button

* unused import

* update snapshots

* Fix settings location
This commit is contained in:
David Baker
2025-09-03 16:25:49 +01:00
committed by GitHub
parent 09fe9281a5
commit cba341f824
17 changed files with 769 additions and 665 deletions
+1 -12
View File
@@ -30,9 +30,8 @@ export class Helpers {
/**
* Get the release announcement with the given name.
* @param name
* @private
*/
private getReleaseAnnouncement(name: string) {
public getReleaseAnnouncement(name: string) {
return this.page.getByRole("dialog", { name });
}
@@ -55,16 +54,6 @@ export class Helpers {
assertReleaseAnnouncementIsNotVisible(name: string) {
return expect(this.getReleaseAnnouncement(name)).not.toBeVisible();
}
/**
* Mark the release announcement with the given name as read.
* If the release announcement is not visible, this will throw an error.
* @param name
*/
async markReleaseAnnouncementAsRead(name: string) {
const dialog = this.getReleaseAnnouncement(name);
await dialog.getByRole("button", { name: "Ok" }).click();
}
}
export { expect };
@@ -22,25 +22,25 @@ test.describe("Release announcement", () => {
await app.viewRoomById(roomId);
await use({ roomId });
},
labsFlags: ["feature_new_room_list"],
});
test(
"should display the pinned messages release announcement",
"should display the new room list release announcement",
{ tag: "@screenshot" },
async ({ page, app, room, util }) => {
await app.toggleRoomInfoPanel();
const name = "All new pinned messages";
const name = "Chats has a new look!";
// The release announcement should be displayed
await util.assertReleaseAnnouncementIsVisible(name);
// Hide the release announcement
await util.markReleaseAnnouncementAsRead(name);
const dialog = util.getReleaseAnnouncement(name);
await dialog.getByRole("button", { name: "Next" }).click();
await util.assertReleaseAnnouncementIsNotVisible(name);
await page.reload();
await app.toggleRoomInfoPanel();
await expect(page.getByRole("menuitem", { name: "Pinned messages" })).toBeVisible();
await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
// Check that once the release announcement has been marked as viewed, it does not appear again
await util.assertReleaseAnnouncementIsNotVisible(name);
},
@@ -32,4 +32,8 @@
transform: rotate(180deg);
}
}
.mx_RoomListHeaderView_ReleaseAnnouncementAnchor {
display: inline-flex;
}
}
@@ -49,7 +49,6 @@ import RoomName from "../elements/RoomName.tsx";
import { Flex } from "../../../shared-components/utils/Flex";
import { Linkify, topicToHtml } from "../../../HtmlUtils.tsx";
import { Box } from "../../../shared-components/utils/Box";
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel.tsx";
import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx";
@@ -251,14 +250,6 @@ const RoomSummaryCardView: React.FC<IProps> = ({
<MenuItem Icon={ThreadsIcon} label={_t("common|threads")} onSelect={vm.onRoomThreadsClick} />
{!vm.isVideoRoom && (
<>
<ReleaseAnnouncement
feature="pinningMessageList"
header={_t("right_panel|pinned_messages|release_announcement|title")}
description={_t("right_panel|pinned_messages|release_announcement|description")}
closeLabel={_t("right_panel|pinned_messages|release_announcement|close")}
placement="top"
>
<div>
<MenuItem
Icon={PinIcon}
label={_t("right_panel|pinned_messages_button")}
@@ -268,8 +259,6 @@ const RoomSummaryCardView: React.FC<IProps> = ({
{vm.pinCount}
</Text>
</MenuItem>
</div>
</ReleaseAnnouncement>
<MenuItem
Icon={FilesIcon}
label={_t("right_panel|files_button")}
@@ -23,6 +23,7 @@ import {
useRoomListHeaderViewModel,
} from "../../../viewmodels/roomlist/RoomListHeaderViewModel";
import { RoomListOptionsMenu } from "./RoomListOptionsMenu";
import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
/**
* The header view for the room list
@@ -45,15 +46,38 @@ export function RoomListHeaderView(): JSX.Element {
{vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
</Flex>
<Flex align="center" gap="var(--cpd-space-2x)">
<ReleaseAnnouncement
feature="newRoomList_sort"
header={_t("room_list|release_announcement|sort|title")}
description={_t("room_list|release_announcement|sort|description")}
closeLabel={_t("room_list|release_announcement|next")}
placement="bottom"
>
<div className="mx_RoomListHeaderView_ReleaseAnnouncementAnchor">
<RoomListOptionsMenu vm={vm} />
</div>
</ReleaseAnnouncement>
{/* If we don't display the compose menu, it means that the user can only send DM */}
<ReleaseAnnouncement
feature="newRoomList_intro"
header={_t("room_list|release_announcement|intro|title")}
description={_t("room_list|release_announcement|intro|description")}
closeLabel={_t("room_list|release_announcement|next")}
>
<div className="mx_RoomListHeaderView_ReleaseAnnouncementAnchor">
{vm.displayComposeMenu ? (
<ComposeMenu vm={vm} />
) : (
<IconButton aria-label={_t("action|start_chat")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
<IconButton
aria-label={_t("action|start_chat")}
onClick={(e) => vm.createChatRoom(e.nativeEvent)}
>
<ComposeIcon color="var(--cpd-color-icon-secondary)" />
</IconButton>
)}
</div>
</ReleaseAnnouncement>
</Flex>
</Flex>
);
@@ -11,6 +11,8 @@ import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewM
import { RoomList } from "./RoomList";
import { EmptyRoomList } from "./EmptyRoomList";
import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
import { _t } from "../../../../languageHandler";
import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
/**
* Host the room list and the (future) room filters
@@ -28,7 +30,17 @@ export function RoomListView(): JSX.Element {
}
return (
<>
<ReleaseAnnouncement
feature="newRoomList_filter"
header={_t("room_list|release_announcement|filter|title")}
description={_t("room_list|release_announcement|filter|description")}
closeLabel={_t("room_list|release_announcement|next")}
placement="right"
>
<div>
<RoomListPrimaryFilters vm={vm} />
</div>
</ReleaseAnnouncement>
{listBody}
</>
);
@@ -29,6 +29,7 @@ import QuickThemeSwitcher from "./QuickThemeSwitcher";
import Modal from "../../../Modal";
import DevtoolsDialog from "../dialogs/DevtoolsDialog";
import { SdkContextClass } from "../../../contexts/SDKContext";
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
const QuickSettingsButton: React.FC<{
isPanelCollapsed: boolean;
@@ -137,6 +138,13 @@ const QuickSettingsButton: React.FC<{
return (
<>
<ReleaseAnnouncement
feature="newRoomList_settings"
header={_t("room_list|release_announcement|settings|title")}
description={_t("room_list|release_announcement|settings|description")}
closeLabel={_t("room_list|release_announcement|done")}
placement="right"
>
<AccessibleButton
className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
onClick={openMenu}
@@ -147,6 +155,7 @@ const QuickSettingsButton: React.FC<{
>
{!isPanelCollapsed ? _t("common|settings") : null}
</AccessibleButton>
</ReleaseAnnouncement>
{contextMenu}
</>
+20 -5
View File
@@ -1877,11 +1877,6 @@
"other": "You can only pin up to %(count)s widgets"
},
"menu": "Open menu",
"release_announcement": {
"close": "Ok",
"description": "Find all pinned messages here. Rollover any message and select “Pin” to add it.",
"title": "All new pinned messages"
},
"reply_thread": "Reply to a <link>thread message</link>",
"unpin_all": {
"button": "Unpin all messages",
@@ -2180,6 +2175,26 @@
"one": "Currently removing messages in %(count)s room",
"other": "Currently removing messages in %(count)s rooms"
},
"release_announcement": {
"done": "Done",
"filter": {
"description": "Filter your chats with a single click. Expand to view more filters.",
"title": "New quick filters"
},
"intro": {
"description": "The chats list has been updated to be more clear and simple to use.",
"title": "Chats has a new look!"
},
"next": "Next",
"settings": {
"description": "To show or hide message previews, go to All settings > Preferences > Room list",
"title": "Some settings have moved"
},
"sort": {
"description": "Change the ordering of your chats from most recent to A-Z",
"title": "Sort your chats"
}
},
"room": {
"more_options": "More Options",
"open_room": "Open room %(roomName)s"
+1 -1
View File
@@ -17,7 +17,7 @@ import { Features } from "../settings/Settings";
/**
* The features are shown in the array order.
*/
const FEATURES = ["pinningMessageList"] as const;
const FEATURES = ["newRoomList_intro", "newRoomList_sort", "newRoomList_filter", "newRoomList_settings"] as const;
/**
* All the features that can be shown in the release announcements.
*/
@@ -23,7 +23,7 @@ describe("ReleaseAnnouncement", () => {
function renderReleaseAnnouncement() {
return render(
<ReleaseAnnouncement
feature="pinningMessageList"
feature="newRoomList_intro"
header="header"
description="description"
closeLabel="close"
@@ -10,13 +10,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
>
<div
class="mx_BaseCard_header"
data-floating-ui-inert=""
>
<div
class="mx_BaseCard_header_spacer"
/>
<button
aria-labelledby="«rq»"
aria-labelledby="«re»"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -48,7 +47,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
>
<header
class="mx_RoomSummaryCard_container"
data-floating-ui-inert=""
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -174,7 +172,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</header>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -186,7 +183,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
<div
aria-checked="false"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitemcheckbox"
>
@@ -214,7 +210,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
<input
aria-hidden="true"
class="_input_19o42_24"
id="«rv»"
id="«rj»"
role="switch"
type="checkbox"
/>
@@ -225,7 +221,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</div>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -263,14 +258,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -314,7 +307,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -353,13 +345,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
/>
</svg>
</button>
<div
aria-controls="«r12»"
aria-describedby="«r12»"
aria-expanded="true"
aria-haspopup="dialog"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
@@ -404,35 +389,8 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
0
</span>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r14»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -470,7 +428,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -508,14 +465,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -553,7 +508,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -591,7 +545,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -629,7 +582,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -670,14 +622,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
@@ -773,7 +723,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
>
<div
class="mx_BaseCard_header"
data-floating-ui-inert=""
>
<div
class="mx_BaseCard_header_spacer"
@@ -811,7 +760,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
>
<header
class="mx_RoomSummaryCard_container"
data-floating-ui-inert=""
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -899,7 +847,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</header>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -911,7 +858,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
<div
aria-checked="false"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitemcheckbox"
>
@@ -950,7 +896,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</div>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -988,14 +933,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1039,7 +982,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1078,13 +1020,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/>
</svg>
</button>
<div
aria-controls="«r8»"
aria-describedby="«r8»"
aria-expanded="true"
aria-haspopup="dialog"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
@@ -1129,35 +1064,8 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
0
</span>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«ra»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1195,7 +1103,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1233,14 +1140,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1278,7 +1183,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1316,7 +1220,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1354,7 +1257,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1395,14 +1297,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
@@ -1498,13 +1398,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
>
<div
class="mx_BaseCard_header"
data-floating-ui-inert=""
>
<div
class="mx_BaseCard_header_spacer"
/>
<button
aria-labelledby="«rd»"
aria-labelledby="«r7»"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -1536,7 +1435,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
>
<header
class="mx_RoomSummaryCard_container"
data-floating-ui-inert=""
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -1662,7 +1560,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</header>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -1674,7 +1571,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
<div
aria-checked="false"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitemcheckbox"
>
@@ -1702,7 +1598,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
<input
aria-hidden="true"
class="_input_19o42_24"
id="«ri»"
id="«rc»"
role="switch"
type="checkbox"
/>
@@ -1713,7 +1609,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</div>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1751,14 +1646,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1802,7 +1695,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1841,13 +1733,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
/>
</svg>
</button>
<div
aria-controls="«rl»"
aria-describedby="«rl»"
aria-expanded="true"
aria-haspopup="dialog"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
@@ -1892,35 +1777,8 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
0
</span>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«rn»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1958,7 +1816,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1996,14 +1853,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -2041,7 +1896,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -2079,7 +1933,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -2117,7 +1970,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -2158,14 +2010,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
@@ -10,6 +10,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -25,7 +26,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«rc»"
id="radix-«rm»"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@@ -53,17 +54,23 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
<div
class="flex"
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: nowrap;"
>
<div
aria-expanded="false"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«rg»"
aria-labelledby="«ru»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«re»"
id="radix-«rs»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -87,6 +94,15 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
</svg>
</div>
</button>
</div>
<div
aria-controls="«r15»"
aria-describedby="«r15»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
@@ -95,7 +111,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rl»"
id="radix-«r17»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -125,6 +141,32 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r19»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
`;
@@ -139,6 +181,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -154,7 +197,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«ro»"
id="radix-«r1c»"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@@ -182,17 +225,23 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
<div
class="flex"
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: nowrap;"
>
<div
aria-expanded="false"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«rs»"
aria-labelledby="«r1k»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rq»"
id="radix-«r1i»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -216,6 +265,15 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
</svg>
</div>
</button>
</div>
<div
aria-controls="«r1r»"
aria-describedby="«r1r»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-label="Start chat"
class="_icon-button_1pz9o_8"
@@ -248,6 +306,32 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r1t»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
`;
@@ -262,6 +346,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -305,17 +390,23 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
<div
class="flex"
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: nowrap;"
>
<div
aria-expanded="false"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r4»"
aria-labelledby="«r8»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2»"
id="radix-«r6»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -339,6 +430,15 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
</svg>
</div>
</button>
</div>
<div
aria-controls="«rf»"
aria-describedby="«rf»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
@@ -347,7 +447,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r9»"
id="radix-«rh»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -377,6 +477,32 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«rj»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
`;
@@ -391,6 +517,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -406,7 +533,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«r28»"
id="radix-«r3q»"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@@ -434,17 +561,23 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
<div
class="flex"
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: nowrap;"
>
<div
aria-expanded="false"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r2c»"
aria-labelledby="«r42»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2a»"
id="radix-«r40»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -468,6 +601,15 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
</svg>
</div>
</button>
</div>
<div
aria-controls="«r49»"
aria-describedby="«r49»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
@@ -476,7 +618,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2h»"
id="radix-«r4b»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -506,6 +648,32 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r4d»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
`;
@@ -520,6 +688,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -531,17 +700,23 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
<div
class="flex"
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: nowrap;"
>
<div
aria-expanded="false"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r2m»"
aria-labelledby="«r4m»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2k»"
id="radix-«r4k»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -565,6 +740,15 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
</svg>
</div>
</button>
</div>
<div
aria-controls="«r4t»"
aria-describedby="«r4t»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<button
aria-disabled="false"
aria-expanded="false"
@@ -573,7 +757,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2r»"
id="radix-«r4v»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -603,6 +787,32 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r51»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
`;
@@ -3,7 +3,8 @@
exports[`QuickSettingsButton should render the quick settings button in expanded mode 1`] = `
<DocumentFragment>
<div
aria-expanded="true"
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Quick settings"
class="mx_AccessibleButton mx_QuickSettingsButton expanded"
role="button"
@@ -264,6 +264,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
</div>
<div
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Quick settings"
class="mx_AccessibleButton mx_QuickSettingsButton"
role="button"
@@ -110,12 +110,12 @@ describe("ReleaseAnnouncementStore", () => {
it("should listen to release announcement data changes in the store", async () => {
const secondStore = new ReleaseAnnouncementStore();
expect(secondStore.getReleaseAnnouncement()).toBe("pinningMessageList");
expect(secondStore.getReleaseAnnouncement()).toBe("newRoomList_intro");
const promise = listenReleaseAnnouncementChanged();
await secondStore.nextReleaseAnnouncement();
expect(await promise).toBe(null);
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe(null);
expect(await promise).toBe("newRoomList_sort");
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomList_sort");
});
});