Add option to hide pinned message banner in room view (#31296)

* feat: add `hidePinnedMessageBanner` to room view

* test: add test for `hidePinnedMessageBanner`

Author: florianduros

src/components/structures/RoomView.tsx

@@ -180,6 +180,11 @@ interface IRoomProps extends RoomViewProps {
      * If true, hide the right panel
      */
     hideRightPanel?: boolean;
+
+    /**
+     * If true, hide the pinned messages banner
+     */
+    hidePinnedMessageBanner?: boolean;
 }
 
 export { MainSplitContentType };
@@ -2464,7 +2469,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             </AuxPanel>
         );
 
-        const pinnedMessageBanner = (
+        const pinnedMessageBanner = !this.props.hidePinnedMessageBanner && (
             <PinnedMessageBanner room={this.state.room} permalinkCreator={this.permalinkCreator} />
         );
 

test/unit-tests/components/structures/RoomView-test.tsx

@@ -77,6 +77,7 @@ import { CallStore } from "../../../../src/stores/CallStore.ts";
 import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../../src/MediaDeviceHandler.ts";
 import Modal, { type ComponentProps } from "../../../../src/Modal.tsx";
 import ErrorDialog from "../../../../src/components/views/dialogs/ErrorDialog.tsx";
+import * as pinnedEventHooks from "../../../../src/hooks/usePinnedEvents";
 
 // Used by group calls
 jest.spyOn(MediaDeviceHandler, "getDevices").mockResolvedValue({
@@ -124,6 +125,11 @@ describe("RoomView", () => {
     afterEach(() => {
         unmockPlatformPeg();
         jest.clearAllMocks();
+
+        // Can't jest.restoreAllMocks() because some tests will break
+        jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockRestore();
+        jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockRestore();
+
         cleanup();
     });
 
@@ -298,6 +304,35 @@ describe("RoomView", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
+    it("should hide the pinned message banner when hidePinnedMessageBanner=true", async () => {
+        // Join the room
+        jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
+
+        const pinnedEvent = new MatrixEvent({
+            type: EventType.RoomMessage,
+            sender: "@alice:example.org",
+            content: {
+                body: "First pinned message",
+                msgtype: "m.text",
+            },
+            room_id: room.roomId,
+            origin_server_ts: 0,
+            event_id: "$eventId",
+        });
+
+        jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([pinnedEvent.getId()!]);
+        jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([pinnedEvent]);
+
+        const { asFragment, rerender } = await mountRoomView(undefined);
+        // Check that the pinned message banner is rendered
+        await expect(screen.findByTestId("pinned-message-banner")).resolves.toBeTruthy();
+        // Now rerender with hidePinnedMessagesBanner=true
+        rerender(<RoomView threepidInvite={undefined} forceTimeline={false} hidePinnedMessageBanner={true} />);
+        // Check that the pinned message banner is not rendered
+        await expect(screen.findByTestId("pinned-message-banner")).rejects.toThrow();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
     describe("invites", () => {
         beforeEach(() => {
             const member = new RoomMember(room.roomId, cli.getSafeUserId());