diff --git a/playwright/e2e/release-announcement/index.ts b/playwright/e2e/release-announcement/index.ts index 2a2e704d74..e28fa6f989 100644 --- a/playwright/e2e/release-announcement/index.ts +++ b/playwright/e2e/release-announcement/index.ts @@ -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 }; diff --git a/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts b/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts index 812b66b796..6e6e26ea6f 100644 --- a/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts +++ b/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts @@ -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); }, diff --git a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png deleted file mode 100644 index d33c711add..0000000000 Binary files a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png and /dev/null differ diff --git a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png new file mode 100644 index 0000000000..56b301d4cc Binary files /dev/null and b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png differ diff --git a/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss index 9af934c308..5427e1f133 100644 --- a/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss +++ b/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss @@ -32,4 +32,8 @@ transform: rotate(180deg); } } + + .mx_RoomListHeaderView_ReleaseAnnouncementAnchor { + display: inline-flex; + } } diff --git a/src/components/views/right_panel/RoomSummaryCardView.tsx b/src/components/views/right_panel/RoomSummaryCardView.tsx index f0cd8f2967..9aa4914475 100644 --- a/src/components/views/right_panel/RoomSummaryCardView.tsx +++ b/src/components/views/right_panel/RoomSummaryCardView.tsx @@ -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,25 +250,15 @@ const RoomSummaryCardView: React.FC = ({ {!vm.isVideoRoom && ( <> - -
- - - {vm.pinCount} - - -
- + + {vm.pinCount} + + } - + +
+ +
+ + {/* If we don't display the compose menu, it means that the user can only send DM */} - {vm.displayComposeMenu ? ( - - ) : ( - vm.createChatRoom(e.nativeEvent)}> - - - )} + +
+ {vm.displayComposeMenu ? ( + + ) : ( + vm.createChatRoom(e.nativeEvent)} + > + + + )} +
+ ); diff --git a/src/components/views/rooms/RoomListPanel/RoomListView.tsx b/src/components/views/rooms/RoomListPanel/RoomListView.tsx index a99312be53..a0c9184211 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListView.tsx @@ -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 ( <> - + +
+ +
+ {listBody} ); diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index 7132032a18..1bde2afef9 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -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,16 +138,24 @@ const QuickSettingsButton: React.FC<{ return ( <> - - {!isPanelCollapsed ? _t("common|settings") : null} - + + {!isPanelCollapsed ? _t("common|settings") : null} + + {contextMenu} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 0f5550834a..77335c9e75 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -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 thread message", "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" diff --git a/src/stores/ReleaseAnnouncementStore.ts b/src/stores/ReleaseAnnouncementStore.ts index 0b287d44b9..f31e5a5c02 100644 --- a/src/stores/ReleaseAnnouncementStore.ts +++ b/src/stores/ReleaseAnnouncementStore.ts @@ -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. */ diff --git a/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx b/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx index e53bf06d48..2076b72e20 100644 --- a/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx +++ b/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx @@ -23,7 +23,7 @@ describe("ReleaseAnnouncement", () => { function renderReleaseAnnouncement() { return render( has button to edit topic 1`] = ` >
+
@@ -520,6 +688,7 @@ exports[` space menu should not display the space menu 1`] >

space menu should not display the space menu 1`] 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;" > - -

+ +
+
- - + + + + +
+ + +