Browse Source

Add markdown to collapsed Autofix step (#75179)

Adds markdown parsing to the active log displayed when the running step
in Autofix is collapsed.
<img width="972" alt="Screenshot 2024-07-29 at 11 43 23 AM"
src="https://github.com/user-attachments/assets/035f7722-3b7d-41e7-88f0-328bf04f6dde">
Rohan Agarwal 7 months ago
parent
commit
709e8b2244
1 changed files with 14 additions and 10 deletions
  1. 14 10
      static/app/components/events/autofix/autofixSteps.tsx

+ 14 - 10
static/app/components/events/autofix/autofixSteps.tsx

@@ -100,6 +100,15 @@ function isProgressLog(
   return 'message' in item && 'timestamp' in item;
 }
 
+function replaceHeadersWithBold(markdown: string) {
+  const headerRegex = /^(#{1,6})\s+(.*)$/gm;
+  const boldMarkdown = markdown.replace(headerRegex, (_match, _hashes, content) => {
+    return ` **${content}** `;
+  });
+
+  return boldMarkdown;
+}
+
 function Progress({
   progress,
   groupId,
@@ -111,15 +120,6 @@ function Progress({
   progress: AutofixProgressItem | AutofixStep;
   runId: string;
 }) {
-  function replaceHeadersWithBold(markdown: string) {
-    const headerRegex = /^(#{1,6})\s+(.*)$/gm;
-    const boldMarkdown = markdown.replace(headerRegex, (_match, _hashes, content) => {
-      return ` **${content}** `;
-    });
-
-    return boldMarkdown;
-  }
-
   if (isProgressLog(progress)) {
     const html = progress.message.includes('\n')
       ? marked(replaceHeadersWithBold(progress.message), {
@@ -213,7 +213,11 @@ export function ExpandableStep({
             }}
           />
           {activeLog && !isExpanded && (
-            <StepHeaderDescription>{activeLog}</StepHeaderDescription>
+            <StepHeaderDescription
+              dangerouslySetInnerHTML={{
+                __html: singleLineRenderer(replaceHeadersWithBold(activeLog)),
+              }}
+            />
           )}
         </StepHeaderLeft>
         <StepHeaderRight>