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>

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);
     });
 });

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -53,12 +53,14 @@ limitations under the License.
 
     .mx_RoomSummaryCard_topic {
         padding: 0 12px;
+        color: var(--cpd-color-text-secondary);
 
         .mx_Box {
             width: 100%;
         }
 
         .mx_RoomSummaryCard_topic_container {
+            text-align: start;
             display: flex;
         }
 

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;
 }

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -301,17 +301,24 @@ const onRoomSettingsClick = (ev: Event): void => {
 };
 
 const RoomTopic: React.FC<Pick<IProps, "room">> = ({ 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);
 
+    const canEditTopic = useRoomState(room, (state) =>
+        state.maySendStateEvent(EventType.RoomTopic, room.client.getSafeUserId()),
+    );
     const onEditClick = (e: SyntheticEvent): void => {
         e.preventDefault();
         e.stopPropagation();
         defaultDispatcher.dispatch({ action: "open_room_settings" });
     };
 
+    if (!body && !canEditTopic) {
+        return null;
+    }
+
     if (!body) {
         return (
             <Flex
@@ -365,7 +372,7 @@ const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null
                     <ChevronDownIcon />
                 </IconButton>
             </Box>
-            {expanded && (
+            {expanded && canEditTopic && (
                 <Box flex="1" className="mx_RoomSummaryCard_topic_edit">
                     <Link kind="primary" onClick={onEditClick}>
                         <Text size="sm" weight="regular">

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({
                                     </Tooltip>
                                 )}
                             </BodyText>
-                            {roomTopic && (
-                                <BodyText
-                                    as="div"
-                                    size="sm"
-                                    className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
-                                >
-                                    <Linkify>{roomTopicBody}</Linkify>
-                                </BodyText>
-                            )}
                         </Box>
                     </button>
                 </ReleaseAnnouncement>

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

@@ -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();
     });

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

@@ -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

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

@@ -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());