From bf943401291004e54121944aae315c97b7b5fa71 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 22 Jul 2024 19:14:02 +0530
Subject: [PATCH 1/3] Add announcement for the new room header

---
 src/components/views/rooms/RoomHeader.tsx | 129 ++++++++++++----------
 src/i18n/strings/en_EN.json               |   2 +
 src/stores/ReleaseAnnouncementStore.ts    |   2 +-
 3 files changed, 72 insertions(+), 61 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 19b368cd180..5a8f310f782 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -57,6 +57,7 @@ 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";
 
 export default function RoomHeader({
     room,
@@ -241,71 +242,79 @@ export default function RoomHeader({
     return (
         <>
             <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
-                <button
-                    aria-label={_t("right_panel|room_summary_card|title")}
-                    tabIndex={0}
-                    onClick={() => {
-                        RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
-                    }}
-                    className="mx_RoomHeader_infoWrapper"
+                <ReleaseAnnouncement
+                    feature="newRoomHeader"
+                    header={_t("room|header|release_announcement_header")}
+                    description={_t("room|header|release_announcement_description")}
+                    closeLabel={_t("action|ok")}
+                    placement="bottom"
                 >
-                    <RoomAvatar room={room} size="40px" />
-                    <Box flex="1" className="mx_RoomHeader_info">
-                        <BodyText
-                            as="div"
-                            size="lg"
-                            weight="semibold"
-                            dir="auto"
-                            role="heading"
-                            aria-level={1}
-                            className="mx_RoomHeader_heading"
-                        >
-                            <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 && (
+                    <button
+                        aria-label={_t("right_panel|room_summary_card|title")}
+                        tabIndex={0}
+                        onClick={() => {
+                            RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
+                        }}
+                        className="mx_RoomHeader_infoWrapper"
+                    >
+                        <RoomAvatar room={room} size="40px" />
+                        <Box flex="1" className="mx_RoomHeader_info">
                             <BodyText
                                 as="div"
-                                size="sm"
-                                className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
+                                size="lg"
+                                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>
-                        )}
-                    </Box>
-                </button>
+                            {roomTopic && (
+                                <BodyText
+                                    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();
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 12ad79607d6..37e69b7a77c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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)",
diff --git a/src/stores/ReleaseAnnouncementStore.ts b/src/stores/ReleaseAnnouncementStore.ts
index 604c13fc496..1fd3388982f 100644
--- a/src/stores/ReleaseAnnouncementStore.ts
+++ b/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.
  */

From 007ab5f666662d4d60fcd2662570ccfc7456e1e6 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Tue, 23 Jul 2024 14:15:41 +0530
Subject: [PATCH 2/3] Update tests

---
 .../__snapshots__/RoomHeader-test.tsx.snap      |  2 ++
 test/stores/ReleaseAnnouncementStore-test.tsx   | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
index 58abdb0991f..dd76c363676 100644
--- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
+++ b/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"
diff --git a/test/stores/ReleaseAnnouncementStore-test.tsx b/test/stores/ReleaseAnnouncementStore-test.tsx
index 77e79cd5453..b9490b0d640 100644
--- a/test/stores/ReleaseAnnouncementStore-test.tsx
+++ b/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).toBeNull();
-        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBeNull();
+        expect(await promise).toBe("newRoomHeader");
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomHeader");
     });
 });

From e886b7cb9e3141ff60b991669a394ab4e7f19d07 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Tue, 23 Jul 2024 15:49:07 +0530
Subject: [PATCH 3/3] Dismiss announcement when header button is clicked

---
 src/components/views/rooms/RoomHeader.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 5a8f310f782..c7b1673166c 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -58,6 +58,8 @@ 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,
@@ -239,6 +241,8 @@ 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">
@@ -253,6 +257,9 @@ export default function RoomHeader({
                         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"