From 00219d8b1bad744395084212c66623319d027929 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 08:58:16 +0100 Subject: [PATCH 01/23] Create useRoomName hook Mark RoomName component as deprecated --- src/components/views/elements/RoomName.tsx | 5 +- src/components/views/rooms/RoomHeader.tsx | 32 +++--------- src/hooks/useRoomName.ts | 51 +++++++++++++++++++ .../views/rooms/RoomHeader-test.tsx | 12 +++++ .../__snapshots__/RoomHeader-test.tsx.snap | 16 ++++-- 5 files changed, 87 insertions(+), 29 deletions(-) create mode 100644 src/hooks/useRoomName.ts diff --git a/src/components/views/elements/RoomName.tsx b/src/components/views/elements/RoomName.tsx index 05a106024c0..58f4f043b9a 100644 --- a/src/components/views/elements/RoomName.tsx +++ b/src/components/views/elements/RoomName.tsx @@ -20,10 +20,13 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/models/room"; import { useTypedEventEmitter } from "../../../hooks/useEventEmitter"; interface IProps { - room: Room; + room?: Room; children?(name: string): JSX.Element; } +/** + * @deprecated use `useRoomName.ts` instead + */ const RoomName = ({ room, children }: IProps): JSX.Element => { const [name, setName] = useState(room?.name); useTypedEventEmitter(room, RoomEvent.Name, () => { diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 8cf09e0d019..5b67357422c 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -18,36 +18,18 @@ import React from "react"; import type { Room } from "matrix-js-sdk/src/models/room"; import { _t } from "../../../languageHandler"; -import RoomName from "../elements/RoomName"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; +import useRoomName from "../../../hooks/useRoomName"; export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element { - let oobName = _t("Join Room"); - if (oobData && oobData.name) { - oobName = oobData.name; - } + const roomName = useRoomName(room, oobData); return ( -
-
- {room && ( - - {(name) => { - const roomName = name || oobName; - return ( -
- {roomName} -
- ); - }} - - )} +
+
+
+ {roomName} +
); diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts new file mode 100644 index 00000000000..42cac38bb09 --- /dev/null +++ b/src/hooks/useRoomName.ts @@ -0,0 +1,51 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { Room, RoomEvent } from "matrix-js-sdk"; +import { IOOBData } from "../stores/ThreepidInviteStore"; +import { useCallback, useEffect, useState } from "react"; +import { useTypedEventEmitter } from "./useEventEmitter"; +import { _t } from "../languageHandler"; + +/** + * Determines the room name from a combination of the room model and potential + * out-of-band information + * @param room - The room model + * @param oobData - out-of-band information about the room + * @returns {string} the room name + */ +export default function useRoomName(room?: Room, oobData?: IOOBData): string { + let oobName = _t("Join Room"); + if (oobData && oobData.name) { + oobName = oobData.name; + } + + const [name, setName] = useState(room?.name || oobName || ""); + + const setRoomName = useCallback(() => { + setName(room?.name || oobName || ""); + }, [room?.name, oobData]); + + useTypedEventEmitter(room, RoomEvent.Name, () => { + setRoomName(); + }); + + useEffect(() => { + setRoomName(); + }, [room?.name, oobData]); + + return name; +} diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index 819d98a2f69..6f59117fd1d 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -43,4 +43,16 @@ describe("Roomeader", () => { const { container } = render(); expect(container).toHaveTextContent(ROOM_ID); }); + + it("display the out-of-band room name", () => { + const OOB_NAME = "My private room"; + const { container } = render( + , + ); + expect(container).toHaveTextContent(OOB_NAME); + }); }); diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 01105de9cb0..0fafcad5ed6 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -3,11 +3,21 @@ exports[`Roomeader renders with no props 1`] = `
+ class="mx_RoomHeader_wrapper" + > +
+ Join Room +
+
`; From ea286557ef2526fc2d26e5b24955fbf75665258b Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 08:58:36 +0100 Subject: [PATCH 02/23] Pass out-of-band data to relevant RoomHeader component --- src/components/structures/RoomView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index ecdfdf2d327..bdbb827a002 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -2470,7 +2470,7 @@ export class RoomView extends React.Component { )} {SettingsStore.getValue("feature_new_room_decoration_ui") ? ( - + ) : ( Date: Tue, 1 Aug 2023 08:58:45 +0100 Subject: [PATCH 03/23] Mark LegacyRoomHeader as deprecated --- src/components/views/rooms/LegacyRoomHeader.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index e3be6cca88a..1e4634eef0d 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -483,6 +483,9 @@ interface IState { rightPanelOpen: boolean; } +/** + * @deprecated use `src/components/views/rooms/RoomHeader.tsx` instead + */ export default class RoomHeader extends React.Component { public static defaultProps: Partial = { inRoom: false, From 4a64f04d8b7933bb799417878cc79d6cc242109f Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 09:11:57 +0100 Subject: [PATCH 04/23] Fix incorrect search&replace in _RoomHeader.pcss --- res/css/views/rooms/_RoomHeader.pcss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 80f43c0b317..8fa887c5647 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -20,13 +20,13 @@ limitations under the License. --RoomHeader-indicator-pulseColor: $alert; } -.mx_LegacyRoomHeader { +.mx_RoomHeader { flex: 0 0 50px; border-bottom: 1px solid $primary-hairline-color; background-color: $background; } -.mx_LegacyRoomHeader_wrapper { +.mx_RoomHeader_wrapper { height: 44px; display: flex; align-items: center; @@ -36,7 +36,7 @@ limitations under the License. border-bottom: 1px solid $separator; } -.mx_LegacyRoomHeader_name { +.mx_RoomHeader_name { flex: 0 1 auto; overflow: hidden; color: $primary-content; From cc699132107b823bbce9214b91e862acf3250975 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 10:10:05 +0100 Subject: [PATCH 05/23] lintfix --- src/components/views/rooms/RoomHeader.tsx | 1 - src/hooks/useRoomName.ts | 9 +++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 5b67357422c..b9d90b45861 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -17,7 +17,6 @@ limitations under the License. import React from "react"; import type { Room } from "matrix-js-sdk/src/models/room"; -import { _t } from "../../../languageHandler"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; import useRoomName from "../../../hooks/useRoomName"; diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts index 42cac38bb09..fe986ca7103 100644 --- a/src/hooks/useRoomName.ts +++ b/src/hooks/useRoomName.ts @@ -14,9 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Room, RoomEvent } from "matrix-js-sdk"; -import { IOOBData } from "../stores/ThreepidInviteStore"; +import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; import { useCallback, useEffect, useState } from "react"; + +import { IOOBData } from "../stores/ThreepidInviteStore"; import { useTypedEventEmitter } from "./useEventEmitter"; import { _t } from "../languageHandler"; @@ -37,7 +38,7 @@ export default function useRoomName(room?: Room, oobData?: IOOBData): string { const setRoomName = useCallback(() => { setName(room?.name || oobName || ""); - }, [room?.name, oobData]); + }, [room?.name, oobName]); useTypedEventEmitter(room, RoomEvent.Name, () => { setRoomName(); @@ -45,7 +46,7 @@ export default function useRoomName(room?: Room, oobData?: IOOBData): string { useEffect(() => { setRoomName(); - }, [room?.name, oobData]); + }); return name; } From 8f0dfcd5ee976661f68f8e4e5b2d1fe9f7f40ee7 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 12:22:32 +0100 Subject: [PATCH 06/23] Mark room as optional in room topic hook --- src/hooks/room/useTopic.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hooks/room/useTopic.ts b/src/hooks/room/useTopic.ts index fcdc1ce4367..d6103f2ef64 100644 --- a/src/hooks/room/useTopic.ts +++ b/src/hooks/room/useTopic.ts @@ -25,14 +25,14 @@ import { Optional } from "matrix-events-sdk"; import { useTypedEventEmitter } from "../useEventEmitter"; -export const getTopic = (room: Room): Optional => { +export const getTopic = (room?: Room): Optional => { const content = room?.currentState?.getStateEvents(EventType.RoomTopic, "")?.getContent(); return !!content ? parseTopicContent(content) : null; }; -export function useTopic(room: Room): Optional { +export function useTopic(room?: Room): Optional { const [topic, setTopic] = useState(getTopic(room)); - useTypedEventEmitter(room.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => { + useTypedEventEmitter(room?.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => { if (ev.getType() !== EventType.RoomTopic) return; setTopic(getTopic(room)); }); From 886d181680ff8e11069cc1cc93989f5c1041c798 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:46:51 +0100 Subject: [PATCH 07/23] Fix i18n --- src/i18n/strings/en_EN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f0f042cde28..06caa0c7236 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1102,6 +1102,7 @@ "Sorry — this call is currently full": "Sorry — this call is currently full", "User": "User", "Room": "Room", + "Join Room": "Join Room", "Create account": "Create account", "You made it!": "You made it!", "Find and invite your friends": "Find and invite your friends", @@ -1958,7 +1959,6 @@ "Close call": "Close call", "View chat timeline": "View chat timeline", "Room options": "Room options", - "Join Room": "Join Room", "(~%(count)s results)|other": "(~%(count)s results)", "(~%(count)s results)|one": "(~%(count)s result)", "Video rooms are a beta feature": "Video rooms are a beta feature", From b0cdc29ce8944cf757c2262826331922c81b54d6 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:47:03 +0100 Subject: [PATCH 08/23] Discard use of useCallback --- src/hooks/useRoomName.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts index fe986ca7103..618f087da6f 100644 --- a/src/hooks/useRoomName.ts +++ b/src/hooks/useRoomName.ts @@ -15,12 +15,14 @@ limitations under the License. */ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; -import { useCallback, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { IOOBData } from "../stores/ThreepidInviteStore"; import { useTypedEventEmitter } from "./useEventEmitter"; import { _t } from "../languageHandler"; +const getRoomName = (room?: Room, oobName = "") => room?.name || oobName; + /** * Determines the room name from a combination of the room model and potential * out-of-band information @@ -34,18 +36,14 @@ export default function useRoomName(room?: Room, oobData?: IOOBData): string { oobName = oobData.name; } - const [name, setName] = useState(room?.name || oobName || ""); - - const setRoomName = useCallback(() => { - setName(room?.name || oobName || ""); - }, [room?.name, oobName]); + const [name, setName] = useState(getRoomName(room, oobName)); useTypedEventEmitter(room, RoomEvent.Name, () => { - setRoomName(); + setName(getRoomName(room, oobName)); }); useEffect(() => { - setRoomName(); + setName(getRoomName(room, oobName)); }); return name; From 2808593b6871285b90516a711cba15dc156049d0 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:48:09 +0100 Subject: [PATCH 09/23] Change export of useRoomName --- src/components/views/rooms/RoomHeader.tsx | 2 +- src/hooks/useRoomName.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index b9d90b45861..aae3c1d0776 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -18,7 +18,7 @@ import React from "react"; import type { Room } from "matrix-js-sdk/src/models/room"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; -import useRoomName from "../../../hooks/useRoomName"; +import { useRoomName } from "../../../hooks/useRoomName"; export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element { const roomName = useRoomName(room, oobData); diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts index 618f087da6f..714c75ff77f 100644 --- a/src/hooks/useRoomName.ts +++ b/src/hooks/useRoomName.ts @@ -30,7 +30,7 @@ const getRoomName = (room?: Room, oobName = "") => room?.name || oobName; * @param oobData - out-of-band information about the room * @returns {string} the room name */ -export default function useRoomName(room?: Room, oobData?: IOOBData): string { +export function useRoomName(room?: Room, oobData?: IOOBData): string { let oobName = _t("Join Room"); if (oobData && oobData.name) { oobName = oobData.name; From 9cfbc7adc2f859b895e7903330117451cb0ebf56 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:49:13 +0100 Subject: [PATCH 10/23] fix ts issue --- src/components/views/elements/RoomName.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/RoomName.tsx b/src/components/views/elements/RoomName.tsx index 58f4f043b9a..8e3353ee003 100644 --- a/src/components/views/elements/RoomName.tsx +++ b/src/components/views/elements/RoomName.tsx @@ -36,7 +36,7 @@ const RoomName = ({ room, children }: IProps): JSX.Element => { setName(room?.name); }, [room]); - if (children) return children(name); + if (children) return children(name ?? ""); return <>{name || ""}; }; From 4f63b764411b7dc2c7949526a2b1c9b0abe0e634 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 13:55:09 +0100 Subject: [PATCH 11/23] lints --- src/hooks/useRoomName.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts index 714c75ff77f..01e681e3967 100644 --- a/src/hooks/useRoomName.ts +++ b/src/hooks/useRoomName.ts @@ -21,7 +21,7 @@ import { IOOBData } from "../stores/ThreepidInviteStore"; import { useTypedEventEmitter } from "./useEventEmitter"; import { _t } from "../languageHandler"; -const getRoomName = (room?: Room, oobName = "") => room?.name || oobName; +const getRoomName = (room?: Room, oobName = ""): string => room?.name || oobName; /** * Determines the room name from a combination of the room model and potential @@ -44,7 +44,7 @@ export function useRoomName(room?: Room, oobData?: IOOBData): string { useEffect(() => { setName(getRoomName(room, oobName)); - }); + }, [room, oobName]); return name; } From 169a1cbe6b79c832b408d54ed7b2d8c81e17c4a0 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 14:45:50 +0100 Subject: [PATCH 12/23] Add room topic to room header --- res/css/views/rooms/_RoomHeader.pcss | 61 ++++++++++--------- .../views/avatars/DecoratedRoomAvatar.tsx | 4 +- src/components/views/rooms/RoomHeader.tsx | 21 ++++++- .../views/rooms/RoomHeader-test.tsx | 28 ++++++++- .../__snapshots__/RoomHeader-test.tsx.snap | 2 +- 5 files changed, 81 insertions(+), 35 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 8fa887c5647..369df9eb09c 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -14,40 +14,45 @@ See the License for the specific language governing permissions and limitations under the License. */ -:root { - --RoomHeader-indicator-dot-size: 8px; - --RoomHeader-indicator-dot-offset: -3px; - --RoomHeader-indicator-pulseColor: $alert; -} - .mx_RoomHeader { - flex: 0 0 50px; - border-bottom: 1px solid $primary-hairline-color; - background-color: $background; -} - -.mx_RoomHeader_wrapper { - height: 44px; display: flex; align-items: center; - min-width: 0; - margin: 0 20px 0 16px; - padding-top: 6px; + height: 64px; + gap: var(--cpd-space-3x); + padding: 0 var(--cpd-space-3x); border-bottom: 1px solid $separator; + background-color: $background; + + &:hover { + cursor: pointer; + } } +/* To remove when compound is integrated */ .mx_RoomHeader_name { - flex: 0 1 auto; + font: var(--cpd-font-body-lg-semibold); +} + +.mx_RoomHeader_topic { + /* To remove when compound is integrated */ + font: var(--cpd-font-body-sm-regular); + + height: 0; + opacity: 0; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; - color: $primary-content; - font: var(--cpd-font-heading-sm-semibold); - font-weight: var(--cpd-font-weight-semibold); - min-height: 24px; - align-items: center; - border-radius: 6px; - margin: 0 3px; - padding: 1px 4px; - display: flex; - user-select: none; - cursor: pointer; + word-break: break-all; + text-overflow: ellipsis; + + transition: all .3s ease; +} + +.mx_RoomHeader:hover .mx_RoomHeader_topic { + /* height needed to compute the transition, it equals to the `line-height` + value in pixels */ + height: calc($font-13px * 1.5); + opacity: 1; } diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 711bacda870..e1c71280e4b 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -86,7 +86,9 @@ export default class DecoratedRoomAvatar extends React.PureComponent -
-
+
{ + const rightPanel = RightPanelStore.instance; + rightPanel.isOpen + ? rightPanel.togglePanel(null) + : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary }); + }} + > + {room && } +
+
{roomName}
+ {roomTopic &&
{roomTopic.text}
}
); diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index 6f59117fd1d..3439dde4e0e 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -21,7 +21,10 @@ import { Room } from "matrix-js-sdk/src/models/room"; import { stubClient } from "../../../test-utils"; import RoomHeader from "../../../../src/components/views/rooms/RoomHeader"; -import type { MatrixClient } from "matrix-js-sdk/src/client"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import DMRoomMap from "../../../../src/utils/DMRoomMap"; +import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; describe("Roomeader", () => { let client: Mocked; @@ -31,7 +34,10 @@ describe("Roomeader", () => { beforeEach(async () => { stubClient(); - room = new Room(ROOM_ID, client, "@alice:example.org"); + room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org"); + DMRoomMap.setShared({ + getUserIdForRoomId: jest.fn(), + } as unknown as DMRoomMap); }); it("renders with no props", () => { @@ -55,4 +61,22 @@ describe("Roomeader", () => { ); expect(container).toHaveTextContent(OOB_NAME); }); + + it("renders the room topic", async () => { + const TOPIC = "Hello World!"; + + const roomTopic = new MatrixEvent({ + type: EventType.RoomTopic, + event_id: "$00002", + room_id: room.roomId, + sender: "@alice:example.com", + origin_server_ts: 1, + content: { topic: TOPIC }, + state_key: "", + }); + await room.addLiveEvents([roomTopic]); + + const { container } = render(); + expect(container).toHaveTextContent(TOPIC); + }); }); diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 0fafcad5ed6..809fe8e73c6 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -6,7 +6,7 @@ exports[`Roomeader renders with no props 1`] = ` class="mx_RoomHeader light-panel" >
Date: Tue, 1 Aug 2023 17:07:10 +0100 Subject: [PATCH 13/23] lintfix --- res/css/views/rooms/_RoomHeader.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 369df9eb09c..c668ace8a22 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -47,7 +47,7 @@ limitations under the License. word-break: break-all; text-overflow: ellipsis; - transition: all .3s ease; + transition: all 0.3s ease; } .mx_RoomHeader:hover .mx_RoomHeader_topic { From 21bb26a3e8d7c04345a926616d7f0e57a5409c28 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 1 Aug 2023 17:11:05 +0100 Subject: [PATCH 14/23] lintfix & clamp to one line --- res/css/views/rooms/_RoomHeader.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index c668ace8a22..a1c1aca97a6 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -41,7 +41,7 @@ limitations under the License. opacity: 0; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-line-clamp: 1; overflow: hidden; word-break: break-all; From ef03541be94db85e2887ada9de00132ae7dbf7be Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 09:19:15 +0100 Subject: [PATCH 15/23] Revert optimisations to DecoratedRoomAvatar --- src/components/views/avatars/DecoratedRoomAvatar.tsx | 4 +--- test/components/views/rooms/RoomHeader-test.tsx | 4 +++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index e1c71280e4b..711bacda870 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -86,9 +86,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent { beforeEach(async () => { stubClient(); - room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org"); + room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org", { + pendingEventOrdering: PendingEventOrdering.Detached, + }); DMRoomMap.setShared({ getUserIdForRoomId: jest.fn(), } as unknown as DMRoomMap); From b8311f1aeacf630fc71a5dfa8d61634845a54aa0 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 09:20:05 +0100 Subject: [PATCH 16/23] Add test for opening the room summary --- test/components/views/rooms/RoomHeader-test.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index 7a89c8aa699..e6855822cbe 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -17,18 +17,23 @@ limitations under the License. import React from "react"; import { render } from "@testing-library/react"; import { Room } from "matrix-js-sdk/src/models/room"; -import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { EventType, MatrixEvent, PendingEventOrdering } from "matrix-js-sdk/src/matrix"; +import userEvent from "@testing-library/user-event"; import { stubClient } from "../../../test-utils"; import RoomHeader from "../../../../src/components/views/rooms/RoomHeader"; import DMRoomMap from "../../../../src/utils/DMRoomMap"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; +import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore"; +import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases"; describe("Roomeader", () => { let room: Room; const ROOM_ID = "!1:example.org"; + let setCardSpy: jest.SpyInstance | undefined; + beforeEach(async () => { stubClient(); room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org", { @@ -37,6 +42,8 @@ describe("Roomeader", () => { DMRoomMap.setShared({ getUserIdForRoomId: jest.fn(), } as unknown as DMRoomMap); + + setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard"); }); it("renders with no props", () => { @@ -78,4 +85,11 @@ describe("Roomeader", () => { const { container } = render(); expect(container).toHaveTextContent(TOPIC); }); + + it("opens the room summary", async () => { + const { container } = render(); + + await userEvent.click(container.firstChild! as Element); + expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.RoomSummary }); + }); }); From ad0810528624a560f91cd563c2a311ae12cef602 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 09:20:57 +0100 Subject: [PATCH 17/23] Make transition honour prefer-reduced-motion --- res/css/views/rooms/_RoomHeader.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index a1c1aca97a6..9dfc771abed 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -47,7 +47,7 @@ limitations under the License. word-break: break-all; text-overflow: ellipsis; - transition: all 0.3s ease; + transition: all var(--transition-standard) ease; } .mx_RoomHeader:hover .mx_RoomHeader_topic { From 283cf7a12d3355b5a9492320cc88842adb3fb209 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 09:39:49 +0100 Subject: [PATCH 18/23] Integrate @vector-im/compound-web --- package.json | 1 + res/css/_common.pcss | 1 + yarn.lock | 86 ++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 86 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d6a0acec3e9..2f406ad5da4 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "@sentry/tracing": "^7.0.0", "@testing-library/react-hooks": "^8.0.1", "@vector-im/compound-design-tokens": "^0.0.3", + "@vector-im/compound-web": "^0.2.0", "await-lock": "^2.1.0", "blurhash": "^1.1.3", "classnames": "^2.2.6", diff --git a/res/css/_common.pcss b/res/css/_common.pcss index c321d46a5df..6ba33dcc140 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -18,6 +18,7 @@ limitations under the License. */ @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"); +@import url("@vector-im/compound-web/dist/style.css"); @import "./_font-sizes.pcss"; @import "./_animations.pcss"; @import "./_spacing.pcss"; diff --git a/yarn.lock b/yarn.lock index bc81bafdc0b..2f0e37d29f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1258,7 +1258,7 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438" integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ== @@ -2131,6 +2131,79 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== +"@radix-ui/primitive@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd" + integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-compose-refs@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989" + integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-context@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c" + integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-form@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-form/-/react-form-0.0.3.tgz#328e7163e723ccc748459d66a2d685d7b4f85d5a" + integrity sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-id" "1.0.1" + "@radix-ui/react-label" "2.0.2" + "@radix-ui/react-primitive" "1.0.3" + +"@radix-ui/react-id@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0" + integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-layout-effect" "1.0.1" + +"@radix-ui/react-label@2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d" + integrity sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.3" + +"@radix-ui/react-primitive@1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0" + integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-slot" "1.0.2" + +"@radix-ui/react-slot@1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab" + integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.1" + +"@radix-ui/react-use-layout-effect@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399" + integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@sentry-internal/tracing@7.60.1": version "7.60.1" resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.60.1.tgz#c20766a7e31589962ffe9ea9dc58b6f475432303" @@ -2794,6 +2867,15 @@ dependencies: svg2vectordrawable "^2.9.1" +"@vector-im/compound-web@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.0.tgz#c70400ad086748c150df927cbf7bccd9f7f1579d" + integrity sha512-pbR5OMxbqg7GpvEQUyuEOCv5GLIeJS0pUIYOEoKmujPC+voHZKzFAg8UpMq0WAkv7RuJYE1Sy71uwhEWrvhqwA== + dependencies: + "@radix-ui/react-form" "^0.0.3" + classnames "^2.3.2" + lodash "^4.17.21" + abab@^2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291" @@ -3489,7 +3571,7 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== -classnames@^2.2.6: +classnames@^2.2.6, classnames@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== From f2cd09a22cc88ce682fbb586650c22e10f99e12a Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 09:40:30 +0100 Subject: [PATCH 19/23] Use compound type styles --- res/css/views/rooms/_RoomHeader.pcss | 8 -------- src/components/views/rooms/RoomHeader.tsx | 11 ++++++++--- .../rooms/__snapshots__/RoomHeader-test.tsx.snap | 2 +- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 369df9eb09c..69e4fd0a6f7 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -28,15 +28,7 @@ limitations under the License. } } -/* To remove when compound is integrated */ -.mx_RoomHeader_name { - font: var(--cpd-font-body-lg-semibold); -} - .mx_RoomHeader_topic { - /* To remove when compound is integrated */ - font: var(--cpd-font-body-sm-regular); - height: 0; opacity: 0; display: -webkit-box; diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 95a496f37ca..a97ba0b5518 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React from "react"; +import { Body } from "@vector-im/compound-web"; import type { Room } from "matrix-js-sdk/src/models/room"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; @@ -40,10 +41,14 @@ export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: I > {room && }
-
+ {roomName} -
- {roomTopic &&
{roomTopic.text}
} + + {roomTopic && ( + + {roomTopic.text} + + )}
); diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 809fe8e73c6..98258e30615 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -10,9 +10,9 @@ exports[`Roomeader renders with no props 1`] = ` >
Join Room From 2178016ba335b70f30d37a8108506d129dac2e3c Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 11:01:27 +0100 Subject: [PATCH 20/23] Use latest version of @vector-im/compound-web --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 2f406ad5da4..2effe38ca84 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@sentry/tracing": "^7.0.0", "@testing-library/react-hooks": "^8.0.1", "@vector-im/compound-design-tokens": "^0.0.3", - "@vector-im/compound-web": "^0.2.0", + "@vector-im/compound-web": "^0.2.1", "await-lock": "^2.1.0", "blurhash": "^1.1.3", "classnames": "^2.2.6", diff --git a/yarn.lock b/yarn.lock index 2f0e37d29f4..1e66d982ced 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2867,10 +2867,10 @@ dependencies: svg2vectordrawable "^2.9.1" -"@vector-im/compound-web@^0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.0.tgz#c70400ad086748c150df927cbf7bccd9f7f1579d" - integrity sha512-pbR5OMxbqg7GpvEQUyuEOCv5GLIeJS0pUIYOEoKmujPC+voHZKzFAg8UpMq0WAkv7RuJYE1Sy71uwhEWrvhqwA== +"@vector-im/compound-web@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.1.tgz#60676a64dc2098da2bc780c15f28fbc3e7dfe6b2" + integrity sha512-vZZnl1cyxCRfW1ToPtjyMvhbLLdjoNb5m7gnY5Cvs7WyPurCV2+FeRVVYdnN2YRB37aPqlYwWXa0XV1jh4rFUQ== dependencies: "@radix-ui/react-form" "^0.0.3" classnames "^2.3.2" From d1ceae7674f04f8d0cb0fa22e5224e6c792115a8 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 11:03:08 +0100 Subject: [PATCH 21/23] Change component name --- src/components/views/rooms/RoomHeader.tsx | 25 +++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index a97ba0b5518..794ae1a441d 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import React from "react"; -import { Body } from "@vector-im/compound-web"; +import { Body as BodyText } from "@vector-im/compound-web"; import type { Room } from "matrix-js-sdk/src/models/room"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; @@ -24,6 +24,7 @@ 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 { const roomName = useRoomName(room, oobData); @@ -39,15 +40,27 @@ export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: I : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary }); }} > - {room && } + {room ? ( + + ) : ( + + )}
- + {roomName} - + {roomTopic && ( - + {roomTopic.text} - + )}
From cdd5b1543c791adb5f00c92ab7b22b05608fd4ac Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 11:04:17 +0100 Subject: [PATCH 22/23] Fallback when room is undefined --- src/components/views/rooms/RoomHeader.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 95a496f37ca..9745f77ead6 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -23,6 +23,7 @@ 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 { const roomName = useRoomName(room, oobData); @@ -38,7 +39,11 @@ export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: I : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary }); }} > - {room && } + {room ? ( + + ) : ( + + )}
{roomName} From e6f70eaa9c015f6cf4b8a12920d056bd8cea69c0 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 2 Aug 2023 11:27:45 +0100 Subject: [PATCH 23/23] fix snapshot --- .../__snapshots__/RoomHeader-test.tsx.snap | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 809fe8e73c6..7c50d742f81 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -5,6 +5,27 @@ exports[`Roomeader renders with no props 1`] = `
+ + + +