fix(application-system): empty title for formStepper (#15185)

* fix: empty title for formStepper * fix: use the constant I defined --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Jun 11, 2024 · a01ba02 · a01ba02
1 parent 628a19c
commit a01ba02
Showing 1 changed file with 46 additions and 31 deletions.
diff --git a/libs/application/ui-shell/src/components/FormStepper.tsx b/libs/application/ui-shell/src/components/FormStepper.tsx
@@ -53,20 +53,25 @@ const FormStepper = ({
       childrenToParse.push(child)
     })
 
-    return childrenToParse.map((child, i) => {
-      const isChildActive =
-        isParentActive && currentScreen.subSectionIndex === i
-
-      return (
-        <Text
-          variant="medium"
-          fontWeight={isChildActive ? 'semiBold' : 'regular'}
-          key={`formStepperChild-${i}`}
-        >
-          {formatText(child.title, application, formatMessage)}
-        </Text>
-      )
-    })
+    return childrenToParse
+      .map((child, i) => {
+        const isChildActive =
+          isParentActive && currentScreen.subSectionIndex === i
+        const childText = formatText(child.title, application, formatMessage)
+
+        if (!childText) return null
+
+        return (
+          <Text
+            variant="medium"
+            fontWeight={isChildActive ? 'semiBold' : 'regular'}
+            key={`formStepperChild-${i}`}
+          >
+            {childText}
+          </Text>
+        )
+      })
+      .filter(Boolean as unknown as ExcludesFalse)
   }
 
   const stepperTitle = isMobile ? null : (
@@ -85,23 +90,33 @@ const FormStepper = ({
         sections &&
         [
           stepperTitle,
-          ...sections.map((section, i) => (
-            <Section
-              key={`formStepper-${i}`}
-              isActive={currentScreen.sectionIndex === i}
-              section={formatText(section.title, application, formatMessage)}
-              sectionIndex={i}
-              subSections={
-                section.children.length > 1
-                  ? parseSubsections(
-                      section.children,
-                      currentScreen.sectionIndex === i,
-                    )
-                  : undefined
-              }
-              isComplete={currentScreen.sectionIndex > i}
-            />
-          )),
+          ...sections.map((section, i) => {
+            const sectionTitle = formatText(
+              section.title,
+              application,
+              formatMessage,
+            )
+
+            if (!sectionTitle) return null
+
+            return (
+              <Section
+                key={`formStepper-${i}`}
+                isActive={currentScreen.sectionIndex === i}
+                section={sectionTitle}
+                sectionIndex={i}
+                subSections={
+                  section.children.length > 1
+                    ? parseSubsections(
+                        section.children,
+                        currentScreen.sectionIndex === i,
+                      )
+                    : undefined
+                }
+                isComplete={currentScreen.sectionIndex > i}
+              />
+            )
+          }),
         ].filter(Boolean as unknown as ExcludesFalse)
       }
     />