From c152bfd83ca1d6779c2952c01c07ff1b75abe339 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 2 May 2024 17:01:13 +0200
Subject: [PATCH] [Backport staging]  TAC: Close Release Announcement when TAC
 button is clicked (#12485)

---
 .../ThreadsActivityCentre.tsx                 |   6 +
 .../spaces/ThreadsActivityCentre-test.tsx     |  21 ++++
 .../ThreadsActivityCentre-test.tsx.snap       | 109 ++++++++++++++++--
 3 files changed, 127 insertions(+), 9 deletions(-)

diff --git a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
index da2ce6be63e..4cc0102898e 100644
--- a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
+++ b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
@@ -37,6 +37,7 @@ import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
 import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
 import { useIsReleaseAnnouncementOpen } from "../../../../hooks/useIsReleaseAnnouncementOpen";
 import { useSettingValue } from "../../../../hooks/useSettings";
+import { ReleaseAnnouncementStore } from "../../../../stores/ReleaseAnnouncementStore";
 
 interface ThreadsActivityCentreProps {
     /**
@@ -84,6 +85,11 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
                     <ThreadsActivityCentreButton
                         displayLabel={displayButtonLabel}
                         notificationLevel={roomsAndNotifications.greatestNotificationLevel}
+                        onClick={async () => {
+                            // Open the TAC after the release announcement closing
+                            setOpen(true);
+                            await ReleaseAnnouncementStore.instance.nextReleaseAnnouncement();
+                        }}
                     />
                 </ReleaseAnnouncement>
             ) : (
diff --git a/test/components/views/spaces/ThreadsActivityCentre-test.tsx b/test/components/views/spaces/ThreadsActivityCentre-test.tsx
index 02d37b53af8..bf7defc83d5 100644
--- a/test/components/views/spaces/ThreadsActivityCentre-test.tsx
+++ b/test/components/views/spaces/ThreadsActivityCentre-test.tsx
@@ -118,6 +118,27 @@ describe("ThreadsActivityCentre", () => {
         expect(document.body).toMatchSnapshot();
     });
 
+    it("should render not display the tooltip when the release announcement is displayed", async () => {
+        // Enable release announcement
+        await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, true);
+
+        renderTAC();
+
+        // The tooltip should not be displayed
+        await userEvent.hover(getTACButton());
+        expect(screen.queryByRole("tooltip")).toBeNull();
+    });
+
+    it("should close the release announcement when the TAC button is clicked", async () => {
+        // Enable release announcement
+        await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, true);
+
+        renderTAC();
+        await userEvent.click(getTACButton());
+        expect(getTACMenu()).toBeInTheDocument();
+        expect(document.body).toMatchSnapshot();
+    });
+
     it("should render the threads activity centre button and the display label", async () => {
         renderTAC({ displayButtonLabel: true });
         expect(getTACButton()).toBeInTheDocument();
diff --git a/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index 028011341e3..56bc5451f3e 100644
--- a/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/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-14"
+  aria-labelledby="radix-16"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="start"
@@ -11,14 +11,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-15"
+  id="radix-17"
   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"
 >
   <h3
     class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
-    id=":r5:"
+    id=":r6:"
   >
     Threads activity
   </h3>
@@ -125,9 +125,100 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
 </div>
 `;
 
+exports[`ThreadsActivityCentre should close the release announcement when the TAC button is clicked 1`] = `
+<body
+  data-scroll-locked=""
+  style="pointer-events: none;"
+>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <div
+      class="mx_ThreadsActivityCentre_container"
+    >
+      <button
+        aria-controls="radix-3"
+        aria-disabled="false"
+        aria-expanded="true"
+        aria-haspopup="menu"
+        aria-label="Threads"
+        class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
+        data-state="closed"
+        id="radix-2"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <div
+            class="mx_ThreadsActivityCentreButton_Icon"
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+  <div
+    data-radix-popper-content-wrapper=""
+    dir="ltr"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, -8px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -8px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
+  >
+    <div
+      aria-labelledby="radix-2"
+      aria-orientation="vertical"
+      class="_menu_1x5h1_17"
+      data-align="start"
+      data-orientation="vertical"
+      data-radix-menu-content=""
+      data-side="top"
+      data-state="open"
+      dir="ltr"
+      id="radix-3"
+      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"
+    >
+      <h3
+        class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
+        id=":r1:"
+      >
+        Threads activity
+      </h3>
+      <div
+        class="mx_ThreadsActivityCentre_rows"
+      >
+        <div
+          class="mx_ThreadsActivityCentre_emptyCaption"
+        >
+          You don't have rooms with thread notifications yet.
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+</body>
+`;
+
 exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
-  aria-labelledby="radix-20"
+  aria-labelledby="radix-22"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="start"
@@ -136,14 +227,14 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-21"
+  id="radix-23"
   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"
 >
   <h3
     class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
-    id=":r7:"
+    id=":r8:"
   >
     Threads activity
   </h3>
@@ -161,7 +252,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-22"
+  aria-labelledby="radix-24"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="start"
@@ -170,14 +261,14 @@ exports[`ThreadsActivityCentre should order the room with the same notification
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-23"
+  id="radix-25"
   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"
 >
   <h3
     class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
-    id=":r8:"
+    id=":r9:"
   >
     Threads activity
   </h3>