From ac522fb5022c83ae72791547cd1fa4b45baa1288 Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Thu, 28 Sep 2023 13:46:10 +0200
Subject: [PATCH] fix: handle sections without data elements [DHIS2-15883]

---
 .../indicators-table-body.js                  |  14 +-
 .../indicators-table-body.test.js             | 127 ++++++++++++++++++
 src/data-workspace/section-form/section.js    |   5 +-
 3 files changed, 140 insertions(+), 6 deletions(-)
 create mode 100644 src/data-workspace/indicators-table-body/indicators-table-body.test.js

diff --git a/src/data-workspace/indicators-table-body/indicators-table-body.js b/src/data-workspace/indicators-table-body/indicators-table-body.js
index 25269a0cd..a09320065 100644
--- a/src/data-workspace/indicators-table-body/indicators-table-body.js
+++ b/src/data-workspace/indicators-table-body/indicators-table-body.js
@@ -16,7 +16,7 @@ import { IndicatorTableCell } from './indicator-table-cell.js'
 export const IndicatorsTableBody = ({
     indicators,
     maxColumnsInSection,
-    renderColumnTotals,
+    renderRowTotals,
     filterText,
     globalFilterText,
 }) => {
@@ -28,8 +28,8 @@ export const IndicatorsTableBody = ({
         )
     })
     const hiddenItemsCount = indicators.length - filteredIndicators.length
