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

Fix spotlight opening in TAC (#12315)

Browse source 
* Fix spotlight opening in TAC

* Add tests

* Remove `RovingTabIndexProvider`
This commit is contained in:
Florian Duros 2024-03-08 11:18:30 +01:00 committed by GitHub
parent 70365c891b
commit ddbc6439ce
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 95 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
View file

@ -17,6 +17,7 @@
*/
import { expect, test } from ".";
import { CommandOrControl } from "../../utils";
test.describe("Threads Activity Centre", () => {
test.use({
@ -118,4 +119,19 @@ test.describe("Threads Activity Centre", () => {
]);
await expect(util.getTacPanel()).toMatchScreenshot("tac-panel-notification-unread.png");
});
test("should block the Spotlight to open when the TAC is opened", async ({ util, page }) => {
const toggleSpotlight = () => page.keyboard.press(`${CommandOrControl}+k`);
// Sanity check
// Open and close the spotlight
await toggleSpotlight();
await expect(page.locator(".mx_SpotlightDialog")).toBeVisible();
await toggleSpotlight();
await util.openTac();
// The spotlight should not be opened
await toggleSpotlight();
await expect(page.locator(".mx_SpotlightDialog")).not.toBeVisible();
});
});

4
res/css/structures/_ThreadsActivityCentre.pcss
View file

@ -16,6 +16,10 @@
* /
*/
.mx_ThreadsActivityCentre_container {
display: flex;
}
.mx_ThreadsActivityCentreButton {
border-radius: 8px;
margin: 18px auto auto auto;

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

@ -32,6 +32,8 @@ import { useUnreadThreadRooms } from "./useUnreadThreadRooms";
import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
import PosthogTrackers from "../../../../PosthogTrackers";
import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
interface ThreadsActivityCentreProps {
/**
@ -49,41 +51,56 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
const roomsAndNotifications = useUnreadThreadRooms(open);
return (
<Menu
align="end"
open={open}
onOpenChange={(newOpen) => {
// Track only when the Threads Activity Centre is opened
if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
<div
className="mx_ThreadsActivityCentre_container"
onKeyDown={(evt) => {
// Do nothing if the TAC is closed
if (!open) return;
setOpen(newOpen);
const action = getKeyBindingsManager().getNavigationAction(evt);
// Block spotlight opening
if (action === KeyBindingAction.FilterRooms) {
evt.stopPropagation();
}
}}
side="right"
title={_t("threads_activity_centre|header")}
trigger={
<ThreadsActivityCentreButton
displayLabel={displayButtonLabel}
notificationLevel={roomsAndNotifications.greatestNotificationLevel}
/>
}
>
{/* Make the content of the pop-up scrollable */}
<div className="mx_ThreadsActivity_rows">
{roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
<ThreadsActivityRow
key={room.roomId}
room={room}
notificationLevel={notificationLevel}
onClick={() => setOpen(false)}
<Menu
align="end"
open={open}
onOpenChange={(newOpen) => {
// Track only when the Threads Activity Centre is opened
if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
setOpen(newOpen);
}}
side="right"
title={_t("threads_activity_centre|header")}
trigger={
<ThreadsActivityCentreButton
displayLabel={displayButtonLabel}
notificationLevel={roomsAndNotifications.greatestNotificationLevel}
/>
))}
{roomsAndNotifications.rooms.length === 0 && (
<div className="mx_ThreadsActivityCentre_emptyCaption">
{_t("threads_activity_centre|no_rooms_with_unreads_threads")}
</div>
)}
</div>
</Menu>
}
>
{/* Make the content of the pop-up scrollable */}
<div className="mx_ThreadsActivity_rows">
{roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
<ThreadsActivityRow
key={room.roomId}
room={room}
notificationLevel={notificationLevel}
onClick={() => setOpen(false)}
/>
))}
{roomsAndNotifications.rooms.length === 0 && (
<div className="mx_ThreadsActivityCentre_emptyCaption">
{_t("threads_activity_centre|no_rooms_with_unreads_threads")}
</div>
)}
</div>
</Menu>
</div>
);
}

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

@ -180,4 +180,31 @@ describe("ThreadsActivityCentre", () => {
expect(screen.getByRole("menu")).toMatchSnapshot();
});
it("should block Ctrl/CMD + k shortcut", async () => {
cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithHighlight]);
const keyDownHandler = jest.fn();
render(
<div
onKeyDown={(evt) => {
keyDownHandler(evt.key, evt.ctrlKey);
}}
>
<MatrixClientContext.Provider value={cli}>
<ThreadsActivityCentre />
</MatrixClientContext.Provider>
</div>,
{ wrapper: TooltipProvider },
);
await userEvent.click(getTACButton());
// CTRL/CMD + k should be blocked
await userEvent.keyboard("{Control>}k{/Control}");
expect(keyDownHandler).not.toHaveBeenCalledWith("k", true);
// Sanity test
await userEvent.keyboard("{Control>}a{/Control}");
expect(keyDownHandler).toHaveBeenCalledWith("a", true);
});
});