Fixed issue for showing undefined for hidden form items

Signed-off-by: Jasper Boeijenga <jboeijenga@gmail.com>

.changeset/wet-bananas-agree.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Fixed issue for showing undefined for hidden form items

plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx

@@ -94,10 +94,10 @@ describe('ReviewState', () => {
       },
     ];
 
-    const { queryByRole } = render(
+    const { queryByRole, getAllByRole } = render(
       <ReviewState formState={formState} schemas={schemas} />,
     );
-
+    expect(getAllByRole('row').length).toEqual(1);
     expect(queryByRole('row', { name: 'Name ******' })).not.toBeInTheDocument();
   });
 

plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx

@@ -34,42 +34,44 @@ export type ReviewStateProps = {
  */
 export const ReviewState = (props: ReviewStateProps) => {
   const reviewData = Object.fromEntries(
-    Object.entries(props.formState).map(([key, value]) => {
-      for (const step of props.schemas) {
-        const parsedSchema = new JSONSchema(step.mergedSchema);
-        const definitionInSchema = parsedSchema.getSchema(
-          `#/${key}`,
-          props.formState,
-        );
-        if (definitionInSchema) {
-          const backstageReviewOptions =
-            definitionInSchema['ui:backstage']?.review;
+    Object.entries(props.formState)
+      .map(([key, value]) => {
+        for (const step of props.schemas) {
+          const parsedSchema = new JSONSchema(step.mergedSchema);
+          const definitionInSchema = parsedSchema.getSchema(
+            `#/${key}`,
+            props.formState,
+          );
+          if (definitionInSchema) {
+            const backstageReviewOptions =
+              definitionInSchema['ui:backstage']?.review;
 
-          if (backstageReviewOptions) {
-            if (backstageReviewOptions.mask) {
-              return [key, backstageReviewOptions.mask];
+            if (backstageReviewOptions) {
+              if (backstageReviewOptions.mask) {
+                return [key, backstageReviewOptions.mask];
+              }
+              if (backstageReviewOptions.show === false) {
+                return [];
+              }
             }
-            if (backstageReviewOptions.show === false) {
-              return [];
+
+            if (definitionInSchema['ui:widget'] === 'password') {
+              return [key, '******'];
             }
-          }
 
-          if (definitionInSchema['ui:widget'] === 'password') {
-            return [key, '******'];
-          }
-
-          if (definitionInSchema.enum && definitionInSchema.enumNames) {
-            return [
-              key,
-              definitionInSchema.enumNames[
-                definitionInSchema.enum.indexOf(value)
-              ] || value,
-            ];
+            if (definitionInSchema.enum && definitionInSchema.enumNames) {
+              return [
+                key,
+                definitionInSchema.enumNames[
+                  definitionInSchema.enum.indexOf(value)
+                ] || value,
+              ];
+            }
           }
         }
-      }
-      return [key, value];
-    }),
+        return [key, value];
+      })
+      .filter(prop => prop.length > 0),
   );
   return <StructuredMetadataTable metadata={reviewData} />;
 };