Add release announcement for the sounds (#30900)

* Add release announcement for sounds

* Update jest test and snapshots

* lint

* Update e2e test

* Add screenshot

* Fix order

* Fix snapshots

Author: langleyd

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

@@ -32,20 +32,26 @@ test.describe("Release announcement", () => {
             // dismiss the toast so the announcement appears
             await page.getByRole("button", { name: "Dismiss" }).click();
 
-            const name = "Chats has a new look!";
+            const newSoundsName = "We’ve refreshed your sounds";
+            // The new sounds release announcement should be displayed
+            await util.assertReleaseAnnouncementIsVisible(newSoundsName);
+            // Hide the new sounds release announcement
+            const newSoundsDialog = util.getReleaseAnnouncement(newSoundsName);
+            await newSoundsDialog.getByRole("button", { name: "OK" }).click();
 
-            // The release announcement should be displayed
-            await util.assertReleaseAnnouncementIsVisible(name);
-            // Hide the release announcement
-            const dialog = util.getReleaseAnnouncement(name);
+            const newRoomListName = "Chats has a new look!";
+            // The new room list release announcement should be displayed
+            await util.assertReleaseAnnouncementIsVisible(newRoomListName);
+            // Hide the new room list release announcement
+            const dialog = util.getReleaseAnnouncement(newRoomListName);
             await dialog.getByRole("button", { name: "Next" }).click();
 
-            await util.assertReleaseAnnouncementIsNotVisible(name);
+            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
 
             await page.reload();
             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);
+            // Check that once the release announcements has been marked as viewed, it does not appear again
+            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
         },
     );
 });

playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png

@@ -68,6 +68,7 @@ import { ThreadsActivityCentre } from "./threads-activity-centre/";
 import AccessibleButton from "../elements/AccessibleButton";
 import { Landmark, LandmarkNavigation } from "../../../accessibility/LandmarkNavigation";
 import { KeyboardShortcut } from "../settings/KeyboardShortcut";
+import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
     const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@@ -379,61 +380,72 @@ const SpacePanel: React.FC = () => {
                         onDragEndHandler();
                     }}
                 >
-                    <nav
-                        className={classNames("mx_SpacePanel", {
-                            collapsed: isPanelCollapsed,
-                            newUi: newRoomListEnabled,
-                        })}
-                        onKeyDown={(ev) => {
-                            const navAction = getKeyBindingsManager().getNavigationAction(ev);
-                            if (
-                                navAction === KeyBindingAction.NextLandmark ||
-                                navAction === KeyBindingAction.PreviousLandmark
-                            ) {
-                                LandmarkNavigation.findAndFocusNextLandmark(
-                                    Landmark.ACTIVE_SPACE_BUTTON,
-                                    navAction === KeyBindingAction.PreviousLandmark,
-                                );
-                                ev.stopPropagation();
-                                ev.preventDefault();
-                                return;
-                            }
-                            onKeyDownHandler(ev);
-                        }}
-                        ref={ref}
-                        aria-label={_t("common|spaces")}
+                    <ReleaseAnnouncement
+                        feature="newNotificationSounds"
+                        header={_t("settings|notifications|sounds_release_announcement|title")}
+                        description={_t("settings|notifications|sounds_release_announcement|description")}
+                        closeLabel={_t("action|ok")}
+                        displayArrow={false}
+                        placement="right-start"
                     >
