TAC: Release Announcement (#12380)

* WIP

* Store the release announcements in the account settings

* Update TAC release announcement description

* Fix settings content comparison

* Add logging in case of failure

* Watch settings changes

* I add release announcement settings to disable it

* Disable release announcement in e2e test

* Add release announcement in e2e test

* Add tests for ReleaseAnnouncementStore.ts

* Update compound-web to `3.3.0`

* Update TAC tests

* Update Labs tests

* Nits

* Add test for ReleaseAnnouncement.tsx

* Update `@vector-im/compound-web`

* Add playwright snapshot

* Delete false playwright screenshot

* Wait for EW to be displayed after reload

* Add screenshot

* Clean util file

* Renaming and comments fixing

* Use second store instead of looking in the store.

---------

Co-authored-by: R Midhun Suresh <hi@midhun.dev>

test/components/structures/ReleaseAnnouncement-test.tsx

@@ -0,0 +1,48 @@
+/*
+ *
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+
+import { ReleaseAnnouncement } from "../../../src/components/structures/ReleaseAnnouncement";
+
+describe("ReleaseAnnouncement", () => {
+    function renderReleaseAnnouncement() {
+        return render(
+            <ReleaseAnnouncement
+                feature="threadsActivityCentre"
+                header="header"
+                description="description"
+                closeLabel="close"
+            >
+                <div>content</div>
+            </ReleaseAnnouncement>,
+        );
+    }
+
+    test("render the release announcement and close it", async () => {
+        renderReleaseAnnouncement();
+
+        // The release announcement is displayed
+        expect(screen.queryByRole("dialog", { name: "header" })).toBeDefined();
+        // Click on the close button in the release announcement
+        screen.getByRole("button", { name: "close" }).click();
+        // The release announcement should be hidden after the close button is clicked
+        await waitFor(() => expect(screen.queryByRole("dialog", { name: "header" })).toBeNull());
+    });
+});

test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx

@@ -60,7 +60,7 @@ describe("<LabsUserSettingsTab />", () => {
         // non-beta labs section
         expect(screen.getByText("Early previews")).toBeInTheDocument();
         const labsSections = container.getElementsByClassName("mx_SettingsSubsection");
-        expect(labsSections).toHaveLength(10);
+        expect(labsSections).toHaveLength(11);
     });
 
     describe("Rust crypto setting", () => {

test/components/views/spaces/ThreadsActivityCentre-test.tsx

@@ -28,6 +28,8 @@ import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { stubClient } from "../../../test-utils";
 import { populateThread } from "../../../test-utils/threads";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
 
 describe("ThreadsActivityCentre", () => {
     const getTACButton = () => {
@@ -101,11 +103,23 @@ describe("ThreadsActivityCentre", () => {
         );
     });
 
+    beforeEach(async () => {
+        await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, false);
+    });
+
     it("should render the threads activity centre button", async () => {
         renderTAC();
         expect(getTACButton()).toBeInTheDocument();
     });
 
+    it("should render the release announcement", async () => {
+        // Enable release announcement
+        await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, true);
+
+        renderTAC();
+        expect(document.body).toMatchSnapshot();
+    });
+
     it("should render the threads activity centre button and the display label", async () => {
         renderTAC({ displayButtonLabel: true });
         expect(getTACButton()).toBeInTheDocument();

test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
 <div
-  aria-labelledby="radix-20"
+  aria-labelledby="radix-21"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="end"
@@ -11,7 +11,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-21"
+  id="radix-22"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
@@ -127,7 +127,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
 
 exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
-  aria-labelledby="radix-28"
+  aria-labelledby="radix-29"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="end"
@@ -136,7 +136,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-29"
+  id="radix-30"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
@@ -161,7 +161,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 
 exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
 <div
-  aria-labelledby="radix-31"
+  aria-labelledby="radix-32"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="end"
@@ -170,7 +170,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-32"
+  id="radix-33"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
@@ -331,3 +331,129 @@ exports[`ThreadsActivityCentre should order the room with the same notification
   </div>
 </div>
 `;
+
+exports[`ThreadsActivityCentre should render the release announcement 1`] = `
+<body>
+  <div
+    data-floating-ui-inert=""
+  >
+    <div
+      class="mx_ThreadsActivityCentre_container"
+    >
+      <button
+        aria-controls="floating-ui-3"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        aria-label="Threads"
+        class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
+        data-state="open"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <div
+            class="mx_ThreadsActivityCentreButton_Icon"
+          />
+        </div>
+      </button>
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns="undefined"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+  <div
+    data-floating-ui-portal=""
+    id="undefined"
+  >
+    <span
+      data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
+      data-type="inside"
+      role="button"
+      style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      tabindex="0"
+    />
+    <div
+      aria-describedby="floating-ui-2"
+      aria-labelledby="floating-ui-1"
+      class="_content_1oa1y_17"
+      id="floating-ui-3"
+      role="dialog"
+      style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        class="_arrow_1oa1y_62"
+        height="20"
+        style="position: absolute; pointer-events: none; right: calc(100% - 0px); transform: rotate(90deg);"
+        viewBox="0 0 20 20"
+        width="20"
+      >
+        <path
+          d="M0,0 H20 L10,12 Q10,12 10,12 Z"
+          stroke="none"
+        />
+        <clippath
+          id="floating-ui-5"
+        >
+          <rect
+            height="20"
+            width="20"
+            x="0"
+            y="0"
+          />
+        </clippath>
+      </svg>
+      <h3
+        class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 _header_1oa1y_46"
+        id="floating-ui-1"
+      >
+        Threads Activity Centre
+      </h3>
+      <span
+        class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _description_1oa1y_52"
+        id="floating-ui-2"
+      >
+        Threads notifications have moved, find them here from now on.
+      </span>
+      <button
+        class="_button_dyfp8_17 _button_1oa1y_57"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        OK
+      </button>
+    </div>
+    <span
+      data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
+      data-type="inside"
+      role="button"
+      style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;