From 3b38533dc6d379b8060d71a73c4fe07737173c90 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 16:28:58 +0100 Subject: [PATCH 01/10] Remove topic from new Room Header Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_RoomHeader.pcss | 25 ----------------------- src/components/views/rooms/RoomHeader.tsx | 17 --------------- 2 files changed, 42 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 2af5e5ca106..2c659e343f1 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -63,31 +63,6 @@ limitations under the License. align-items: center; } -.mx_RoomHeader_topic { - height: 0; - opacity: 0; - transition: all var(--transition-standard) ease 0.1s; - /* Emojis are rendered a bit bigger than text in the timeline - Make them compact/the same size as text here */ - .mx_Emoji { - font-size: inherit; - } -} - -.mx_RoomHeader:hover, -.mx_RoomHeader:focus-within { - .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; - - a:hover { - text-decoration: underline; - } - } -} - .mx_RoomHeader_icon { flex-shrink: 0; } diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index c4b3570b31f..9cf63e474d6 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -30,7 +30,6 @@ import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/Ro import { useRoomName } from "../../../hooks/useRoomName"; import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; -import { useTopic } from "../../../hooks/room/useTopic"; import { useAccountData } from "../../../hooks/useAccountData"; import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers"; @@ -49,7 +48,6 @@ import { useRoomState } from "../../../hooks/useRoomState"; import RoomAvatar from "../avatars/RoomAvatar"; import { formatCount } from "../../../utils/FormattingUtils"; 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"; @@ -71,7 +69,6 @@ export default function RoomHeader({ const client = useMatrixClientContext(); const roomName = useRoomName(room); - const roomTopic = useTopic(room); const roomState = useRoomState(room); const members = useRoomMembers(room, 2500); @@ -117,11 +114,6 @@ export default function RoomHeader({ const notificationsEnabled = useFeatureEnabled("feature_notifications"); - const roomTopicBody = useMemo( - () => topicToHtml(roomTopic?.text, roomTopic?.html), - [roomTopic?.html, roomTopic?.text], - ); - const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join"); const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]); @@ -310,15 +302,6 @@ export default function RoomHeader({ )} - {roomTopic && ( - - {roomTopicBody} - - )} From 981a1371b0d92b62709eceed48320b49a9131342 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 16:32:02 +0100 Subject: [PATCH 02/10] Hide topic edit in right panel unless user has permission to edit Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/right_panel/RoomSummaryCard.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 2552a8a408b..5dff38bc408 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -305,6 +305,9 @@ const RoomTopic: React.FC> = ({ room }): JSX.Element | null const topic = useTopic(room); const body = topicToHtml(topic?.text, topic?.html); + const canEditTopic = useRoomState(room, (state) => + state.maySendStateEvent(EventType.RoomTopic, room.client.getSafeUserId()), + ); const onEditClick = (e: SyntheticEvent): void => { e.preventDefault(); e.stopPropagation(); @@ -364,7 +367,7 @@ const RoomTopic: React.FC> = ({ room }): JSX.Element | null - {expanded && ( + {expanded && canEditTopic && ( From 4bdc42b4b158f011d241869e93bed5653acdb44e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 16:32:17 +0100 Subject: [PATCH 03/10] Expand right panel room topic by default Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/right_panel/RoomSummaryCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 5dff38bc408..53b2d42af43 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -300,7 +300,7 @@ const onRoomSettingsClick = (ev: Event): void => { }; const RoomTopic: React.FC> = ({ room }): JSX.Element | null => { - const [expanded, setExpanded] = useState(false); + const [expanded, setExpanded] = useState(true); const topic = useTopic(room); const body = topicToHtml(topic?.text, topic?.html); From 2651d2efc9e66ed97f17f5c6f206f73d15a8f068 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 17:34:52 +0100 Subject: [PATCH 04/10] Fix text align of topic in right panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/right_panel/_RoomSummaryCard.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index 549eb69ee43..998a80e76a1 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -53,6 +53,7 @@ limitations under the License. .mx_RoomSummaryCard_topic { padding: 0 12px; + text-align: start; .mx_Box { width: 100%; From 83be39b00a73f3f4af19287bf2472bb98b80309d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 17:36:41 +0100 Subject: [PATCH 05/10] Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../e2e/create-room/create-room.spec.ts | 1 - .../right_panel/RoomSummaryCard-test.tsx | 3 +-- .../RoomSummaryCard-test.tsx.snap | 24 +++++++++++++++---- .../views/rooms/RoomHeader-test.tsx | 19 --------------- 4 files changed, 21 insertions(+), 26 deletions(-) diff --git a/playwright/e2e/create-room/create-room.spec.ts b/playwright/e2e/create-room/create-room.spec.ts index 651439302d5..c46de21da47 100644 --- a/playwright/e2e/create-room/create-room.spec.ts +++ b/playwright/e2e/create-room/create-room.spec.ts @@ -38,6 +38,5 @@ test.describe("Create Room", () => { await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/); const header = page.locator(".mx_RoomHeader"); await expect(header).toContainText(name); - await expect(header).toContainText(topic); }); }); diff --git a/test/components/views/right_panel/RoomSummaryCard-test.tsx b/test/components/views/right_panel/RoomSummaryCard-test.tsx index 1ddea763829..5823128f0fc 100644 --- a/test/components/views/right_panel/RoomSummaryCard-test.tsx +++ b/test/components/views/right_panel/RoomSummaryCard-test.tsx @@ -125,7 +125,7 @@ describe("", () => { expect(container).toMatchSnapshot(); }); - it("has button to edit topic when expanded", () => { + it("has button to edit topic", () => { room.currentState.setStateEvents([ new MatrixEvent({ type: "m.room.topic", @@ -138,7 +138,6 @@ describe("", () => { }), ]); const { container, getByText } = getComponent(); - fireEvent.click(screen.getByText("This is the room's topic.")); expect(getByText("Edit")).toBeInTheDocument(); expect(container).toMatchSnapshot(); }); diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index 7c1b43e7c09..0c67a7326c2 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` has button to edit topic when expanded 1`] = ` +exports[` has button to edit topic 1`] = `
renders the room topic in the summary 1`] = `
renders the room topic in the summary 1`] = `
+
+ +

+ Edit +

+ +
renders the room topic in the summary 1`] = ` @@ -965,7 +981,7 @@ exports[` renders the room topic in the summary 1`] = ` >
{ expect(container).toHaveTextContent(ROOM_ID); }); - it("renders the room topic", async () => { - const TOPIC = "Hello World! http://element.io"; - - 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(, getWrapper()); - expect(container).toHaveTextContent(TOPIC); - expect(getByRole(container, "link")).toHaveTextContent("http://element.io"); - }); - it("opens the room summary", async () => { const { container } = render(, getWrapper()); From 1733889e77951ce36861d9080e4e15f0e43a5fa2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 17:38:46 +0100 Subject: [PATCH 06/10] Fix topic colour in right panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/right_panel/_RoomSummaryCard.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index 998a80e76a1..348086430c6 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -54,6 +54,7 @@ limitations under the License. .mx_RoomSummaryCard_topic { padding: 0 12px; text-align: start; + color: var(--cpd-color-text-secondary); .mx_Box { width: 100%; From 5487206eb1c92b6297eff51724332a9a4a23ef75 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 17:41:39 +0100 Subject: [PATCH 07/10] Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- test/components/views/rooms/RoomHeader-test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index bbc7b7a292a..06eaaa1837c 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -31,7 +31,6 @@ import { fireEvent, getAllByLabelText, getByLabelText, - getByRole, getByText, queryAllByLabelText, queryByLabelText, From 5b401213f8f9668889178090a1ddbc8b7f26b6ce Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 17:52:28 +0100 Subject: [PATCH 08/10] Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index 0c67a7326c2..e2bee3ac7cd 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -972,7 +972,7 @@ exports[` renders the room topic in the summary 1`] = ` @@ -981,7 +981,7 @@ exports[` renders the room topic in the summary 1`] = ` >
Date: Tue, 30 Jul 2024 18:15:41 +0100 Subject: [PATCH 09/10] Exclude `Add topic` from text-align Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/right_panel/_RoomSummaryCard.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index 348086430c6..75f0178cddf 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -53,7 +53,6 @@ limitations under the License. .mx_RoomSummaryCard_topic { padding: 0 12px; - text-align: start; color: var(--cpd-color-text-secondary); .mx_Box { @@ -61,6 +60,7 @@ limitations under the License. } .mx_RoomSummaryCard_topic_container { + text-align: start; display: flex; } From 8173150d8326c33af807768ea77bc88788cd9154 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 18:16:16 +0100 Subject: [PATCH 10/10] Don't show `Add topic` if !perms Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/right_panel/RoomSummaryCard.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 53b2d42af43..3707a15646b 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -314,6 +314,10 @@ const RoomTopic: React.FC> = ({ room }): JSX.Element | null defaultDispatcher.dispatch({ action: "open_room_settings" }); }; + if (!body && !canEditTopic) { + return null; + } + if (!body) { return (