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

Commit

Permalink
[Backport staging] TAC: Close Release Announcement when TAC button is…
Browse files Browse the repository at this point in the history 
… clicked (#12485)
  • Loading branch information
@florianduros
florianduros authored May 2, 2024
1 parent d813457 commit c152bfd
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 9 deletions.
6 changes: 6 additions & 0 deletions src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down Expand Up @@ -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>
) : (
Expand Down
21 changes: 21 additions & 0 deletions test/components/views/spaces/ThreadsActivityCentre-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
109 changes: 100 additions & 9 deletions test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -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>
Expand Down

0 comments on commit c152bfd

Please sign in to comment.