Make room model mandatory on the RoomHeader (#11355)

* Remove oobData from RoomHeader

It is never used as the RoomHeader is not shown unless a Room model exists

* Make room model mandatory on the RoomHeader

src/components/structures/RoomView.tsx

@@ -297,7 +297,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
         <div className="mx_RoomView mx_RoomView--local">
             <ErrorBoundary>
                 {SettingsStore.getValue("feature_new_room_decoration_ui") ? (
-                    <RoomHeader room={context.room} />
+                    <RoomHeader room={room} />
                 ) : (
                     <LegacyRoomHeader
                         room={context.room}
@@ -345,16 +345,15 @@ interface ILocalRoomCreateLoaderProps {
  * @return {ReactElement}
  */
 function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement {
-    const context = useContext(RoomContext);
     const text = _t("We're creating a room with %(names)s", { names: props.names });
     return (
         <div className="mx_RoomView mx_RoomView--local">
             <ErrorBoundary>
                 {SettingsStore.getValue("feature_new_room_decoration_ui") ? (
-                    <RoomHeader room={context.room} />
+                    <RoomHeader room={props.localRoom} />
                 ) : (
                     <LegacyRoomHeader
-                        room={context.room}
+                        room={props.localRoom}
                         searchInfo={undefined}
                         inRoom={true}
                         onSearchClick={null}
@@ -2470,7 +2469,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     )}
                     <ErrorBoundary>
                         {SettingsStore.getValue("feature_new_room_decoration_ui") ? (
-                            <RoomHeader room={this.state.room} oobData={this.props.oobData} />
+                            <RoomHeader room={this.state.room} />
                         ) : (
                             <LegacyRoomHeader
                                 room={this.state.room}

src/components/structures/WaitingForThirdPartyRoomView.tsx

@@ -51,7 +51,7 @@ export const WaitingForThirdPartyRoomView: React.FC<Props> = ({ roomView, resize
         <div className="mx_RoomView mx_RoomView--local">
             <ErrorBoundary>
                 {SettingsStore.getValue("feature_new_room_decoration_ui") ? (
-                    <RoomHeader room={context.room} />
+                    <RoomHeader room={context.room!} />
                 ) : (
                     <LegacyRoomHeader
                         room={context.room}

src/components/views/rooms/RoomHeader.tsx

@@ -18,16 +18,14 @@ import React from "react";
 import { Body as BodyText } from "@vector-im/compound-web";
 
 import type { Room } from "matrix-js-sdk/src/models/room";
-import { IOOBData } from "../../../stores/ThreepidInviteStore";
 import { useRoomName } from "../../../hooks/useRoomName";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { useTopic } from "../../../hooks/room/useTopic";
-import RoomAvatar from "../avatars/RoomAvatar";
 
-export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element {
+export default function RoomHeader({ room }: { room: Room }): JSX.Element {
-    const roomName = useRoomName(room, oobData);
+    const roomName = useRoomName(room);
     const roomTopic = useTopic(room);
 
     return (
@@ -40,11 +38,7 @@ export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: I
                     : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary });
             }}
         >
-            {room ? (
+            <DecoratedRoomAvatar room={room} avatarSize={40} displayBadge={false} />
-                <DecoratedRoomAvatar room={room} oobData={oobData} avatarSize={40} displayBadge={false} />
-            ) : (
-                <RoomAvatar oobData={oobData} width={40} height={40} />
-            )}
             <div className="mx_RoomHeader_info">
                 <BodyText
                     as="div"

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

@@ -46,28 +46,11 @@ describe("Roomeader", () => {
         setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
     });
 
-    it("renders with no props", () => {
-        const { asFragment } = render(<RoomHeader />);
-        expect(asFragment()).toMatchSnapshot();
-    });
-
     it("renders the room header", () => {
         const { container } = render(<RoomHeader room={room} />);
         expect(container).toHaveTextContent(ROOM_ID);
     });
 
-    it("display the out-of-band room name", () => {
-        const OOB_NAME = "My private room";
-        const { container } = render(
-            <RoomHeader
-                oobData={{
-                    name: OOB_NAME,
-                }}
-            />,
-        );
-        expect(container).toHaveTextContent(OOB_NAME);
-    });
-
     it("renders the room topic", async () => {
         const TOPIC = "Hello World!";
 

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

@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Roomeader renders with no props 1`] = `
-<DocumentFragment>
-  <header
-    class="mx_RoomHeader light-panel"
-  >
-    <span
-      class="mx_BaseAvatar"
-      role="presentation"
-    >
-      <span
-        aria-hidden="true"
-        class="mx_BaseAvatar_initial"
-        style="font-size: 26px; width: 40px; line-height: 40px;"
-      >
-        ?
-      </span>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="mx_BaseAvatar_image"
-        data-testid="avatar-img"
-        loading="lazy"
-        src="data:image/png;base64,00"
-        style="width: 40px; height: 40px;"
-      />
-    </span>
-    <div
-      class="mx_RoomHeader_info"
-    >
-      <div
-        aria-level="1"
-        dir="auto"
-        role="heading"
-        style="font: var(--cpd-font-body-lg-semibold); letter-spacing: var(--cpd-font-letter-spacing-body-lg);"
-        title="Join Room"
-      >
-        Join Room
-      </div>
-    </div>
-  </header>
-</DocumentFragment>
-`;