fix(ui): correctly wrap links in comments

ui/src/Components/ManagedSilence/SilenceComment.js

@@ -11,15 +11,27 @@ import { APISilence } from "Models/API";
 import { SilenceProgress } from "./SilenceProgress";
 
 const SilenceComment = ({ silence, collapsed, afterUpdate }) => {
-  const comment = (
+  const commentBody = (
+    <Truncate className="font-italic" lines={collapsed ? 2 : false}>
+      {silence.comment}
+    </Truncate>
+  );
+  const comment = silence.jiraURL ? (
+    <a href={silence.jiraURL} target="_blank" rel="noopener noreferrer">
+      <FontAwesomeIcon className="mr-2" icon={faExternalLinkAlt} />
+      {commentBody}
+    </a>
+  ) : (
+    commentBody
+  );
+
+  return (
     <div className="d-flex flex-row">
       <div className="flex-shrink-0 flex-grow-0  mr-2">
         <FontAwesomeIcon icon={faBellSlash} className="text-muted" />
       </div>
       <div className="flex-shrink-1 flex-grow-1">
-        <Truncate className="font-italic" lines={collapsed ? 2 : false}>
-          {silence.comment}
-        </Truncate>
+        {comment}
         <span className="blockquote-footer pt-1">
           <cite className="components-grid-alertgroup-silences mr-2">
             {silence.createdBy}
@@ -29,15 +41,6 @@ const SilenceComment = ({ silence, collapsed, afterUpdate }) => {
       </div>
     </div>
   );
-  if (silence.jiraURL) {
-    return (
-      <a href={silence.jiraURL} target="_blank" rel="noopener noreferrer">
-        <FontAwesomeIcon className="mr-2" icon={faExternalLinkAlt} />
-        {comment}
-      </a>
-    );
-  }
-  return <React.Fragment>{comment}</React.Fragment>;
 };
 SilenceComment.propTypes = {
   silence: APISilence.isRequired,

ui/src/Components/ManagedSilence/SilenceComment.test.js

@@ -39,4 +39,11 @@ describe("<SilenceComment />", () => {
     const tree = MountedSilenceComment(true);
     expect(tree.find("a[href='http://localhost/1234']")).toHaveLength(1);
   });
+
+  it("Renders a JIRA link if present and comment is expanded", () => {
+    silence.jiraURL = "http://localhost/1234";
+    silence.jiraID = "1234";
+    const tree = MountedSilenceComment(false);
+    expect(tree.find("a[href='http://localhost/1234']")).toHaveLength(1);
+  });
 });