Skip to content

Commit cba341f

Browse files
dbkrdbkr
authored
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
1 parent 09fe928 commit cba341f

File tree

17 files changed

+763
-659
lines changed

17 files changed

+763
-659
lines changed

‎playwright/e2e/release-announcement/index.ts‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,8 @@ export class Helpers {
3030
/**
3131
* Get the release announcement with the given name.
3232
* @param name
33-
* @private
3433
*/
35-
private getReleaseAnnouncement(name: string) {
34+
public getReleaseAnnouncement(name: string) {
3635
return this.page.getByRole("dialog", { name });
3736
}
3837

@@ -55,16 +54,6 @@ export class Helpers {
5554
assertReleaseAnnouncementIsNotVisible(name: string) {
5655
return expect(this.getReleaseAnnouncement(name)).not.toBeVisible();
5756
}
58-
59-
/**
60-
* Mark the release announcement with the given name as read.
61-
* If the release announcement is not visible, this will throw an error.
62-
* @param name
63-
*/
64-
async markReleaseAnnouncementAsRead(name: string) {
65-
const dialog = this.getReleaseAnnouncement(name);
66-
await dialog.getByRole("button", { name: "Ok" }).click();
67-
}
6857
}
6958

7059
export { expect };

‎playwright/e2e/release-announcement/releaseAnnouncement.spec.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,25 @@ test.describe("Release announcement", () => {
2222
await app.viewRoomById(roomId);
2323
await use({ roomId });
2424
},
25+
labsFlags: ["feature_new_room_list"],
2526
});
2627

2728
test(
28-
"should display the pinned messages release announcement",
29+
"should display the new room list release announcement",
2930
{ tag: "@screenshot" },
3031
async ({ page, app, room, util }) => {
31-
await app.toggleRoomInfoPanel();
32-
33-
const name = "All new pinned messages";
32+
const name = "Chats has a new look!";
3433

3534
// The release announcement should be displayed
3635
await util.assertReleaseAnnouncementIsVisible(name);
3736
// Hide the release announcement
38-
await util.markReleaseAnnouncementAsRead(name);
37+
const dialog = util.getReleaseAnnouncement(name);
38+
await dialog.getByRole("button", { name: "Next" }).click();
39+
3940
await util.assertReleaseAnnouncementIsNotVisible(name);
4041

4142
await page.reload();
42-
await app.toggleRoomInfoPanel();
43-
await expect(page.getByRole("menuitem", { name: "Pinned messages" })).toBeVisible();
43+
await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
4444
// Check that once the release announcement has been marked as viewed, it does not appear again
4545
await util.assertReleaseAnnouncementIsNotVisible(name);
4646
},

‎playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png‎

-105 KB
Binary file not shown.

‎playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png‎

84.7 KB
Loading

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,8 @@
3232
transform: rotate(180deg);
3333
}
3434
}
35+
36+
.mx_RoomListHeaderView_ReleaseAnnouncementAnchor {
37+
display: inline-flex;
38+
}
3539
}

‎src/components/views/right_panel/RoomSummaryCardView.tsx‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ import RoomName from "../elements/RoomName.tsx";
4949
import { Flex } from "../../../shared-components/utils/Flex";
5050
import { Linkify, topicToHtml } from "../../../HtmlUtils.tsx";
5151
import { Box } from "../../../shared-components/utils/Box";
52-
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
5352
import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel.tsx";
5453
import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx";
5554

