Release announcement for new room list

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 };

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);
         },

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

@@ -32,4 +32,8 @@
             transform: rotate(180deg);
         }
     }
+
+    .mx_RoomListHeaderView_ReleaseAnnouncementAnchor {
+        display: inline-flex;
+    }
 }

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<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"
+                        <MenuItem
+                            Icon={PinIcon}
+                            label={_t("right_panel|pinned_messages_button")}
+                            onSelect={vm.onRoomPinsClick}
                         >
-                            <div>
-                                <MenuItem
-                                    Icon={PinIcon}
-                                    label={_t("right_panel|pinned_messages_button")}
-                                    onSelect={vm.onRoomPinsClick}
-                                >
-                                    <Text as="span" size="sm">
-                                        {vm.pinCount}
-                                    </Text>
-                                </MenuItem>
-                            </div>
-                        </ReleaseAnnouncement>
+                            <Text as="span" size="sm">
+                                {vm.pinCount}
+                            </Text>
+                        </MenuItem>
                         <MenuItem
                             Icon={FilesIcon}
                             label={_t("right_panel|files_button")}

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

@@ -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)">
-                <RoomListOptionsMenu vm={vm} />
+                <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 */}
-                {vm.displayComposeMenu ? (
-                    <ComposeMenu vm={vm} />
-                ) : (
-                    <IconButton aria-label={_t("action|start_chat")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
-                        <ComposeIcon color="var(--cpd-color-icon-secondary)" />
-                    </IconButton>
-                )}
+                <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)}
+                            >
+                                <ComposeIcon color="var(--cpd-color-icon-secondary)" />
+                            </IconButton>
+                        )}
+                    </div>
+                </ReleaseAnnouncement>
             </Flex>
         </Flex>
     );

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 (
         <>
-            <RoomListPrimaryFilters vm={vm} />
+            <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}
         </>
     );

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 (
         <>
-            <AccessibleButton
-                className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
-                onClick={openMenu}
-                aria-label={_t("quick_settings|title")}
-                title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
-                ref={handle}
-                aria-expanded={!isPanelCollapsed}
+            <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"
             >
-                {!isPanelCollapsed ? _t("common|settings") : null}
-            </AccessibleButton>
+                <AccessibleButton
+                    className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
+                    onClick={openMenu}
+                    aria-label={_t("quick_settings|title")}
+                    title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
+                    ref={handle}
+                    aria-expanded={!isPanelCollapsed}
+                >
+                    {!isPanelCollapsed ? _t("common|settings") : null}
+                </AccessibleButton>
+            </ReleaseAnnouncement>
 
             {contextMenu}
         </>

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 <link>thread message</link>",
             "unpin_all": {
                 "button": "Unpin all messages",
@@ -2179,6 +2174,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"

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.
  */

test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx

@@ -23,7 +23,7 @@ describe("ReleaseAnnouncement", () => {
     function renderReleaseAnnouncement() {
         return render(
             <ReleaseAnnouncement
-                feature="pinningMessageList"
+                feature="newRoomList_intro"
                 header="header"
                 description="description"
                 closeLabel="close"