PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

[Backport staging] TAC: Close Release Announcement when TAC button is clicked (#12485)

Browse source
This commit is contained in:
Florian Duros 2024-05-02 17:01:13 +02:00 committed by GitHub
parent d813457c42
commit c152bfd83c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 147 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
View file

@ -37,6 +37,7 @@ import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement"; import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
import { useIsReleaseAnnouncementOpen } from "../../../../hooks/useIsReleaseAnnouncementOpen"; import { useIsReleaseAnnouncementOpen } from "../../../../hooks/useIsReleaseAnnouncementOpen";
import { useSettingValue } from "../../../../hooks/useSettings"; import { useSettingValue } from "../../../../hooks/useSettings";
import { ReleaseAnnouncementStore } from "../../../../stores/ReleaseAnnouncementStore";
interface ThreadsActivityCentreProps { interface ThreadsActivityCentreProps {
/** /**
@ -84,6 +85,11 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
<ThreadsActivityCentreButton <ThreadsActivityCentreButton
displayLabel={displayButtonLabel} displayLabel={displayButtonLabel}
notificationLevel={roomsAndNotifications.greatestNotificationLevel} notificationLevel={roomsAndNotifications.greatestNotificationLevel}
onClick={async () => {
// Open the TAC after the release announcement closing
setOpen(true);
await ReleaseAnnouncementStore.instance.nextReleaseAnnouncement();
}}
/> />
</ReleaseAnnouncement> </ReleaseAnnouncement>
) : ( ) : (

21
test/components/views/spaces/ThreadsActivityCentre-test.tsx
View file

@ -118,6 +118,27 @@ describe("ThreadsActivityCentre", () => {
expect(document.body).toMatchSnapshot(); 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 () => { it("should render the threads activity centre button and the display label", async () => {
renderTAC({ displayButtonLabel: true }); renderTAC({ displayButtonLabel: true });
expect(getTACButton()).toBeInTheDocument(); expect(getTACButton()).toBeInTheDocument();

149
test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
View file

@ -2,7 +2,7 @@
exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = ` exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
<div <div
aria-labelledby="radix-14" aria-labelledby="radix-16"
aria-orientation="vertical" aria-orientation="vertical"
class="_menu_1x5h1_17" class="_menu_1x5h1_17"
data-align="start" data-align="start"
@ -11,14 +11,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
data-side="top" data-side="top"
data-state="open" data-state="open"
dir="ltr" dir="ltr"
id="radix-15" id="radix-17"
role="menu" 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;" 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" tabindex="-1"
> >
<h3 <h3
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83" class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
id=":r5:" id=":r6:"
> >
Threads activity Threads activity
</h3> </h3>
@ -125,41 +125,98 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
</div> </div>
`; `;
exports[`ThreadsActivityCentre should match snapshot when empty 1`] = ` exports[`ThreadsActivityCentre should close the release announcement when the TAC button is clicked 1`] = `
<div <body
aria-labelledby="radix-20" data-scroll-locked=""
aria-orientation="vertical" style="pointer-events: none;"
class="_menu_1x5h1_17"
data-align="start"
data-orientation="vertical"
data-radix-menu-content=""
data-side="top"
data-state="open"
dir="ltr"
id="radix-21"
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 <span
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83" aria-hidden="true"
id=":r7:" data-aria-hidden="true"
> data-radix-focus-guard=""
Threads activity style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
</h3> tabindex="0"
/>
<div <div
class="mx_ThreadsActivityCentre_rows" aria-hidden="true"
data-aria-hidden="true"
> >
<div <div
class="mx_ThreadsActivityCentre_emptyCaption" class="mx_ThreadsActivityCentre_container"
> >
You don't have rooms with thread notifications yet. <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> </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 order the room with the same notification level by most recent 1`] = ` exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
<div <div
aria-labelledby="radix-22" aria-labelledby="radix-22"
aria-orientation="vertical" aria-orientation="vertical"
@ -181,6 +238,40 @@ exports[`ThreadsActivityCentre should order the room with the same notification
> >
Threads activity Threads activity
</h3> </h3>
<div
class="mx_ThreadsActivityCentre_rows"
>
<div
class="mx_ThreadsActivityCentre_emptyCaption"
>
You don't have rooms with thread notifications yet.
</div>
</div>
</div>
`;
exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
<div
aria-labelledby="radix-24"
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-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=":r9:"
>
Threads activity
</h3>
<div <div
class="mx_ThreadsActivityCentre_rows" class="mx_ThreadsActivityCentre_rows"
> >