-    const nrOfPadColumns = maxColumnsInSection - (renderColumnTotals ? 0 : 1)
-    const padColumns = Array(nrOfPadColumns).fill(0)
+    const nrOfPadColumns = maxColumnsInSection - (renderRowTotals ? 0 : 1)
+    const padColumns = nrOfPadColumns > 0 ? Array(nrOfPadColumns).fill(0) : []
 
     return (
         <TableBody>
@@ -50,7 +50,10 @@ export const IndicatorsTableBody = ({
 
             {filteredIndicators.map((indicator) => {
                 return (
-                    <TableRow key={indicator.id}>
+                    <TableRow
+                        key={indicator.id}
+                        dataTest="dhis2-dataentry-indicatorstablerow"
+                    >
                         <TableCell className={cx(styles.dataElementName)}>
                             {indicator.displayFormName}
                         </TableCell>
@@ -64,6 +67,7 @@ export const IndicatorsTableBody = ({
                             <TableCell
                                 key={i}
                                 className={styles.paddingCell}
+                                dataTest="dhis2-dataentry-indicatorspaddingcell"
                             ></TableCell>
                         ))}
                     </TableRow>
@@ -88,5 +92,5 @@ IndicatorsTableBody.propTypes = {
     filterText: PropTypes.string,
     globalFilterText: PropTypes.string,
     maxColumnsInSection: PropTypes.number,
-    renderColumnTotals: PropTypes.bool,
+    renderRowTotals: PropTypes.bool,
 }
diff --git a/src/data-workspace/indicators-table-body/indicators-table-body.test.js b/src/data-workspace/indicators-table-body/indicators-table-body.test.js
new file mode 100644
index 000000000..4a1990d05
--- /dev/null
+++ b/src/data-workspace/indicators-table-body/indicators-table-body.test.js
@@ -0,0 +1,127 @@
+import { getAllByTestId, queryAllByTestId } from '@testing-library/react'
+import React from 'react'
+import { render } from '../../test-utils/index.js'
+import { FinalFormWrapper } from '../final-form-wrapper.js'
+import { IndicatorsTableBody } from './indicators-table-body.js'
+
+const tableIndicators = [
+    {
+        name: 'indieGator',
+        displayFormName: "I'm an indicator!",
+        decimals: 2,
+        indicatorType: {
+            factor: 1,
+        },
+        numerator: '#{fakeUID1}',
+        denominator: '#{fakeUID2}',
+        id: 'indicator1',
+    },
+]
+
+describe('<IndicatorsTableBody />', () => {
+    it('should not render padding cells if maxColumnsInSection=0', () => {
+        const result = render(
+            <IndicatorsTableBody
+                indicators={tableIndicators}
+                maxColumnsInSection={0}
+            />,
+            {
+                wrapper: ({ children }) => (
+                    <FinalFormWrapper dataValueSet={{}}>
+                        {children}
+                    </FinalFormWrapper>
+                ),
+            }
+        )
+
+        const inputRows = result.getAllByTestId(
+            'dhis2-dataentry-indicatorstablerow'
+        )
+
+        const cellsInFirstRow = queryAllByTestId(
+            inputRows[0],
+            'dhis2-dataentry-indicatorspaddingcell'
+        )
+        expect(cellsInFirstRow.length).toBe(0)
+    })
+
+    it('should not render padding cells if maxColumnsInSection=-Infinity', () => {
+        const result = render(
+            <IndicatorsTableBody
+                indicators={tableIndicators}
+                maxColumnsInSection={-Infinity}
+            />,
+            {
+                wrapper: ({ children }) => (
+                    <FinalFormWrapper dataValueSet={{}}>
+                        {children}
+                    </FinalFormWrapper>
+                ),
+            }
+        )
+
+        const inputRows = result.getAllByTestId(
+            'dhis2-dataentry-indicatorstablerow'
+        )
+        expect(inputRows.length).toBe(1)
+
+        const cellsInFirstRow = queryAllByTestId(
+            inputRows[0],
+            'dhis2-dataentry-indicatorspaddingcell'
+        )
+        expect(cellsInFirstRow.length).toBe(0)
+    })
+
+    it('should render 3 padding cells if 1 indicator and maxColumnsInSection=4', () => {
+        const result = render(
+            <IndicatorsTableBody
+                indicators={tableIndicators}
+                maxColumnsInSection={4}
+            />,
+            {
+                wrapper: ({ children }) => (
+                    <FinalFormWrapper dataValueSet={{}}>
+                        {children}
+                    </FinalFormWrapper>
+                ),
+            }
+        )
+
+        const inputRows = result.getAllByTestId(
+            'dhis2-dataentry-indicatorstablerow'
+        )
+
+        const cellsInFirstRow = getAllByTestId(
+            inputRows[0],
+            'dhis2-dataentry-indicatorspaddingcell'
+        )
+        expect(cellsInFirstRow.length).toBe(3)
+    })
+
+    it('should render 4 padding cells if 1 indicator, maxColumnsInSection=4, and row totals displayed', () => {
+        const result = render(
+            <IndicatorsTableBody
+                indicators={tableIndicators}
+                maxColumnsInSection={4}
+                renderRowTotals={true}
+            />,
+            {
+                wrapper: ({ children }) => (
+                    <FinalFormWrapper dataValueSet={{}}>
+                        {children}
+                    </FinalFormWrapper>
+                ),
+            }
+        )
+
+        const inputRows = result.getAllByTestId(
+            'dhis2-dataentry-indicatorstablerow'
+        )
+
+        const cellsInFirstRow = getAllByTestId(
+            inputRows[0],
+            'dhis2-dataentry-indicatorspaddingcell'
+        )
+        expect(cellsInFirstRow.length).toBe(4)
+    })
+})
diff --git a/src/data-workspace/section-form/section.js b/src/data-workspace/section-form/section.js
index 68507d893..0c39ba516 100644
--- a/src/data-workspace/section-form/section.js
+++ b/src/data-workspace/section-form/section.js
@@ -37,6 +37,9 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) {
         : selectors.getGroupedDataElementsByCatCombo(data, dataElements)
 
     const maxColumnsInSection = useMemo(() => {
+        if (groupedDataElements.length === 0) {
+            return 0
+        }
         const groupedTotalColumns = groupedDataElements.map((grp) =>
             selectors.getNrOfColumnsInCategoryCombo(data, grp.categoryCombo.id)
         )
@@ -117,7 +120,7 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) {
             {indicators.length > 0 && (
                 <IndicatorsTableBody
                     indicators={indicators}
-                    renderColumnTotals={section.showColumnTotals}
+                    renderRowTotals={section.showRowTotals}
                     maxColumnsInSection={maxColumnsInSection}
                     filterText={filterText}
                     globalFilterText={globalFilterText}