From 2bb895ac47f2ed2978d62ab29fefa20c77fa07e1 Mon Sep 17 00:00:00 2001
From: Rohan Agarwal <rohan.agarwal@sentry.io>
Date: Mon, 29 Jul 2024 11:41:43 -0700
Subject: [PATCH] Add markdown to collapsed Autofix step

---
 .../events/autofix/autofixSteps.tsx           | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/static/app/components/events/autofix/autofixSteps.tsx b/static/app/components/events/autofix/autofixSteps.tsx
index ddc8a0ae1f8ab4..671b742470a213 100644
--- a/static/app/components/events/autofix/autofixSteps.tsx
+++ b/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>