Remove topic from new room header and expand right panel topic (#12842)

* Remove topic from new Room Header

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Hide topic edit in right panel unless user has permission to edit

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Expand right panel room topic by default

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix text align of topic in right panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix topic colour in right panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Exclude `Add topic` from text-align

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Don't show `Add topic` if !perms

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-31 10:23:01 +01:00 committed by GitHub
parent 2defb1041e
commit fae5bf1612
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 30 additions and 69 deletions

View file

@ -125,7 +125,7 @@ describe("<RoomSummaryCard />", () => {
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("<RoomSummaryCard />", () => {
}),
]);
const { container, getByText } = getComponent();
fireEvent.click(screen.getByText("This is the room's topic."));
expect(getByText("Edit")).toBeInTheDocument();
expect(container).toMatchSnapshot();
});

View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
<div>
<div
aria-labelledby="room-summary-panel-tab"
@ -893,7 +893,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</span>
</section>
<section
class="mx_Flex mx_RoomSummaryCard_topic mx_RoomSummaryCard_topic_collapsed"
class="mx_Flex mx_RoomSummaryCard_topic"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
>
<div
@ -923,6 +923,22 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</div>
</button>
</div>
<div
class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
style="--mx-box-flex: 1;"
>
<a
class="_link_1mzip_17"
data-kind="primary"
rel="noreferrer noopener"
>
<p
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
>
Edit
</p>
</a>
</div>
</section>
</header>
<div

View file

@ -31,7 +31,6 @@ import {
fireEvent,
getAllByLabelText,
getByLabelText,
getByRole,
getByText,
queryAllByLabelText,
queryByLabelText,
@ -105,25 +104,6 @@ describe("RoomHeader", () => {
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(<RoomHeader room={room} />, getWrapper());
expect(container).toHaveTextContent(TOPIC);
expect(getByRole(container, "link")).toHaveTextContent("http://element.io");
});
it("opens the room summary", async () => {
const { container } = render(<RoomHeader room={room} />, getWrapper());