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

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