Add release announcement for the new room header (#12802)

src/components/views/rooms/RoomHeader.tsx

@@ -57,6 +57,9 @@ import { isVideoRoom } from "../../../utils/video-rooms";
 import { notificationLevelToIndicator } from "../../../utils/notifications";
 import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
 import { ButtonEvent } from "../elements/AccessibleButton";
+import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
+import { useIsReleaseAnnouncementOpen } from "../../../hooks/useIsReleaseAnnouncementOpen";
+import { ReleaseAnnouncementStore } from "../../../stores/ReleaseAnnouncementStore";
 
 export default function RoomHeader({
     room,
@@ -238,13 +241,25 @@ export default function RoomHeader({
         voiceCallButton = undefined;
     }
 
+    const isReleaseAnnouncementOpen = useIsReleaseAnnouncementOpen("newRoomHeader");
+
     return (
         <>
             <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
+                <ReleaseAnnouncement
+                    feature="newRoomHeader"
+                    header={_t("room|header|release_announcement_header")}
+                    description={_t("room|header|release_announcement_description")}
+                    closeLabel={_t("action|ok")}
+                    placement="bottom"
+                >
                     <button
                         aria-label={_t("right_panel|room_summary_card|title")}
                         tabIndex={0}
                         onClick={() => {
+                            if (isReleaseAnnouncementOpen) {
+                                ReleaseAnnouncementStore.instance.nextReleaseAnnouncement();
+                            }
                             RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
                         }}
                         className="mx_RoomHeader_infoWrapper"
@@ -306,6 +321,7 @@ export default function RoomHeader({
                             )}
                         </Box>
                     </button>
+                </ReleaseAnnouncement>
                 <Flex align="center" gap="var(--cpd-space-2x)">
                     {additionalButtons?.map((props) => {
                         const label = props.label();

src/i18n/strings/en_EN.json

@@ -1950,6 +1950,8 @@
                 "one": "Asking to join",
                 "other": "%(count)s people asking to join"
             },
+            "release_announcement_description": "Enjoy a simpler, more accessible room header.",
+            "release_announcement_header": "New design!",
             "room_is_public": "This room is public",
             "show_widgets_button": "Show Widgets",
             "video_call_button_ec": "Video call (%(brand)s)",

src/stores/ReleaseAnnouncementStore.ts

@@ -27,7 +27,7 @@ import { Features } from "../settings/Settings";
 /**
  * The features are shown in the array order.
  */
-const FEATURES = ["threadsActivityCentre"] as const;
+const FEATURES = ["threadsActivityCentre", "newRoomHeader"] as const;
 /**
  * All the features that can be shown in the release announcements.
  */

test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap

@@ -7,6 +7,8 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
   >
     <button
+      aria-expanded="false"
+      aria-haspopup="dialog"
       aria-label="Room info"
       class="mx_RoomHeader_infoWrapper"
       tabindex="0"

test/stores/ReleaseAnnouncementStore-test.tsx

@@ -99,14 +99,18 @@ describe("ReleaseAnnouncementStore", () => {
         // Sanity check
         expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("threadsActivityCentre");
 
-        const promise = listenReleaseAnnouncementChanged();
+        let promise = listenReleaseAnnouncementChanged();
+        await releaseAnnouncementStore.nextReleaseAnnouncement();
+
+        expect(await promise).toBe("newRoomHeader");
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomHeader");
+
+        promise = listenReleaseAnnouncementChanged();
         await releaseAnnouncementStore.nextReleaseAnnouncement();
-        // Currently there is only one feature, so the next feature should be null
         expect(await promise).toBeNull();
-        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBeNull();
 
         const secondStore = new ReleaseAnnouncementStore();
-        // The TAC release announcement has been viewed, so it should be updated in the store account
+        // All the release announcements have been viewed, so it should be updated in the store account
         // The release announcement viewing states should be share among all instances (devices in the same account)
         expect(secondStore.getReleaseAnnouncement()).toBeNull();
     });
@@ -118,8 +122,7 @@ describe("ReleaseAnnouncementStore", () => {
         const promise = listenReleaseAnnouncementChanged();
         await secondStore.nextReleaseAnnouncement();
 
-        // Currently there is only one feature, so the next feature should be null
+        expect(await promise).toBe("newRoomHeader");
-        expect(await promise).toBeNull();
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomHeader");
-        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBeNull();
     });
 });