From 0e44278d72d2862f8a0516b51d228712004aaafc Mon Sep 17 00:00:00 2001
From: Mike Donnalley <mdonnalley@salesforce.com>
Date: Thu, 29 Aug 2024 14:45:32 -0600
Subject: [PATCH] fix: show stage count in semi-compact stage view

---
 src/components/stages.tsx       | 30 +++++++++++++++++-------------
 test/components/stages.test.tsx | 10 +++++-----
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/stages.tsx b/src/components/stages.tsx
index 58a553e..dff897a 100644
--- a/src/components/stages.tsx
+++ b/src/components/stages.tsx
@@ -205,6 +205,7 @@ function Infos({
 
 function CompactStage({
   design,
+  direction = 'row',
   error,
   stage,
   stageSpecificBlock,
@@ -212,6 +213,7 @@ function CompactStage({
   status,
 }: {
   readonly design: RequiredDesign
+  readonly direction?: 'row' | 'column'
   readonly error?: Error
   readonly stage: string
   readonly stageSpecificBlock: FormattedKeyValue[] | undefined
@@ -220,7 +222,7 @@ function CompactStage({
 }): React.ReactNode {
   if (status !== 'current') return false
   return (
-    <Box flexDirection="row">
+    <Box flexDirection={direction}>
       <SpinnerOrError
         error={error}
         label={`[${stageTracker.indexOf(stage) + 1}/${stageTracker.size}] ${capitalCase(stage)}`}
@@ -299,7 +301,7 @@ function StageEntries({
   return (
     <>
       {/*
-        Non-Compact view
+        Non-Compact view (compactionLevel === 0)
         ✔ Stage 1 0ms
           ▸ stage specific info
         ⣾ Stage 2 0ms
@@ -307,17 +309,18 @@ function StageEntries({
         ◼ Stage 3 0ms
           ▸ stage specific info
 
-        Compact view
-        ⣾ [1/3] Stage 1 ▸ stage specific info
+        Semi-Compact view (compactionLevel < 6)
+        ⣾ [1/3] Stage 1 0ms
+          ▸ stage specific info
+
+        Compact view (compactionLevel >= 6)
+        ⣾ [1/3] Stage 1 ▸ stage specific info 0ms
       */}
       {[...stageTracker.entries()].map(([stage, status]) => (
         <Box key={stage} flexDirection="column">
           <Box>
-            {compactionLevel < 6 ? (
-              // Render the stage name and spinner but hide it if the stage is not current and compactionLevel > 0
-              <Box display={compactionLevel === 0 ? 'flex' : status === 'current' ? 'flex' : 'none'}>
-                <Stage stage={stage} status={status} design={design} error={error} />
-              </Box>
+            {compactionLevel === 0 ? (
+              <Stage stage={stage} status={status} design={design} error={error} />
             ) : (
               // Render the stage name, spinner, and stage specific info
               <CompactStage
@@ -327,6 +330,7 @@ function StageEntries({
                 error={error}
                 stageSpecificBlock={stageSpecificBlock}
                 stageTracker={stageTracker}
+                direction={compactionLevel >= 6 ? 'row' : 'column'}
               />
             )}
 
@@ -344,7 +348,7 @@ function StageEntries({
           </Box>
 
           {/* Render the stage specific info for non-compact view */}
-          {compactionLevel < 6 &&
+          {compactionLevel === 0 &&
             stageSpecificBlock &&
             stageSpecificBlock.length > 0 &&
             status !== 'pending' &&
@@ -428,9 +432,9 @@ export function determineCompactionLevel(
     const status = stageTracker.get(stage) ?? 'pending'
     const skipped = status === 'skipped' ? ' - Skipped' : ''
     // We don't have access to the exact stage time, so we're taking a conservative estimate of
-    // 7 characters + 1 character for the space between the stage and timer,
-    // examples: 999ms (5), 59s (3), 59m 59s (7), 23h 59m (7)
-    const stageTimeLength = hasStageTime ? 8 : 0
+    // 10 characters + 1 character for the space between the stage and timer,
+    // examples: 999ms (5), 59.99s (6), 59m 59.99s (10), 23h 59m (7)
+    const stageTimeLength = hasStageTime ? 11 : 0
     if (
       // 1 for the left margin
       1 +
diff --git a/test/components/stages.test.tsx b/test/components/stages.test.tsx
index d5c1335..f3729b2 100644
--- a/test/components/stages.test.tsx
+++ b/test/components/stages.test.tsx
@@ -242,7 +242,7 @@ describe('Stages', () => {
       const lastFrame = renderStages(1)
       expect(lastFrame).to.include('─ Test ─')
       expect(lastFrame).to.include('pre-stage hello')
-      expect(lastFrame).to.include(`Step1 0ms`)
+      expect(lastFrame).to.include(`[1/2] Step1`)
       expect(lastFrame).to.not.include(`${design.icons.pending.figure} Step2`)
       expect(lastFrame).to.include('stage-specific hello')
       expect(lastFrame).to.include('post-stage hello')
@@ -253,7 +253,7 @@ describe('Stages', () => {
       const lastFrame = renderStages(2)
       expect(lastFrame).to.include('─ Test ─')
       expect(lastFrame).to.include('pre-stage hello')
-      expect(lastFrame).to.include(`Step1 0ms`)
+      expect(lastFrame).to.include(`[1/2] Step1`)
       expect(lastFrame).to.not.include(`${design.icons.pending.figure} Step2`)
       expect(lastFrame).to.include('stage-specific hello')
       expect(lastFrame).to.include('post-stage hello')
@@ -264,7 +264,7 @@ describe('Stages', () => {
       const lastFrame = renderStages(3)
       expect(lastFrame).to.not.include('─ Test ─')
       expect(lastFrame).to.include('pre-stage hello')
-      expect(lastFrame).to.include(`Step1 0ms`)
+      expect(lastFrame).to.include(`[1/2] Step1`)
       expect(lastFrame).to.not.include(`${design.icons.pending.figure} Step2`)
       expect(lastFrame).to.include('stage-specific hello')
       expect(lastFrame).to.include('post-stage hello')
@@ -275,7 +275,7 @@ describe('Stages', () => {
       const lastFrame = renderStages(4)
       expect(lastFrame).to.not.include('─ Test ─')
       expect(lastFrame).to.not.include('pre-stage hello')
-      expect(lastFrame).to.include(`Step1 0ms`)
+      expect(lastFrame).to.include(`[1/2] Step1`)
       expect(lastFrame).to.not.include(`${design.icons.pending.figure} Step2`)
       expect(lastFrame).to.include('stage-specific hello')
       expect(lastFrame).to.include('post-stage hello')
@@ -286,7 +286,7 @@ describe('Stages', () => {
       const lastFrame = renderStages(5)
       expect(lastFrame).to.not.include('─ Test ─')
       expect(lastFrame).to.not.include('pre-stage hello')
-      expect(lastFrame).to.include(`Step1 0ms`)
+      expect(lastFrame).to.include(`[1/2] Step1`)
       expect(lastFrame).to.not.include(`${design.icons.pending.figure} Step2`)
       expect(lastFrame).to.include('stage-specific hello')
       expect(lastFrame).to.not.include('post-stage hello')