OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

* 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>
pull/28192/head
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() {
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();
}

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

@ -255,7 +255,7 @@ export default function RoomHeader({
<button
aria-label={_t("right_panel|room_summary_card|title")}
tabIndex={0}
onClick={() => RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary)}
onClick={() => RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary)}
className="mx_RoomHeader_infoWrapper"
>
<Box flex="1" className="mx_RoomHeader_info">
@ -339,7 +339,7 @@ export default function RoomHeader({
<IconButton
onClick={(evt) => {
evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary);
}}
aria-label={_t("right_panel|room_summary_card|title")}
>
@ -354,7 +354,7 @@ export default function RoomHeader({
indicator={notificationLevelToIndicator(threadNotifications)}
onClick={(evt) => {
evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.ThreadPanel);
RightPanelStore.instance.showOrHidePhase(RightPanelPhases.ThreadPanel);
PosthogTrackers.trackInteraction("WebRoomHeaderButtonsThreadsButton", evt);
}}
aria-label={_t("common|threads")}
@ -368,7 +368,7 @@ export default function RoomHeader({
indicator={notificationLevelToIndicator(globalNotificationState.level)}
onClick={(evt) => {
evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel);
RightPanelStore.instance.showOrHidePhase(RightPanelPhases.NotificationPanel);
}}
aria-label={_t("notifications|enable_prompt_toast_title")}
>
@ -387,7 +387,7 @@ export default function RoomHeader({
viewUserOnClick={false}
tooltipLabel={_t("room|header_face_pile_tooltip")}
onClick={(e: ButtonEvent) => {
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomMemberList);
e.stopPropagation();
}}
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
// which will open RoomSummary
event.stopPropagation();
sdkContext.rightPanelStore.showOrHidePanel(RightPanelPhases.Timeline);
sdkContext.rightPanelStore.showOrHidePhase(RightPanelPhases.Timeline);
};
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.
* 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(),
});
rightPanelStore = {
showOrHidePanel: jest.fn(),
showOrHidePhase: jest.fn(),
} as unknown as MockedObject<RightPanelStore>;
sdkContext = new SdkContextClass();
sdkContext.client = client;
@ -73,7 +73,7 @@ describe("<VideoRoomChatButton />", () => {
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", () => {

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

@ -217,22 +217,4 @@ describe("RightPanelStore", () => {
await viewRoom("!1:example.org");
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);
});
});