From e51f4d69404b7d73f0b4744249b0800765b42a76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 20 May 2021 09:57:27 +0100
Subject: [PATCH] fix(ui): linkify only ticket id

---
 .../ManagedSilence/SilenceComment.test.tsx    |  4 ++-
 .../ManagedSilence/SilenceComment.tsx         | 32 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/ui/src/Components/ManagedSilence/SilenceComment.test.tsx b/ui/src/Components/ManagedSilence/SilenceComment.test.tsx
index 5db19e7ad..24926cde8 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.test.tsx
+++ b/ui/src/Components/ManagedSilence/SilenceComment.test.tsx
@@ -110,13 +110,15 @@ describe("<SilenceComment />", () => {
   it("Renders a JIRA link if present", () => {
     silence.ticketURL = "http://localhost/1234";
     silence.ticketID = "1234";
+    silence.comment = "Ticket id 1234 and also 1234";
     const tree = MountedSilenceComment(true);
-    expect(tree.find("a[href='http://localhost/1234']")).toHaveLength(1);
+    expect(tree.find("a[href='http://localhost/1234']")).toHaveLength(2);
   });
 
   it("Renders a JIRA link if present and comment is expanded", () => {
     silence.ticketURL = "http://localhost/1234";
     silence.ticketID = "1234";
+    silence.comment = "Ticket id 1234";
     const tree = MountedSilenceComment(false);
     expect(tree.find("a[href='http://localhost/1234']")).toHaveLength(1);
   });
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.tsx b/ui/src/Components/ManagedSilence/SilenceComment.tsx
index 481815feb..6bd276b97 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.tsx
+++ b/ui/src/Components/ManagedSilence/SilenceComment.tsx
@@ -27,22 +27,20 @@ const SilenceComment: FC<{
   collapseToggle,
   alertStore,
 }) => {
-  const comment = silence.ticketURL ? (
-    <a
-      href={silence.ticketURL}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={
-        collapsed
-          ? "components-managed-silence-comment mw-100 text-truncate d-block"
-          : "components-managed-silence-comment"
-      }
-    >
-      <FontAwesomeIcon className="me-2" icon={faExternalLinkAlt} />
-      {silence.comment}
-    </a>
-  ) : (
-    silence.comment
+  const comment = silence.comment.split(" ").map((w, i) =>
+    silence.ticketURL && w === silence.ticketID ? (
+      <a
+        key={i}
+        href={silence.ticketURL}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FontAwesomeIcon className="me-2" icon={faExternalLinkAlt} />
+        {silence.ticketID}
+      </a>
+    ) : (
+      " " + w
+    )
   );
 
   return (
@@ -60,7 +58,7 @@ const SilenceComment: FC<{
               collapsed ? "text-truncate overflow-hidden" : ""
             }`}
           >
-            {comment}
+            {comment.map((w) => w)}
           </div>
           <div className="components-managed-silence-cite mt-1">
             <span className="text-muted me-2 font-italic">