@@ -251,25 +250,15 @@ const RoomSummaryCardView: React.FC<IProps> = ({
251250
<MenuItem Icon={ThreadsIcon} label={_t("common|threads")} onSelect={vm.onRoomThreadsClick} />
252251
{!vm.isVideoRoom && (
253252
<>
254-
<ReleaseAnnouncement
255-
feature="pinningMessageList"
256-
header={_t("right_panel|pinned_messages|release_announcement|title")}
257-
description={_t("right_panel|pinned_messages|release_announcement|description")}
258-
closeLabel={_t("right_panel|pinned_messages|release_announcement|close")}
259-
placement="top"
253+
<MenuItem
254+
Icon={PinIcon}
255+
label={_t("right_panel|pinned_messages_button")}
256+
onSelect={vm.onRoomPinsClick}
260257
>
261-
<div>
262-
<MenuItem
263-
Icon={PinIcon}
264-
label={_t("right_panel|pinned_messages_button")}
265-
onSelect={vm.onRoomPinsClick}
266-
>
267-
<Text as="span" size="sm">
268-
{vm.pinCount}
269-
</Text>
270-
</MenuItem>
271-
</div>
272-
</ReleaseAnnouncement>
258+
<Text as="span" size="sm">
259+
{vm.pinCount}
260+
</Text>
261+
</MenuItem>
273262
<MenuItem
274263
Icon={FilesIcon}
275264
label={_t("right_panel|files_button")}

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

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
useRoomListHeaderViewModel,
2424
} from "../../../viewmodels/roomlist/RoomListHeaderViewModel";
2525
import { RoomListOptionsMenu } from "./RoomListOptionsMenu";
26+
import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
2627

2728
/**
2829
* The header view for the room list
@@ -45,15 +46,38 @@ export function RoomListHeaderView(): JSX.Element {
4546
{vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
4647
</Flex>
4748
<Flex align="center" gap="var(--cpd-space-2x)">
48-
<RoomListOptionsMenu vm={vm} />
49+
<ReleaseAnnouncement
50+
feature="newRoomList_sort"
51+
header={_t("room_list|release_announcement|sort|title")}
52+
description={_t("room_list|release_announcement|sort|description")}
53+
closeLabel={_t("room_list|release_announcement|next")}
54+
placement="bottom"
55+
>
56+
<div className="mx_RoomListHeaderView_ReleaseAnnouncementAnchor">
57+
<RoomListOptionsMenu vm={vm} />
58+
</div>
59+
</ReleaseAnnouncement>
60+
4961
{/* If we don't display the compose menu, it means that the user can only send DM */}
50-
{vm.displayComposeMenu ? (
51-
<ComposeMenu vm={vm} />
52-
) : (
53-
<IconButton aria-label={_t("action|start_chat")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
54-
<ComposeIcon color="var(--cpd-color-icon-secondary)" />
55-
</IconButton>
56-
)}
62+
<ReleaseAnnouncement
63+
feature="newRoomList_intro"
64+
header={_t("room_list|release_announcement|intro|title")}
65+
description={_t("room_list|release_announcement|intro|description")}
66+
closeLabel={_t("room_list|release_announcement|next")}
67+
>
68+
<div className="mx_RoomListHeaderView_ReleaseAnnouncementAnchor">
69+
{vm.displayComposeMenu ? (
70+
<ComposeMenu vm={vm} />
71+
) : (
72+
<IconButton
73+
aria-label={_t("action|start_chat")}
74+
onClick={(e) => vm.createChatRoom(e.nativeEvent)}
75+
>
76+
<ComposeIcon color="var(--cpd-color-icon-secondary)" />
77+
</IconButton>
78+
)}
79+
</div>
80+
</ReleaseAnnouncement>
5781
</Flex>
5882
</Flex>
5983
);

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewM
1111
import { RoomList } from "./RoomList";
1212
import { EmptyRoomList } from "./EmptyRoomList";
1313
import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
14+
import { _t } from "../../../../languageHandler";
15+
import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
1416

1517
/**
1618
* Host the room list and the (future) room filters
@@ -28,7 +30,17 @@ export function RoomListView(): JSX.Element {
2830
}
2931
return (
3032
<>
31-
<RoomListPrimaryFilters vm={vm} />
33+
<ReleaseAnnouncement
34+
feature="newRoomList_filter"
35+
header={_t("room_list|release_announcement|filter|title")}
36+
description={_t("room_list|release_announcement|filter|description")}
37+
closeLabel={_t("room_list|release_announcement|next")}
38+
placement="right"
39+
>
40+
<div>
41+
<RoomListPrimaryFilters vm={vm} />
42+
</div>
43+
</ReleaseAnnouncement>
3244
{listBody}
3345
</>
3446
);

‎src/components/views/spaces/QuickSettingsButton.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import QuickThemeSwitcher from "./QuickThemeSwitcher";
2929
import Modal from "../../../Modal";
3030
import DevtoolsDialog from "../dialogs/DevtoolsDialog";
3131
import { SdkContextClass } from "../../../contexts/SDKContext";
32+
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
3233

3334
const QuickSettingsButton: React.FC<{
3435
isPanelCollapsed: boolean;
@@ -137,16 +138,24 @@ const QuickSettingsButton: React.FC<{
137138

138139
return (
139140
<>
140-
<AccessibleButton
141-
className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
142-
onClick={openMenu}
143-
aria-label={_t("quick_settings|title")}
144-
title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
145-
ref={handle}
146-
aria-expanded={!isPanelCollapsed}
141+
<ReleaseAnnouncement
142+
feature="newRoomList_settings"
143+
header={_t("room_list|release_announcement|settings|title")}
144+
description={_t("room_list|release_announcement|settings|description")}
145+
closeLabel={_t("room_list|release_announcement|done")}
146+
placement="right"
147147
>
148-
{!isPanelCollapsed ? _t("common|settings") : null}
149-
</AccessibleButton>
148+
<AccessibleButton
149+
className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
150+
onClick={openMenu}
151+
aria-label={_t("quick_settings|title")}
152+
title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
153+
ref={handle}
154+
aria-expanded={!isPanelCollapsed}
155+
>
156+
{!isPanelCollapsed ? _t("common|settings") : null}
157+
</AccessibleButton>
158+
</ReleaseAnnouncement>
150159

151160
{contextMenu}
152161
</>

‎src/i18n/strings/en_EN.json‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1877,11 +1877,6 @@
18771877
"other": "You can only pin up to %(count)s widgets"
18781878
},
18791879
"menu": "Open menu",
1880-
"release_announcement": {
1881-
"close": "Ok",
1882-
"description": "Find all pinned messages here. Rollover any message and select “Pin” to add it.",
1883-
"title": "All new pinned messages"
1884-
},
18851880
"reply_thread": "Reply to a <link>thread message</link>",
18861881
"unpin_all": {
18871882
"button": "Unpin all messages",
@@ -2180,6 +2175,26 @@
21802175
"one": "Currently removing messages in %(count)s room",
21812176
"other": "Currently removing messages in %(count)s rooms"
21822177
},
2178+
"release_announcement": {
2179+
"done": "Done",
2180+
"filter": {
2181+
"description": "Filter your chats with a single click. Expand to view more filters.",
2182+
"title": "New quick filters"
2183+
},
2184+
"intro": {
2185+
"description": "The chats list has been updated to be more clear and simple to use.",
2186+
"title": "Chats has a new look!"
2187+
},
2188+
"next": "Next",
2189+
"settings": {
2190+
"description": "To show or hide message previews, go to All settings > Preferences > Room list",
2191+
"title": "Some settings have moved"
2192+
},
2193+
"sort": {
2194+
"description": "Change the ordering of your chats from most recent to A-Z",
2195+
"title": "Sort your chats"
2196+
}
2197+
},
21832198
"room": {
21842199
"more_options": "More Options",
21852200
"open_room": "Open room %(roomName)s"

0 commit comments

Comments
 (0)