fix(v1.7.0): Improvement to only show items with values in review

CHANGELOG.md

@@ -31,6 +31,7 @@
 - "Choose a new password" form now allows the user to submit the form using the "Enter/Return" key [#5502](https://github.com/opencrvs/opencrvs-core/issues/5502)
 - Dropdown options now flow to multiple rows in forms [#7653](https://github.com/opencrvs/opencrvs-core/pull/7653)
 - Only render units/postfix when field has a value [#7055](https://github.com/opencrvs/opencrvs-core/issues/7055)
+- Only show items with values in review [#5192](https://github.com/opencrvs/opencrvs-core/pull/5192)
 
 ## 1.6.0 Release candidate
 

packages/client/src/views/RegisterForm/review/ReviewSection.test.tsx

@@ -20,7 +20,8 @@ import {
   LOCATION_SEARCH_INPUT,
   DATE,
   DOCUMENT_UPLOADER_WITH_OPTION,
-  IForm
+  IForm,
+  TEXT
   // MarriageSection
 } from '@client/forms'
 import { Event as DeclarationEvent, RegStatus } from '@client/utils/gateway'
@@ -608,6 +609,168 @@ describe('when in device of large viewport', () => {
       expect(text).not.toContain('inches')
     })
   })
+
+  describe('when form has empty field in a group', () => {
+    let reviewSectionComponent: ReactWrapper<{}, {}>
+
+    beforeAll(() => {
+      vi.resetAllMocks()
+    })
+
+    beforeEach(async () => {
+      vi.spyOn(profileSelectors, 'getScope').mockReturnValue(['register'])
+      const form = {
+        sections: [
+          {
+            id: 'registration',
+            viewType: 'hidden',
+            name: {
+              defaultMessage: 'Registration',
+              description: 'Form section name for Registration',
+              id: 'form.section.declaration.name'
+            },
+            groups: []
+          },
+          {
+            id: 'child',
+            viewType: 'form' as ViewType,
+            title: formMessages.childTitle,
+            name: formMessages.childTitle,
+            groups: [
+              {
+                id: 'child-view-group',
+                fields: [
+                  {
+                    name: 'addressLine1Placeofbirth',
+                    type: TEXT,
+                    required: false,
+                    validator: [],
+                    previewGroup: 'address',
+                    label: {
+                      defaultMessage: 'TestAddress 1',
+                      id: 'test1'
+                    }
+                  },
+                  {
+                    name: 'addressLine2Placeofbirth',
+                    type: TEXT,
+                    required: false,
+                    validator: [],
+                    previewGroup: 'address',
+                    label: {
+                      defaultMessage: 'TestAddress 2',
+                      id: 'test2'
+                    }
+                  },
+                  {
+                    name: 'addressLine3Placeofbirth',
+                    type: TEXT,
+                    required: false,
+                    validator: [],
+                    previewGroup: 'address',
+                    label: {
+                      defaultMessage: 'TestAddress 3',
+                      id: 'test3'
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: 'documents',
+            name: formMessages.documentsName,
+            title: formMessages.documentsTitle,
+            viewType: 'form' as ViewType,
+            groups: [
+              {
+                id: 'documents-view-group',
+                fields: [
+                  {
+                    name: 'uploadDocForMother',
+                    extraValue: 'MOTHER',
+                    type: DOCUMENT_UPLOADER_WITH_OPTION,
+                    label: formMessages.uploadDocForMother,
+                    required: true,
+                    validator: [],
+                    options: [
+                      {
+                        label: formMessages.docTypeBirthCert,
+                        value: 'BIRTH_CERTIFICATE'
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: 'preview',
+            viewType: 'preview',
+            name: {
+              defaultMessage: 'Preview',
+              description: 'Form section name for Preview',
+              id: 'register.form.section.preview.name'
+            },
+            title: {
+              defaultMessage: 'Preview',
+              description: 'Form section title for Preview',
+              id: 'register.form.section.preview.title'
+            },
+            groups: [
+              {
+                id: 'preview-view-group',
+                fields: []
+              }
+            ]
+          }
+        ]
+      } satisfies IForm
+
+      const data = {
+        child: {
+          addressLine1Placeofbirth: 'District 9',
+          addressLine2Placeofbirth: '',
+          addressLine3Placeofbirth: 'Suburb 7'
+        },
+        documents: {}
+      }
+
+      const simpleDraft = createReviewDeclaration(
+        uuid(),
+        data,
+        DeclarationEvent.Birth
+      )
+
+      const testComponent = await createTestComponent(
+        <ReviewSection
+          form={form}
+          pageRoute={REVIEW_EVENT_PARENT_FORM_PAGE}
+          draft={simpleDraft}
+          rejectDeclarationClickEvent={mockHandler}
+          submitClickEvent={mockHandler}
+          userDetails={userDetails}
+        />,
+        { store, history }
+      )
+      reviewSectionComponent = testComponent
+    })
+
+    it('renders only fields with values', () => {
+      const addressList = reviewSectionComponent.find({
+        'data-test-id': 'row-value-TestAddress'
+      })
+
+      const innerHtml = addressList
+        .children()
+        .map((n) => n.html())
+        .join('')
+
+      const addressLines = innerHtml.split('<br>')
+
+      expect(addressLines.length).toBe(2)
+    })
+  })
 })
 
 describe('when in device of small viewport', () => {

packages/client/src/views/RegisterForm/review/ReviewSection.tsx

@@ -1102,7 +1102,7 @@ class ReviewSectionComp extends React.Component<FullProps, State> {
         .map((field) =>
           this.getValueOrError(section, draft.data, field, errorsOnFields)
         )
-        .filter((value) => value)
+        .filter((value) => value.props.children)
       let completeValue = values[0]
       values.shift()
       values.forEach(
@@ -1146,7 +1146,7 @@ class ReviewSectionComp extends React.Component<FullProps, State> {
               true
             )
           )
-          .filter((value) => value)
+          .filter((value) => value.props.children)
         let previousCompleteValue = <Deleted>{previousValues[0]}</Deleted>
         previousValues.shift()
         previousValues.forEach(