From 026ec4a8667303f4907e751e7ecbe16e34e5e7cd Mon Sep 17 00:00:00 2001
From: Maxim Dietz <maxim.dietz@goteleport.com>
Date: Tue, 3 Dec 2024 17:05:49 -0500
Subject: [PATCH] fix: Display of StepList with hidden items

- Use `displayIndex` prop to seperately track step numbers to display
---
 .../components/Wizard/Navigation/StepItem.tsx |  2 +-
 .../teleport/src/components/Wizard/flow.tsx   | 24 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/web/packages/teleport/src/components/Wizard/Navigation/StepItem.tsx b/web/packages/teleport/src/components/Wizard/Navigation/StepItem.tsx
index 4236d85471209..e4d946c3274a6 100644
--- a/web/packages/teleport/src/components/Wizard/Navigation/StepItem.tsx
+++ b/web/packages/teleport/src/components/Wizard/Navigation/StepItem.tsx
@@ -57,7 +57,7 @@ export function StepItem<T>(props: {
   return (
     <StepsContainer active={isDone || isActive}>
       <StepTitle>
-        <Bullet isDone={isDone} isActive={isActive} stepNumber={index + 1} />
+        <Bullet isDone={isDone} isActive={isActive} stepNumber={props.view.displayIndex ?? index + 1} />
         {props.view.title}
       </StepTitle>
     </StepsContainer>
diff --git a/web/packages/teleport/src/components/Wizard/flow.tsx b/web/packages/teleport/src/components/Wizard/flow.tsx
index c00f4d16ba7d4..1c0e38c205853 100644
--- a/web/packages/teleport/src/components/Wizard/flow.tsx
+++ b/web/packages/teleport/src/components/Wizard/flow.tsx
@@ -19,6 +19,7 @@
 export type BaseView<T> = T & {
   hide?: boolean;
   index?: number;
+  displayIndex?: number;
   views?: BaseView<T>[];
   title: string;
 };
@@ -28,13 +29,17 @@ export type BaseView<T> = T & {
  * child. This is because the first child shares the same index with its parent, so we don't
  * need to count it as it's not taking up a new index
  */
-export function computeViewChildrenSize<T>(views: BaseView<T>[]) {
+export function computeViewChildrenSize<T>(views: BaseView<T>[], constrainToVisible = false) {
   let size = 0;
   for (const view of views) {
+    if (constrainToVisible && view.hide) {
+      continue;
+    }
+
     if (view.views) {
-      size += computeViewChildrenSize(view.views);
+      size += computeViewChildrenSize(view.views, constrainToVisible);
     } else {
-      size += 1;
+      size++;
     }
   }
 
@@ -48,7 +53,8 @@ export function computeViewChildrenSize<T>(views: BaseView<T>[]) {
  */
 export function addIndexToViews<T>(
   views: BaseView<T>[],
-  index = 0
+  index = 0,
+  displayIndex = 1
 ): BaseView<T>[] {
   const result: BaseView<T>[] = [];
 
@@ -60,11 +66,15 @@ export function addIndexToViews<T>(
     };
 
     if (view.views) {
-      copy.views = addIndexToViews(view.views, index);
-
+      copy.views = addIndexToViews(view.views, index, displayIndex);
       index += computeViewChildrenSize(view.views);
     } else {
-      index += 1;
+      index ++;
+    }
+
+    if (!view.hide) {
+      copy.displayIndex = displayIndex;
+      displayIndex += (view.views ? computeViewChildrenSize(view.views, true) : 1);
     }
 
     result.push(copy);