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( + '
Ticket id 1234 should be linked here
' + ); + }); + + 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( + '
1234 is the ticket id.
' + ); + }); + 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}