From ef2928ff13c36a54048b4302257bf07d9e1274cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 21 Sep 2022 17:23:24 +0100
Subject: [PATCH] fix(ui): don't eat spaces when renering links

Fixes #4706
---
 .../ManagedSilence/SilenceComment.test.tsx    | 20 +++++++++++++++++++
 .../ManagedSilence/SilenceComment.tsx         | 18 ++++++++---------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/ui/src/Components/ManagedSilence/SilenceComment.test.tsx b/ui/src/Components/ManagedSilence/SilenceComment.test.tsx
index 0201f1a3e..97c2ddadc 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.test.tsx
+++ b/ui/src/Components/ManagedSilence/SilenceComment.test.tsx
@@ -122,6 +122,26 @@ describe("<SilenceComment />", () => {
     expect(tree.find("a[href='http://localhost/1234']")).toHaveLength(1);
   });
 
+  it("Correctly renders comments with spaces", () => {
+    silence.ticketURL = "http://localhost/1234";
+    silence.ticketID = "1234";
+    silence.comment = "Ticket id 1234 should be linked here";
+    const tree = MountedSilenceComment(false);
+    expect(tree.html()).toContain(
+      '<div class="components-managed-silence-comment "> Ticket id <a href="http://localhost/1234" target="_blank" rel="noopener noreferrer">1234</a> should be linked here</div>'
+    );
+  });
+
+  it("Correctly renders comments starting with a link", () => {
+    silence.ticketURL = "http://localhost/1234";
+    silence.ticketID = "1234";
+    silence.comment = "1234 is the ticket id.";
+    const tree = MountedSilenceComment(false);
+    expect(tree.html()).toContain(
+      '<div class="components-managed-silence-comment "><a href="http://localhost/1234" target="_blank" rel="noopener noreferrer">1234</a> is the ticket id.</div>'
+    );
+  });
+
   it("collapseToggle is called when collapse icon is clicked", () => {
     const tree = MountedSilenceComment(true);
     const collapse = tree.find("svg.fa-chevron-down");
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.tsx b/ui/src/Components/ManagedSilence/SilenceComment.tsx
index ca4ad271c..656118a29 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.tsx
+++ b/ui/src/Components/ManagedSilence/SilenceComment.tsx
@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import { Fragment, FC } from "react";
 
 import { observer } from "mobx-react-lite";
 
@@ -57,14 +57,12 @@ const SilenceComment: FC<{
   }) => {
     const comment = silence.comment.split(" ").map((w, i) =>
       silence.ticketURL && w === silence.ticketID ? (
-        <a
-          key={i}
-          href={silence.ticketURL}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {silence.ticketID}
-        </a>
+        <Fragment key={i}>
+          {i ? " " : null}
+          <a href={silence.ticketURL} target="_blank" rel="noopener noreferrer">
+            {silence.ticketID}
+          </a>
+        </Fragment>
       ) : (
         " " + w
       )
@@ -82,7 +80,7 @@ const SilenceComment: FC<{
                 collapsed ? "text-truncate overflow-hidden" : ""
               }`}
             >
-              {comment.map((w) => w)}
+              {comment}
             </div>
             <div className="components-managed-silence-cite mt-1 d-flex flex-row">
               <span