mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 09:15:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

Remove right panel toggling behaviour on room header buttons (#100)

Browse source 
* Remove right panel toggling behaviour on room header buttons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-09-30 17:36:24 +01:00 committed by GitHub
parent 81bb56ae2b
commit 33c900e307
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 11 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
playwright/e2e/read-receipts/index.ts
View file

@ -395,6 +395,9 @@ class Helpers {
*/ */
async closeThreadsPanel() { async closeThreadsPanel() {
await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click(); await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
if (await this.page.locator("#thread-panel").isVisible()) {
await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
}
await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible(); await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
} }

10
src/components/views/rooms/RoomHeader.tsx
View file

@ -255,7 +255,7 @@ export default function RoomHeader({
<button <button
aria-label={_t("right_panel|room_summary_card|title")} aria-label={_t("right_panel|room_summary_card|title")}
tabIndex={0} tabIndex={0}
onClick={() => RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary)} onClick={() => RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary)}
className="mx_RoomHeader_infoWrapper" className="mx_RoomHeader_infoWrapper"
> >
<Box flex="1" className="mx_RoomHeader_info"> <Box flex="1" className="mx_RoomHeader_info">
@ -339,7 +339,7 @@ export default function RoomHeader({
<IconButton <IconButton
onClick={(evt) => { onClick={(evt) => {
evt.stopPropagation(); evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary); RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary);
}} }}
aria-label={_t("right_panel|room_summary_card|title")} aria-label={_t("right_panel|room_summary_card|title")}
> >
@ -354,7 +354,7 @@ export default function RoomHeader({
indicator={notificationLevelToIndicator(threadNotifications)} indicator={notificationLevelToIndicator(threadNotifications)}
onClick={(evt) => { onClick={(evt) => {
evt.stopPropagation(); evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.ThreadPanel); RightPanelStore.instance.showOrHidePhase(RightPanelPhases.ThreadPanel);
PosthogTrackers.trackInteraction("WebRoomHeaderButtonsThreadsButton", evt); PosthogTrackers.trackInteraction("WebRoomHeaderButtonsThreadsButton", evt);
}} }}
aria-label={_t("common|threads")} aria-label={_t("common|threads")}
@ -368,7 +368,7 @@ export default function RoomHeader({
indicator={notificationLevelToIndicator(globalNotificationState.level)} indicator={notificationLevelToIndicator(globalNotificationState.level)}
onClick={(evt) => { onClick={(evt) => {
evt.stopPropagation(); evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel); RightPanelStore.instance.showOrHidePhase(RightPanelPhases.NotificationPanel);
}} }}
aria-label={_t("notifications|enable_prompt_toast_title")} aria-label={_t("notifications|enable_prompt_toast_title")}
> >
@ -387,7 +387,7 @@ export default function RoomHeader({
viewUserOnClick={false} viewUserOnClick={false}
tooltipLabel={_t("room|header_face_pile_tooltip")} tooltipLabel={_t("room|header_face_pile_tooltip")}
onClick={(e: ButtonEvent) => { onClick={(e: ButtonEvent) => {
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList); RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomMemberList);
e.stopPropagation(); e.stopPropagation();
}} }}
aria-label={_t("common|n_members", { count: memberCount })} aria-label={_t("common|n_members", { count: memberCount })}

2
src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
View file

@ -44,7 +44,7 @@ export const VideoRoomChatButton: React.FC<{ room: Room }> = ({ room }) => {
// stop event propagating up and triggering RoomHeader bar click // stop event propagating up and triggering RoomHeader bar click
// which will open RoomSummary // which will open RoomSummary
event.stopPropagation(); event.stopPropagation();
sdkContext.rightPanelStore.showOrHidePanel(RightPanelPhases.Timeline); sdkContext.rightPanelStore.showOrHidePhase(RightPanelPhases.Timeline);
}; };
return ( return (

17
src/stores/right-panel/RightPanelStore.ts
View file

@ -228,23 +228,6 @@ export default class RightPanelStore extends ReadyWatchingStore {
} }
} }
/**
* If the right panel is open, it is closed.
* If the right panel is closed, it is opened with `phase`.
*
* This is different from showOrHidePhase which only closes the panel
* if the panel was already showing the phase passed as argument.
* @see showOrHidePhase
* @param phase The right panel phase.
*/
public showOrHidePanel(phase: RightPanelPhases): void {
if (!this.isOpen) {
this.setCard({ phase });
} else {
this.togglePanel(null);
}
}
/** /**
* Helper to show a right panel phase. * Helper to show a right panel phase.
* If the UI is already showing that phase, the right panel will be hidden. * If the UI is already showing that phase, the right panel will be hidden.

4
test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx
View file

@ -56,7 +56,7 @@ describe("<VideoRoomChatButton />", () => {
...mockClientMethodsUser(), ...mockClientMethodsUser(),
}); });
rightPanelStore = { rightPanelStore = {
showOrHidePanel: jest.fn(), showOrHidePhase: jest.fn(),
} as unknown as MockedObject<RightPanelStore>; } as unknown as MockedObject<RightPanelStore>;
sdkContext = new SdkContextClass(); sdkContext = new SdkContextClass();
sdkContext.client = client; sdkContext.client = client;
@ -73,7 +73,7 @@ describe("<VideoRoomChatButton />", () => {
fireEvent.click(screen.getByLabelText("Chat")); fireEvent.click(screen.getByLabelText("Chat"));
expect(sdkContext.rightPanelStore.showOrHidePanel).toHaveBeenCalledWith(RightPanelPhases.Timeline); expect(sdkContext.rightPanelStore.showOrHidePhase).toHaveBeenCalledWith(RightPanelPhases.Timeline);
}); });
it("renders button with an unread marker when room is unread", () => { it("renders button with an unread marker when room is unread", () => {

18
test/stores/right-panel/RightPanelStore-test.ts
View file

@ -217,22 +217,4 @@ describe("RightPanelStore", () => {
await viewRoom("!1:example.org"); await viewRoom("!1:example.org");
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomMemberList); expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomMemberList);
}); });
it("showOrHidePhase works as expected", async () => {
await viewRoom("!1:example.org");
// Open the memberlist panel
store.showOrHidePanel(RightPanelPhases.RoomMemberList);
expect(store.isOpenForRoom("!1:example.org")).toEqual(true);
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomMemberList);
// showOrHide with RoomSummary should now close the panel
store.showOrHidePanel(RightPanelPhases.RoomSummary);
expect(store.isOpenForRoom("!1:example.org")).toEqual(false);
// showOrHide with RoomSummary should now open the panel
store.showOrHidePanel(RightPanelPhases.RoomSummary);
expect(store.isOpenForRoom("!1:example.org")).toEqual(true);
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomSummary);
});
}); });