fix(autofix): Fix bug in empty insights (#92086)

When an insights step has no cards, render the empty section as
expected.

Author: roaga

static/app/components/events/autofix/autofixInsightCards.tsx

@@ -261,7 +261,6 @@ interface CollapsibleChainLinkProps {
   groupId: string;
   runId: string;
   stepIndex: number;
-  alignment?: 'start' | 'center';
   insightCount?: number;
   isCollapsed?: boolean;
   isEmpty?: boolean;
@@ -280,7 +279,6 @@ function CollapsibleChainLink({
   stepIndex,
   groupId,
   runId,
-  alignment = 'center',
 }: CollapsibleChainLinkProps) {
   const [isAdding, setIsAdding] = useState(false);
   const [newInsightText, setNewInsightText] = useState('');
@@ -304,11 +302,8 @@ function CollapsibleChainLink({
   };
 
   return (
-    <VerticalLineContainer isEmpty={isEmpty} alignment={alignment}>
-      <RethinkButtonContainer
-        className="rethink-button-container"
-        parentAlignment={alignment}
-      >
+    <VerticalLineContainer isEmpty={isEmpty}>
+      <RethinkButtonContainer className="rethink-button-container">
         {showCollapseControl && onToggleCollapse && (
           <CollapseButtonWrapper
             onClick={onToggleCollapse}
@@ -450,7 +445,6 @@ function AutofixInsightCards({
                 stepIndex={stepIndex}
                 groupId={groupId}
                 runId={runId}
-                alignment="start"
               />
             )}
             <AnimatePresence>
@@ -489,13 +483,23 @@ function AutofixInsightCards({
                 runId={runId}
                 insightCount={validInsightCount}
                 showAddControl
-                alignment="start"
               />
             )}
           </Fragment>
         ) : stepIndex === 0 && !hasStepBelow ? (
           <NoInsightsYet />
-        ) : null}
+        ) : (
+          hasStepBelow && (
+            <CollapsibleChainLink
+              isEmpty={false}
+              stepIndex={stepIndex}
+              groupId={groupId}
+              runId={runId}
+              insightCount={validInsightCount}
+              showAddControl
+            />
+          )
+        )}
       </CardsColumn>
     </InsightsGridContainer>
   );
@@ -621,7 +625,6 @@ const InsightContainer = styled(motion.div)<{expanded?: boolean}>`
 `;
 
 const VerticalLineContainer = styled('div')<{
-  alignment?: 'start' | 'center';
   isEmpty?: boolean;
 }>`
   position: relative;
@@ -630,10 +633,6 @@ const VerticalLineContainer = styled('div')<{
   display: flex;
   padding: 0;
   min-height: ${p => (p.isEmpty ? space(4) : 'auto')};
-
-  .rethink-button-container {
-    /* Styles are now primarily in RethinkButtonContainer itself */
-  }
 `;
 
 const VerticalLine = styled('div')`
@@ -661,16 +660,15 @@ const CollapseButtonWrapper = styled('div')`
   }
 `;
 
-const RethinkButtonContainer = styled('div')<{parentAlignment?: 'start' | 'center'}>`
+const RethinkButtonContainer = styled('div')`
   position: relative;
   display: flex;
-  justify-content: ${p => (p.parentAlignment === 'start' ? 'flex-end' : 'center')};
+  justify-content: flex-end;
   align-items: center;
-  width: ${p => (p.parentAlignment === 'start' ? '100%' : 'max-content')};
-  background: ${p =>
-    p.parentAlignment === 'center' ? p.theme.background : 'transparent'};
-  border-radius: ${p => (p.parentAlignment === 'center' ? '50%' : '0')};
-  padding: ${p => (p.parentAlignment === 'center' ? space(0.25) : '0')};
+  width: 100%;
+  background: ${p => p.theme.background};
+  border-radius: 0;
+  padding: 0;
   z-index: 1;
 
   &:has(> ${CollapseButtonWrapper}) {