Allow improvedTitle to return an additional JSX element (#14728)

GitOrigin-RevId: ff2c5b9d12b7ef47f658e501ccb2c69b3d5c4cf3

services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.js

@@ -67,7 +67,7 @@ function PdfLogEntry({
 PdfLogEntry.propTypes = {
   ruleId: PropTypes.string,
   sourceLocation: PreviewLogEntryHeader.propTypes.sourceLocation,
-  headerTitle: PropTypes.string,
+  headerTitle: PreviewLogEntryHeader.propTypes.headerTitle,
   headerIcon: PropTypes.element,
   rawContent: PropTypes.string,
   logType: PropTypes.string,

services/web/frontend/js/features/pdf-preview/components/pdf-logs-entries.js

@@ -25,7 +25,7 @@ function PdfLogsEntries({ entries, hasErrors }) {
         <PdfLogEntry
           key={logEntry.key}
           ruleId={logEntry.ruleId}
-          headerTitle={logEntry.message}
+          headerTitle={logEntry.messageComponent ?? logEntry.message}
           rawContent={logEntry.content}
           logType={logEntry.type}
           level={logEntry.level}

services/web/frontend/js/features/preview/components/preview-log-entry-header.js

@@ -130,7 +130,7 @@ PreviewLogEntryHeader.propTypes = {
     column: PropTypes.any,
   }),
   level: PropTypes.string.isRequired,
-  headerTitle: PropTypes.string,
+  headerTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   headerIcon: PropTypes.element,
   logType: PropTypes.string,
   showSourceLocationLink: PropTypes.bool,

services/web/frontend/js/ide/human-readable-logs/HumanReadableLogs.js

@@ -42,10 +42,16 @@ export default {
           }
         }
         if (entry.contentDetails && ruleDetails.improvedTitle) {
-          entry.message = ruleDetails.improvedTitle(
+          const message = ruleDetails.improvedTitle(
             entry.message,
             entry.contentDetails
           )
+          if (Array.isArray(message)) {
+            entry.message = message[0]
+            entry.messageComponent = message[1]
+          } else {
+            entry.message = message
+          }
         }
         // suppress any entries that are known to cascade from previous error types
         if (ruleDetails.cascadesFrom != null) {

services/web/frontend/js/ide/human-readable-logs/HumanReadableLogsRules.js → services/web/frontend/js/ide/human-readable-logs/HumanReadableLogsRules.tsx

@@ -4,7 +4,20 @@ import {
   packageSuggestionsForEnvironments,
 } from './HumanReadableLogsPackageSuggestions'
 
-const rules = [
+interface Rule {
+  ruleId: string
+  types?: string[]
+  cascadesFrom?: string[]
+  newMessage?: string
+  regexToMatch: RegExp
+  contentRegex?: RegExp
+  improvedTitle?: (
+    currentTitle: string,
+    details?: [string]
+  ) => string | [string, JSX.Element]
+}
+
+const rules: Rule[] = [
   {
     ruleId: 'hint_misplaced_alignment_tab_character',
     regexToMatch: /Misplaced alignment tab character \&/,
@@ -50,15 +63,17 @@ const rules = [
     regexToMatch: /Undefined control sequence/,
     contentRegex:
       /^(?:l\.[0-9]+|<(?:recently read|inserted text|to be read again)>)\s*(\\\S+)/,
-    improvedTitle: (currentTitle, details) => {
+    improvedTitle: (currentTitle: string, details?: [string]) => {
       if (details?.length && packageSuggestionsForCommands.has(details[0])) {
         const command = details[0]
         const suggestion = packageSuggestionsForCommands.get(command)
-        return (
+        return [
+          `Is ${suggestion.command} missing?`,
+          // eslint-disable-next-line react/jsx-key
           <span>
             Is <code>{suggestion.command}</code> missing?
-          </span>
-        )
+          </span>,
+        ]
       }
       return currentTitle
     },
@@ -67,18 +82,20 @@ const rules = [
     ruleId: 'hint_undefined_environment',
     regexToMatch: /LaTeX Error: Environment .+ undefined/,
     contentRegex: /\\begin\{(\S+)\}/,
-    improvedTitle: (currentTitle, details) => {
+    improvedTitle: (currentTitle: string, details?: [string]) => {
       if (
         details?.length &&
         packageSuggestionsForEnvironments.has(details[0])
       ) {
         const environment = details[0]
         const suggestion = packageSuggestionsForEnvironments.get(environment)
-        return (
+        return [
+          `Is ${suggestion.command} missing?`,
+          // eslint-disable-next-line react/jsx-key
           <span>
             Is <code>{suggestion.command}</code> missing?
-          </span>
-        )
+          </span>,
+        ]
       }
       return currentTitle
     },