From 33c900e3070ae57d0c5c255107f030508e82a02f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 30 Sep 2024 17:36:24 +0100
Subject: [PATCH] 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>
---
 playwright/e2e/read-receipts/index.ts          |  3 +++
 src/components/views/rooms/RoomHeader.tsx      | 10 +++++-----
 .../rooms/RoomHeader/VideoRoomChatButton.tsx   |  2 +-
 src/stores/right-panel/RightPanelStore.ts      | 17 -----------------
 .../RoomHeader/VideoRoomChatButton-test.tsx    |  4 ++--
 .../stores/right-panel/RightPanelStore-test.ts | 18 ------------------
 6 files changed, 11 insertions(+), 43 deletions(-)

diff --git a/playwright/e2e/read-receipts/index.ts b/playwright/e2e/read-receipts/index.ts
index 47bd5c2d5c..f097ec839d 100644
--- a/playwright/e2e/read-receipts/index.ts
+++ b/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();
     }
 
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 6e04a60601..b09d4c70e2 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/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 })}
diff --git a/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx b/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
index 7d7462bdd6..8f79ef8ba8 100644
--- a/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
+++ b/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 (
diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts
index 47c002ce19..43a36e91b8 100644
--- a/src/stores/right-panel/RightPanelStore.ts
+++ b/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.
diff --git a/test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx b/test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx
index 7da81eea46..c73349826c 100644
--- a/test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx
+++ b/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", () => {
diff --git a/test/stores/right-panel/RightPanelStore-test.ts b/test/stores/right-panel/RightPanelStore-test.ts
index 279835e182..6d67b2f8dd 100644
--- a/test/stores/right-panel/RightPanelStore-test.ts
+++ b/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);
-    });
 });