fix: Display of StepList with hidden items

- Use `displayIndex` prop to seperately track step numbers to display

web/packages/teleport/src/components/Wizard/Navigation/StepItem.tsx

@@ -57,7 +57,11 @@ 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>

web/packages/teleport/src/components/Wizard/flow.test.tsx

@@ -42,9 +42,11 @@ test('computeViewChildrenSize', async () => {
     },
     {
       title: 'Banana',
+      hide: true,
     },
   ];
   expect(computeViewChildrenSize(nestedViews)).toBe(3);
+  expect(computeViewChildrenSize(nestedViews, true)).toBe(2);
 
   const notNestedViews = [
     {

web/packages/teleport/src/components/Wizard/flow.tsx

@@ -17,24 +17,37 @@
  */
 
 export type BaseView<T> = T & {
+  // whether to hide the view from the list of views
   hide?: boolean;
+  // current step index in the wizard
   index?: number;
+  // current visible step index in the wizard (ignoring hidden steps)
+  displayIndex?: number;
   views?: BaseView<T>[];
   title: string;
 };
 
 /**
  * computeViewChildrenSize calculates how many children a view has, without counting the first
  * 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
+ * need to count it as it's not taking up a new index.
+ *
+ * If `constrainToVisible` is true, then we only count the visible views.
  */
-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 +61,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 +74,17 @@ 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);