-                        <UserMenu isPanelCollapsed={isPanelCollapsed}>
-                            <AccessibleButton
-                                className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
-                                onClick={() => setPanelCollapsed(!isPanelCollapsed)}
-                                title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
-                                caption={
-                                    <KeyboardShortcut
-                                        value={{ ctrlOrCmdKey: true, shiftKey: true, key: "d" }}
-                                        className="mx_SpacePanel_Tooltip_KeyboardShortcut"
-                                    />
+                        <nav
+                            className={classNames("mx_SpacePanel", {
+                                collapsed: isPanelCollapsed,
+                                newUi: newRoomListEnabled,
+                            })}
+                            onKeyDown={(ev) => {
+                                const navAction = getKeyBindingsManager().getNavigationAction(ev);
+                                if (
+                                    navAction === KeyBindingAction.NextLandmark ||
+                                    navAction === KeyBindingAction.PreviousLandmark
+                                ) {
+                                    LandmarkNavigation.findAndFocusNextLandmark(
+                                        Landmark.ACTIVE_SPACE_BUTTON,
+                                        navAction === KeyBindingAction.PreviousLandmark,
+                                    );
+                                    ev.stopPropagation();
+                                    ev.preventDefault();
+                                    return;
                                 }
-                            />
-                        </UserMenu>
-                        <Droppable droppableId="top-level-spaces">
-                            {(provided, snapshot) => (
-                                <InnerSpacePanel
-                                    {...provided.droppableProps}
-                                    isPanelCollapsed={isPanelCollapsed}
-                                    setPanelCollapsed={setPanelCollapsed}
-                                    isDraggingOver={snapshot.isDraggingOver}
-                                    innerRef={provided.innerRef}
-                                >
-                                    {provided.placeholder}
-                                </InnerSpacePanel>
-                            )}
-                        </Droppable>
-
-                        <ThreadsActivityCentre displayButtonLabel={!isPanelCollapsed} />
-
-                        <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
-                    </nav>
+                                onKeyDownHandler(ev);
+                            }}
+                            ref={ref}
+                            aria-label={_t("common|spaces")}
+                        >
+                            <UserMenu isPanelCollapsed={isPanelCollapsed}>
+                                <AccessibleButton
+                                    className={classNames("mx_SpacePanel_toggleCollapse", {
+                                        expanded: !isPanelCollapsed,
+                                    })}
+                                    onClick={() => setPanelCollapsed(!isPanelCollapsed)}
+                                    title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
+                                    caption={
+                                        <KeyboardShortcut
+                                            value={{ ctrlOrCmdKey: true, shiftKey: true, key: "d" }}
+                                            className="mx_SpacePanel_Tooltip_KeyboardShortcut"
+                                        />
+                                    }
+                                />
+                            </UserMenu>
+                            <Droppable droppableId="top-level-spaces">
+                                {(provided, snapshot) => (
+                                    <InnerSpacePanel
+                                        {...provided.droppableProps}
+                                        isPanelCollapsed={isPanelCollapsed}
+                                        setPanelCollapsed={setPanelCollapsed}
+                                        isDraggingOver={snapshot.isDraggingOver}
+                                        innerRef={provided.innerRef}
+                                    >
+                                        {provided.placeholder}
+                                    </InnerSpacePanel>
+                                )}
+                            </Droppable>
+
+                            <ThreadsActivityCentre displayButtonLabel={!isPanelCollapsed} />
+
+                            <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
+                        </nav>
+                    </ReleaseAnnouncement>
                 </DragDropContext>
             )}
         </RovingTabIndexProvider>

src/components/views/spaces/SpacePanel.tsx

@@ -2860,6 +2860,10 @@
             "rule_suppress_notices": "Messages sent by bot",
             "rule_tombstone": "When rooms are upgraded",
             "show_message_desktop_notification": "Show message in desktop notification",
+            "sounds_release_announcement": {
+                "description": "Your notification ping and call ringer have been updated—clearer, quicker, and less disruptive",
+                "title": "We’ve refreshed your sounds"
+            },
             "voip": "Audio and Video calls"
         },
         "preferences": {

src/i18n/strings/en_EN.json

@@ -18,7 +18,13 @@ import ToastStore from "./ToastStore";
 /**
  * The features are shown in the array order.
  */
-const FEATURES = ["newRoomList_intro", "newRoomList_sort", "newRoomList_filter", "newRoomList_settings"] as const;
+const FEATURES = [
+    "newNotificationSounds",
+    "newRoomList_intro",
+    "newRoomList_sort",
+    "newRoomList_filter",
+    "newRoomList_settings",
+] as const;
 /**
  * All the features that can be shown in the release announcements.
  */

src/stores/ReleaseAnnouncementStore.ts

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