fix: make url in topic in room intro clickable (#30686)

* fix: make url in topic in room intro clickable

* chore: remove extra line

* refactor: use tag instead variable

* test: add topic tests

* fix: update i18n key

src/components/views/rooms/NewRoomIntro.tsx

@@ -30,6 +30,8 @@ import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import { LocalRoom } from "../../../models/LocalRoom";
 import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../../utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
+import { useTopic } from "../../../hooks/room/useTopic";
+import { topicToHtml, Linkify } from "../../../HtmlUtils";
 
 function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
     const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@@ -52,6 +54,7 @@ const determineIntroMessage = (room: Room, encryptedSingle3rdPartyInvite: boolea
 const NewRoomIntro: React.FC = () => {
     const cli = useContext(MatrixClientContext);
     const { room, roomId } = useScopedRoomContext("room", "roomId");
+    const topic = useTopic(room);
 
     if (!room || !roomId) {
         throw new Error("Unable to create a NewRoomIntro without room and roomId");
@@ -106,7 +109,6 @@ const NewRoomIntro: React.FC = () => {
         );
     } else {
         const inRoom = room && room.getMyMembership() === KnownMembership.Join;
-        const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic;
         const canAddTopic = inRoom && room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getSafeUserId());
 
         const onTopicClick = (): void => {
@@ -126,18 +128,23 @@ const NewRoomIntro: React.FC = () => {
         let topicText;
         if (canAddTopic && topic) {
             topicText = _t(
-                "room|intro|topic_edit",
-                { topic },
+                "room|intro|edit_topic",
+                {},
                 {
                     a: (sub) => (
                         <AccessibleButton element="a" kind="link_inline" onClick={onTopicClick}>
                             {sub}
                         </AccessibleButton>
                     ),
+                    topic: () => <Linkify>{topicToHtml(topic?.text, topic?.html)}</Linkify>,
                 },
             );
         } else if (topic) {
-            topicText = _t("room|intro|topic", { topic });
+            topicText = _t(
+                "room|intro|display_topic",
+                {},
+                { topic: () => <Linkify>{topicToHtml(topic?.text, topic?.html)}</Linkify> },
+            );
         } else if (canAddTopic) {
             topicText = _t(
                 "room|intro|no_topic",
@@ -245,7 +252,7 @@ const NewRoomIntro: React.FC = () => {
                         },
                     )}
                 </p>
-                <p>{topicText}</p>
+                <p data-testid="topic">{topicText}</p>
                 {buttons}
             </React.Fragment>
         );

src/i18n/strings/en_EN.json

@@ -1998,7 +1998,9 @@
         "inaccessible_subtitle_1": "Try again later, or ask a room or space admin to check if you have access.",
         "inaccessible_subtitle_2": "%(errcode)s was returned while trying to access the room or space. If you think you're seeing this message in error, please <issueLink>submit a bug report</issueLink>.",
         "intro": {
+            "display_topic": "Topic: <topic/>",
             "dm_caption": "Only the two of you are in this conversation, unless either of you invites anyone to join.",
+            "edit_topic": "Topic: <topic/> (<a>edit</a>)",
             "enable_encryption_prompt": "Enable encryption in settings.",
             "encrypted_3pid_dm_pending_join": "Once everyone has joined, you’ll be able to chat",
             "no_avatar_label": "Add a photo, so people can easily spot your room.",
@@ -2008,8 +2010,6 @@
             "send_message_start_dm": "Send your first message to invite <displayName/> to chat",
             "start_of_dm_history": "This is the beginning of your direct message history with <displayName/>.",
             "start_of_room": "This is the start of <roomName/>.",
-            "topic": "Topic: %(topic)s ",
-            "topic_edit": "Topic: %(topic)s (<a>edit</a>)",
             "unencrypted_warning": "End-to-end encryption isn't enabled",
             "user_created": "%(displayName)s created this room.",
             "you_created": "You created this room."