fix(app): handle no step after current step edge case

Opentrons · Aug 7, 2024 · bb5d91d · bb5d91d
1 parent b314dd6
commit bb5d91d
Showing 1 changed file with 35 additions and 28 deletions.
diff --git a/app/src/molecules/InterventionModal/CategorizedStepContent.tsx b/app/src/molecules/InterventionModal/CategorizedStepContent.tsx
@@ -111,35 +111,42 @@ export function CategorizedStepContent(
         justifyContent={JUSTIFY_FLEX_START}
         gap={SPACING.spacing4}
       >
-        <StyledText oddStyle="bodyTextSemiBold" desktopStyle="captionSemiBold">
-          {props.bottomCategoryHeadline}
-        </StyledText>
-        {props.bottomCategoryCommands.map((command, idx) => (
-          <Flex
-            gap={SPACING.spacing8}
-            key={`${props.bottomCategory}${
-              command?.command?.commandType ?? 'unknown'
-            }${idx}`}
-            css={idx > 0 ? HIDE_ON_TOUCHSCREEN_STYLE : undefined}
+        {props.bottomCategoryCommands[0] != null ? (
+          <StyledText
+            oddStyle="bodyTextSemiBold"
+            desktopStyle="captionSemiBold"
           >
-            <CommandIndex
-              index={`${
-                command?.index == null ? '' : command.index.toString()
-              }`}
-              allowSpaceForNDigits={maxIndexLength}
-            />
-            <Command
-              {...commandAndState(
-                command,
-                props.bottomCategory,
-                props.commandTextData
-              )}
-              robotType={props.robotType}
-              aligned="left"
-              forceTwoLineClip
-            />
-          </Flex>
-        ))}
+            {props.bottomCategoryHeadline}
+          </StyledText>
+        ) : null}
+        {props.bottomCategoryCommands.map((command, idx) => {
+          return command != null ? (
+            <Flex
+              gap={SPACING.spacing8}
+              key={`${props.bottomCategory}${
+                command?.command?.commandType ?? 'unknown'
+              }${idx}`}
+              css={idx > 0 ? HIDE_ON_TOUCHSCREEN_STYLE : undefined}
+            >
+              <CommandIndex
+                index={`${
+                  command?.index == null ? '' : command.index.toString()
+                }`}
+                allowSpaceForNDigits={maxIndexLength}
+              />
+              <Command
+                {...commandAndState(
+                  command,
+                  props.bottomCategory,
+                  props.commandTextData
+                )}
+                robotType={props.robotType}
+                aligned="left"
+                forceTwoLineClip
+              />
+            </Flex>
+          ) : null
+        })}
       </Flex>
     </Flex>
   )