fix: [DHIS2-15621] row view broken up in section (#3457)

dhis2 · Feb 26, 2024 · ce7282c · ce7282c
1 parent 187369a
commit ce7282c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 53 deletions.
diff --git a/cypress/e2e/EnrollmentPage/BreakingTheGlass/index.js b/cypress/e2e/EnrollmentPage/BreakingTheGlass/index.js
@@ -21,12 +21,12 @@ And('you create a new tei in Child programme from Ngelehun CHC', () => {
         .eq(1)
         .type('1999-09-01')
         .blur();
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .find('[data-test="capture-ui-input"]')
         .eq(0)
         .type('Breaking')
         .blur();
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .find('[data-test="capture-ui-input"]')
         .eq(1)
         .type('TheGlass')
@@ -68,7 +68,7 @@ And('you enroll the tei from Njandama MCHP', () => {
         .contains('Enroll Breaking TheGlass in this program')
         .click();
 
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .find('[data-test="capture-ui-input"]')
         .eq(8)
         .type('1999-09-01')

diff --git a/cypress/e2e/SearchForDuplicatesThroughAddRelationship/index.js b/cypress/e2e/SearchForDuplicatesThroughAddRelationship/index.js
@@ -2,7 +2,7 @@ import { When, defineStep as And } from '@badeball/cypress-cucumber-preprocessor
 import '../sharedSteps';
 
 And('you fill in the first name with values that have duplicates', () => {
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .find('[data-test="capture-ui-input"]')
         .eq(1)
         .wait(500)
@@ -11,26 +11,26 @@ And('you fill in the first name with values that have duplicates', () => {
 });
 
 And('you fill in the first name with values that have less than 5 duplicates', () => {
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .find('[data-test="capture-ui-input"]')
         .eq(1)
         .type('Sarah')
         .blur();
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .find('[data-test="capture-ui-input"]')
         .eq(2)
         .type('Fis')
         .blur();
 });
 
 And('you fill in the first name with values that have exactly 5 duplicates', () => {
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .find('[data-test="capture-ui-input"]')
         .eq(1)
         .wait(500)
         .type('Tesmi')
         .blur();
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .find('[data-test="capture-ui-input"]')
         .eq(2)
         .type('Abel')

diff --git a/cypress/e2e/sharedSteps.js b/cypress/e2e/sharedSteps.js
@@ -121,7 +121,7 @@ Then('all pagination is disabled', () => {
 
 And('you click search', () => {
     // click outside of the input for the values to be updated
-    cy.get('[data-test="d2-form-component"]')
+    cy.get('[data-test="d2-section"]')
         .click();
 
     cy.get('button')

diff --git a/src/core_modules/capture-core/components/D2Form/D2Section.component.js b/src/core_modules/capture-core/components/D2Form/D2Section.component.js
@@ -75,39 +75,34 @@ class D2SectionPlain extends React.PureComponent<Props> {
     renderSection(sectionProps) {
         const { sectionMetaData, classes, sectionId, ...passOnProps } = sectionProps;
 
-        if (!sectionMetaData.showContainer || this.props.formHorizontal) {
+        const sectionFields = (
+            // $FlowFixMe[cannot-spread-inexact] automated comment
+            <D2SectionFields
+                ref={(instance) => { this.sectionFieldsInstance = instance; }}
+                fieldsMetaData={sectionMetaData.elements}
+                customForm={sectionMetaData.customForm}
+                {...passOnProps}
+            />
+        );
+
+        if (sectionMetaData.showContainer && !this.props.formHorizontal) {
             return (
-                // $FlowFixMe[cannot-spread-inexact] automated comment
-                <D2SectionFields
-                    ref={(instance) => { this.sectionFieldsInstance = instance; }}
-                    fieldsMetaData={sectionMetaData.elements}
-                    customForm={sectionMetaData.customForm}
-                    {...passOnProps}
-                />
+                <div>
+                    <Section
+                        header={this.renderSectionHeader()}
+                        description={this.renderSectionDescription()}
+                        elevation={2}
+                        className={classes.section}
+                    >
+                        {sectionFields}
+                    </Section>
+                </div>
             );
         }
-        return (
-            <div>
-                <Section
-                    header={this.renderSectionHeader()}
-                    description={this.renderSectionDescription()}
-                    elevation={2}
-                    className={classes.section}
-                >
-                    {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
-                    <D2SectionFields
-                        ref={(instance) => {
-                            this.sectionFieldsInstance = instance;
-                        }}
-                        fieldsMetaData={sectionMetaData.elements}
-                        {...passOnProps}
-                    />
-
-                </Section>
-            </div>
-        );
+        return sectionFields;
     }
 
+
     render() {
         const { isHidden, applyCustomFormClass, ...passOnProps } = this.props;
 
@@ -116,7 +111,7 @@ class D2SectionPlain extends React.PureComponent<Props> {
         }
 
         return (<div
-            data-test="d2-form-component"
+            data-test="d2-section"
             className={applyCustomFormClass ? this.props.classes.containerCustomForm : ''}
         >
             {

diff --git a/src/core_modules/capture-core/components/D2Form/D2SectionFields.component.js b/src/core_modules/capture-core/components/D2Form/D2SectionFields.component.js
@@ -17,6 +17,15 @@ import { FormFieldPlugin } from './FormFieldPlugin';
 import { FormFieldPluginConfig } from '../../metaData/FormFieldPluginConfig';
 
 const CustomFormHOC = withCustomForm()(withDivider()(withAlternateBackgroundColors()(FormBuilderContainer)));
+
+const styles = {
+    horizontalSection: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'flex-start',
+    },
+};
+
 type FormsValues = {
     [id: string]: any
 };
@@ -178,8 +187,8 @@ export class D2SectionFieldsComponent extends Component<Props> {
     getInvalidFields() {
         const messagesInvalidFields = Object.keys(this.props.rulesMessages).reduce((accInvalidFields, key) => {
             if (this.props.rulesMessages[key] &&
-                    (this.props.rulesMessages[key][messageStateKeys.ERROR] ||
-                        this.props.rulesMessages[key][messageStateKeys.ERROR_ON_COMPLETE])) {
+                (this.props.rulesMessages[key][messageStateKeys.ERROR] ||
+                    this.props.rulesMessages[key][messageStateKeys.ERROR_ON_COMPLETE])) {
                 accInvalidFields[key] = true;
             }
             return accInvalidFields;
@@ -273,19 +282,24 @@ export class D2SectionFieldsComponent extends Component<Props> {
         this.buildRulesCompulsoryErrors();
 
         return (
-            // $FlowFixMe[cannot-spread-inexact] automated comment
-            <CustomFormHOC
-                formBuilderRef={(instance) => { this.formBuilderInstance = instance; }}
-                id={formId}
-                fields={this.getFieldConfigWithRulesEffects()}
-                dataElements={this.formFields}
-                values={values}
-                onUpdateField={this.handleUpdateField}
-                onUpdateFieldAsync={this.handleUpdateFieldAsync}
-                validateIfNoUIData
-                loadNr={loadNr}
-                {...passOnProps}
-            />
+            <div
+                data-test="d2-section-fields"
+                style={this.props.formHorizontal ? styles.horizontalSection : {}}
+            >
+                {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
+                <CustomFormHOC
+                    formBuilderRef={(instance) => { this.formBuilderInstance = instance; }}
+                    id={formId}
+                    fields={this.getFieldConfigWithRulesEffects()}
+                    dataElements={this.formFields}
+                    values={values}
+                    onUpdateField={this.handleUpdateField}
+                    onUpdateFieldAsync={this.handleUpdateFieldAsync}
+                    validateIfNoUIData
+                    loadNr={loadNr}
+                    {...passOnProps}
+                />
+            </div>
         );
     }
 }