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("", () => {
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(
+ '
'
+ );
+ });
+
+ 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(
+ ''
+ );
+ });
+
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 ? (
-
- {silence.ticketID}
-
+
+ {i ? " " : null}
+
+ {silence.ticketID}
+
+
) : (
" " + w
)
@@ -82,7 +80,7 @@ const SilenceComment: FC<{
collapsed ? "text-truncate overflow-hidden" : ""
}`}
>
- {comment.map((w) => w)}
+ {comment}