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

* Remove right panel toggling behaviour on room header buttons

Signed-off-by: Michael Telatynski <[email protected]>

* Remove stale test

Signed-off-by: Michael Telatynski <[email protected]>

* Fix tests

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

playwright/e2e/read-receipts/index.ts

@@ -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();
     }
 

src/components/views/rooms/RoomHeader.tsx

@@ -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 })}

src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx

@@ -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 (

src/stores/right-panel/RightPanelStore.ts

@@ -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.

test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx

@@ -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", () => {

test/stores/right-panel/RightPanelStore-test.ts

@@ -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);
-    });
 });