Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit fae5bf1

Browse files
t3chguyt3chguy
authored
Remove topic from new room header and expand right panel topic (#12842)
* Remove topic from new Room Header Signed-off-by: Michael Telatynski <[email protected]> * Hide topic edit in right panel unless user has permission to edit Signed-off-by: Michael Telatynski <[email protected]> * Expand right panel room topic by default Signed-off-by: Michael Telatynski <[email protected]> * Fix text align of topic in right panel Signed-off-by: Michael Telatynski <[email protected]> * Update tests Signed-off-by: Michael Telatynski <[email protected]> * Fix topic colour in right panel Signed-off-by: Michael Telatynski <[email protected]> * Delint Signed-off-by: Michael Telatynski <[email protected]> * Update snapshot Signed-off-by: Michael Telatynski <[email protected]> * Exclude `Add topic` from text-align Signed-off-by: Michael Telatynski <[email protected]> * Don't show `Add topic` if !perms Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 2defb10 commit fae5bf1

File tree

8 files changed

+30
-69
lines changed

8 files changed

+30
-69
lines changed

‎playwright/e2e/create-room/create-room.spec.ts

-1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,5 @@ test.describe("Create Room", () => {
3838
await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/);
3939
const header = page.locator(".mx_RoomHeader");
4040
await expect(header).toContainText(name);
41-
await expect(header).toContainText(topic);
4241
});
4342
});

‎res/css/views/right_panel/_RoomSummaryCard.pcss

+2
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,14 @@ limitations under the License.
5353

5454
.mx_RoomSummaryCard_topic {
5555
padding: 0 12px;
56+
color: var(--cpd-color-text-secondary);
5657

5758
.mx_Box {
5859
width: 100%;
5960
}
6061

6162
.mx_RoomSummaryCard_topic_container {
63+
text-align: start;
6264
display: flex;
6365
}
6466

‎res/css/views/rooms/_RoomHeader.pcss

-25
Original file line numberDiff line numberDiff line change
@@ -63,31 +63,6 @@ limitations under the License.
6363
align-items: center;
6464
}
6565

66-
.mx_RoomHeader_topic {
67-
height: 0;
68-
opacity: 0;
69-
transition: all var(--transition-standard) ease 0.1s;
70-
/* Emojis are rendered a bit bigger than text in the timeline
71-
Make them compact/the same size as text here */
72-
.mx_Emoji {
73-
font-size: inherit;
74-
}
75-
}
76-
77-
.mx_RoomHeader:hover,
78-
.mx_RoomHeader:focus-within {
79-
.mx_RoomHeader_topic {
80-
/* height needed to compute the transition, it equals to the `line-height`
81-
value in pixels */
82-
height: calc($font-13px * 1.5);
83-
opacity: 1;
84-
85-
a:hover {
86-
text-decoration: underline;
87-
}
88-
}
89-
}
90-
9166
.mx_RoomHeader_icon {
9267
flex-shrink: 0;
9368
}

‎src/components/views/right_panel/RoomSummaryCard.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -301,17 +301,24 @@ const onRoomSettingsClick = (ev: Event): void => {
301301
};
302302

