Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit c152bfd

Browse files
floriandurosflorianduros
authored
[Backport staging] TAC: Close Release Announcement when TAC button is clicked (#12485)
1 parent d813457 commit c152bfd

File tree

3 files changed

+127
-9
lines changed

3 files changed

+127
-9
lines changed

‎src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
3737
import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
3838
import { useIsReleaseAnnouncementOpen } from "../../../../hooks/useIsReleaseAnnouncementOpen";
3939
import { useSettingValue } from "../../../../hooks/useSettings";
40+
import { ReleaseAnnouncementStore } from "../../../../stores/ReleaseAnnouncementStore";
4041

4142
interface ThreadsActivityCentreProps {
4243
/**
@@ -84,6 +85,11 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
8485
<ThreadsActivityCentreButton
8586
displayLabel={displayButtonLabel}
8687
notificationLevel={roomsAndNotifications.greatestNotificationLevel}
88+
onClick={async () => {
89+
// Open the TAC after the release announcement closing
90+
setOpen(true);
91+
await ReleaseAnnouncementStore.instance.nextReleaseAnnouncement();
92+
}}
8793
/>
8894
</ReleaseAnnouncement>
8995
) : (

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

+21
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,27 @@ describe("ThreadsActivityCentre", () => {
118118
expect(document.body).toMatchSnapshot();
119119
});
120120

121+
it("should render not display the tooltip when the release announcement is displayed", async () => {
122+
// Enable release announcement
123+
await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, true);
124+
125+
renderTAC();
126+
127+
// The tooltip should not be displayed
128+
await userEvent.hover(getTACButton());
129+
expect(screen.queryByRole("tooltip")).toBeNull();
130+
});
131+
132+
it("should close the release announcement when the TAC button is clicked", async () => {
133+
// Enable release announcement
134+
await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, true);
135+
136+
renderTAC();
137+
await userEvent.click(getTACButton());
138+
expect(getTACMenu()).toBeInTheDocument();
139+
expect(document.body).toMatchSnapshot();
140+
});
141+
121142
it("should render the threads activity centre button and the display label", async () => {
122143
renderTAC({ displayButtonLabel: true });
123144
expect(getTACButton()).toBeInTheDocument();

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

+100-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
44
<div
5-
aria-labelledby="radix-14"
5+
aria-labelledby="radix-16"
66
aria-orientation="vertical"
77
class="_menu_1x5h1_17"
88
data-align="start"
@@ -11,14 +11,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
1111
data-side="top"
1212
data-state="open"
1313
dir="ltr"
14-
id="radix-15"
14+
id="radix-17"
1515
role="menu"
1616
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;"
1717
tabindex="-1"
1818
>
1919
<h3
2020
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
21-
id=":r5:"
21+
id=":r6:"
2222
>
2323
Threads activity
2424
</h3>
@@ -125,9 +125,100 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
125125
</div>
126126
`;
127127

128+
exports[`ThreadsActivityCentre should close the release announcement when the TAC button is clicked 1`] = `
129+
<body
130+
data-scroll-locked=""
131+
style="pointer-events: none;"
132+
>
133+
<span
134+
aria-hidden="true"
135+
data-aria-hidden="true"
136+
data-radix-focus-guard=""
137+
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
138+
tabindex="0"
139+
/>
140+
<div
141+
aria-hidden="true"
142+
data-aria-hidden="true"
143+
>
144+
<div
145+
class="mx_ThreadsActivityCentre_container"
146+
>
147+
<button
148+
aria-controls="radix-3"
149+
aria-disabled="false"
150+
aria-expanded="true"
151+
aria-haspopup="menu"
152+
aria-label="Threads"
153+
class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
154+
data-state="closed"
155+
id="radix-2"
156+
role="button"
157+
style="--cpd-icon-button-size: 32px;"
158+
tabindex="0"
159+
type="button"
160+
>
161+
<div
162+
class="_indicator-icon_133tf_26"
163+
style="--cpd-icon-button-size: 100%;"
164+
>
165+
<div
166+
class="mx_ThreadsActivityCentreButton_Icon"
167+
/>
168+
</div>
169+
</button>
170+
</div>
171+
</div>
172+
<div
173+
data-radix-popper-content-wrapper=""
174+
dir="ltr"
175+
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;"
176+
>
177+
<div
178+
aria-labelledby="radix-2"
179+
aria-orientation="vertical"
180+
class="_menu_1x5h1_17"
181+
data-align="start"
182+
data-orientation="vertical"
183+
data-radix-menu-content=""
184+
data-side="top"
185+
data-state="open"
186+
dir="ltr"
187+
id="radix-3"
188+
role="menu"
189+
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;"
190+
tabindex="-1"
191+
>
192+
<h3
193+
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
194+
id=":r1:"
195+
>
196+
Threads activity
197+
</h3>
198+
<div
199+
class="mx_ThreadsActivityCentre_rows"
200+
>
201+
<div
202+
class="mx_ThreadsActivityCentre_emptyCaption"
203+
>
204+
You don't have rooms with thread notifications yet.
205+
</div>
206+
</div>
207+
</div>
208+
</div>
209+
<span
210+
aria-hidden="true"
211+
data-aria-hidden="true"
212+
data-radix-focus-guard=""
213+
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
214+
tabindex="0"
215+
/>
216+
</body>
217+
`;
218+
128219
exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
129220
<div
130-
aria-labelledby="radix-20"
221+
aria-labelledby="radix-22"
131222
aria-orientation="vertical"
132223
class="_menu_1x5h1_17"
133224
data-align="start"
@@ -136,14 +227,14 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
136227
data-side="top"
137228
data-state="open"
138229
dir="ltr"
139-
id="radix-21"
230+
id="radix-23"
140231
role="menu"
141232
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;"
142233
tabindex="-1"
143234
>
144235
<h3
145236
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
146-
id=":r7:"
237+
id=":r8:"
147238
>
148239
Threads activity
149240
</h3>
@@ -161,7 +252,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
161252

162253
exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
163254
<div
164-
aria-labelledby="radix-22"
255+
aria-labelledby="radix-24"
165256
aria-orientation="vertical"
166257
class="_menu_1x5h1_17"
167258
data-align="start"
@@ -170,14 +261,14 @@ exports[`ThreadsActivityCentre should order the room with the same notification
170261
data-side="top"
171262
data-state="open"
172263
dir="ltr"
173-
id="radix-23"
264+
id="radix-25"
174265
role="menu"
175266
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;"
176267
tabindex="-1"
177268
>
178269
<h3
179270
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
180-
id=":r8:"
271+
id=":r9:"
181272
>
182273
Threads activity
183274
</h3>

0 commit comments

Comments
 (0)