From fc9caa3269473cd9f9c839342d80e9f4f0c01cc9 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Wed, 20 Sep 2023 12:51:15 +0100
Subject: [PATCH] Linkify room topic (#11631)

---
 src/components/views/rooms/RoomHeader.tsx       | 8 +++++++-
 src/hooks/room/useTopic.ts                      | 5 +++++
 test/components/views/rooms/RoomHeader-test.tsx | 4 +++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index bb8dd49182..a51b2a88db 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -47,6 +47,7 @@ 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";
 
 /**
  * A helper to transform a notification color to the what the Compound Icon Button
@@ -100,6 +101,11 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
 
     const notificationsEnabled = useFeatureEnabled("feature_notifications");
 
+    const roomTopicBody = useMemo(
+        () => topicToHtml(roomTopic?.text, roomTopic?.html),
+        [roomTopic?.html, roomTopic?.text],
+    );
+
     return (
         <Flex
             as="header"
@@ -159,7 +165,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                 </BodyText>
                 {roomTopic && (
                     <BodyText as="div" size="sm" className="mx_RoomHeader_topic">
-                        {roomTopic.text}
+                        <Linkify>{roomTopicBody}</Linkify>
                     </BodyText>
                 )}
             </Box>
diff --git a/src/hooks/room/useTopic.ts b/src/hooks/room/useTopic.ts
index 1b63cb8ed9..a0876ef983 100644
--- a/src/hooks/room/useTopic.ts
+++ b/src/hooks/room/useTopic.ts
@@ -32,6 +32,11 @@ export const getTopic = (room?: Room): Optional<ContentHelpers.TopicState> => {
     return !!content ? ContentHelpers.parseTopicContent(content) : null;
 };
 
+/**
+ * Helper to retrieve the room topic for given room
+ * @param room
+ * @returns the raw text and an html parsion version of the room topic
+ */
 export function useTopic(room?: Room): Optional<ContentHelpers.TopicState> {
     const [topic, setTopic] = useState(getTopic(room));
     useTypedEventEmitter(room?.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => {
diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx
index 3476e24453..293e857a43 100644
--- a/test/components/views/rooms/RoomHeader-test.tsx
+++ b/test/components/views/rooms/RoomHeader-test.tsx
@@ -21,6 +21,7 @@ import {
     fireEvent,
     getAllByLabelText,
     getByLabelText,
+    getByRole,
     getByText,
     render,
     screen,
@@ -78,7 +79,7 @@ describe("RoomHeader", () => {
     });
 
     it("renders the room topic", async () => {
-        const TOPIC = "Hello World!";
+        const TOPIC = "Hello World! http://element.io";
 
         const roomTopic = new MatrixEvent({
             type: EventType.RoomTopic,
@@ -96,6 +97,7 @@ describe("RoomHeader", () => {
             withClientContextRenderOptions(MatrixClientPeg.get()!),
         );
         expect(container).toHaveTextContent(TOPIC);
+        expect(getByRole(container, "link")).toHaveTextContent("http://element.io");
     });
 
     it("opens the room summary", async () => {