303303
const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null => {
304-
const [expanded, setExpanded] = useState(false);
304+
const [expanded, setExpanded] = useState(true);
305305

306306
const topic = useTopic(room);
307307
const body = topicToHtml(topic?.text, topic?.html);
308308

309+
const canEditTopic = useRoomState(room, (state) =>
310+
state.maySendStateEvent(EventType.RoomTopic, room.client.getSafeUserId()),
311+
);
309312
const onEditClick = (e: SyntheticEvent): void => {
310313
e.preventDefault();
311314
e.stopPropagation();
312315
defaultDispatcher.dispatch({ action: "open_room_settings" });
313316
};
314317

318+
if (!body && !canEditTopic) {
319+
return null;
320+
}
321+
315322
if (!body) {
316323
return (
317324
<Flex
@@ -365,7 +372,7 @@ const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null
365372
<ChevronDownIcon />
366373
</IconButton>
367374
</Box>
368-
{expanded && (
375+
{expanded && canEditTopic && (
369376
<Box flex="1" className="mx_RoomSummaryCard_topic_edit">
370377
<Link kind="primary" onClick={onEditClick}>
371378
<Text size="sm" weight="regular">

‎src/components/views/rooms/RoomHeader.tsx

-17
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/Ro
3030

3131
import { useRoomName } from "../../../hooks/useRoomName";
3232
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
33-
import { useTopic } from "../../../hooks/room/useTopic";
3433
import { useAccountData } from "../../../hooks/useAccountData";
3534
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
3635
import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers";
@@ -49,7 +48,6 @@ import { useRoomState } from "../../../hooks/useRoomState";
4948
import RoomAvatar from "../avatars/RoomAvatar";
5049
import { formatCount } from "../../../utils/FormattingUtils";
5150
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
52-
import { Linkify, topicToHtml } from "../../../HtmlUtils";
5351
import PosthogTrackers from "../../../PosthogTrackers";
5452
import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton";
5553
import { RoomKnocksBar } from "./RoomKnocksBar";
@@ -71,7 +69,6 @@ export default function RoomHeader({
7169
const client = useMatrixClientContext();
7270

7371
const roomName = useRoomName(room);
74-
const roomTopic = useTopic(room);
7572
const roomState = useRoomState(room);
7673

7774
const members = useRoomMembers(room, 2500);
@@ -117,11 +114,6 @@ export default function RoomHeader({
117114

118115
const notificationsEnabled = useFeatureEnabled("feature_notifications");
119116

120-
const roomTopicBody = useMemo(
121-
() => topicToHtml(roomTopic?.text, roomTopic?.html),
122-
[roomTopic?.html, roomTopic?.text],
123-
);
124-
125117
const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join");
126118

127119
const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]);
@@ -310,15 +302,6 @@ export default function RoomHeader({
310302
</Tooltip>
311303
)}
312304
</BodyText>
313-
{roomTopic && (
314-
<BodyText
315-
as="div"
316-
size="sm"
317-
className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
318-
>
319-
<Linkify>{roomTopicBody}</Linkify>
320-
</BodyText>
321-
)}
322305
</Box>
323306
</button>
324307
</ReleaseAnnouncement>

‎test/components/views/right_panel/RoomSummaryCard-test.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ describe("<RoomSummaryCard />", () => {
125125
expect(container).toMatchSnapshot();
126126
});
127127

128-
it("has button to edit topic when expanded", () => {
128+
it("has button to edit topic", () => {
129129
room.currentState.setStateEvents([
130130
new MatrixEvent({
131131
type: "m.room.topic",
@@ -138,7 +138,6 @@ describe("<RoomSummaryCard />", () => {
138138
}),
139139
]);
140140
const { container, getByText } = getComponent();
141-
fireEvent.click(screen.getByText("This is the room's topic."));
142141
expect(getByText("Edit")).toBeInTheDocument();
143142
expect(container).toMatchSnapshot();
144143
});

‎test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
3+
exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
44
<div>
55
<div
66
aria-labelledby="room-summary-panel-tab"
@@ -893,7 +893,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
893893
</span>
894894
</section>
895895
<section
896-
class="mx_Flex mx_RoomSummaryCard_topic mx_RoomSummaryCard_topic_collapsed"
896+
class="mx_Flex mx_RoomSummaryCard_topic"
897897
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
898898
>
899899
<div
@@ -923,6 +923,22 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
923923
</div>
924924
</button>
925925
</div>
926+
<div
927+
class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
928+
style="--mx-box-flex: 1;"
929+
>
930+
<a
931+
class="_link_1mzip_17"
932+
data-kind="primary"
933+
rel="noreferrer noopener"
934+
>
935+
<p
936+
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
937+
>
938+
Edit
939+
</p>
940+
</a>
941+
</div>
926942
</section>
927943
</header>
928944
<div

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

-20
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import {
3131
fireEvent,
3232
getAllByLabelText,
3333
getByLabelText,
34-
getByRole,
3534
getByText,
3635
queryAllByLabelText,
3736
queryByLabelText,
@@ -105,25 +104,6 @@ describe("RoomHeader", () => {
105104
expect(container).toHaveTextContent(ROOM_ID);
106105
});
107106

108-
it("renders the room topic", async () => {
109-
const TOPIC = "Hello World! http://element.io";
110-
111-
const roomTopic = new MatrixEvent({
112-
type: EventType.RoomTopic,
113-
event_id: "$00002",
114-
room_id: room.roomId,
115-
sender: "@alice:example.com",
116-
origin_server_ts: 1,
117-
content: { topic: TOPIC },
118-
state_key: "",
119-
});
120-
await room.addLiveEvents([roomTopic]);
121-
122-
const { container } = render(<RoomHeader room={room} />, getWrapper());
123-
expect(container).toHaveTextContent(TOPIC);
124-
expect(getByRole(container, "link")).toHaveTextContent("http://element.io");
125-
});
126-
127107
it("opens the room summary", async () => {
128108
const { container } = render(<RoomHeader room={room} />, getWrapper());
129109

0 commit comments

Comments
 (0)