Add RoomKnocksBar to RoomHeader (#12077)

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>

src/components/views/rooms/RoomHeader.tsx

@@ -51,6 +51,7 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { Linkify, topicToHtml } from "../../../HtmlUtils";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton";
+import { RoomKnocksBar } from "./RoomKnocksBar";
 
 /**
  * A helper to transform a notification color to the what the Compound Icon Button
@@ -115,7 +116,10 @@ export default function RoomHeader({
         [roomTopic?.html, roomTopic?.text],
     );
 
+    const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join");
+
     return (
+        <>
             <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
                 <button
                     aria-label={_t("right_panel|room_summary_card|title")}
@@ -275,5 +279,7 @@ export default function RoomHeader({
                     </BodyText>
                 )}
             </Flex>
+            {askToJoinEnabled && <RoomKnocksBar room={room} />}
+        </>
     );
 }

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

@@ -16,7 +16,15 @@ limitations under the License.
 
 import React from "react";
 import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
-import { EventType, JoinRule, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
+import {
+    EventType,
+    JoinRule,
+    MatrixClient,
+    MatrixEvent,
+    PendingEventOrdering,
+    Room,
+    RoomMember,
+} from "matrix-js-sdk/src/matrix";
 import {
     createEvent,
     fireEvent,
@@ -562,6 +570,25 @@ describe("RoomHeader", () => {
         expect(callback).toHaveBeenCalled();
         expect(event.stopPropagation).toHaveBeenCalled();
     });
+
+    describe("ask to join disabled", () => {
+        it("does not render the RoomKnocksBar", () => {
+            render(<RoomHeader room={room} />, withClientContextRenderOptions(MatrixClientPeg.get()!));
+            expect(screen.queryByRole("heading", { name: "Asking to join" })).not.toBeInTheDocument();
+        });
+    });
+
+    describe("ask to join enabled", () => {
+        it("does render the RoomKnocksBar", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature === "feature_ask_to_join");
+            jest.spyOn(room, "canInvite").mockReturnValue(true);
+            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
+            jest.spyOn(room, "getMembersWithMembership").mockReturnValue([new RoomMember(room.roomId, "@foo")]);
+
+            render(<RoomHeader room={room} />, withClientContextRenderOptions(MatrixClientPeg.get()!));
+            expect(screen.getByRole("heading", { name: "Asking to join" })).toBeInTheDocument();
+        });
+    });
 });
 
 /**