Close RA when TAC button is closed

matrix-org · Apr 30, 2024 · f10a718 · f10a718
1 parent c2e6325
commit f10a718
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git 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
@@ -118,6 +118,16 @@ describe("ThreadsActivityCentre", () => {
         expect(document.body).toMatchSnapshot();
     });
 
+    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
@@ -125,6 +125,97 @@ 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-1"
+        aria-disabled="false"
+        aria-expanded="true"
+        aria-haspopup="menu"
+        aria-label="Threads"
+        class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
+        data-state="closed"
+        id="radix-0"
+        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-0"
+      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-1"
+      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"