Add options to hide header and composer of room view for the module api (#31095)

* feat: add props to hide header in `RoomView`

* feat: add props to hide composer in `RoomView`

* feat: pass `RoomViewProps` to room view in `renderRoomView`

* refactor: add doc and use existing types

* test: add tests for new room view props

Author: florianduros

src/components/structures/RoomView.tsx

@@ -165,6 +165,16 @@ interface IRoomProps extends RoomViewProps {
      * Omitting this will mean that RoomView renders for the room held in SDKContext.RoomViewStore.
      */
     roomId?: string;
+
+    /*
+     * If true, hide the header
+     */
+    hideHeader?: boolean;
+
+    /*
+     * If true, hide the composer
+     */
+    hideComposer?: boolean;
 }
 
 export { MainSplitContentType };
@@ -2455,6 +2465,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         let messageComposer;
         const showComposer =
+            !this.props.hideComposer &&
             !isRoomEncryptionLoading &&
             // joined and not showing search results
             myMembership === KnownMembership.Join &&
@@ -2665,10 +2676,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 ref={this.roomViewBody}
                                 data-layout={this.state.layout}
                             >
-                                <RoomHeader
-                                    room={this.state.room}
-                                    additionalButtons={this.state.viewRoomOpts.buttons}
-                                />
+                                {!this.props.hideHeader && (
+                                    <RoomHeader
+                                        room={this.state.room}
+                                        additionalButtons={this.state.viewRoomOpts.buttons}
+                                    />
+                                )}
                                 {mainSplitBody}
                             </div>
                         </MainSplit>

src/modules/BuiltinsApi.tsx

@@ -12,6 +12,9 @@ import { MatrixClientPeg } from "../MatrixClientPeg";
 import type { Room } from "matrix-js-sdk/src/matrix";
 
 interface RoomViewPropsWithRoomId extends RoomViewProps {
+    /**
+     * The ID of the room to display
+     */
     roomId?: string;
 }
 
@@ -26,9 +29,8 @@ interface Components {
 }
 
 export class ElementWebBuiltinsApi implements BuiltinsApi {
-    private _roomView?: React.ComponentType<RoomViewPropsWithRoomId>;
-    private _roomAvatar?: React.ComponentType<RoomAvatarProps>;
-
+    private _roomView?: Components["roomView"];
+    private _roomAvatar?: Components["roomAvatar"];
     /**
      * Sets the components used by the API.
      *
@@ -59,9 +61,9 @@ export class ElementWebBuiltinsApi implements BuiltinsApi {
         return this._roomAvatar;
     }
 
-    public renderRoomView(roomId: string): React.ReactNode {
+    public renderRoomView(roomId: string, props?: RoomViewProps): React.ReactNode {
         const Component = this.getRoomViewComponent();
-        return <Component roomId={roomId} />;
+        return <Component roomId={roomId} {...props} />;
     }
 
     public renderRoomAvatar(roomId: string, size?: string): React.ReactNode {

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

@@ -75,7 +75,7 @@ import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { type ViewUserPayload } from "../../../../src/dispatcher/payloads/ViewUserPayload.ts";
 import { CallStore } from "../../../../src/stores/CallStore.ts";
 import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../../src/MediaDeviceHandler.ts";
-import Modal from "../../../../src/Modal.tsx";
+import Modal, { type ComponentProps } from "../../../../src/Modal.tsx";
 import ErrorDialog from "../../../../src/components/views/dialogs/ErrorDialog.tsx";
 
 // Used by group calls
@@ -127,7 +127,10 @@ describe("RoomView", () => {
         cleanup();
     });
 
-    const mountRoomView = async (ref?: RefObject<RoomView | null>): Promise<RenderResult> => {
+    const mountRoomView = async (
+        ref?: RefObject<RoomView | null>,
+        props?: Partial<ComponentProps<typeof RoomView>>,
+    ): Promise<RenderResult> => {
         if (stores.roomViewStore.getRoomId() !== room.roomId) {
             const switchedRoom = new Promise<void>((resolve) => {
                 const subFn = () => {
@@ -159,6 +162,7 @@ describe("RoomView", () => {
                         threepidInvite={undefined as any}
                         forceTimeline={false}
                         ref={ref}
+                        {...props}
                     />
                 </SDKContext.Provider>
             </MatrixClientContext.Provider>,
@@ -250,6 +254,25 @@ describe("RoomView", () => {
         expect(instance.getHiddenHighlightCount()).toBe(0);
     });
 
+    it("should hide the composer when hideComposer=true", async () => {
+        // Join the room
+        jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
+        const { asFragment } = await mountRoomView(undefined, { hideComposer: true });
+
+        expect(screen.queryByRole("textbox", { name: "Send an unencrypted message…" })).not.toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should hide the header when hideHeader=true", async () => {
+        // Join the room
+        jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
+        const { asFragment } = await mountRoomView(undefined, { hideHeader: true });
+
+        // Check that the room name button in the header is not rendered
+        expect(screen.queryByRole("button", { name: room.name })).not.toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
     describe("invites", () => {
         beforeEach(() => {
             const member = new RoomMember(room.roomId, cli.getSafeUserId());