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

Commit ddbc643

Browse files
authored
Fix spotlight opening in TAC (#12315)
* Fix spotlight opening in TAC * Add tests * Remove `RovingTabIndexProvider`
1 parent 70365c8 commit ddbc643

File tree

4 files changed

+95
-31
lines changed

4 files changed

+95
-31
lines changed

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

+16
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
*/
1818

1919
import { expect, test } from ".";
20+
import { CommandOrControl } from "../../utils";
2021

2122
test.describe("Threads Activity Centre", () => {
2223
test.use({
@@ -118,4 +119,19 @@ test.describe("Threads Activity Centre", () => {
118119
]);
119120
await expect(util.getTacPanel()).toMatchScreenshot("tac-panel-notification-unread.png");
120121
});
122+
123+
test("should block the Spotlight to open when the TAC is opened", async ({ util, page }) => {
124+
const toggleSpotlight = () => page.keyboard.press(`${CommandOrControl}+k`);
125+
126+
// Sanity check
127+
// Open and close the spotlight
128+
await toggleSpotlight();
129+
await expect(page.locator(".mx_SpotlightDialog")).toBeVisible();
130+
await toggleSpotlight();
131+
132+
await util.openTac();
133+
// The spotlight should not be opened
134+
await toggleSpotlight();
135+
await expect(page.locator(".mx_SpotlightDialog")).not.toBeVisible();
136+
});
121137
});

res/css/structures/_ThreadsActivityCentre.pcss

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
* /
1717
*/
1818

19+
.mx_ThreadsActivityCentre_container {
20+
display: flex;
21+
}
22+
1923
.mx_ThreadsActivityCentreButton {
2024
border-radius: 8px;
2125
margin: 18px auto auto auto;

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

+48-31
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ import { useUnreadThreadRooms } from "./useUnreadThreadRooms";
3232
import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
3333
import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
3434
import PosthogTrackers from "../../../../PosthogTrackers";
35+
import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
36+
import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
3537

3638
interface ThreadsActivityCentreProps {
3739
/**
@@ -49,41 +51,56 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
4951
const roomsAndNotifications = useUnreadThreadRooms(open);
5052

5153
return (
52-
<Menu
53-
align="end"
54-
open={open}
55-
onOpenChange={(newOpen) => {
56-
// Track only when the Threads Activity Centre is opened
57-
if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
54+
<div
55+
className="mx_ThreadsActivityCentre_container"
56+
onKeyDown={(evt) => {
57+
// Do nothing if the TAC is closed
58+
if (!open) return;
5859

59-
setOpen(newOpen);
60+
const action = getKeyBindingsManager().getNavigationAction(evt);
61+
62+
// Block spotlight opening
63+
if (action === KeyBindingAction.FilterRooms) {
64+
evt.stopPropagation();
65+
}
6066
}}
61-
side="right"
62-
title={_t("threads_activity_centre|header")}
63-
trigger={
64-
<ThreadsActivityCentreButton
65-
displayLabel={displayButtonLabel}
66-
notificationLevel={roomsAndNotifications.greatestNotificationLevel}
67-
/>
68-
}
6967
>
70-
{/* Make the content of the pop-up scrollable */}
71-
<div className="mx_ThreadsActivity_rows">
72-
{roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
73-
<ThreadsActivityRow
74-
key={room.roomId}
75-
room={room}
76-
notificationLevel={notificationLevel}
77-
onClick={() => setOpen(false)}
68+
<Menu
69+
align="end"
70+
open={open}
71+
onOpenChange={(newOpen) => {
72+
// Track only when the Threads Activity Centre is opened
73+
if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
74+
75+
setOpen(newOpen);
76+
}}
77+
side="right"
78+
title={_t("threads_activity_centre|header")}
79+
trigger={
80+
<ThreadsActivityCentreButton
81+
displayLabel={displayButtonLabel}
82+
notificationLevel={roomsAndNotifications.greatestNotificationLevel}
7883
/>
79-
))}
80-
{roomsAndNotifications.rooms.length === 0 && (
81-
<div className="mx_ThreadsActivityCentre_emptyCaption">
82-
{_t("threads_activity_centre|no_rooms_with_unreads_threads")}
83-
</div>
84-
)}
85-
</div>
86-
</Menu>
84+
}
85+
>
86+
{/* Make the content of the pop-up scrollable */}
87+
<div className="mx_ThreadsActivity_rows">
88+
{roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
89+
<ThreadsActivityRow
90+
key={room.roomId}
91+
room={room}
92+
notificationLevel={notificationLevel}
93+
onClick={() => setOpen(false)}
94+
/>
95+
))}
96+
{roomsAndNotifications.rooms.length === 0 && (
97+
<div className="mx_ThreadsActivityCentre_emptyCaption">
98+
{_t("threads_activity_centre|no_rooms_with_unreads_threads")}
99+
</div>
100+
)}
101+
</div>
102+
</Menu>
103+
</div>
87104
);
88105
}
89106

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

+27
Original file line numberDiff line numberDiff line change
@@ -180,4 +180,31 @@ describe("ThreadsActivityCentre", () => {
180180

181181
expect(screen.getByRole("menu")).toMatchSnapshot();
182182
});
183+
184+
it("should block Ctrl/CMD + k shortcut", async () => {
185+
cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithHighlight]);
186+
187+
const keyDownHandler = jest.fn();
188+
render(
189+
<div
190+
onKeyDown={(evt) => {
191+
keyDownHandler(evt.key, evt.ctrlKey);
192+
}}
193+
>
194+
<MatrixClientContext.Provider value={cli}>
195+
<ThreadsActivityCentre />
196+
</MatrixClientContext.Provider>
197+
</div>,
198+
{ wrapper: TooltipProvider },
199+
);
200+
await userEvent.click(getTACButton());
201+
202+
// CTRL/CMD + k should be blocked
203+
await userEvent.keyboard("{Control>}k{/Control}");
204+
expect(keyDownHandler).not.toHaveBeenCalledWith("k", true);
205+
206+
// Sanity test
207+
await userEvent.keyboard("{Control>}a{/Control}");
208+
expect(keyDownHandler).toHaveBeenCalledWith("a", true);
209+
});
183210
});

0 commit comments

Comments
 (0)