✨ Add wrapper for comment

app/reports/page-content.tsx

@@ -419,10 +419,14 @@ const getQueueItems = async (
   const pageSize = 100
 
   if (queueName && queueSetting?.queueNames.length) {
-    queryParams.queueCount = queueSetting.queueNames.length
-    queryParams.queueIndex = queueSetting.queueNames.indexOf(queueName)
-    if (queueSetting.queueSeed) {
-      queryParams.queueSeed = queueSetting.queueSeed
+    const queueIndex = queueSetting.queueNames.indexOf(queueName)
+    // Only apply queue filters if the user is looking at a queue that exists in the list of queues
+    if (queueIndex >= 0) {
+      queryParams.queueIndex = queueIndex
+      queryParams.queueCount = queueSetting.queueNames.length
+      if (queueSetting.queueSeed) {
+        queryParams.queueSeed = queueSetting.queueSeed
+      }
     }
   }
   const { data } = await labelerAgent.tools.ozone.moderation.queryStatuses({

components/mod-event/EventItem.tsx

@@ -31,6 +31,38 @@ const LinkToAuthor = ({
   )
 }
 
+// Utility function to detect and replace links with <a> tags
+const wrapLinksInText = (text: string): JSX.Element[] => {
+  // Regular expression to match URLs
+  const urlRegex = /(https?:\/\/[^\s]+)/g
+
+  // Split text into parts, with URLs as matches
+  const parts = text.split(urlRegex)
+
+  return parts.map((part, index) => {
+    if (urlRegex.test(part)) {
+      // If part matches a URL, return it as a link
+      return (
+        <a
+          key={index}
+          href={part}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="break-all underline"
+        >
+          {part}
+        </a>
+      )
+    }
+    // Otherwise, return it as plain text
+    return <span key={index}>{part}</span>
+  })
+}
+
+const TextWithLinks: React.FC<{ text: string }> = ({ text }) => {
+  return <p className="whitespace-pre-wrap">{wrapLinksInText(text)}</p>
+}
+
 const Comment = ({
   modEvent,
 }: {
@@ -60,7 +92,9 @@ const Comment = ({
           )}
         </div>
       </div>
-      {modEvent.event.comment && <p>{modEvent.event.comment}</p>}
+      {modEvent.event.comment && (
+        <TextWithLinks text={modEvent.event.comment} />
+      )}
       {/* This is only for legacy actions, new actions won't have these properties for these events */}
       <EventLabels
         header="Added: "
@@ -141,7 +175,7 @@ const Report = ({
         </div>
       </div>
       {modEvent.event.comment && (
-        <p className="mt-1">{modEvent.event.comment}</p>
+        <TextWithLinks text={modEvent.event.comment} />
       )}
 
       {isMessageSubject(modEvent.subject) && (