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,74 +241,87 @@ 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">
-                <button
+                <ReleaseAnnouncement
-                    aria-label={_t("right_panel|room_summary_card|title")}
+                    feature="newRoomHeader"
-                    tabIndex={0}
+                    header={_t("room|header|release_announcement_header")}
-                    onClick={() => {
+                    description={_t("room|header|release_announcement_description")}
-                        RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
+                    closeLabel={_t("action|ok")}
-                    }}
+                    placement="bottom"
-                    className="mx_RoomHeader_infoWrapper"
                 >
-                    <RoomAvatar room={room} size="40px" />
+                    <button
-                    <Box flex="1" className="mx_RoomHeader_info">
+                        aria-label={_t("right_panel|room_summary_card|title")}
-                        <BodyText
+                        tabIndex={0}
-                            as="div"
+                        onClick={() => {
-                            size="lg"
+                            if (isReleaseAnnouncementOpen) {
-                            weight="semibold"
+                                ReleaseAnnouncementStore.instance.nextReleaseAnnouncement();
-                            dir="auto"
+                            }
-                            role="heading"
+                            RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
-                            aria-level={1}
+                        }}
-                            className="mx_RoomHeader_heading"
+                        className="mx_RoomHeader_infoWrapper"
-                        >
+                    >
-                            <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
+                        <RoomAvatar room={room} size="40px" />
-
+                        <Box flex="1" className="mx_RoomHeader_info">
-                            {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
-                                <Tooltip label={_t("common|public_room")} placement="right">
-                                    <PublicIcon
-                                        width="16px"
-                                        height="16px"
-                                        className="mx_RoomHeader_icon text-secondary"
-                                        aria-label={_t("common|public_room")}
-                                    />
-                                </Tooltip>
-                            )}
-
-                            {isDirectMessage && e2eStatus === E2EStatus.Verified && (
-                                <Tooltip label={_t("common|verified")} placement="right">
-                                    <VerifiedIcon
-                                        width="16px"
-                                        height="16px"
-                                        className="mx_RoomHeader_icon mx_Verified"
-                                        aria-label={_t("common|verified")}
-                                    />
-                                </Tooltip>
-                            )}
-
-                            {isDirectMessage && e2eStatus === E2EStatus.Warning && (
-                                <Tooltip label={_t("room|header_untrusted_label")} placement="right">
-                                    <ErrorIcon
-                                        width="16px"
-                                        height="16px"
-                                        className="mx_RoomHeader_icon mx_Untrusted"
-                                        aria-label={_t("room|header_untrusted_label")}
-                                    />
-                                </Tooltip>
-                            )}
-                        </BodyText>
-                        {roomTopic && (
                             <BodyText
                                 as="div"
-                                size="sm"
+                                size="lg"
-                                className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
+                                weight="semibold"
+                                dir="auto"
+                                role="heading"
+                                aria-level={1}
+                                className="mx_RoomHeader_heading"
                             >
-                                <Linkify>{roomTopicBody}</Linkify>
+                                <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
+
+                                {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
+                                    <Tooltip label={_t("common|public_room")} placement="right">
+                                        <PublicIcon
+                                            width="16px"
+                                            height="16px"
+                                            className="mx_RoomHeader_icon text-secondary"
+                                            aria-label={_t("common|public_room")}
+                                        />
+                                    </Tooltip>
+                                )}
+
+                                {isDirectMessage && e2eStatus === E2EStatus.Verified && (
+                                    <Tooltip label={_t("common|verified")} placement="right">
+                                        <VerifiedIcon
+                                            width="16px"
+                                            height="16px"
+                                            className="mx_RoomHeader_icon mx_Verified"
+                                            aria-label={_t("common|verified")}
+                                        />
+                                    </Tooltip>
+                                )}
+
+                                {isDirectMessage && e2eStatus === E2EStatus.Warning && (
+                                    <Tooltip label={_t("room|header_untrusted_label")} placement="right">
+                                        <ErrorIcon
+                                            width="16px"
+                                            height="16px"
+                                            className="mx_RoomHeader_icon mx_Untrusted"
+                                            aria-label={_t("room|header_untrusted_label")}
+                                        />
+                                    </Tooltip>
+                                )}
                             </BodyText>
-                        )}
+                            {roomTopic && (
-                    </Box>
+                                <BodyText
-                </button>
+                                    as="div"
+                                    size="sm"
+                                    className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
+                                >
+                                    <Linkify>{roomTopicBody}</Linkify>
+                                </BodyText>
+                            )}
+                        </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();
     });
 });